Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder ArcticFox's Avatar
    Join Date
    Jan 2004
    Location
    Vostok Station, AQ
    Posts
    602
    Thanks
    35
    Thanked 3 Times in 3 Posts

    Question Like the drink, only not spelt the same...

    You know how if you line up images side-by-side:

    <img src="image.gif"><img src="image.gif"><img src="image.gif">

    ...when you squeeze the page, the end images will drop down to the next line? I'm wanting to do something like that, but with tables. Each table looks like this:


    Code:
    <table style="font-size:11px; text-align:center; background-color:#666666; margin:0px; color:#ffffff;">
    <tr><td>
    
    Mustangs
    
    </tr></td><tr><td>
    
    <a href="http://tinyurl.com/3aph64"><img src="http://tinyurl.com/3aph64"  width="100" height="100" style="background-color:#c0c0c0; border:1px solid #000000;"></a>
    </tr></td><tr><td>
    <form>
    <a href="javascript:void(0);" style="border:1px solid #cfcfcf; margin:0px 3px;">Add to Cart</a>
    </form>
    
    
    </td></tr></table>

    I have about 30 of those and I'd like to just put them <center>ed on the page without having to line them up in sets of four. When the page gets wider, I'd like to see more images jump up to the top row, and the opposite when the page is squeezed down; still with all images in the rows centered.

    Is this possible to do?

    Thank.
    <div> - putting your mind in a box since 1997

  • #2
    New Coder
    Join Date
    Sep 2007
    Posts
    16
    Thanks
    0
    Thanked 1 Time in 1 Post
    hmm. darn i can't remember how tables behave. when you got more than one. do they automatically go below each other? i think maybe...

    if you don't mind switching over to divs, i think this is definately doable using div boxes instead of tables. i think all you have to do is float:left on all of them. and they'll adjust accordlingly just as you described.

    in order to follow the format you want to accomplish, you might actually end up with 30 of these isntead.

    Code:
    <div class="wrapper">
    <div class="title">
    Mustang
    </div>
    <div class="img">
    <insert your img url clikty thing here>
    </div>
    </div>
    i have obviously exluded a lot of the important styling and mechanics to actually accomplish the whole idea like width's and stuff.

    but for the important part of this whole thing, your styles should have the float:left style like below

    Code:
    .wrapper {float:left}
    .title {whatever stylings you have up there like font and junk}
    yah. forgive me for being a bit lazy and not giving you like exact code. but i think maybe you know how to do that alredy and don't want to take any of the fun out of it for ya. bad thing though now that i remember, these buggers won't center themselves cause of the float. so... you will most likely need a wrapper div holding all these things inside it. and then you can center that! and maybe if you give it width:100% then you'll still get the effect you want when the screen shrinks or grows.

    gl


    ps. for any real pro's out there, feel free to correct me if i'm wrong. i'm just learning too and from my experience, i think this is what i would do.
    Last edited by Tact; 09-29-2007 at 04:28 AM.

  • Users who have thanked Tact for this post:

    ArcticFox (09-29-2007)

  • #3
    Regular Coder
    Join Date
    Feb 2007
    Location
    Seattle
    Posts
    153
    Thanks
    5
    Thanked 9 Times in 9 Posts
    This seems to give the effect you described:

    Code:
    body {margin-left:10%; margin-right:10%}
    table {float:left}
    Gary
    Last edited by garydarling; 09-29-2007 at 02:09 PM. Reason: Left something out

  • Users who have thanked garydarling for this post:

    ArcticFox (09-29-2007)

  • #4
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    a non table route and the images need to be the same height for the desired effect.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>art photo image visual perception</title>
    <style type="text/css">
    #content {
    width: 80%;
    margin: 0 auto;
    border: 2px solid #000;
    text-align: center;
    }
    #content a {
    display: inline-block;
    display: -moz-inline-grid;
    _display: inline-block;
    width: 150px;
    height: 150px;
    margin: 10px;
    background: #ccc;
    }
    </style>
    </head>
    <body>
    <div id="content">
    <a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a>
    </div>
    </body>
    </html>
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • Users who have thanked harbingerOTV for this post:

    ArcticFox (09-30-2007)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •