Centering Website In CSS- Help Please!
newbie
Location: Australia
Posted: Sat, 2008-05-17 05:00
I am trying to center my webpage using css. I seem to have done everything correctly, but it isn't working. I would appreciate if someone could check the code for me and tell me what's wrong
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Cutting Edge Media</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body bgcolor="black" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="container">
<div id="header_">
<img id="header" src="images/header.jpg" width="980" height="19" alt="header" />
</div>
<div id="cemedia-02_">
<img id="cemedia_02" src="images/cemedia_02.jpg" width="84" height="25" alt="" />
</div>
<div id="webdesign_">
<a href="webdesign.html"
onmouseover="window.status='webdesign'; return true;"
onmouseout="window.status=''; return true;">
<img id="webdesign" src="images/webdesign.jpg" width="93" height="25" border="0" alt="webdesign" /></a>
</div>
<div id="graphicdesign_">
<a href="graphicdesign.html"
onmouseover="window.status='graphicdesign'; return true;"
onmouseout="window.status=''; return true;">
<img id="graphicdesign" src="images/graphicdesign.jpg" width="117" height="25" border="0" alt="graphicdesign" /></a>
</div>
<div id="printmedia_">
<a href="printmedia.html"
onmouseover="window.status='printmedia'; return true;"
onmouseout="window.status=''; return true;">
<img id="printmedia" src="images/printmedia.jpg" width="96" height="25" border="0" alt="printmedia" /></a>
</div>
<div id="portfolio_">
<a href="portfolio.html"
onmouseover="window.status='portfolio'; return true;"
onmouseout="window.status=''; return true;">
<img id="portfolio" src="images/portfolio.jpg" width="67" height="25" border="0" alt="portfolio" /></a>
</div>
<div id="contactus_">
<a href="contactus.html"
onmouseover="window.status='contactus'; return true;"
onmouseout="window.status=''; return true;">
<img id="contactus" src="images/contactus.jpg" width="87" height="25" border="0" alt="contactus" /></a>
</div>
<div id="cemedia-08_">
<img id="cemedia_08" src="images/cemedia_08.jpg" width="436" height="25" alt="" />
</div>
<div id="main-banner_">
<img id="main_banner" src="images/main_banner.jpg" width="979" height="191" alt="cutting edge media" />
</div>
<div id="cemedia-10_">
<img id="cemedia_10" src="images/cemedia_10.jpg" width="1" height="191" alt="" />
</div>
<div id="cemedia-11_">
<img id="cemedia_11" src="images/cemedia_11.jpg" width="1" height="138" alt="" />
</div>
<div id="banner-reflection_">
<img id="banner_reflection" src="images/banner_reflection.jpg" width="979" height="138" alt="" />
</div>
<div id="heading1_">
<img id="heading1" src="images/heading1.jpg" width="520" height="33" alt="welcome to cutting edge media" />
</div>
<div id="cemedia-14_">
<img id="cemedia_14" src="images/cemedia_14.jpg" width="460" height="57" alt="" />
</div>
<div id="cemedia-15_">
<img id="cemedia_15" src="images/cemedia_15.jpg" width="520" height="232" alt="" />
</div>
<div id="heading2_">
<img id="heading2" src="images/heading2.jpg" width="296" height="33" alt="latest projects" />
</div>
<div id="cemedia-17_">
<img id="cemedia_17" src="images/cemedia_17.jpg" width="164" height="213" alt="" />
</div>
<div id="cemedia-18_">
<img id="cemedia_18" src="images/cemedia_18.jpg" width="296" height="180" alt="" />
</div>
<div id="cemedia-19_">
<img id="cemedia_19" src="images/cemedia_19.jpg" width="1" height="342" alt="" />
</div>
<div id="heading-3_">
<img id="heading_3" src="images/heading-3.jpg" width="519" height="31" alt="advert" />
</div>
<div id="heading4_">
<img id="heading4" src="images/heading4.jpg" width="324" height="38" alt="oursponsors" />
</div>
<div id="cemedia-22_">
<img id="cemedia_22" src="images/cemedia_22.jpg" width="136" height="337" alt="" />
</div>
<div id="advert_">
<img id="advert" src="images/advert.jpg" width="519" height="115" alt="" />
</div>
<div id="cemedia-24_">
<img id="cemedia_24" src="images/cemedia_24.jpg" width="324" height="299" alt="" />
</div>
<div id="cemedia-25_">
<img id="cemedia_25" src="images/cemedia_25.jpg" width="519" height="196" alt="" />
</div>
</div>
</table>
</html>Below is the CSS code
#container{
width: 980px;
margin-left: auto;
margin-right: auto;
!important
}
#header_ {
position:absolute;
left:0px;
top:0px;
width:980px;
height:19px;
}
#cemedia-02_ {
position:absolute;
left:0px;
top:19px;
width:84px;
height:25px;
}
#webdesign_ {
position:absolute;
left:84px;
top:19px;
width:93px;
height:25px;
}
#graphicdesign_ {
position:absolute;
left:177px;
top:19px;
width:117px;
height:25px;
}
#printmedia_ {
position:absolute;
left:294px;
top:19px;
width:96px;
height:25px;
}
#portfolio_ {
position:absolute;
left:390px;
top:19px;
width:67px;
height:25px;
}
#contactus_ {
position:absolute;
left:457px;
top:19px;
width:87px;
height:25px;
}
#cemedia-08_ {
position:absolute;
left:544px;
top:19px;
width:436px;
height:25px;
}
#main-banner_ {
position:absolute;
left:0px;
top:44px;
width:979px;
height:191px;
}
#cemedia-10_ {
position:absolute;
left:979px;
top:44px;
width:1px;
height:191px;
}
#cemedia-11_ {
position:absolute;
left:0px;
top:235px;
width:1px;
height:138px;
}
#banner-reflection_ {
position:absolute;
left:1px;
top:235px;
width:979px;
height:138px;
}
#heading1_ {
position:absolute;
left:0px;
top:373px;
width:520px;
height:33px;
}
#cemedia-14_ {
position:absolute;
left:520px;
top:373px;
width:460px;
height:57px;
}
#cemedia-15_ {
position:absolute;
left:0px;
top:406px;
width:520px;
height:232px;
}
#heading2_ {
position:absolute;
left:520px;
top:430px;
width:296px;
height:33px;
}
#cemedia-17_ {
position:absolute;
left:816px;
top:430px;
width:164px;
height:213px;
}
#cemedia-18_ {
position:absolute;
left:520px;
top:463px;
width:296px;
height:180px;
}
#cemedia-19_ {
position:absolute;
left:0px;
top:638px;
width:1px;
height:342px;
}
#heading-3_ {
position:absolute;
left:1px;
top:638px;
width:519px;
height:31px;
}
#heading4_ {
position:absolute;
left:520px;
top:643px;
width:324px;
height:38px;
}
#cemedia-22_ {
position:absolute;
left:844px;
top:643px;
width:136px;
height:337px;
}
#advert_ {
position:absolute;
left:1px;
top:669px;
width:519px;
height:115px;
}
#cemedia-24_ {
position:absolute;
left:520px;
top:681px;
width:324px;
height:299px;
}
#cemedia-25_ {
position:absolute;
left:1px;
top:784px;
width:519px;
height:196px;
}
Moderator
Posts: 5577
Joined: 2005-02-22
Get rid of that "!important"
Posted: Sat, 2008-05-17 07:12
Get rid of that "!important"
On Having Layout | The One True Layout | menus by listamatic
newbie
Posts: 3
Joined: 2008-05-17
Location: Australia
Getting rid of the
Posted: Wed, 2008-05-21 02:15
Getting rid of the "!important" doesn't have any effect
Enthusiast
Posts: 90
Joined: 2005-09-23
Location: Liverpool
take these out for a
Posted: Wed, 2008-05-21 08:55
take these out for a start:
<body bgcolor="black" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">newbie
Posts: 3
Joined: 2008-05-17
Location: Australia
ok, i have done that.
Posted: Wed, 2008-05-21 09:25
ok, i have done that. Because it was a bit of pointless code, but it hasn't centered the page which is what i really want
Enthusiast
Posts: 90
Joined: 2005-09-23
Location: Liverpool
You also have a closing
Posted: Wed, 2008-05-21 09:35
You also have a closing table tag after the final closing div.
And you have loads of divs generally, so try just having your top two or three, as a test, and see if this changes anything.
for #container, put:
margin: 0 auto;
and remove the !important as well.
Regular
Posts: 11
Joined: 2008-05-21
Location: Chennai, India
wrong approach
Posted: Wed, 2008-05-21 09:39
you have used absolute positioning to build the complete page. This is really very bad approach. Learn about CSS float concept. only then you can continue with this.
Cheers!
Kesav
Moderator
Posts: 5645
Joined: 2004-06-25
Location: Dallas
Kesav may have hit on it.
Posted: Wed, 2008-05-21 10:03
Kesav may have hit on it. The #container is centered, but all its content, being absolute, are positioned relative to their containing block. In this case, it's body. To make #container the containing block, add {position: relative;}.
cheers,
gary
A pianist who has learned the wrong system of fingering cannot become a virtuoso until he has laboriously taught himself the proper method.
My site is slo-o-owly being reconstructed; visit anyway.