chownsy Posted August 12, 2012 Share Posted August 12, 2012 I have a table layout for my picture gallery live example : http://test.repsolhondanc24.co.uk/ When you minimise it or have it on a smaller screen resolution the table does not reduce in size like the other page content section does. Where am I going wrong. I want the table to be all the same size for width and heigh per square alternatively is there a better picture gallery I can use with out using a table (I'm keeping the light-box feature) Link to comment Share on other sites More sharing options...
niche Posted August 12, 2012 Share Posted August 12, 2012 Looks good to me. There's no point to making everything too small. That's especially true on mobile devices. Link to comment Share on other sites More sharing options...
chownsy Posted August 12, 2012 Author Share Posted August 12, 2012 Looks good to me. There's no point to making everything too small. That's especially true on mobile devices. The layout I think is good but its just how if i resize the screen it goes behind the right sidebar and nt reduce in size like I was hoping (but keep the thumbnails the same size) Link to comment Share on other sites More sharing options...
niche Posted August 12, 2012 Share Posted August 12, 2012 (edited) I don't see anything sliding behind anything (FF and ie9). EDIT: Thumbnails look good too. Edited August 12, 2012 by niche Link to comment Share on other sites More sharing options...
chownsy Posted August 12, 2012 Author Share Posted August 12, 2012 try this page http://test.repsolhondanc24.co.uk/restoration-gallery.html if that works fine too then it must be chrome Link to comment Share on other sites More sharing options...
niche Posted August 12, 2012 Share Posted August 12, 2012 Thumbnails all stay the same size as I adjust the display area down. Just as I would expect. Are we talking about the samething?I Link to comment Share on other sites More sharing options...
chownsy Posted August 12, 2012 Author Share Posted August 12, 2012 (edited) this is what it does my end on chrome Edited August 12, 2012 by chownsy Link to comment Share on other sites More sharing options...
niche Posted August 12, 2012 Share Posted August 12, 2012 I don't get that at all. Is it just Chrome? Link to comment Share on other sites More sharing options...
dsonesuk Posted August 12, 2012 Share Posted August 12, 2012 Is it because the non found image icons are causing it to show wider than normally, try making all the thumbnail show correctly and see what happens. Link to comment Share on other sites More sharing options...
niche Posted August 12, 2012 Share Posted August 12, 2012 Dsonesuk, how did you find that? Firebug didn't shoe errors and I didn't notice any in the link. Link to comment Share on other sites More sharing options...
dsonesuk Posted August 12, 2012 Share Posted August 12, 2012 Also table, tr, td { background-color: #E63E00; border: 5px solid red; color: #FFFFFF; font-family: "arial"; margin-left: auto; margin-right: auto; padding: 1%; text-align: center; width: 90%;} making table cells <td> width:90%; can't be right! would be around 25% not allowing for spacing padding etc. Link to comment Share on other sites More sharing options...
dsonesuk Posted August 12, 2012 Share Posted August 12, 2012 (edited) Dsonesuk, how did you find that? Firebug didn't shoe errors and I didn't notice any in the link. just by looking at it, they are of fixed size, they don't adjust like normal images, so some setting maybe default are causing them to be this way, but it could be just down to 90% width td cell elements. you need to reset td width, and maybe set max-width for img like so table, tr, td{background-color:#E63E00;border:5px solid red;width:90%;margin-left:auto;margin-right:auto;padding:1%;text-align:center;font-family:"arial";color:#FFFFFF;} table tr td{width:25%; } table tr td a img{max-width:90%;} This should take care the non found image icon fixed width, and seems to shrink proportionally now. Edited August 12, 2012 by dsonesuk Link to comment Share on other sites More sharing options...
niche Posted August 12, 2012 Share Posted August 12, 2012 Does that apply to just table cells? I put imgs in divs all the time with a width and and haven't experienced chownsy's problem. Link to comment Share on other sites More sharing options...
dsonesuk Posted August 12, 2012 Share Posted August 12, 2012 Niether have i but i haven't used fluid width design like his, so i have never encountered this problem, plus i wouldn't use a table anyway. Link to comment Share on other sites More sharing options...
niche Posted August 13, 2012 Share Posted August 13, 2012 plus i wouldn't use a table anyway. Good point.. Link to comment Share on other sites More sharing options...
chownsy Posted August 13, 2012 Author Share Posted August 13, 2012 what would you use instead of a table? Link to comment Share on other sites More sharing options...
dsonesuk Posted August 13, 2012 Share Posted August 13, 2012 Block element such as div. Link to comment Share on other sites More sharing options...
chownsy Posted August 13, 2012 Author Share Posted August 13, 2012 Can you give me an example I know you can do a row like this <div class="imageRow"> <div class="set"> <div class="single first"> <a href="" rel="lightbox" title=""><img src="" alt="" /></a> </div> <div class="single"> <a href="" rel="lightbox" title=""><img src="" alt="" /></a></div> <div class="single"> <a href="" rel="lightbox" title=""><img src="" alt="" /></a> </div> <div class="single last"> <a href="" rel="lightbox" title=""><img src="" alt="" /></a> </div> </div> but then how do you do more than 1 row? Link to comment Share on other sites More sharing options...
niche Posted August 13, 2012 Share Posted August 13, 2012 Float your smaller divs in a wrapper div. Viola! Link to comment Share on other sites More sharing options...
chownsy Posted August 13, 2012 Author Share Posted August 13, 2012 Can you give a small example as the last one I tried just ended up with a row of 12 photos and not 3x 4 rows. Link to comment Share on other sites More sharing options...
dsonesuk Posted August 13, 2012 Share Posted August 13, 2012 <style type="text/css">body { background: none repeat scroll 0 0 #000014; margin-left: auto; margin-right: auto; max-width: 1500px; min-width: 1000px;}#content { margin-left: 280px; margin-right: 280px; margin-top: 0;}.gallery_wrapper {background-color:#E63E00;width:90%;border:5px solid red;margin-left:auto;margin-right:auto;padding: 15px 1%;text-align:center;font-family:"arial";color:#FFFFFF; overflow:hidden; font-size: 0;}.gallery_wrapper div { display: inline-block; width: 24.4%; zoom:1; *display:inline;}.gallery_wrapper div a { border: 5px solid red; display: block; margin:1px;}.gallery_wrapper div a img{margin: 5px;max-width:74%;border:none;}.gallery_inner { font-size: 0; overflow: hidden;}</style> <div id="container"> <div id="content"> <div class="gallery_wrapper"> <div> <a href="" rel="lightbox" title=""><img src="../images/alien/1cha_imgash.jpg" alt="" /></a> </div> <div> <a href="" rel="lightbox" title=""><img src="../images/alien/1cha_imgbrett.jpg" alt="" /></a> </div> <div> <a href="" rel="lightbox" title=""><img src="../images/alien/1cha_imgdallas.jpg" alt="" /></a> </div> <div> <a href="" rel="lightbox" title=""><img src="../images/alien/1cha_imgkane.jpg" alt="" /></a> </div> <div> <a href="" rel="lightbox" title=""><img src="../images/alien/1cha_imgash.jpg" alt="" /></a> </div> <div> <a href="" rel="lightbox" title=""><img src="../images/alien/1cha_imgbrett.jpg" alt="" /></a> </div> <div> <a href="" rel="lightbox" title=""><img src="../images/alien/1cha_imgdallas.jpg" alt="" /></a> </div> <div> <a href="" rel="lightbox" title=""><img src="../images/alien/1cha_imgkane.jpg" alt="" /></a> </div> <div> <a href="" rel="lightbox" title=""><img src="../images/alien/1cha_imgash.jpg" alt="" /></a> </div> <div> <a href="" rel="lightbox" title=""><img src="../images/alien/1cha_imgbrett.jpg" alt="" /></a> </div> <div> <a href="" rel="lightbox" title=""><img src="../images/alien/1cha_imgdallas.jpg" alt="" /></a> </div> <div> <a href="" rel="lightbox" title=""><img src="../images/alien/1cha_imgkane.jpg" alt="" /></a> </div> </div> </div></div> Link to comment Share on other sites More sharing options...
niche Posted August 13, 2012 Share Posted August 13, 2012 (edited) Yes, but please post your css first so we can build on your model. EDIT; Sorry donesuk. I didn't refresh my screen. Edited August 13, 2012 by niche Link to comment Share on other sites More sharing options...
chownsy Posted August 13, 2012 Author Share Posted August 13, 2012 Got one issue now, Some pictures are 75px high and others are 133px high. The horizontal layout is perfect but the grid is all in different heights and it looks rubbish. In the CSS file i know I can put a height:133px; value in but then it wont be dynamic and also I am confused as to which part of the CSS I put it under, If I put it under .gallery_wrapper div it makes no difference.gallery_wrapper div a it makes the grid all wonky.gallery_wrapper div a img makes it perfect but stretches all the pictures to that height which is a no no. Do i need to add another element to the CSS to determine the height of the rows? Link to comment Share on other sites More sharing options...
dsonesuk Posted August 13, 2012 Share Posted August 13, 2012 try body { background: none repeat scroll 0 0 #000014; margin-left: auto; margin-right: auto; max-width: 1500px; min-width: 1000px;}#content { margin-left: 280px; margin-right: 280px; margin-top: 0;}.gallery_wrapper {background-color:#E63E00;width:90%;border:5px solid red;margin-left:auto;margin-right:auto;padding: 15px 1%;text-align:center;font-family:"arial";color:#FFFFFF; overflow:hidden; font-size: 0;}.gallery_wrapper div { border: 5px solid red; display: inline-block; line-height: 143px; width: 21.4%; zoom:1; *display:inline; margin: 1px; vertical-align: middle;}.gallery_wrapper div a {margin: 1px;vertical-align: middle;}.gallery_wrapper div a img{ max-width: 74%; vertical-align: middle; border:none;}.gallery_inner { font-size: 0; overflow: hidden;} IE was being its usual pain in the ###### self, this is restricted to highest thumbnail height of 133px, so if you can keep thumbnail portrait images no higher than this it should be fine. Link to comment Share on other sites More sharing options...
chownsy Posted August 13, 2012 Author Share Posted August 13, 2012 Perfect thank you man you are god of this Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now