Hey everyone, I have a simple one-column fixed layout that I’m trying to center but I’m having some problems. Whenever I try to add 50% padding to the body and give the wrapper a width and a margin-left equal to half that width, it shifts my content (except for my nav menu which it does nothing to) way down the page and does weird things when I resize my browser. Any suggestions?
Here is a link to the website:
http://alexmel7.site88.net/exercise6/index.html
Here is my CSS:
html, body {
margin: 0px;
padding: 50%;
}
#wrapper {
width: 1000px;
margin-left: -500px;
}
#header {
background-image: url(images/header.gif);
width: 995px;
height: 156px;
background-repeat: no-repeat;
margin-top: 5px;
}
.about a {
position: absolute;
top: 18px;
left: 410px;
display: block;
background-image: url(images/navabout.gif);
width: 99px;
height: 29px;
text-decoration: none;
outline: none;
}
.about a:Hover {
position: absolute;
top: 3px;
left: 404px;
background-image: url(images/navrollabout.gif);
width: 120px;
height: 51px;
}
.services a {
position: absolute;
top: 18px;
left: 535px;
display: block;
background-image: url(images/navservices.gif);
width: 107px;
height: 29px;
text-decoration: none;
outline: none;
}
.services a:Hover {
position: absolute;
top: 5px;
left: 528px;
background-image: url(images/navrollservices.gif);
width: 126px;
height: 48px;
}
.portfolio a {
position: absolute;
top: 18px;
left: 660px;
display: block;
background-image: url(images/navportfolio.gif);
width: 128px;
height: 34px;
text-decoration: none;
outline: none;
}
.portfolio a:Hover {
position: absolute;
top: 3px;
left: 654px;
background-image: url(images/navrollportfolio.gif);
width: 145px;
height: 48px;
}
.contact a {
position: absolute;
top: 21px;
left: 810px;
display: block;
background-image: url(images/navcontact.gif);
width: 113px;
height: 28px;
text-decoration: none;
outline: none;
}
.contact a:Hover {
position: absolute;
top: 5px;
left: 802px;
background-image: url(images/navrollcontact.gif);
width: 132px;
height: 47px;
}
#main {
background-image: url(images/main.gif);
width: 927px;
height: 350px;
background-repeat: no-repeat;
}
#footer {
background-image: url(images/footer.gif);
width: 990px;
height: 28px;
}