Hello people! I need a little help here. Someone designed a website for me about 1 1/2 months ago, and until now i haven't had time to fill it with content, etc. I just noticed he was using HTML to resize the pictures to make the thumbs, or something like that, so it took me a lot of time to load all the thumbs and be able to use the desired effect (Since the gallery has lightbox). I just changed the thumbs of the "Digital" section of the gallery for real thumsb, but now they look pretty weird... As you can see in the website they aren't perfectly aligned... Here's the site: http://psnick.com/portfolio.html What should i add to the code to align them properly? Thanks!
You could try this: <div class="imgalign"> <a href="whatever" rel="lightbox"><img src="pic1.jpg" alt="desc. of pic class="imgthumb" /></a> </div> <div class="imgalign"> <a href="whatever" rel="lightbox"><img src="pic2.jpg" alt="desc. of pic class="imgthumb" /></a> </div> etc... for all of the pics. Then you would add this to portfolio.css: .imgalign { width: 25%; float: left; } .imgthumb { margin: 0px auto; padding : 5px; border : 1px solid #ddd; background:#ffffff; }
Nah, the designer dude actually already floated them... the thing is, without a specified width, they get funky as browsers use width: auto to shrinkwrap the floats. I'd set a width on these images. Your thumbs are clearly not the same size as each other and that causes somewhat of a problem... if they were all the same size, you could set the sizes in the CSS. You can either: set a width in the CSS which is close enough to the median width of your images (meaning the browser is still resizing them a bit, and the thumbs may squish or stretch a little bit) OR re-do the real thumbs' size so they at least have the same width. Or, option three, set a default width in the CSS, and for those with a different width, set that width in the HTML. This is not ideal. Everyone having the same width will ensure (for the most part) that all the images make a nice grid. You have: a{ font-family: Comic Sans MS; font-size: 13pt; float:left; text-decoration:none; font-weight:bold; } Code (markup): That seems to be your images, though I don't see the spacing (margin or padding like wd has above). The different heights can cause a problem, esp in IE which allows floats from below to ride up if there's room. Since these are thumbs, I don't think it's a crime to have bits cut off or compression artifacts since people can view the full-sized in all its glory. Also, there's a missing tag end on the second line of your HTML (you needs a > at the end there) AND IE is in Quirks mode (read: stoopid mode) because of the space before the very first line. IE gets tripped up like that. The doctype is good, just move it up. There cannot be so much as a spacebar space before the <! part of the Doctype. Another problem I see is that EVERYTHING seems to be floated left. None of the floats seem to be cleared. Floats need to be cleared! And he's floated the body... can't figure out what that's for. That "center hack" you see in the CSS is because IE6 is thrown into Quirksmode (see above). It might take several tweaks to get this site working right.
So you're saying that if i change the width of the thumbs so that they all look the same the problem should go away? But what do i do with the ones that are large (in height)?, they'd look horrible if i make them have the same width as the other ones. Is there a way to make them align properly without changing the width?
Hmm, if you had to keep the widths they had, you would then have to do something similar to what wd suggested-- it's bloat-aceous, wrapping a div around each and every image, but you could set the width on the floated div instead of the image. <div id="thumbs"> <div><a href="#"><img src="#" /></a></div> <div><a href="#"><img src="#" /></a></div> <div><a href="#"><img src="#" /></a></div> <div><a href="#"><img src="#" /></a></div> etc... </div> CSS #thumbs { overflow: hidden; (an easy way to wrap the floats since nobody's clearing them) } #thumbs div { width: whatever works; float: left; margin: 10px; (or whatever) min-height: set a height here that's at least a bit higher than your highest/tallest image, plus make room for the top and bottom margin we'll give each image) } * html #thumbs div { height: same as what you use for min-height, this is for IE6 and below } #thumbs div a { display: block; margin: 10px auto; (an example, set what you want for the first number, which is for top-bottom spacing... auto centers it) whatever other stuff you want like a white border or whatever; } Something like this should work. The min-height I think is safer than saying height, since browsers will literally stay at whatever height you set. Min-height will let the div grow if something happens and an image is too long or whatever. Height for IE6 and below though means height + whatever else you need, so it will grow for IE6. I made the a's display: block so I could set margins and center them within the divs, but you could keep them display: inline (what they normally should be) and text-align: center and that might work fine too. PLay with it. Remove float:left then from your current declaration of your a's.
Hey, I also did an example if you want to check it out, but imo go for what Stomme said as he has much more knowledge than me. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <style type="text/css"> .imgalign { width: 22.5%; float: left; } .imgthumb { margin: 0px auto; text-align:center; padding : 2%; border : 1px solid #ddd; } a:hover .imgthumb { border-color: #0000FF; } </style> </head> <body> <div id="container"> <div class="imgalign"> <a href="http://psnick.com/digital/ 1.jpg " rel="lightbox"> <img src="http://psnick.com/digital/Thumbs_120/th_Abstract_0_10.jpg " class="imgthumb" > </a></div> <div class="imgalign"> <a href="http://psnick.com/digital/ Abstract_2.jpg " rel="lightbox"> <img src="http://psnick.com/digital/Thumbs_120/th_Abstract_2.jpg " class="imgthumb"> </a></div> <div class="imgalign"> <a href="http://psnick.com/digital/ AngelsOnline_WP.jpg " rel="lightbox"><img src="http://psnick.com/digital/Thumbs_120/th_AngelsOnline_WP.jpg " class="imgthumb" > </a></div> <div class="imgalign"> <a href="http://psnick.com/digital/ BackgroundB.jpg " rel="lightbox"><img src="http://psnick.com/digital/Thumbs_120/th_BackgroundB.jpg " class="imgthumb" > </a></div> <div style="clear:both"></div> <div class="imgalign"> <a href="http://psnick.com/digital/ Demon.jpg " rel="lightbox"><img src="http://psnick.com/digital/Thumbs_120/th_Demon.jpg " class="imgthumb" > </a></div> <div class="imgalign"> <a href="http://psnick.com/digital/ DropBackGround.jpg " rel="lightbox"><img src="http://psnick.com/digital/Thumbs_120/th_DropBackGround.jpg " class="imgthumb" > </a></div> <div class="imgalign"> <a href="http://psnick.com/digital/ Flying_Heart_v1.jpg " rel="lightbox"><img src="http://psnick.com/digital/Thumbs_120/th_Flying_Heart_v1.jpg " class="imgthumb" > </a></div> <div class="imgalign"> <a href="http://psnick.com/digital/ Flying_Heart_v2.jpg " rel="lightbox"><img src="http://psnick.com/digital/Thumbs_120/th_Flying_Heart_v2.jpg " class="imgthumb" > </a></div> <div style="clear:both"></div> <div class="imgalign"> <a href="http://psnick.com/digital/ Fractal1.jpg " rel="lightbox"><img src="http://psnick.com/digital/Thumbs_120/th_Fractal1.jpg " class="imgthumb" > </a></div> <div class="imgalign"> <a href="http://psnick.com/digital/ fractal_doodling.jpg " rel="lightbox"><img src="http://psnick.com/digital/Thumbs_120/th_fractal_doodling.jpg " class="imgthumb"> </a></div> <div class="imgalign"> <a href="http://psnick.com/digital/ fractal_flowers.jpg " rel="lightbox"><img src="http://psnick.com/digital/Thumbs_120/th_fractal_flowers.jpg " class="imgthumb" > </a></div> <div class="imgalign"> <a href="http://psnick.com/digital/ Japanese_Garden.jpg " rel="lightbox"><img src="http://psnick.com/digital/Thumbs_120/th_Japanese_Garden.jpg " class="imgthumb" > </a></div> <div style="clear:both"></div> <div class="imgalign"> <a href="http://psnick.com/digital/ Japanese_Garden_v2.jpg " rel="lightbox"><img src="http://psnick.com/digital/Thumbs_120/th_Japanese_Garden_v2.jpg " class="imgthumb" > </a></div> <div class="imgalign"> <a href="http://psnick.com/digital/ logo_fem_gam_1.jpg " rel="lightbox"><img src="http://psnick.com/digital/Thumbs_120/th_logo_fem_gam_1.jpg " class="imgthumb" > </a></div> <div class="imgalign"> <a href="http://psnick.com/digital/ Mountain_River_Small.jpg " rel="lightbox"><img src="http://psnick.com/digital/Thumbs_120/th_Mountain_River_Small.jpg " class="imgthumb" ></a> </a></div> <div class="imgalign"> <a href="http://psnick.com/digital/ Nucleo.jpg " rel="lightbox"><img src="http://psnick.com/digital/Thumbs_120/th_Nucleo.jpg " class="imgthumb" ></a> </a></div> <div style="clear:both"></div> <div class="imgalign"> <a href="http://psnick.com/digital/ panda.jpg " rel="lightbox"><img src="http://psnick.com/digital/Thumbs_120/th_panda.jpg " class="imgthumb" ></a> </a></div> <div class="imgalign"> <a href="http://psnick.com/digital/ Planet_Ray_Vertical_Gothic.jpg " rel="lightbox"><img src="http://psnick.com/digital/Thumbs_120/th_Planet_Ray_Vertical_Gothic.jpg " class="imgthumb" ></a> </a></div> <div class="imgalign"> <a href="http://psnick.com/digital/ Planet_v1_2.jpg " rel="lightbox"><img src="http://psnick.com/digital/Thumbs_120/th_Planet_v1_2.jpg " class="imgthumb" ></a> </a></div> <div class="imgalign"> <a href="http://psnick.com/digital/ Playa.jpg " rel="lightbox"><img src="http://psnick.com/digital/Thumbs_120/th_Playa.jpg " class="imgthumb"></a> </a></div> <div style="clear:both"></div> <div class="imgalign"> <a href="http://psnick.com/digital/ portal_nucleus_Cold_Portal.jpg " rel="lightbox"><img src="http://psnick.com/digital/Thumbs_120/th_portal_nucleus_Cold_Portal.jpg " class="imgthumb" ></a> </a></div> <div class="imgalign"> <a href="http://psnick.com/digital/ Sharp_2.jpg " rel="lightbox"><img src="http://psnick.com/digital/Thumbs_120/th_Sharp_2.jpg " sclass="imgthumb"></a> </a></div> <div class="imgalign"> <a href="http://psnick.com/digital/ so-many-stars.jpg " rel="lightbox"><img src="http://psnick.com/digital/Thumbs_120/th_so-many-stars.jpg " class="imgthumb" ></a> </a></div> <div class="imgalign"> <a href="http://psnick.com/digital/ Toonami_3.jpg " rel="lightbox"><img src="http://psnick.com/digital/Thumbs_120/th_Toonami_3.jpg " class="imgthumb"></a> </a></div> <div style="clear:both"></div> <div class="imgalign"> <a href="http://psnick.com/digital/ valentines.jpg " rel="lightbox"><img src="http://psnick.com/digital/Thumbs_120/th_valentines.jpg " class="imgthumb" ></a> </a></div> <div class="imgalign"> <a href="http://psnick.com/digital/ Wall_1_1.jpg " rel="lightbox"><img src="http://psnick.com/digital/Thumbs_120/th_Wall_1_1.jpg " class="imgthumb" ></a> </a></div> <div class="imgalign"> <a href="http://psnick.com/digital/ Wall_1_2.jpg " rel="lightbox"><img src="http://psnick.com/digital/Thumbs_120/th_Wall_1_2.jpg " class="imgthumb" ></a> </a></div> </div> </body> </html> Code (markup):
I pretty much posted your code above anyway, wd : ) the biggest difference though is that you've got all those classes and don't need them. It's called "classitis" when every child of a container has the same class : ) Instead, refer to them by their parent. Use a class when one or two things don't follow the norm. But otherwise, my code copied yours : ) In my quick example above I did add a container around everything called #thumbs but there might've already been a container which only had the images, I didn't look that close... but so then I referred to the divs inside as #thumbs div, and the a's inside as #thumbs div a... and actually, you don't even need to refer to the images themselves, since we're wrapping everyone in divs anyway. I wouldn't do the div wrapping at all, except the images are different sizes...
The only reason I didn't use #container is because I looked so quick that I wasn't sure there wasn't other stuff on the rest of the page also inside #container (sorry, I'm a lazy one)... because then it gets tricky mentioning things by parent... if there are other divs on the page that are within #container but aren'y actually part of the gallery, you wouldn't want them looking like the gallery divs. Again, just laziness... : )
I tried with both codes. The same day you posted this with the Stomme_poes one, and today with the wd_2k6. The both ended up in the same way apparently. Unless i did it wrong :S Well, you can check the digital gallery or the Photo Manips one and you'll see the last one i tried. As you can see they are aligned at first apparently, but later on the look pretty weird. This is the code of the Photo Manips one: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="English" xml:lang="English" <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> .imgalign { width: 22.5%; float: left; } .imgthumb { margin: 0px auto; text-align:center; padding : 2%; border : 1px solid #ddd; } a:hover .imgthumb { border-color: #0000FF; } </style> <script type="text/javascript"> </script> <link href="portfolio.css" rel="stylesheet" type="text/css" media="screen" /> <script type="text/javascript" src="lightbox.js"> </script> </head> <body onload="MM_preloadImages(‘/images/menu_on.gif’)…;initLightbox()"> <div id="wrap"> <div id="header"> </div> <div id="underheader"> </div> <div id="main-body"> <div id="menu"> <div id="links"> <ul> <li><a href="index.html">Home</a></li> <li><a href="contact.html">Contact</a></li> <li><a href="about.html">About</a></li> <li><a href="portfolio.html">Portfolio</a></li> </ul> </div> </div> <div id="digital"> <div class="inside"> <a href="portfolio.html"> <img src="digital/r1.jpg" alt="Digital Gallery" width="120px" height="90px" border="0" /> </a> </div></div> <div id="anime"> <div class="inside"> <a href="anime.html"> <img src="anime/r1.jpg" alt="Digital Gallery" width="120px" height="75px" border="0" /> </a> </div></div> <div id="manips"> <div class="inside"> <a href="manips.html"> <img src="manips/r1.jpg" alt="Digital Gallery" width="120px" height="83px" border="0" /> </a> </div></div> <div id="other"> <div class="inside"> <a href="other.html"> <img src="other/r1.jpg" alt="Digital Gallery" width="120px" height="101px" border="0" /> </a> </div></div> <div id="content"> <div class="inside"> <div id="container"> <div class="imgalign"><a href="manips/ 99_Red_Balloons_2.jpg " rel="lightbox"><img src="manips/Thumbs_120/th_th_99_Red_Balloons_2.jpg " style="padding : 5px;border : 1px solid #ddd;float : left;margin-right : 52px;margin-bottom : 15px;background:#ffffff;" ></a></div> <div class="imgalign"><a href="manips/ autumn_sun_Light_2.jpg " rel="lightbox"><img src="manips/Thumbs_120/th_autumn_sun_Light_2.jpg " style="padding : 5px;border : 1px solid #ddd;float : left;margin-right : 52px;margin-bottom : 15px;background:#ffffff;" ></a></div> <div class="imgalign"><a href="manips/ autumn_sun_mod.jpg " rel="lightbox"><img src="manips/Thumbs_120/th_autumn_sun_mod.jpg " style="padding : 5px;border : 1px solid #ddd;float : left;margin-right : 52px;margin-bottom : 15px;background:#ffffff;" ></a></div> <div class="imgalign"><a href="manips/ Blue_Eye_v1.jpg " rel="lightbox"><img src="manips/Thumbs_120/th_Blue_Eye_v1.jpg " style="padding : 5px;border : 1px solid #ddd;float : left;margin-bottom : 15px;background:#ffffff;" ></a></div> <div class="imgalign"><a href="manips/ Blue_Eye_v2.jpg " rel="lightbox"><img src="manips/Thumbs_120/th_Blue_Eye_v2.jpg " style="padding : 5px;border : 1px solid #ddd;float : left;margin-right : 52px;margin-bottom : 15px;background:#ffffff;" ></a></div> <div class="imgalign"><a href="manips/ Blue_Eye_v3.jpg " rel="lightbox"><img src="manips/Thumbs_120/th_Blue_Eye_v3.jpg " style="padding : 5px;border : 1px solid #ddd;float : left;margin-right : 52px;margin-bottom : 15px;background:#ffffff;" ></a></div> <div class="imgalign"><a href="manips/ Blue_Eye_v4.jpg " rel="lightbox"><img src="manips/Thumbs_120/th_Blue_Eye_v4.jpg " style="padding : 5px;border : 1px solid #ddd;float : left;margin-right : 52px;margin-bottom : 15px;background:#ffffff;" ></a></div> <div class="imgalign"><a href="manips/ Blue_Eye_v5.jpg " rel="lightbox"><img src="manips/Thumbs_120/th_Blue_Eye_v5.jpg " style="padding : 5px;border : 1px solid #ddd;float : left;margin-bottom : 15px;background:#ffffff;" ></a></div> <div class="imgalign"><a href="manips/ Blue_Eye_v6.jpg " rel="lightbox"><img src="manips/Thumbs_120/th_Blue_Eye_v6.jpg " style="padding : 5px;border : 1px solid #ddd;float : left;margin-right : 52px;margin-bottom : 15px;background:#ffffff;" ></a></div> <div class="imgalign"><a href="manips/ Blue_Eye_v7.jpg " rel="lightbox"><img src="manips/Thumbs_120/th_Blue_Eye_v7.jpg " style="padding : 5px;border : 1px solid #ddd;float : left;margin-right : 52px;margin-bottom : 15px;background:#ffffff;" ></a></div> <div class="imgalign"><a href="manips/ Blue_Girl_25p.jpg " rel="lightbox"><img src="manips/Thumbs_120/th_Blue_Girl_25p.jpg " height="80px" width="60px" style="padding : 5px;border : 1px solid #ddd;float : left;margin-right : 112px;margin-bottom : 15px;background:#ffffff;" ></a></div> <div class="imgalign"><a href="manips/ Blue_Rose.jpg " rel="lightbox"><img src="manips/Thumbs_120/th_Blue_Rose.jpg " style="padding : 5px;border : 1px solid #ddd;float : left;margin-bottom : 15px;background:#ffffff;" ></a></div> <div class="imgalign"><a href="manips/ city_night_2.jpg " rel="lightbox"><img src="manips/Thumbs_120/th_city_night_2.jpg " style="padding : 5px;border : 1px solid #ddd;float : left;margin-right : 52px;margin-bottom : 15px;background:#ffffff;" ></a></div> <div class="imgalign"><a href="manips/ Frozen_Flower.jpg " rel="lightbox"><img src="manips/Thumbs_120/th_Frozen_Flower.jpg " style="padding : 5px;border : 1px solid #ddd;float : left;margin-right : 52px;margin-bottom : 15px;background:#ffffff;" ></a></div> <div class="imgalign"><a href="manips/ Juli_v1_50.jpg " rel="lightbox"><img src="manips/Thumbs_120/th_Juli_v1_50.jpg " style="padding : 5px;border : 1px solid #ddd;float : left;margin-right : 52px;margin-bottom : 15px;background:#ffffff;" ></a></div> <div class="imgalign"><a href="manips/ Landscape_Comparison.jpg " rel="lightbox"><img src="manips/Thumbs_120/th_Landscape_Comparison.jpg " style="padding : 5px;border : 1px solid #ddd;float : left;margin-bottom : 15px;background:#ffffff;" ></a></div> <div class="imgalign"><a href="manips/ Mad_Room_by_Chriztyna_Space.jpg " rel="lightbox"><img src="manips/Thumbs_120/th_Mad_Room_by_Chriztyna_Space.jpg " style="padding : 5px;border : 1px solid #ddd;float : left;margin-right : 52px;margin-bottom : 15px;background:#ffffff;" ></a></div> <div class="imgalign"><a href="manips/ New_Years_2.jpg " rel="lightbox"><img src="manips/Thumbs_120/th_New_Years_2.jpg " style="padding : 5px;border : 1px solid #ddd;float : left;margin-right : 52px;margin-bottom : 15px;background:#ffffff;" ></a></div> <div class="imgalign"><a href="manips/ On_the_sunny_side_mod.jpg " rel="lightbox"><img src="manips/Thumbs_120/th_On_the_sunny_side_mod.jpg " style="padding : 5px;border : 1px solid #ddd;float : left;margin-right : 52px;margin-bottom : 15px;background:#ffffff;" ></a></div> <div class="imgalign"><a href="manips/ Orchids.jpg " rel="lightbox"><img src="manips/Thumbs_120/th_Orchids.jpg " style="padding : 5px;border : 1px solid #ddd;float : left;margin-bottom : 15px;background:#ffffff;" ></a></div> <div class="imgalign"><a href="manips/ Portal_to_a_new_world.jpg " rel="lightbox"><img src="manips/Thumbs_120/th_Portal_to_a_new_world.jpg " style="padding : 5px;border : 1px solid #ddd;float : left;margin-right : 52px;margin-bottom : 15px;background:#ffffff;" ></a></div> <div class="imgalign"><a href="manips/ Rose_Finished.jpg " rel="lightbox"><img src="manips/Thumbs_120/th_Rose_Finished.jpg " style="padding : 5px;border : 1px solid #ddd;float : left;margin-right : 52px;margin-bottom : 15px;background:#ffffff;" ></a></div> <div class="imgalign"><a href="manips/ Skying_2.jpg " rel="lightbox"><img src="manips/Thumbs_120/th_Skying_2.jpg " style="padding : 5px;border : 1px solid #ddd;float : left;margin-right : 52px;margin-bottom : 15px;background:#ffffff;" ></a></div> <div class="imgalign"><a href="manips/ Swamp_Hollows_v1.jpg " rel="lightbox"><img src="manips/Thumbs_120/th_Swamp_Hollows_v1.jpg " style="padding : 5px;border : 1px solid #ddd;float : left;margin-bottom : 15px;background:#ffffff;" ></a></div> </div> </div></div> </div> <!--end of main-body--> <div id="footer"> <p align="center">Copyright © Nicolas San Martin 2008</p> </div> </div> <!--end of wrap--> </body> </html> Code (markup): Please help hehe =P Thanks! ^^
heh, first, it's still bloataceous : ) I didn't think of it before, but each image already has a wrapper around it-- the anchor! We could have just floated the anchors with widths and heights set, without the extra divs. Also, no reason the other divs (the ones with the ids which then have a child called "inside") couldn't also lose the extra div. <div id="digital" class="inside"> <a href="portfolio.html"> <img src="digital/r1.jpg" alt="Digital Gallery" width="120px" height="90px" border="0" /> </a> </div> And if they're all in the same box, you could even remove the inside class too. But anyway, I don't see a height set on those outer divs, and because your images are all different heights as well, that could be what's screwing you up. If everyone has both the same width and the same height, they'll make a nice grid... where is that page I did once... Okay, here's a page where I did something real similar: http://stommepoes.nl/VanLeeuwenGlas/glasherstel.html The CSS is found here: http://stommepoes.nl/VanLeeuwenGlas/vanleeuwen.css Now yes, eahc image is the same size, but look: #fotos div { float: left; margin: 2px 5px; display: inline; /*IE 6*/ } #fotos img { width: 177px; height: 232px; display: block; } #fotos p { padding-left: 1px; font-size: .8em; } Code (markup): The divs aren't carrying the height and width here, but they could, no problem... meaning the images would NOT have the set height and width, so they could be whatever size you want them, so long as they're not bigger than the divs. I think the only reason I wrapped divs around everything in the first place was because I needed to wrap an image/text pair, and that was easiest... had there only been the foto's, I would have just floated them instead. I could be wrong, but I think the lack of set height on everyone is the problem. Otherwise, Gary'll come in here and say, use display: inline-block (and the moz version to help our retarded friend Firefox along : ) which he likes to use for this sort of thing, instead of floats.