Why Won't These Images Center Themselves Both Ways?

[bigsilk]

I'm hoping that this is going to be the last posting I put up about this damned page. I'm just learning the subtle nuances of CSS and am, quite admittedly, needy on steepening my learning curve. Everyone has been very gracious, and for that I thank you all. Now...As many of you may know, I'm creating a page with iframes that present thumbs of paintings. Click on a thumb, 'floatbox' presents it as a 'lightbox' style presentation.I want the thumbs in <div class="wall"> to be center-aligned. They are currently left aligned. Why isn't this working?Here's the CSS:

div.wall{position:absolute;width: 746px;height: 450px;text-align:center;vertical-align:middle;}img.port_1{position:absolute;border:0px;padding:5px;left:0px;}img.port_2{position:absolute;border:0px;padding:5px;left:120px;}img.port_3{position:absolute;border:0px;padding:5px;left:240px;}img.port_4{position:absolute;border:0px;padding:5px;left:360px;}img.port_5{position:absolute;border:0px;padding:5px;left:480px;}img.land_1{position:absolute;border:0px;padding:5px;left:0px;}img.land_2{position:absolute;border:0px;padding:5px;left:0px;top:95px;}img.land_3{position:absolute;border:0px;padding:5px;left:120px;}img.land_4{position:absolute;border:0px;padding:5px;left:120px;top:90px;}img.land_5{position:absolute;border:0px;padding:5px;left:240px;}img.land_6{position:absolute;border:0px;padding:5px;left:240px;top:100px;}img.land_7{position:absolute;border:0px;padding:5px;left:360px;}img.land_8{position:absolute;border:0px;padding:5px;left:360px;top:100px;}img.land_9{position:absolute;border:0px;padding:5px;left:480px;}img.land_10{position:absolute;border:0px;padding:5px;left:480px;top:100px;}

here's the HTML:

<div class="wall"><a href="120384017195.html" class="floatbox"><img class="port_1" src="assets/gallery_photos/120384017195.jpg" width="15%" /></a><a href="180325162114.html" class="floatbox"><img class="land_3" src="assets/gallery_photos/180325162114.jpg" width="15%" /></a><a href="130287936822.html" class="floatbox"><img class="land_4" src="assets/gallery_photos/130287936822.jpg" width="15%" /></a><a href="350149634217.html" class="floatbox"><img class="port_3" src="assets/gallery_photos/350149634217.jpg" width="15%" /></a><a href="180318018675.html" class="floatbox"><img class="land_7" src="assets/gallery_photos/180318018675.jpg" width="15%" /></a><a href="380106503093.html" class="floatbox"><img class="land_8" src="assets/gallery_photos/380106503093.jpg" width="15%" /></a><a href="280309294867.html" class="floatbox"><img class="port_5" src="assets/gallery_photos/280309294867.jpg" width="15%" /></a><img class="couch" src="assets/images/couple_in_gallery.png" width="746" height="178" /></div>

Again, for those who have helped, you're champions.Adam

[Ingolme]

If they are floated, or absolutely positioned, they're outside of the normal page flow, and therefore cannot be centered.There's a way to pretend to center certain elements, though if you resize the window so that it's smaller than the width of the object, parts of it will be outside of the viewport and unaccessible.Try adding this to div.wall to see if it helps:

left: 50%;margin-left: -373px;

[bigsilk]

That didn't do anything. Should I rewrite the img.port_# and img.land_# selectors to 'relative' and position everything from there?There are 15 'positions' for these images; 5 portrait (taller than wide) and 10 landscape positions (wider than tall) that all fit within the div.wall. Essentially, it's like having a 2 row X 5 column table. If a portrait goes into an area, it's treated as row span=2, if it's a landscape image, it's treated normally, such that a portrait gets its own column, but two landscape images stack on one another.I don't know if that makes sense or matters, but there it is.A

[dsonesuk]

the total width of images + padding seems to equal about 600px on all pages, else you need to calculate this somehowtotal width = 746px;746-600=146146/2=73pxdiv.wall {left:73px;}img.couch {left: -73px;}and this seems to centre the gallery

[bigsilk]

Gorgeous, thanks.Now, what about vertical centering? I don't mean to be ungracious, and if it don't, it don't, but how about it?A

[dsonesuk]

to vertical-align the images, they really need to be within a fixed height div<div id="wall"> <div id="whatevername">images gallery</div>img couch blah blah</div>

[bigsilk]

That figures. Thank you.Many of these images have a shelf life and their replacements will have different HxW dimensions. This is a project I took over from two different people who were using tables to load this stuff. Seems like the client is going to have to get the cards they're dealt with. Thanks for your help.I hate working from other peoples' code...A

[dsonesuk]

well the only that i could up with is this:<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Fiona & Ryans Art Exchange - Gallery</title><link href="http://www.frartexchange.com/assets/css/base.css" rel="stylesheet" type="text/css" /><script type="text/javascript" language="javascript" src="http://www.frartexchange.com/assets/floatbox/floatbox.js"></script><script type="text/javascript" src="http://www.frartexchange.com/assets/js/jquery.js"></script><link rel="stylesheet" href="http://www.frartexchange.com/assets/css/frame.css" type="text/css" media="screen" /><link rel="stylesheet" href="http://www.frartexchange.com/assets/floatbox/floatbox.css" type="text/css" media="screen" /><script type="text/javascript" src="http://www.frartexchange.com/assets/floatbox/floatbox.js"></script><style type="text/css">img.couch {top: -20px; left: -75px;}#gallery, div.gallery_col a.floatboxp {height: 190px;}div.gallery_col {width: 124px; height: 190px; height: 100%; float:left;}div.gallery_col img {vertical-align:middle; border:0px; padding: 0 2px;}div.gallery_col a.floatboxp { line-height: 190px; float: left; text-decoration:none;}div.gallery_col a.floatboxl {height: 95px; line-height: 95px; float:left; text-decoration:none;}</style></head><body background="http://www.frartexchange.com/assets/images/white_brick_wall.jpg" ><div class="pages"> <a href="pattern_1_test.html" target="_self">Page 1 |</a> <a href="pattern_2_test.html" target="_self">Page 2 |</a> <a href="pattern_3_test.html" target="_self">Page 3 |</a> <a href="pattern_4_test.html" target="_self">Page 4 |</a></div><div class="wall"><div id="gallery"> <div class="gallery_col"> <a href="120384017195.html" class="floatboxp"> <img src="http://www.frartexchange.com/assets/gallery_photos/120384017195.jpg" width="115" /> </a> </div> <div class="gallery_col"> <a href="180325162114.html" class="floatboxl"> <img src="http://www.frartexchange.com/assets/gallery_photos/180325162114.jpg" width="115" /> </a> <a href="130287936822.html" class="floatboxl"> <img src="http://www.frartexchange.com/assets/gallery_photos/130287936822.jpg" width="115" /> </a> </div> <div class="gallery_col"> <a href="350149634217.html" class="floatboxp"> <img src="http://www.frartexchange.com/assets/gallery_photos/350149634217.jpg" width="115" /> </a> </div> <div class="gallery_col"> <a href="180318018675.html" class="floatboxl"> <img src="http://www.frartexchange.com/assets/gallery_photos/180318018675.jpg" width="115" /> </a> <a href="380106503093.html" class="floatboxl"> <img src="http://www.frartexchange.com/assets/gallery_photos/380106503093.jpg" width="115" /> </a> </div> <div class="gallery_col"> <a href="280309294867.html" class="floatboxp"> <img src="http://www.frartexchange.com/assets/gallery_photos/280309294867.jpg" width="115" /> </a> </div></div><img class="couch" src="http://www.frartexchange.com/assets/images/couple_in_gallery.png" width="746" height="178" /></div></body></html>It works for FF, IE7, Chrome, Opera, But! as usual IE6 does it completely different and aligns to the top.I've tried several ways to get around this, but can't find that will work. Will try again later.

[bigsilk]

well the only that i could up with is this:<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Fiona & Ryans Art Exchange - Gallery</title><link href="http://www.frartexchange.com/assets/css/base.css" rel="stylesheet" type="text/css" /><script type="text/javascript" language="javascript" src="http://www.frartexchange.com/assets/floatbox/floatbox.js"></script><script type="text/javascript" src="http://www.frartexchange.com/assets/js/jquery.js"></script><link rel="stylesheet" href="http://www.frartexchange.com/assets/css/frame.css" type="text/css" media="screen" /><link rel="stylesheet" href="http://www.frartexchange.com/assets/floatbox/floatbox.css" type="text/css" media="screen" /><script type="text/javascript" src="http://www.frartexchange.com/assets/floatbox/floatbox.js"></script><style type="text/css">img.couch {top: -20px; left: -75px;}#gallery, div.gallery_col a.floatboxp {height: 190px;}div.gallery_col {width: 124px; height: 190px; height: 100%; float:left;}div.gallery_col img {vertical-align:middle; border:0px; padding: 0 2px;}div.gallery_col a.floatboxp { line-height: 190px; float: left; text-decoration:none;}div.gallery_col a.floatboxl {height: 95px; line-height: 95px; float:left; text-decoration:none;}</style></head><body background="http://www.frartexchange.com/assets/images/white_brick_wall.jpg" ><div class="pages"> <a href="pattern_1_test.html" target="_self">Page 1 |</a> <a href="pattern_2_test.html" target="_self">Page 2 |</a> <a href="pattern_3_test.html" target="_self">Page 3 |</a> <a href="pattern_4_test.html" target="_self">Page 4 |</a></div><div class="wall"><div id="gallery"> <div class="gallery_col"> <a href="120384017195.html" class="floatboxp"> <img src="http://www.frartexchange.com/assets/gallery_photos/120384017195.jpg" width="115" /> </a> </div> <div class="gallery_col"> <a href="180325162114.html" class="floatboxl"> <img src="http://www.frartexchange.com/assets/gallery_photos/180325162114.jpg" width="115" /> </a> <a href="130287936822.html" class="floatboxl"> <img src="http://www.frartexchange.com/assets/gallery_photos/130287936822.jpg" width="115" /> </a> </div> <div class="gallery_col"> <a href="350149634217.html" class="floatboxp"> <img src="http://www.frartexchange.com/assets/gallery_photos/350149634217.jpg" width="115" /> </a> </div> <div class="gallery_col"> <a href="180318018675.html" class="floatboxl"> <img src="http://www.frartexchange.com/assets/gallery_photos/180318018675.jpg" width="115" /> </a> <a href="380106503093.html" class="floatboxl"> <img src="http://www.frartexchange.com/assets/gallery_photos/380106503093.jpg" width="115" /> </a> </div> <div class="gallery_col"> <a href="280309294867.html" class="floatboxp"> <img src="http://www.frartexchange.com/assets/gallery_photos/280309294867.jpg" width="115" /> </a> </div></div><img class="couch" src="http://www.frartexchange.com/assets/images/couple_in_gallery.png" width="746" height="178" /></div></body></html>It works for FF, IE7, Chrome, Opera, But! as usual IE6 does it completely different and aligns to the top.I've tried several ways to get around this, but can't find that will work. Will try again later.

floatbox is a 'lightbox' style app. Won't changing the selector by adding 'l' or 'p' screw with the app?

[dsonesuk]

ok! try this then<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Fiona & Ryans Art Exchange - Gallery</title><link href="http://www.frartexchange.com/assets/css/base.css" rel="stylesheet" type="text/css" /><script type="text/javascript" language="javascript" src="http://www.frartexchange.com/assets/floatbox/floatbox.js"></script><script type="text/javascript" src="http://www.frartexchange.com/assets/js/jquery.js"></script><link rel="stylesheet" href="http://www.frartexchange.com/assets/css/frame.css" type="text/css" media="screen" /><link rel="stylesheet" href="http://www.frartexchange.com/assets/floatbox/floatbox.css" type="text/css" media="screen" /><script type="text/javascript" src="http://www.frartexchange.com/assets/floatbox/floatbox.js"></script><style type="text/css">img.couch {top: -20px; left: -75px;}#gallery, div.gallery_col a.floatboxp {height: 190px;}div.gallery_col {width: 124px; height: 190px; height: 100%; float:left;}div.gallery_col img {vertical-align:middle; border:0px; padding: 0 2px;}div.gallery_col a.portlink { line-height: 190px; float: left; text-decoration:none;}div.gallery_col a.landlink {height: 95px; line-height: 95px; float:left; text-decoration:none;}</style></head><body background="http://www.frartexchange.com/assets/images/white_brick_wall.jpg" ><div class="pages"> <a href="pattern_1_test.html" target="_self">Page 1 |</a> <a href="pattern_2_test.html" target="_self">Page 2 |</a> <a href="pattern_3_test.html" target="_self">Page 3 |</a> <a href="pattern_4_test.html" target="_self">Page 4 |</a></div><div class="wall"><div id="gallery"> <div class="gallery_col"> <a href="120384017195.html" class="floatbox portlink"> <img src="http://www.frartexchange.com/assets/gallery_photos/120384017195.jpg" width="115" /> </a> </div> <div class="gallery_col"> <a href="180325162114.html" class="floatbox landlink"> <img src="http://www.frartexchange.com/assets/gallery_photos/180325162114.jpg" width="115" /> </a> <a href="130287936822.html" class="floatbox landlink"> <img src="http://www.frartexchange.com/assets/gallery_photos/130287936822.jpg" width="115" /> </a> </div> <div class="gallery_col"> <a href="350149634217.html" class="floatbox portlink"> <img src="http://www.frartexchange.com/assets/gallery_photos/350149634217.jpg" width="115" /> </a> </div> <div class="gallery_col"> <a href="180318018675.html" class="floatbox landlink"> <img src="http://www.frartexchange.com/assets/gallery_photos/180318018675.jpg" width="115" /> </a> <a href="380106503093.html" class="floatbox landlink"> <img src="http://www.frartexchange.com/assets/gallery_photos/380106503093.jpg" width="115" /> </a> </div> <div class="gallery_col"> <a href="280309294867.html" class="floatbox portlink"> <img src="http://www.frartexchange.com/assets/gallery_photos/280309294867.jpg" width="115" /> </a> </div></div><img class="couch" src="http://www.frartexchange.com/assets/images/couple_in_gallery.png" width="746" height="178" /></div></body></html>