Page 1 of 2 12 Last
  • Jump to page:
    #1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2002
    Posts
    8
    Rep Power
    0

    converting simple html table to CSS


    How can I recreate this table as CSS? I just need the images distributed evenly on the same line. I've tried so many variations but can't get it right.
    Code:
    ------------------
    |  x     x     x  |
    ------------------
    As a table, it is just a row with three columns...and an image centered horizontally in each. My table is 700 pixels wide and has a 1 pixel black border. Oh, and the table is centered on the page.

    If I have each image as a separate div, each with a different margin-left attribute, then line breaks are inserted...which I don't want. I also don't want them all centered, I want them distrbuted evenly throughout the row. Is this possible? I tried for hours a few days ago but gave up and this is the first time I've had the patience to return to the subject.

    I'm not sure if I was detailed enough, ask questions if need be. Thanks very very much.
  2. #2
  3. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1956
    Finally, one I can answer.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4 Final//EN">
    <html> <head>
    <title>line up the pics</title>
    
    <style type="text/css">
    #container {position: absolute;
                width: 700px;
                border: 1px solid black;
                top: 25px;
                left: 50%;
                margin-left: -350px;
               }
    
    .picholder {width: 31%;
                float: left;
    /* putting some padding, border, and margin just to delimit the box*/
    /* remove this stuff for a more accurate division of the space, or */
    /* figure out the pixel count (remembering that IE 5.x is a moron) */
                padding: 2px;
                border: 1px solid blue;
                margin: 2px;
               }
    
    .picholder img {display: block;
    /* here's another way to center an element.  compare to #container */
                    margin-left: auto;
                    margin-right: auto;
                   }
    
    
    </style>
               
    </head>
    
    <body>
    
    <div id="container">
    
    <div class="picholder">
       <img src="" width="100px" height="50px" />
    </div>
    
    <div class="picholder">
       <img src="" width="100px" height="50px" />
    </div>
    
    <div class="picholder">
       <img src="" width="100px" height="50px" />
    </div>
    
    <!--  text placed here will take up the width of the
    #container and flow naturally.  no need to create extra
    <tr><td> elements
    -->
    
    </div>
    
    </body> </html>
    Look how easy it is to read the HTML. Compare that to using tables and all their attributes.

    The code should be sufficiently commented. Ask if you don't grok something.

    cheers,

    gary
    Last edited by kk5st; August 15th, 2003 at 03:30 AM.
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  4. #3
  5. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2002
    Posts
    8
    Rep Power
    0
    thanks! it worked perfectly. Combining the left: 50% and margin-left: -350px is clever -- it took me a minute to understand it, but it works great.

    My layout works perfectly in IE6, but it isn't quite right in Mozilla. The part that you wrote works right (thanks again!), but the rest isn't centered like it is in IE. I tried to borrow your use of left:50% and margin-left:350px to center my page instead of using text-align:center like I do now, but it made my page a disaster in BOTH browsers, so I undid it. Here is a link to the layout and the CSS:

    http://www.jimmyfred.com/redblack2.htm
    and
    http://www.jimmyfred.com/redblack2.css

    Is there a cross-browser way to line up the rest of the page with the menu bar? Thanks very very much.

    a screenshot of how the page looks in Mozilla Firebird
    Last edited by pixalone; August 15th, 2003 at 06:29 PM.
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Sep 2000
    Posts
    763
    Rep Power
    0
    It is because of the left:50% and the margin-left. It is centering the element in the page but not in your layout. You need to just move the left to that of your main layout.
  8. #5
  9. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1956
    Or, you could put #container in the <div class="content"> Absolute position is made relative to the parent element. Right now the parent element is the canvas.

    FWIW, I kinda like the offset.

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  10. #6
  11. Insignificant Peon
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Location
    Tharsis Ridge (Martian lowlands)
    Posts
    194
    Rep Power
    12
    kk5st...

    Good job!

    OK. Ive been reading a lot in these forums lately, and I "think" I have decided to convert my site from tables to pure CSS (a bit at a time of course). I'm no CSS guru, but you appear to be.

    So, I've decided to implement your script above on a temp page at my site. But I ran into a problem with Netscape/Mozilla browser.

    kk5st... If you can, please look at this temporary page where I just implemented your above code.

    The page displays FINE in IE and Opera browsers. I have temporarily left container border set to 1px solid black only to show HORRID width problem in Netscape/Mozilla browser when using a percentage for width in container. But I NEED the percentage of 100% and not a fixed width in pixels in order to evenly distribute images horizontally at all screen resolutions from 800x600 up to 1600x1200.

    SO... what do I do to prevent Netscape/Mozilla from incorrectly thinking that the page width continues WAY over to the right hand side somewhere in limbo and lost offscreen, therefore creating a horrid horizontal scrollbar???

    Thanks in advance,
    Nunzio
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Sep 2000
    Posts
    763
    Rep Power
    0
    Umm it's not a "horrid width" problem of mozilla/ns since Mozilla is the standards compliant one. IE is incorrectly displaying the object to begin with.

    http://www.glish.com/css/hacks.asp
    Last edited by Eclipce; August 16th, 2003 at 08:46 AM.
  14. #8
  15. Insignificant Peon
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Location
    Tharsis Ridge (Martian lowlands)
    Posts
    194
    Rep Power
    12
    Thanks Eclipce!!

    Actually, I kinda managed to work it out. I realized that I had to place all the divs,spans,css AFTER all tables on the page, and then change my 100% to 75% instead. Why? LOL. I have NO freakin idea. But it worked out "kinda" OK.

    Full working page at site...
    http://nunzioweb.com/photos.shtml

    If you spot any redundancy or errors, let me know. I'm from the "old" HTML school of tables and whatnot. CSS is fairly new to me.

    Thanks!
  16. #9
  17. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Sep 2000
    Posts
    763
    Rep Power
    0
    Ahhh! Those pics are just scary
  18. #10
  19. Insignificant Peon
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Location
    Tharsis Ridge (Martian lowlands)
    Posts
    194
    Rep Power
    12
    LOL. Yeah. I know. Freaky!!!
  20. #11
  21. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Sep 2000
    Posts
    763
    Rep Power
    0
    For any of those that did not catch the link at the bottom of the glish site here is a good page on the box model problem in IE 5.
    http://www.tantek.com/CSS/Examples/boxmodelhack.html
  22. #12
  23. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2002
    Posts
    8
    Rep Power
    0
    Thanks kk5st and Eclipce - thanks to you guys my layout is now completely table-free and working great.

    And Eclipce, thanks for the link about the box model hack - I think I implemented it correctly in my updated stylesheet.
  24. #13
  25. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Sep 2000
    Posts
    763
    Rep Power
    0
    Glad I could help
  26. #14
  27. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1956
    Actually, I kinda managed to work it out. I realized that I had to place all the divs,spans,css AFTER all tables on the page, and then change my 100% to 75% instead. Why? LOL. I have NO freakin idea. But it worked out "kinda" OK.
    Remember that measurements refer back to the parent element. Just as you had to allow for the table element on the left (left: 188px; ), you have to allow for that space not being available on the (parent) canvas. Correctly, relative size attributes are only suggestions, so when the browser window is wider than ~800px (in this case), the <div> will stretch out to accommodate the larger window. You can limit the amount of stretching or shrinking with the max-width: and min-width: attributes.

    Remember, too, that the padding and border are in addition to the width. This is where the "box model hack" (referenced by Eclipce in another post, I believe) comes in. MSIE5.x stupidly does it wrong, which can cause some nasty surprises.

    Thank you, Nunzio, for the kind words. Would that I knew as much as you think I do

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  28. #15
  29. Insignificant Peon
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Location
    Tharsis Ridge (Martian lowlands)
    Posts
    194
    Rep Power
    12
    Thank you, Nunzio, for the kind words. Would that I knew as much as you think I do
    Don't sell yourself short, Gary. You know quite a bit about CSS, as was demonstrated above in your reply.

    Thanks for explaining. Makes perfect sense to me now.

    Hmmm.. now I'm wondering if I should add the padding and border values back in. As you had probably noticed, I had commented them out thinking they were superfluous.

    But I truly wonder how many people still use MSIE 5.x and haven't upgraded to MSIE 6.x yet.

    Is there anybody who can check that page with the older MSIE 5.x browser?? It's pointless for me to add/re-set those values without being able to actually SEE the results.
Page 1 of 2 12 Last
  • Jump to page:

IMN logo majestic logo threadwatch logo seochat tools logo