Log in

View Full Version : Centre my divs??


llallypops
03-10-2010, 08:26 PM
Can Someone please show me how to centre my entire page, iv being going mad playing around with the css with no joy. Thanks in advance

<HTML>
<HEAD>
<TITLE>computeworldshop</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<!-- ImageReady Styles (computeworldshop.psd) -->
<STYLE TYPE="text/css">
<!--

#computeworldshop-01 {
position:absolute;
left:0px;
top:0px;
width:677px;
height:155px;
}

#computeworldshop-02 {
position:absolute;
left:0px;
top:155px;
width:86px;
height:22px;
}

#computeworldshop-03 {
position:absolute;
left:86px;
top:155px;
width:87px;
height:22px;
}

#computeworldshop-04 {
position:absolute;
left:173px;
top:155px;
width:88px;
height:22px;
}

#computeworldshop-05 {
position:absolute;
left:261px;
top:155px;
width:83px;
height:22px;
}

#computeworldshop-06 {
position:absolute;
left:344px;
top:155px;
width:333px;
height:736px;
}

#computeworldshop-07 {
position:absolute;
left:0px;
top:177px;
width:344px;
height:714px;
}

-->
</STYLE>
<!-- End ImageReady Styles -->
</HEAD>
<BODY STYLE="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">
<!-- ImageReady Slices (computeworldshop.psd) -->
<DIV ID="computeworldshop-01">
<IMG SRC="images/computeworldshop_01.jpg" WIDTH=677 HEIGHT=155 ALT="">
</DIV>
<DIV ID="computeworldshop-02">
<IMG SRC="images/computeworldshop_02.jpg" WIDTH=86 HEIGHT=22 ALT="">
</DIV>
<DIV ID="computeworldshop-03">
<IMG SRC="images/computeworldshop_03.jpg" WIDTH=87 HEIGHT=22 ALT="">
</DIV>
<DIV ID="computeworldshop-04">
<IMG SRC="images/computeworldshop_04.jpg" WIDTH=88 HEIGHT=22 ALT="">
</DIV>
<DIV ID="computeworldshop-05">
<IMG SRC="images/computeworldshop_05.jpg" WIDTH=83 HEIGHT=22 ALT="">
</DIV>
<DIV ID="computeworldshop-06">
<IMG SRC="images/computeworldshop_06.jpg" WIDTH=333 HEIGHT=736 ALT="">
</DIV>
<DIV ID="computeworldshop-07">
<IMG SRC="images/computeworldshop_07.jpg" WIDTH=344 HEIGHT=714 ALT="">
</DIV>
<!-- End ImageReady Slices -->
</BODY>
</HTML>
BLiZZaRD
03-11-2010, 02:45 AM
add a container div....

CSS:



.container {
width: 750px; //enter the # of pixels, or % or em of how wide to make the page
height: 100%; //the whole thing
min-height: 100% //just cause
text-align: center; //start here, move individually if you need to later
}


HTML:



<body>
<div class="container">
//rest of your content here...

</div>
</body>


Should get you started. :)
cfajohnson
03-11-2010, 03:13 PM
Replace all your CSS with:


<style>
div { text_align: center; }
</style>

(And don't forget to put a DOCTYPE at the top of your page.)