PDA

View Full Version : Need CSS layout help

dsgn
05-04-2008, 10:31 PM
I just learnt to code in html and css this weekend. I'm really having problems getting my head around laying out centered sites in css.

I love the newfound simplicity of css where you can make divs out of everything and then just place them at certain points using top: xpx; and left: xpx; so the layout is structured. This is fine if you want the site layed out on the left or the right side of the browser window (or even in the center at certain pixel points, but this will be specific to my resolution of 1680 X 1050 so...)... how can I lay the site out so that every user sees the site in the center of their browser window but with the layout I want?

Hope I made sense here.
Sagacious
05-05-2008, 12:12 AM
Put a container around all your main page content and set the margins to auto, setting the width to be the maximum width you want your content to be:
HTML:<body>
<div id="container">
All content goes here
</div>
</body>
CSS:
#container {
margin: 0 auto;
width: 800px;
}
dsgn
05-05-2008, 10:21 AM
That just makes everything go to the center
one
on
top
of
the
other?

I want the same layout I have as seen in the picture but in the centre. Or am I not doing it right?
abduraooft
05-05-2008, 10:25 AM
I think you could achieve this by making some small changes to
http://bonrouge.com/2c-hf-fluid.php
dsgn
05-05-2008, 11:00 AM
I'm getting the hang of this but why is my left box (with the nav bar) sitting about 5 pixels below the banner?

A portion of the body:
<body>

<div id="container">

<div id="banner">
<img src="images/banner.jpg" alt="Banner">
</div>

<div id="leftbox">
</div>

<div id="rightbox">
</div>

then the css:

body {
background-color: #000000;
background-image: url(images/bg.jpg);
background-repeat: repeat;
text-align: center;
}

#container {
background-color: #111111;
margin: 0 auto;
height: 500px;
margin-left: auto;
margin-right: auto;
width: 686px;
text-align: left;
}

#leftbox {
position: auto;
margin: 0px 0px 0px 0px;
background: #000000;
width: 178px;
height: 316px;
padding: 0px;
border: 0px;
font: normal normal 10px verdana; arial, sans-serif;
}

#rightbox {
position: auto;
margin-left: 178px;
background: #000000;
background-image: url(images/contentbg.jpg);
width: 508px;
height: 316px;
padding: 0px;
border: 0px;
font: normal normal 10px verdana; arial, sans-serif;

}

#banner {
position:auto;
top: 10px;
left: 100px;
}

driving me mental.
abduraooft
05-05-2008, 11:44 AM
You may use http://jigsaw.w3.org/css-validator/#validate_by_input to correct your CSS.
dsgn
05-05-2008, 11:56 AM
Don't think thats gonna help me.
abduraooft
05-05-2008, 12:11 PM
But it says that position:auto is invalid. There are 4 valid values static, relative, absolute and fixed, AFAIK.
brazenskies
05-05-2008, 10:11 PM
container...

position: relative;
margin-left: auto;
margin-right: auto;