SOC & CSS Positioning

Test image moves with browser window size.

[max4]

I stumbled upon a concept known as source ordered positioning here at webmasterworld and feel that it would be wise to incorporate it into my design. I'm relatively new to CSS so I ask that you bear with me.

I decided to give CSS-P a test run with an image file that loads at the end of my content but is positioned elsewhere in the page. I used the following:

<img style="position:absolute; top:200px; left:300px;" src="../../img/a.bmp" alt="" />

With a maximized browser, the image loads approximately where I want it to load but when I 'restore down' the image moves to a new position relative to the browser - no longer in the area that I want it to be. I'm sure this issue will carry on to different screen resolutions as well. Another problem is, when content is added above the image it will not move down to make room for the content, rather the content falls behind the image. My knowledge is limited when it comes to CSS codes. I've tried the four different positioning attributes and none worked (although I was able to make some cool, but most likely annoying, displays).

What can I do to load this image last and still be able to position it where it needs to be? I plan on using this later on with google ads.

I'm running on valid xhtml 1.0 strict doctype, using Firefox, IE7 and IE6.

Much thanks in advance,
Max

[swa66]

bmp image: better make that something else like a jpeg, png or gif (I'd not bet on everything not windows wanting to show it)

Aside of that:
Since you know the size of the image (let's say 100 wide x 50 high
And let's assume you want it to end up in the center.
You could try to position by first setting the left side to 50%, and then a negative margin half of the size of the image to go back) e.g.:

left:50%; margin-left:-50px;
top:50%; margin-top:-25px;

Now position:absolute takes the element out of the flow.
If you want it in the flow you'll need to better describe what you want to achieve ...

[max4]

Thanks swa66, that works exactly as I intended. One problem though, IE7 is off by one pixel all around. The image loads perfectly over the old image which I positioned normally within the table in Firefox, but in IE7 it is off by one pixel, both top and to the left.

[max4]

Excuse that last comment. It's not doing what I was hoping it would. The problem still arises with changing the browsers window size (which is why it was off in IE7). If by 'in the flow' you mean as a part of an element then yes that is what I'm trying to achieve. My goal is to load this image as the very last bit of code in my document (just before the </body> tag) yet still have it appear where it would have been normally. Where is that?

I have a page that uses a right navigation bar in a fixed table layout (fixed to the center of the page 800px wide). I would like this image to show underneath the navigation links in my nav bar and have it remain in that position regardless of screen resolution or browser window size. Basically as though I had set that image in the row of that table and not at the end of the page. Is this possible?

I also use php to call other documents within several main documents, so the navigation links change and thus the image position would also have to change to match the new state of the nav bar.

Thanks

[swa66]

IE7 being off by a pixel: perhaps use a conditional comment to put it where you want it. IE is notorious for failing math (also since I'm asking it to calculate a percentage, it means there's always choices to round it to a pixel).

As for keeping your image at the end and having it be dependent on where some other element is drawn: all I know how to do that is with javascript (wrong forum here).

Now that said, why are you so worried where in the source it comes ? Modern browsers load images depending on what's in view, not so much depending on source code order.

Alternatively, you could position some element there and use a background image on it in CSS.

[max4]

I'm running this site privately on my pc until it's ready to to launch so I can't put google ads on it yet, which is why I'm using an image in place of adsense. I've been told that adsense loads very slow at times and would like to avoid the browser waiting for it to load before any real content comes up.

Thanks for the help swa, I will get my java/php coder to look into it.

[swa66]

I run adsense fairly high in my own code, it's javascript that generates it in an iframe, it'll not slow down the rest of the rendering in my experience. Also take care trying to mess with adsense, the ToS are rather strict on what you can do with it.

[max4]

My concern with adsense came from a post here on webmasterworld where a few users where discussing using CSS-P to load adsense last. Their reasoning was that adsense slowed down their load time.

Re-reading that post, I noticed that one suggestion was to use iframes; since google now generates adsense in an iframe, I have nothing to worry about.

I'll make sure to read their ToS thoroughly when the time comes.

[SuzyUK]

it is considered good for loading times to load scripts last. or very close to it..

depending on your layout it should be fairly easy to position the image/ads where you want them

but again IE might freak ;) anyway say your image/ads are to be placed in the left sidebar below a 200px high banner

layout like this..

--------------------
. banner 200px high
--------------------
....¦ content
....¦
....¦
---¦
---¦
---¦
----------------------

where you want to position the ads/images in the red dotted area.

first you need to put a wrapper element around the whole design, most possibly have them now anyway.. then make that wrapper position: relative; that makes it into the containing block for the absolutely positioned elements inside it (you're no longer positioning in respect to the viewport)

then in the sidebar, or where ever the image/ads are to go, put in an empty div, a placeholder for the positioned element, give it a height to match the height of the image or ads banner, this will stop the content after it from going into the space you want to use

then put the img/ad script right before the closing div of the wrapper div. that should be it.. the position co-ordinates will then be calculated from the top left of the wrapper div instead of the viewport and should stay there as screen resolution changes.

there will still be a spacing problem if there is text before the "adspace" unless you know what the approximate height of it is, perhaps it can be guesstimated at without too much of a disruption on text resize.

e.g. something like:

<style type="text/css" media="screen">

#wrapper {width: 800px; margin: 0 auto; border: 1px solid #000; position: relative;}
#banner {height: 200px; background: #ff0;}
#sidebar {float: left; width: 200px;}
#footer {clear: both; width: 100%; background: #eee;}

#ads {
height:100px; /* make this the height which best suits your banner ads or a bit more for vertical spacing */
}

img.gads {
position: absolute;
top: 230px; /* bannner height + extra 30px allowed for text - adjust to suit */
left: 0;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="banner">200px high banner</div>
<div id="sidebar">
<div class="links">sidebar stuff </div>
<div id="ads">&nbsp;</div>
<div class="links">sidebar stuff </div>
</div>
<div id="content">main content</div>
<div id="footer">footer</div>
<img src="http://showcase.netins.net/web/phdss/WebmasterWorldgfx/dlogo.png" width="109" height="56" class="gads" />
</div>
</body>
</html>

in short if you can make the parent of the absolutely positioned element into position: relative; you have the boundary, then the empty placeholder will hold the height/width to allow everything else to flow

[max4]

So that's what it's called, the viewport. Yes, this is exactly what I was looking for - the wrapper element was ingenious! It definitely takes care of the viewport and resolution issue I posed. Thanks Suzy; this is also a good lesson in divs as I'm also trying to pick that up. I was blown away by the way you set the entire page layout in the first 4 lines of css, I'm really starting to see why no body uses tables outside tabular data anymore.

The above layout loaded great in Firefox, but in IE it aligned itself to the left side of the browser. I don't see how that's possible using margin: 0 auto;

[SuzyUK]

You're, welcome glad if it helped, even more than it was meant for ;)

actually it was a quick mock up and could've been source ordered better than that, i.e. content before sidebar.. but that's for another question

but in IE it aligned itself to the left side of the browser. I don't see how that's possible using margin: 0 auto;

Part II of the CSS learning curve,
your page is probably in Quirks rendering mode, if margin: 0 auto; is not working.. margin: 0 auto is just one of the things that doesn't work in Quirks Mode, it's one of many, but there is usually workaround.. BUT I would suggest if your starting to learn about CSS Layouts that you get a CSS Friendly Standards rendering Doctype [webmasterworld.com] this will mean you have close to compliant support for IE6 and upwards

the above won't fix IE5.5, but support for that is fading away so perhaps you will have a lot less headaches even though there's workarounds for most every IE backwards compatible poser.. you can ask as you need to

e.g. try this one:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">

at the top of your page, does that center now?

the fix, if you choose to stay in quirks mode would be to set text align center on the body element, then reset the actual text alignment back to default (left) on the wrapper

body {text-align: center;}
#wrapper {text-align: left;}

[edited by: SuzyUK at 4:35 pm (utc) on June 13, 2008]

[max4]

I used to use xhtml 1.0 transitional; I recently made the switch to 1.0 strict, and I'm proud to say it's fully valid in w3c validation service.

To correct the problem, I used a global style:

* {
margin:0;
padding:0;
}

Now I no longer have to worry about margins; ever =)

That was an interesting article. According to w3schools, 92% of internet users use IE6, IE7 or firefox; whats more, since I use an 800px width I can safely say that the vast majority of my visitors will see the site as intended.

webmasterworld is an amazing resource. I came here a few months ago with little html knowledge and now I'm scripting full blown css pages. I might just switch my major now. Again, thanks for the help!

[SuzyUK]

ah ok, my bad for presuming which HTML you should write in.. but "Quirks" is the only reason I can think that margin: 0 auto wouldn't work in IE6, - have you got the XML prolog before your XHTML Doctype or anything at all before it a comment...?

or is your page now centering and if so what did you do?

oh an 800px was just a suggested width.. not a standard, I think most are now using a wider layout these days up to 960px seems common lately

congrats on your last few months here glad you're enjoying it, now you'll be helping us lot shortly heh :)

[max4]

All my pages begin with:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
</head>
<body>

To correct the problem, I globally reset all margins and padding to 0. That way I don't have to worry about some margin causing design flaws later on, like forms in IE. I used:

* {
margin:0;
padding:0;
}

I use an 800px width because 8% of internet users still run on an 800 X 600 resolution, and I'd like to accommodate them without over exerting myself. Most sites I've seen incorporate a fixed layout, between 800px wide and up to 1000px wide. Some use percentages to make the page viewable in all resolutions, but I use images that are dependent on the width I use, so I'm sticking to 800px.

I'd be glad to start helping out, once all this stuff becomes more familiar to me.