|
|||||||||
|
|||||||||
| |||||||||
|
|
|
| |||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
Dev Shed Forums Sponsor:
|
|
#1
August 14th, 2003, 07:52 PM
|
|||
|
|||
|
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
August 15th, 2003, 02:47 AM
|
||||
|
||||
|
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
__________________
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. Ask a better question, get a better answer. Last edited by kk5st : August 15th, 2003 at 03:30 AM.
|
|
#3
August 15th, 2003, 05:57 PM
|
|||
|
|||
|
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.
|
|
#4
August 15th, 2003, 10:42 PM
|
|||
|
|||
|
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.
|
|
#5
August 16th, 2003, 12:33 AM
|
||||
|
||||
|
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
|
|
#6
August 16th, 2003, 03:09 AM
|
||||
|
||||
|
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
__________________
[ - Random Thoughts - | - Killer Klowns - | - Automated Jukebox - | - Composite Sketch - | - About Nunzio - ]
|
|
#7
August 16th, 2003, 08:36 AM
|
|||
|
|||
|
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.
|
|
#8
August 16th, 2003, 09:26 AM
|
||||
|
||||
|
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!
|
|
#11
August 16th, 2003, 02:11 PM
|
|||
|
|||
|
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
|
|
#12
August 16th, 2003, 03:56 PM
|
|||
|
|||
|
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. 
|
|
#14
August 17th, 2003, 03:06 AM
|
||||
|
||||
|
Quote:
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
|
|
#15
August 18th, 2003, 04:54 PM
|
||||
|
||||
|
Quote:
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.
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
