Jump to content
chownsy

Table not dynamic sizing.

Recommended Posts

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)

Share this post


Link to post
Share on other sites

Looks good to me. There's no point to making everything too small. That's especially true on mobile devices.

Share this post


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

Share this post


Link to post
Share on other sites

I don't see anything sliding behind anything (FF and ie9). EDIT: Thumbnails look good too.

Edited by niche

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

I don't get that at all. Is it just Chrome?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Dsonesuk, how did you find that? Firebug didn't shoe errors and I didn't notice any in the link.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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 by dsonesuk

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
plus i wouldn't use a table anyway.
Good point..

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

Float your smaller divs in a wrapper div. Viola!

Share this post


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

Share this post


Link to post
Share on other sites

Yes, but please post your css first so we can build on your model. EDIT; Sorry donesuk. I didn't refresh my screen.

Edited by niche

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...