Hi everyone, I am trying to position an image in the center of my page using “left: 25%” but I noticed that when I change the resolution on my computer, the image gets pushed to the right quite a bit. Any suggestions? I am trying to center the “#main” div and this is my css:
body {
background-color: #000000;
margin: 0;
}
#header {
position: absolute;
top: 0px;
left: 0px;
background-image: url(images/headerbar.png);
width: 100%;
height: 54px;
}
#menu {
position: relative;
top: 0px;
left: 25%;
background-image: url(images/menubar.png);
width: 209px;
height: 274px;
padding-left: 25px;
margin-left: 450px;
background-repeat: no-repeat;
}
#main {
position: relative;
top: 0px;
left: 25%;
background-image: url(images/mainimage.png);
width: 711px;
height: 270px;
background-repeat: no-repeat;
color: #ffffff;
}
#footer {
position: relative;
top: 0px;
left: 0px;
background-image: url(images/footerbar.gif);
width: 100%;
height: 154px;
}
