PDA

View Full Version : Resolved Body doesn't center



loskwantos
Feb 1st, 2010, 02:13 PM
Hello My body doesn't center
what's the problem?


thanks a ton already

Html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title>About</title>
<link rel="stylesheet" type="text/css" media="screen, print, projection" href="common.css"></link>
<script type="text/javascript" src="popmenu.js"></script>

</head>
<body>
<div id="pid4about">
<div id="layer7"></div>
<div id="layer7copy"></div>
<div id="underfloor"></div>
<div id="hoofd"></div>
<div id="menuback"></div>
<div id="darkbottom"></div>
<div id="glossytop"></div>
<ul id="mainmenu">
<li style="width:11.12%;"><a href="index.html">Home </a></li><li style="width:11.12%;"><a href="news.html">News</a></li><li style="width:21.32%;"><a href="calender.html">Calender</a></li><li style="width:13.57%;"><a href="about.html">About</a></li><li style="width:23.97%;"><a href="portfolio.html" onmouseout="P2H_StartClock();" onmouseover="P2H_Menu('PMportfolio', 500, 0);">Portfolio</a></li><li style="width:18.87%;"><a href="contact.html">Contact</a></li></ul>
<div id="background"></div>
<div id="backgroundcopy"></div>
<div id="backgroundcopy2"></div>
<ul id="portfoliomenu" class="PMportfolio">
<li><a href="websites.html" onmouseout="P2H_StartClock();" onmouseover="P2H_MenuItem(1);">Websites</a></li><li><a href="photography.html" onmouseout="P2H_StartClock();" onmouseover="P2H_MenuItem(1);">Photography</a></li><li><a href="digitalart.html" onmouseout="P2H_StartClock();" onmouseover="P2H_MenuItem(1);">Digital-Art</a></li><li><a href="videos.html" onmouseout="P2H_StartClock();" onmouseover="P2H_MenuItem(1);">Videos</a></li></ul>
<div id="line1"></div>
<div id="line2"></div>
<div id="dummyscroll">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin convallis dui quis leo vulputate luctus. Pellentesque turpis odio, pellentesque eu suscipit non, sodales eget libero. Cras eu tellus id orci condimentum mollis. Ut posuere diam eget magna euismod accumsan. Aenean lacinia sem ac lectus pharetra tempor. Donec adipiscing augue non libero ultrices rutrum. Donec consectetur aliquam metus eget blandit. Duis egestas pellentesque nisl, accumsan ullamcorper nunc aliquam nec. Donec vulputate, magna eget placerat viverra, nibh sem faucibus diam, at tincidunt neque sapien non purus. Fusce nisi orci, pulvinar fermentum placerat ac, hendrerit eget tellus. Sed tempor euismod cursus. Vestibulum blandit dictum lorem, ac rutrum felis dapibus vel.</p>
<br />
<p>Curabitur tristique, nibh et placerat sodales, augue sapien vulputate arcu, sit amet consectetur lorem arcu non urna. Vestibulum lacus nulla, elementum eu gravida vitae, tristique vitae lorem. Sed quis eros eu lacus varius lobortis. Phasellus porta mauris rutrum sapien convallis aliquet malesuada diam placerat. In metus orci, semper a lobortis non, malesuada in arcu. Nullam sodales dictum tempor. Donec varius consequat felis vitae condimentum. Etiam viverra lacinia quam eu tincidunt. Vivamus at orci libero, sit amet varius nisl. Duis euismod, quam at porttitor congue, turpis quam placerat mauris, sit amet elementum urna felis quis nibh. Morbi non odio diam, a consequat sem. Cras quis nibh eros, porttitor eleifend justo. Sed ut nisl enim, id ullamcorper eros.</p>
<br />
<p>Donec ac tellus massa. Maecenas elementum justo eget justo laoreet rhoncus. Donec eu justo sit amet magna viverra malesuada. Cras ac nisi nec leo gravida hendrerit. Morbi pellentesque eros vitae purus convallis eget ornare enim varius. Quisque pulvinar eleifend enim quis viverra. Sed pellentesque rhoncus quam ut sagittis. Praesent dolor lacus, pretium nec posuere eget, ornare vel dolor. In eget sagittis nulla. Maecenas nec lectus nulla, et interdum leo. Nam sollicitudin luctus molestie. Praesent ut nulla non eros dictum scelerisque. Morbi ut nulla elit. Proin vitae purus id purus aliquet volutpat eget vel enim. Ut ac gravida urna. Nullam mi lectus, luctus in euismod vel, mollis vitae diam.</p>
<br />
<p>Suspendisse potenti. Aliquam in odio vitae lacus interdum fringilla. Ut id odio quis diam viverra cursus a id diam. Quisque sollicitudin ante ac ante iaculis eu auctor justo placerat. Aliquam quis neque sit amet magna imperdiet consectetur nec consequat dolor. Nullam sed mollis ante. Duis neque metus, gravida dapibus aliquet sodales, iaculis nec lacus. Maecenas pellentesque neque et est volutpat malesuada tincidunt erat varius. Nunc malesuada tempor justo. Fusce sed dolor erat. Integer egestas arcu eu turpis venenatis tempus aliquet orci fermentum. Nunc vel augue sed orci sagittis scelerisque eget eget leo. Vestibulum eu tortor nec enim ullamcorper congue ut eget nibh. Proin interdum, libero quis varius pulvinar, leo nunc viverra ipsum, ac suscipit nisl sapien eu nunc. Vestibulum eget elit vitae orci mollis euismod.</p>
<br />
<p>Aliquam posuere iaculis commodo. Etiam convallis, lacus ut bibendum eleifend, sapien nulla imperdiet nulla, sit amet lacinia sapien purus in felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas vitae nibh laoreet augue aliquam placerat in consectetur arcu. </p>
</div>
<div id="middlelight"></div>
<div id="layer9"></div>
<div id="layer8"></div>
<div id="lip"></div>
<div id="undershadow"></div>
<div id="twitterbutton"><a href="twitter.html" title="Twitter"></a></div>
<div id="homebutton"><a href="index.html" title="Home"></a></div>
<div id="diggbutton"><a href="digg.html" title="Digg"></a></div>
<div id="rssbutton"><a href="rss.html" title="Rss"></a></div>
<div id="delicousbutton"><a href="delicous.html" title="Del.ico.us"></a></div>
<div id="favoritebutton"><a href="favorite.html" title="Favorite"></a></div>
</div>
</body>
</html>

Css

a {
text-decoration: none;
color: #000000;
}

a ins {
text-decoration: none;
}

#rss,
#pid2news,
#pid3calender,
#pid6contact,
#pid4about,
#pid1home,
#pid5portfolio,
#delicous,
#twitter,
#digg,
#favorite {
margin: 0px 0px 0px auto;
width: 500px;
position: relative;
}

#portfoliomenu li a:hover,
#mainmenu li a:hover {
text-decoration: underline;
}

#backgroundcopy2,
#backgroundcopy,
#background {
visibility: visible;
position: absolute;
left: 0px;
top: 331px;
width: 500px;
height: 326px;
background-repeat: no-repeat;
}

#layer7,
#underfloor,
#layer7copy {
visibility: visible;
position: absolute;
left: 0px;
top: 0px;
width: 500px;
height: 928px;
background-repeat: no-repeat;
}

#favoritebutton a:hover {
background-position: -75px 0%;
}

#delicousbutton a:hover {
background-position: -81px 0%;
}

#twitterbutton a:hover {
background-position: -49px 0%;
}

#diggbutton a:hover {
background-position: -80px 0%;
}

#portfoliomenu li a {
padding-left: 0px;
padding-right: 0px;
text-decoration: none;
color: #E2E2E2;
width: 100%;
display: block;
background-color: #3F3F3F;
}

#homebutton a:hover {
background-position: -82px 0%;
}

#rssbutton a:hover {
background-position: -77px 0%;
}

#undershadow,
#lip {
visibility: visible;
position: absolute;
left: 0px;
z-index: 11;
width: 500px;
height: 9px;
background-repeat: no-repeat;
}

#delicousbutton a {
background: url(delicousmedia/delicousbutton.jpg) no-repeat 0% 0px;
display: block;
height: 58px;
width: 81px;
font-size: 58px;
line-height: 58px;
}

#favoritebutton a {
background: url(delicousmedia/favoritebutton.jpg) no-repeat 0% 0px;
display: block;
height: 55px;
width: 75px;
font-size: 55px;
line-height: 55px;
}

#portfoliomenu li {
width: 100%;
display: block;
margin: 0px;
}

#twitterbutton a {
background: url(delicousmedia/twitterbutton.jpg) no-repeat 0% 0px;
display: block;
height: 72px;
width: 49px;
font-size: 72px;
line-height: 72px;
}

#backgroundcopy2 {
background-image: url(delicousmedia/backgroundcopy2.jpg);
z-index: 10;
}

#favoritebutton {
visibility: visible;
position: absolute;
left: 179px;
top: 678px;
z-index: 2;
width: 75px;
height: 55px;
}

#delicousbutton {
visibility: visible;
position: absolute;
left: 344px;
top: 676px;
z-index: 2;
width: 81px;
height: 58px;
}

#backgroundcopy {
background-image: url(delicousmedia/backgroundcopy.jpg);
z-index: 9;
}

#twitterbutton {
visibility: visible;
position: absolute;
left: 428px;
top: 668px;
z-index: 2;
width: 49px;
height: 72px;
}

#mainmenu li a {
text-decoration: none;
color: #B1B1B1;
height: 100%;
display: block;
}

#dummyscroll p {
font: bold 11px/10px Arial;
margin: 0px;
color: #FFFFFF;
letter-spacing: 1px;
text-align: center;
}

#portfoliomenu {
font: bold 11px/10px Arial;
margin: 0px;
padding: 0px;
list-style: none;
text-align: center;
letter-spacing: 1px;
color: #E2E2E2;
visibility: hidden;
position: absolute;
left: 330px;
top: 330px;
z-index: 13;
width: 81px;
}

#diggbutton a {
background: url(delicousmedia/diggbutton.jpg) no-repeat 0% 0px;
display: block;
height: 65px;
width: 80px;
font-size: 65px;
line-height: 65px;
}

#homebutton a {
background: url(delicousmedia/homebutton.jpg) no-repeat 0% 0px;
display: block;
height: 71px;
width: 82px;
font-size: 71px;
line-height: 71px;
}

#dummyscroll {
overflow: auto;
visibility: visible;
position: absolute;
left: 131px;
top: 351px;
z-index: 12;
width: 330px;
height: 287px;
}

#rssbutton a {
background: url(delicousmedia/rssbutton.jpg) no-repeat 0% 0px;
display: block;
height: 56px;
width: 77px;
font-size: 56px;
line-height: 56px;
}

#undershadow {
background-image: url(delicousmedia/undershadow.jpg);
top: 656px;
}

#middlelight {
background: url(delicousmedia/middlelight.jpg) no-repeat;
visibility: visible;
position: absolute;
left: 23px;
top: 410px;
z-index: 11;
width: 477px;
height: 191px;
}

#mainmenu li {
height: 100%;
display: block;
float: left;
margin: 0px;
}

#diggbutton {
visibility: visible;
position: absolute;
left: 262px;
top: 672px;
z-index: 2;
width: 80px;
height: 65px;
}

#darkbottom {
background: url(delicousmedia/darkbottom.jpg) no-repeat;
visibility: visible;
position: absolute;
left: 0px;
top: 301px;
z-index: 11;
width: 500px;
height: 30px;
}

#homebutton {
visibility: visible;
position: absolute;
left: 18px;
top: 669px;
z-index: 2;
width: 82px;
height: 71px;
}

#layer7copy {
background-image: url(delicousmedia/layer7copy.jpg);
z-index: 5;
}

#underfloor {
background-image: url(delicousmedia/underfloor.jpg);
z-index: 1;
}

#background {
background-image: url(delicousmedia/background.jpg);
z-index: 8;
}

#rssbutton {
visibility: visible;
position: absolute;
left: 95px;
top: 676px;
z-index: 3;
width: 77px;
height: 56px;
}

#glossytop {
background: url(delicousmedia/glossytop.jpg) no-repeat;
visibility: visible;
position: absolute;
left: 0px;
top: 301px;
z-index: 12;
width: 500px;
height: 13px;
}

#mainmenu {
font: bold 14px/28px Arial;
height: 28px;
text-align: center;
margin: 0px;
padding: 0px;
list-style: none;
letter-spacing: 1px;
color: #B1B1B1;
position: absolute;
left: 18px;
top: 306px;
z-index: 14;
width: 490px;
}

#menuback {
background: url(delicousmedia/menuback.jpg) no-repeat;
visibility: visible;
position: absolute;
left: 0px;
top: 300px;
z-index: 6;
width: 500px;
height: 30px;
}

#layer9 {
background: url(delicousmedia/layer9.jpg) no-repeat;
visibility: visible;
position: absolute;
left: 0px;
top: 602px;
z-index: 6;
width: 500px;
height: 326px;
}

#layer8 {
background: url(delicousmedia/layer8.jpg) no-repeat;
visibility: visible;
position: absolute;
left: 41px;
top: 620px;
z-index: 7;
width: 435px;
height: 107px;
}

#layer7 {
background-image: url(delicousmedia/layer7.jpg);
z-index: 4;
}

#line2 {
background: url(delicousmedia/line2.jpg) no-repeat;
visibility: visible;
position: absolute;
left: 115px;
top: 352px;
z-index: 13;
width: 1px;
height: 286px;
}

#line1 {
background: url(delicousmedia/line1.jpg) no-repeat;
visibility: visible;
position: absolute;
left: 114px;
top: 352px;
z-index: 12;
width: 1px;
height: 286px;
}

#hoofd {
background: url(delicousmedia/hoofd.jpg) no-repeat;
visibility: visible;
position: absolute;
left: 0px;
top: 0px;
z-index: 13;
width: 500px;
height: 301px;
}

#lip {
background-image: url(delicousmedia/lip.jpg);
top: 643px;
}

html, body {
padding-top:0px;
padding-bottom:0px;
padding-right:0px;
padding-left:0px;
margin: 0px;
background-color: #FFFFFF;
}

abduraooft
Feb 1st, 2010, 02:18 PM
It looks like you are not aware of the pitfalls of absolute positions (http://www.tyssendesign.com.au/articles/css/absolute-positioning-pitfalls/).

loskwantos
Feb 1st, 2010, 02:34 PM
It looks like you are not aware of the pitfalls of absolute positions (http://www.tyssendesign.com.au/articles/css/absolute-positioning-pitfalls/).

Ke ke so what should I change cause I'm new to coding

abduraooft
Feb 1st, 2010, 03:46 PM
Please post a link to your page or at least a screen shot, so that I may be able to recommend a customisable layout for your needs.

loskwantos
Feb 1st, 2010, 04:50 PM
Fixed
Wrong

#favorite {
margin: 0px 0px 0px auto;
width: 500px;
position: relative;
}

good
#favorite {
margin: 0px auto;
width: 500px;
position: relative;
}