PDA

View Full Version : Centering Layout?



lewis_
Jan 16th, 2010, 04:04 PM
Hello,

I have sliced a psd file in photoshop into HTML and CSS. I would like the main content of my page now to be centered, but i do not know how to go about doing this. Could someone show me please? Here's my HTML and CSS:

CSS:


<style type="text/css">
<!--

div.Table_01 {
position:absolute;
left:0px;
top:0px;
width:1100px;
height:auto;
}

div.SSCut-01 {
position:absolute;
left:0px;
top:0px;
width:1100px;
height:100px;
}

div.SSCut-02 {
position:absolute;
left:0px;
top:100px;
width:70px;
height:900px;
}

div.SSCut-03 {
position:absolute;
left:70px;
top:100px;
width:390px;
height:136px;
}

div.homex20rollover {
position:absolute;
left:460px;
top:100px;
width:144px;
height:136px;
}

div.SSCut-05 {
position:absolute;
left:604px;
top:100px;
width:117px;
height:136px;
}

div.SSCut-06 {
position:absolute;
left:721px;
top:100px;
width:61px;
height:136px;
}

div.SSCut-07 {
position:absolute;
left:782px;
top:100px;
width:104px;
height:136px;
}

div.SSCut-08 {
position:absolute;
left:886px;
top:100px;
width:2px;
height:136px;
}

div.SSCut-09 {
position:absolute;
left:888px;
top:100px;
width:141px;
height:136px;
}

div.SSCut-10 {
position:absolute;
left:1029px;
top:100px;
width:71px;
height:900px;
}

div.SSCut-11 {
position:absolute;
left:70px;
top:236px;
width:959px;
height:356px;
}

div.SSCut-12 {
position:absolute;
left:70px;
top:592px;
width:293px;
height:306px;
}

div.SSCut-13 {
position:absolute;
left:363px;
top:592px;
width:282px;
height:306px;
}

div.SSCut-14 {
position:absolute;
left:645px;
top:592px;
width:384px;
height:122px;
}

div.SSCut-15 {
position:absolute;
left:645px;
top:714px;
width:17px;
height:185px;
}

div.SSCut-16 {
position:absolute;
left:662px;
top:714px;
width:302px;
height:55px;
}

div.SSCut-17 {
position:absolute;
left:964px;
top:714px;
width:65px;
height:185px;
}

div.SSCut-18 {
position:absolute;
left:662px;
top:769px;
width:302px;
height:3px;
}

div.SSCut-19 {
position:absolute;
left:662px;
top:772px;
width:66px;
height:127px;
}

div.SSCut-20 {
position:absolute;
left:728px;
top:772px;
width:153px;
height:66px;
}

div.SSCut-21 {
position:absolute;
left:881px;
top:772px;
width:83px;
height:127px;
}

div.SSCut-22 {
position:absolute;
left:728px;
top:838px;
width:153px;
height:61px;
}

div.SSCut-23 {
position:absolute;
left:70px;
top:898px;
width:575px;
height:102px;
}

div.SSCut-24 {
position:absolute;
left:645px;
top:899px;
width:384px;
height:101px;
}

body {
background-image: url(bg.png);
background-position: center top;
}

-->
</style>

HTML:


<body background="bg.png" style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">



<div class="Table_01">
<div class="SSCut-03">
<img src="images/SSCut_03.png" width="390" height="136" alt="">
</div>
<div class="homex20rollover">
<img src="images/home-rollover.png" width="144" height="136" alt="">
</div>
<div class="SSCut-05">
<img src="images/SSCut_05.png" width="117" height="136" alt="">
</div>
<div class="SSCut-06">
<img src="images/SSCut_06.png" width="61" height="136" alt="">
</div>
<div class="SSCut-07">
<img src="images/SSCut_07.png" width="104" height="136" alt="">
</div>
<div class="SSCut-08">
<img src="images/SSCut_08.png" width="2" height="136" alt="">
</div>
<div class="SSCut-09">
<img src="images/SSCut_09.png" width="141" height="136" alt="">
</div>
<div class="SSCut-10"></div>
<div class="SSCut-11">
<img src="images/SSCut_11.png" width="959" height="356" alt="">
</div>
<div class="SSCut-12">
<img src="images/SSCut_12.png" width="293" height="306" alt="">
</div>
<div class="SSCut-13">
<img src="images/SSCut_13.png" width="282" height="306" alt="">
</div>
<div class="SSCut-14">
<img src="images/SSCut_14.png" width="384" height="122" alt="">
</div>
<div class="SSCut-15">
<img src="images/SSCut_15.png" width="17" height="185" alt="">
</div>
<div class="SSCut-16">
<img src="images/SSCut_16.png" width="302" height="55" alt="">
</div>
<div class="SSCut-17">
<img src="images/SSCut_17.png" width="65" height="185" alt="">
</div>
<div class="SSCut-18">
<img src="images/SSCut_18.png" width="302" height="3" alt="">
</div>
<div class="SSCut-19">
<img src="images/SSCut_19.png" width="66" height="127" alt="">
</div>
<div class="SSCut-20">
<img src="images/SSCut_20.png" width="153" height="66" alt="">
</div>
<div class="SSCut-21">
<img src="images/SSCut_21.png" width="83" height="127" alt="">
</div>
<div class="SSCut-22">
<img src="images/SSCut_22.png" width="153" height="61" alt="">
</div>
<div class="SSCut-23"></div>
<div class="SSCut-24"></div>
</div>


</body>
</html>

My background is centered, but i cannot seem to center the divs, any help would be appreciated.

Doctor_Varney
Jan 16th, 2010, 04:44 PM
Hello, Lewis. :)

Remove: position:absolute from all of your code. Get rid of it, entirely.

Then insert:

*{margin:0;padding:0;}
At the very top of your CSS document.
-----------------------------------------------------------

Now, a properly centered div will look like this:

#Table_01 {
margin-left:auto;
margin-right:auto;
width:1100px;
height:auto;
}

(You can use the shorthand: margin:0 auto; if you wish.)

Then your HTML will read:

<div id="Table_01">
(contents)
</div>

This is how I do it, but you can use .classes instead of #IDs if you want to.

Next, you will position your other divs, inside the main container, using CSS margins or relative positioning... Use absolute positioning only where absolutely necessary! In your case, I don't think you need to.

Regards

Dr. V

lewis_
Jan 17th, 2010, 07:52 PM
Thank you for the very detailed reply, it worked perfectly.

Doctor_Varney
Jan 17th, 2010, 08:09 PM
My pleasure. :thumbsup:

Dr. V