Jump to content

Table not dynamic sizing.


chownsy

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)

Link to comment
Share on other sites

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

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

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

Edited by niche
Link to comment
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

Link to comment
Share on other sites

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

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

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
Link to comment
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.

Link to comment
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?

Link to comment
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>

Link to comment
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
Link to comment
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?

Link to comment
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.

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
×
×
  • Create New...