Jump to content

Why Won't These Images Center Themselves Both Ways?


bigsilk
 Share

Recommended Posts

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
Link to comment
Share on other sites

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;

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Edited by dsonesuk
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Edited by dsonesuk
Link to comment
Share on other sites

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?
Link to comment
Share on other sites

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>

Edited by dsonesuk
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...