Shakazahn Posted May 6, 2009 Share Posted May 6, 2009 I've read some about tableless on the net and I really don't get the point, what's wrong with using tables for layout?Sites made with tables seem to work just as fine as without them, unless there's some hidden technical disavantage on using tables I don't see why shouldn't we use it for layout.Also, one question that I have is how would you format a page to look like this:The main point is that body must occupy all of the screen that's left after the menu, so I don't bother which resolution the viewer's using (the menu has a fixed width, while the body's width is everything else on screen - even if it's resized).I've seen this kind of layout on some blogs and it's what I'm trying to do, though I can't do this without using a table.Any help is welcome, thanks. Link to comment Share on other sites More sharing options...
RyanReese Posted May 6, 2009 Share Posted May 6, 2009 Ok just make a <div id="header">Header</div> with the fixed width.THen next make a <div id="container"> with a fixed width/ a background image wide enough to fit..and repeat it -y (make the image small vertically so it can repeat.)Then have the body div...fixed width and float it left. same thing for the right sidebar. Then again for thearea underneith.Tables aren't semantic...so yes it is "technically" wrong not to use a proper CSS structure. Link to comment Share on other sites More sharing options...
RyanReese Posted May 6, 2009 Share Posted May 6, 2009 <!doctype html><html><head><title>ess</title></head><style type="text/css">#header{ width:700px; height:100px; background:gray; border:1px solid black;}#container{ width:700px; border:1px solid black; background:red url(imageHereToRepeat.jpg) repeat-y; overflow:hidden;}#main{ width:480px; border:1px solid black; float:left; height:400px; background:lightgray; margin-right:10px;}#side1,#side2{ width:206px; background:darkgray; border:1px solid black; margin-bottom:10px; height:200px}</style></head><body><div id="header">Header</div><div id="container"><div id="main">Body</div><div id="side1">Side1</div><div id="side2">Side2</div></div> Link to comment Share on other sites More sharing options...
Shakazahn Posted May 6, 2009 Author Share Posted May 6, 2009 Ok just make a <div id="header">Header</div> with the fixed width.THen next make a <div id="container"> with a fixed width/ a background image wide enough to fit..and repeat it -y (make the image small vertically so it can repeat.)Then have the body div...fixed width and float it left. same thing for the right sidebar. Then again for thearea underneith.Tables aren't semantic...so yes it is "technically" wrong not to use a proper CSS structure.Thanks for the reply but this isn't what I was trying to do, I mean, well, it is, but I don't want the "content" (body) having a fixed width.I use a 1440 wide monitor and I'm pretty much used to it, and since most viewers that come to the site use 1024x768, I'm trying to set up a resizable layout.But to get the resizable I'd need to use %s, but on a 1024x768 for example a 80% body and 20% menu looks good, but on my 1440 doesn't (the menu just gets... HUGE!), so I'm trying to set a fixed width for the menu only, and leave the body with a % of what's left.This is what I did:<table style="width:100%;"><tr><td colspan="2" style="width:100%;"><div id="head" style="border:1px solid black;">HEADER</div></td></tr><tr><td style="width:100%;"><div id="body" style="border:1px solid black;">BODY</div></td><td style="width:300px;"><div id="menu" style="border:1px solid black;">MENU</div></td></tr></table> This way the body will resize according to the browser but the menu won't, and it will fit on any resolution. (Sorry if I'm not being clear, just copy and paste, then resize your browser to understand what I mean)And since I've been reading about this tableless stuff all over I'd like to know if there's a way to do something like this without the table. Link to comment Share on other sites More sharing options...
jeffman Posted May 6, 2009 Share Posted May 6, 2009 This should work. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title></title> <style type="text/css"> * { padding: 0; margin: 0; } #header { height: 100px; background-color: #f33; } #sidebar { width: 100px; float: right; } div.nav { height: 300px; background-color: #22f } #bod { height: 600px; background-color: #2f2; } </style> </head> <body> <div id="header"> HEADER </div> <div id="sidebar"> <div class="nav"> Nav top </div> <div class="nav"> Nav Bottom </div> </div> <div id="bod"> Body </div> </body></html> Link to comment Share on other sites More sharing options...
Ingolme Posted May 6, 2009 Share Posted May 6, 2009 It is really simple. <div> elements take the full width of the screen. This would work: <div id="header"><h1>Page title</h1></div><div id="menu"> <div class="box"> Menu box 1</div> <div class="box">Menu box 2</div></div><div id="body">Main content</div><div id="footer"> #right { float: right; width: 300px; margin-right: 5px;}#body { margin: 310px; background-color: blue;}#footer { clear: both;}.box { margin: 3px 0; background-color: red;} The advantage with tableless layouts is that it is a lot easier to redesign, loads faster and saves bandwidth. And if you happen to want to completely rearrange your page, you don't need to modify most of the HTML, just apply different CSS to the <div> elements to get them to go where you want them to. Link to comment Share on other sites More sharing options...
Shakazahn Posted May 6, 2009 Author Share Posted May 6, 2009 Hum yep these 2 works but I can't use the borders like I want.Here's the site I'm setting up (incomplete, I've got some stuff up but I'm working on the design still): http://daniel.holywannapita.com/index.phpIt happened that I tried to show it to a friend of mine, who was using 800x600 (O_O) and things were just... huge, offscreen and weird (also, he was using IE 6 ugh). So I'm trying to set it so it can be viewed in any resolution, using %s.Currently I'm using tables to look like this but I want it to be div only, someone complained that it doesn't look good using tables on a site at all @_@ Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.