Help with Centering Custom CSS Popup Image Viewer

Hello,

I have modified code I found at the Dynamic Drive CSS Library (http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/), but because my knowledge is not in depth, I can not complete my re-design.

Here is what I have completed so far...My photography portfolio. (http://www.tobybrooks.com) It took me a little bit of playing around, and I ended up giving up on centering it because it always messed up the layout when I tried. I know it is a little wide for smaller resolutions, but I don't care. The one thing I really would like to have is fully horizontal centered the contents, but because of the way it is written, all of the modifications to center I have tried will not center it. I have followed all the centering techniques discussed in CSS, but I have had no success with these modification. What is stopping this content from being centered.

Here is the CSS, I have modified the code from Dynamic Drive CSS Library to create my website.@charset "utf-8";
/* CSS Document */
<style type="text/css">
.loadpic{
position: relative;
z-index: 0;
}
.loadpic:hover{
background-color: transparent;
z-index: 50;
}
.loadpic span{ /*CSS for enlarged image*/
position: absolute;
background-color: white;
padding: 5px;
left: -1000px;
border: 1px solid black;
visibility: hidden;
color: black;
text-decoration: none;
}
.loadpic span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.loadpic:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 79px; /*position where enlarged image should offset from the top */
left: 101px; /*position where enlarged image should offset from the left */
}

img#background {
position:absolute;
top:79px;
left:101px;
width:797px;
height:542px;
border:hidden;
z-index:-2;
}
img#topleft, img#top1, img#top2, img#top3, img#top4, img#top5, img#top6, img#top7, img#top8, img#topright {
position:absolute;
top:0px;
left:0px;
width:91px;
height:69px;
border:hidden;
z-index:-1;
}
img#top1 {left:101px}
img#top2 {left:202px}
img#top3 {left:303px}
img#top4 {left:404px}
img#top5 {left:505px}
img#top6 {left:606px}
img#top7 {left:707px}
img#top8 {left:808px}
img#topright {left:909px}
img#left1, img#left2, img#left3, img#left4, img#left5, img#left6, img#left7, img#bottomleft {
position:absolute;
top:79px;
left:0px;
width:91px;
height:69px;
border:hidden;
z-index:-1;
}
img#left2 {top:158px}
img#left3 {top:237px}
img#left4 {top:316px}
img#left5 {top:395px}
img#left6 {top:474px}
img#left7 {top:553px}
img#bottomleft {top:632px}
img#right1, img#right2, img#right3, img#right4, img#right5, img#right6, img#right7, img#bottomright {
position:absolute;
top:79px;
left:909px;
width:91px;
height:69px;
border:hidden;
z-index:-1;
}
img#right2 {top:158px}
img#right3 {top:237px}
img#right4 {top:316px}
img#right5 {top:395px}
img#right6 {top:474px}
img#right7 {top:553px}
img#bottomright {top:632px}
img#bottom1, img#bottom2, img#bottom3, img#bottom4, img#bottom5, img#bottom6, img#bottom7, img#bottom8 {
position:absolute;
top:632px;
left:101px;
width:91px;
height:69px;
border:hidden;
z-index:-1;
}
img#bottom2 {left:202px}
img#bottom3 {left:303px}
img#bottom4 {left:404px}
img#bottom5 {left:505px}
img#bottom6 {left:606px}
img#bottom7 {left:707px}
img#bottom8 {left:808px}

</style>

If anyone can help, It would be greatly appreciated.

Thanks!

You should view source. You've put your site's content into the head tag instead of the body tag. That's not a good start. EDIT: Correction - it's not even in the head tag. It's in never-never-land between the two. My mistake.


Once you move the content to where it should be, check your validation results again. A lot of the current errors are from using uppercase attribute names - that's not valid XHTML. Working toward a valid document will help getting things to display how you want.

I have moved the content to inside the body tags.

From what I am seeing my html source code nor my CSS uses any Uppercase attribute names. The image filenames are Uppercase, but those are filenames. Correction: I found the Uppercase Attribute names.

I have updated Source Code with one method of trying to center the contents.
Standard Container Centering...

Thanks

I forgot to provide the validation link (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.tobybrooks.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0) in my last post.

All of that absolute positioning is going to screw with any layout, I think. You can work around by applying a position:relative; and margin: 0 auto; to your container. That seems to patch it up in FF3.5. The remaining validation issues should be fixed up to help reduce problems across other browsers.

Thanks, I need to work on figuring out those XHTML errors now, the centering worked out great.