PDA

View Full Version : Centered Page Width Problem...CSS...???


mark4man
05-23-2010, 10:43 PM
hello again...

to center content, I normally go w/ parent & nested tags.

I wanted that content not to exceed 1003 pixels in width...so as to be perfectly visible in a browser window w/ a screen resolution of 1024 &768...& so my parent layer (1) & nested layers are set up as follows:

<div id="Layer1" style="position:relative; width:1003px; height:XXpx; margin: 0 auto;">
<div id="Layer2" style="position:absolute; left:XXpx; top:0px; width:XXpx; height:XXpx; z-index:1"><img src="somegraphiccontent.jpg" width="XX" height="XX7"></div>
<div id="Layer3" style="position:absolute; left:XXpx; top:0px; width:XXpx; height:XXpx; z-index:1"><img src="somegraphiccontent.jpg" width="XX" height="XX7"></div>
<div id="Layer4" style="position:absolute; left:XXpx; top:0px; width:XXpx; height:XXpx; z-index:1"><img src="somegraphiccontent.jpg" width="XX" height="XX7"></div>
</div>


(w/ the nested layers tabbed in 2 spaces)

this is what the page looks like in DW...(w/ all content clearly fitting within that 1003 px width parent layer):

http://www.moonjams.com/moonmix_local.jpg

but when viewed in IE...it looks like this...(bumped over on the top & left...so as to cause a horizontal scroll bar):

http://www.moonjams.com/moonmix_remote.jpg

& it doesn't seem to matter if my doctype is transitional or strict...I still seem to get a slightly margined page. so how can I get control of how that page displays...i.e., make it correspond to the 1003 px width; where I can adjust where everything falls...???

thanks,

mark4man

Corrosive
05-24-2010, 06:09 AM
Why do you use absolute positioning for your content? Relative on everything would be much better and easier to get right.

mark4man
05-26-2010, 01:26 PM
corrosive...

thanks.

please explain (I'm still a neophyte at this...I know how to construct a page to make it look nice...but I'm not up to speed on all the newest code implementations)

thanks,


mf

domedia
05-27-2010, 12:51 PM
Just add:
body {text-align: center;} for IE

mark4man
05-28-2010, 12:39 AM
where...???

somewhere in my (original) posted code...???

see...here's the thing: the code I'm currently using works fine for my type of page designs...but it is expanding the width of the parent layer. all I need is a way to make that stop...that's all.

i'm not understanding what text alignment has to do w/ anything.

thanks,


mf

edbr
05-28-2010, 12:51 AM
in your css sheet or in <style> if you are using on page styling

gentleone
05-28-2010, 06:13 AM
but when viewed in IE...it looks like this...(bumped over on the top & left...so as to cause a horizontal scroll bar)Probably the default margin of IE. Add the following in your CSS and see if that scrollbar is stiil there.

* {margin: 0; padding:0}
Domedia already suggested that you should also use text-align: center on the body tag for IE.
If you use a relative parent div as your wrapper and within that wrapper only absolute positioned divs, than IE still needs text-align: center to center the layout (margin: 0 auto; is not working in IE).

As you will notice than text-align: center on the body tag will center everything on your page, so you'll have to adjust this back by adding text-align: left tou your wrapper div in the CSS (your Layer 1)

So like this:

body {text-align: center;}

#Layer1 {text-align: left;}


Although this should work, it is still recommended not to use ApDivs for your layout.