What the best and proper way to go about making a 3 column list. Each list will have 5 items in it and each of the 3 columns will have a border. The columns will need a spacing of about 10px. Should I use Tables or CSS? Thanks for any input.
Table for listing? if it is price listing yeah it can work out. Other ways you could go with irregular list (<ul><li></li></ul> 3 sets of that one).
Since you know the number of elements is fixed, I'd use three lists, all the same class, and float them all left.
you can also used a frameset if you want to look the site itself having a 3columns. Then in each column you can add ul,li or ul or even a table itslef
If the three column list is going to take up the entire website, I would use div's if it was just going to be a simple content box on the site with a three column list, I would use Tables (<table></table>) with Rows and Columns (<tr><td></td></td>) and lists for bullets and ect. (<li> </li>). Hope I helped in some way!
That's a certified BAD IDEA. Frames were originally meant as a stop-gap measure back during the mid-90s when computers couldnt' handle proper layouts (and people didn't know better). Not only are they inaccessible, but they also overburden the server and the browser unnecessarily. Seriously, take them out to the back of the woodshed and give them the Old Yeller treatment. Now.
Let's up the ante, how about some code. Now I put a border on the UL's so you can see them... I put each column in a div so that we could declare the width in % to break it up evenly across the screen... that DIV could be gotten rid of if you are working in a fixed width layout. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"><head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>3 lists side by side scaled to fit</title> <style type="text/css"> * { margin:0; padding:0; } .scaleList { width:33%; float:left; position:relative; left:0.5%; } .scaleList ul { margin:5px; list-style:none; border:1px solid #000; padding:0.5em; } </style> </head><body> <div class="scaleList"> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> </ul> </div> <div class="scaleList"> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> </ul> </div> <div class="scaleList"> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> </ul> </div> </body></html> Code (markup): Some explanations: Outer DIV - As mentioned before we have the extra container so we can do % width... Normally I'd declare the width on the UL but due to the margins desired we can't mix metrics... Doing it this way has an advantage though, our code will work in IE 5.x. Another problem is that Opera will not do fractions of a % as width, so we're stuck using 33%. By moving the content relative to the left half a % (which opera will do) we can 'center' the div's instead of having a 1% 'leftover' on the right-hand side.. UL - margins stack, so that 5px margin between them becomes 10px, but the left and right only get 5px. The half a % screen width adjustment to the container would be 5px at 1000 pixels wide, so it's a 'close enough' calculation total. THEORETICALLY you could make that three lists of lists, but the CSS for that is more convoluted than necessary. Quick, simple and dynamic... validates and works in IE 5.5, 6, 7, Firefox, Safari and Opera.
Well here is the current live example. See the 3 column list toward the bottom of this page: http://www.campusgrotto.com Code (markup): And here is current code example: <table border="0" margin="0" cellpadding="0" cellspacing="15" width="100%" align="center"> <tr><td align="left" valign="top" width="225px" style="border:solid 1px #cccccc; padding: 0px; font-size:90%;"> <center><div style="background: url(background.gif) repeat-x #ececec; height:20px;"><b>Title 1</b></div></center> <ul> <li style="padding-top:3px;"><a href="#">Item 1</a></li> <li style="padding-top:3px;"><a href="#">Item 2</a></li> <li style="padding-top:3px;"><a href="#">Item 3</a></li> <li style="padding-top:3px;"><a href="#">Item 4</a></li> <li style="padding-top:3px;"><a href="#">Item 5</a></li> </ul> </td><td align="left" valign="top" width="225px" style="border:solid 1px #cccccc; padding: 0px; font-size:90%;"> <center><div style="background: url(background.gif) repeat-x #ececec; height:20px;"><b>Title 2</b></div></center> <ul> <li style="padding-top:3px;"><a href="#">Item 1</a></li> <li style="padding-top:3px;"><a href="#">Item 2</a></li> <li style="padding-top:3px;"><a href="#">Item 3</a></li> <li style="padding-top:3px;"><a href="#">Item 4</a></li> <li style="padding-top:3px;"><a href="#">Item 5</a></li> </ul> </td><td align="left" valign="top" width="225px" style="border:solid 1px #cccccc; padding: 0px; font-size:90%;"> <center> <div style="background: url(background.gif) repeat-x #ececec; height:20px;"><b>Career</b></div></center> <ul> <li style="padding-top:3px;"><a href="#">Item 1</a></li> <li style="padding-top:3px;"><a href="#">Item 2</a></li> <li style="padding-top:3px;"><a href="#">Item 3</a></li> <li style="padding-top:3px;"><a href="#">Item 4</a></li> <li style="padding-top:3px;"><a href="#">Item 5</a></li> </ul> </td></tr></table> Code (markup): It seems to be displaying fine. Just wanted to see if there was a better way to code this?
Well, the table is going to take time to render and is wasted HTML, the CENTER tag has no business being used in HTML anymore, you shouldn't be inlining all those redundant properties which you could declare just once in the CSS, and IMHO that CENTER/DIV/B nest should probably just be a header tag... and since they are all fixed width that simplifies the CSS greatly... especially since you aren't declaring a px font size with a px container height, so they text is chopped off on 'large font' machines. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"><head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>3 lists side by side scaled to fit</title> <style type="text/css"> * { margin:0; padding:0; } body { padding:8px; } .scaleList { width:720px; margin:0 auto; } .scaleList div { width:225px; margin:0 5px; border:solid 1px #CCC; float:left; font-size:90%; } .scaleList h2 { height:20px; background:#EEE url(background.gif) repeat-x; font:bold 16px/20px arial,helvetica,sans-serif; text-align:center; } .scaleList ul { padding:2px 5px 5px 32px; } .scaleList li { padding-top:3px; } </style> </head><body> <div class="scaleList"> <div> <h2>Title 1</h2> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> </ul> </div> <div> <h2>Title 2</h2> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> </ul> </div> <div> <h2>Title 3</h2> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> </ul> </div> </div> </body></html> Code (markup): That's about what I'd do there. It's about 200 bytes less, and moves it into the CSS which if you place in an external file gets cached should you use the same style across multiple pages... and keeps the HTML much cleaner and easier to read. Looking at your document I see a whole BUNCH of issues that are likely causing you headaches... a blank line and a XML prolog are putting IE into quirks mode meaning you have to code around that problem, if you need to rely on a BASE tag you probably have a poorly thought out directory structure, multiple tables around single elements (if it's just one thing, it doesn't need a table), nested tables with no properties that add to the appearance, DIV's that don't do anything that couldn't be applied to the sub elements, inlined presentation, javascript for things CSS can now do BETTER like hover effects, elements that only work with .js on and do not display/work with .js off, inlined styles on elements with ID's, etc, etc, etc. With 121 validation errors being the icing on the cake. Basically you've got 25k of HTML and 8k of CSS doing what by my estimates shouldn't take more than 8-12K of HTML and CSS COMBINED. If I have the time later tonight or tomorrow morning I'll toss together a quickie rewrite to show you what I mean. If you can grasp the code you have now, this is gonna give you the bug-eyes on how simple it is. Simplify, Simplify, Simplify. You've got 1997 style HTML in there - this isn't 1997. -- edit -- OH WAIT! Joomla! Now that explains a lot
That would be awesome. Maybe the problems you talk about are in my Joomla Template... As far as the 3 column list, looks good...I'll test that out. Not sure if I want a fixed width though, I think % is the way to go. Like a 100% width on the scaleList and a 33% on the 3 divs inside... Will that work? Thanks again
33% for each of three columns and 100% on the container is pretty classic. Go stick the code in and play with your browser width. Should be beautiful.