Log in

View Full Version : Position code mess ups according to screen size...


ModernRevolutions
04-08-2009, 01:02 PM
I have a problem. My website layout is made using DIV position codes. However, my background that has a white strip down the middle is set to "center". So it will look perfect on my computer and like this (http://i108.photobucket.com/albums/n28/studio30/blah.jpg) on other screen resolutions. I need a way to center my "headerdiv" and my "contentdiv" and "sidebardiv". If there are other ways to fix this problem I am all ears. Here are my DIV codes, as well as my background code:


body {
text-align : right;
margin : 0;
background : url(http://www.modernrevolutions.vivid-avenue.net/layout/awesomebar.jpg) repeat-y;
background-position : top center;

div#headerdiv {
position : absolute;
top : 0px;
left : 274px;
width : 715px;
height : 322px;
background-image : url('http://www.modernrevolutions.vivid-avenue.net/layout/megan.png');
border : 0;
border-style : solid;
}


div#sidebardiv {
position : absolute;
left : 755px;
top : 350px;
width : 220px;
height : 550px;
border : 0;
border-style : solid;
font-family : arial;
font-size : 11px;
}


div#contentdiv {
position : absolute;
left : 300px;
top : 350px;
width : 450px;
height : 1100px;
font-family : georgia;
font-size : 11px;
line-height:13px;
text-align : left;
}
Snookerman
04-08-2009, 01:16 PM
Wrap everything in a div and give it the following CSS rules:

div.wrap {
margin: 0 auto;
width: 715px;
}

Good luck!
ModernRevolutions
04-08-2009, 03:15 PM
So i put that in my CSS and it should fix the problem? Do i have to put anything in my header or anything?
Snookerman
04-08-2009, 08:42 PM
You should also wrap all the content in the body with a div, like this:

<body>
<div class="wrap">
Everything here
</div>
</body>
Then you just add the CSS code, you don't need to change anything in your header.
ModernRevolutions
04-09-2009, 03:57 PM
my body is in my header :?

here is what it looks like: site (http://www.modernrevolutions.vivid-avenue.net/), header (http://www.modernrevolutions.vivid-avenue.net/layout/header.php), stylesheet (http://www.modernrevolutions.vivid-avenue.net/layout/style5.css).
Snookerman
04-09-2009, 03:59 PM
Sorry?? Now I'm confused :D
Just wrap everything inside the body tags with the wrapping div and add my CSS code to your CSS code.
ModernRevolutions
04-09-2009, 04:01 PM
I added the CSS code into my stylesheet (CSS). And everything in my site is mostly in my header. So i wrapped everything in my body tags in the div wrap thing. However, i'm not at school anymore, so I can't check with that screen resolution :/ Hopefully it worked :D

Okay, I went to browsershots.org, and in EVERY screenshot, everything is shifted to the right. So it didn't work :/ Here (http://browsershots.org/http://www.modernrevolutions.vivid-avenue.net/) are my screenshots :/