Gah...are tables seriously that bad?

[FishyMonkey78]

My site, The Metroid Hall (A work in progress) (http://www.metroidhall.com), is just three big tables. Now I see all people here saying how CSS for layouts is much simpler. How?

First of all, I thought that CSS compatiability currently isn't so great, so I was nervous to use absolute positioning.

Second, if you did use CSS for your layouts, what would you use? DIV and SPAN tags? Absolute and relative positioning, what?

Third, what do you prefer, tables or CSS?

[Dark Dragon]

It is more like the browsers themselves vary on the way they read CSS.

Tables aren't such a good thing if people are using text browsers..I think these browsers read text and can't read or distinguish from content and table specs. This can also confuse computers that have a voice to read to them..it also cannot distinguish from text content and code.

I think <div> tags are used but others as well I'm sure.

But now that I learned a bit about CSS..I probably will use that..it cleans up the code..makes it more W3C compliant.

[PeOfEo]

tables are bad because they were not intended to be used for layout, in the end they are more code because they have to go on all pages, and they will eat up your bandwidth. Css only needs to be downloaded and written one time to work on all of your pages nad css can break away for browsers that do not support it. It is the prefered layout method.

[FishyMonkey78]

^^Wait, what!? If CSS is disabled, what happens to the site?

[Paul Jr]

CSS can't be disabled, and the thing is, your website should be able to degrade well. As in, it should still be readable and functional without the CSS or any other type of formatting.

[FishyMonkey78]

So, if I use all sorts of CSS absolute positioning,and someone walks into my site with IE2, my site will still look the same, or relatively the same and good?!

[PeOfEo]

It will be accessable, but it will not look the same, it will be text based. But using tables you are likely to find your content not even there as in you will get a thing that says [inline] or something (thats what happens in lynx atleast).

[Jeff Mott]

If you want an example, I've attached a piece of a site recently developed.

After you see the documents:
Note that the style-less document still makes perfect sense both visually and structurally, and is very much usable. This also shows how versatile a CSS based design can be, especially if you ever wanted a redesign. The entire site, every single page, can be given a complete makeover by changing the one style sheet file.

[PeOfEo]

the last layout I made has a little different approach, I put the content at the top, the side menu below it, then the navigation last. Now I took out java script too because the visible property would not be supported without css, well here is what my latest work woult look like on an old browser.
http://knights.europe.webmatrixhosting.net/wfrp/index_no_css.html
here is is the page with css, in its full glory
http://www.paxonradio.vze.com

[Paul Jr]

I've been told that you should place your menu code below your content code, so people using screen readers don't have to tab through the navigation before they reach the content, is this true?

[PeOfEo]

Thats what I did, Not neccessarily just for screen readers though, just if something screwed up in the menus the content would still be there atleast. I put content before aestetics. But I put the side menus which will heave headlines etc in them before the navigation bar because they are still content.

[toicontien]

Check out this thread FishyMonkey78. It should answer all your questions.

http://forums.webdeveloper.com/showthread.php?s=&threadid=10167&highlight=table

[Avernus]

Tables only need to be d/l'd once as well if you use includes.
Plus, I see all these perfectly tableless sites, but where are the ones that follow standard designs? Header, left nav, body then footer? Seems as though most people leave off the footer. Anyone know why?

[pyro]

Maybe they just don't want it? Take a look at http://www.ryanbrill.com. Header, left content, right nav, and then a footer. Note that the content and navigation could easily be reversed.

[Avernus]

Ok well in the style sheet in the footer definition he/she has this note:

"clear: both; /*This is what makes the layout work*/"

^^ which is your own site (Just noticed that)

[pyro]

Yep, I threw that in so when/if people look through the stylesheet, the will realize that that little bit of CSS is very vital. :)

[Avernus]

Hmm cool, not familiar with the clear : both; stuff, I will try that. Thanks =)

[pyro]

It depends what you are doing. It is only needed because I wanted equal column lengths, and because I used floats.

[Avernus]

Another question for you. I'm still having an issue pushing down my footer as I put content in the other places. I saw somewhere, a note saying somethign about adding negative margin will push the footer down, but it just makes my content disappear when I personally implement it. Looking for a basic explanation on that if you know=)

Thanks!


#left {
position:relative;
width:137px;
float:left;
margin-left:-136px;/*must be 1px less than width otherwise won't push footer down */
padding-top:117px;

[pyro]

A link would be helpful.

[Avernus]

I dont have it uploaded to the server, I was just curious if you knew the reasoning behind the negative in general. I'll figure it out, but thanks

[pyro]

Yes, I do. I thought you had a specific question. Sorry.

A negative margin is used to move the element out of it's usual flow. For instance, a negative left margin of 136px would move the element 136px to the left (whereas a positive left margin of 136px would move it that amount to the right).

[Avernus]

Ahh ok. Not sure what they are doing, the width amount then the margin negative, but doesn't seem as though they would be related (width/margin-left). THank you! :)

[pyro]

You are welcome. :)

[Avernus]

Pyro- Ok I guess I have grown fond of your advice =) lol
I have a URL now and wanted you to see if you can tell me what im doing wrong. The left nav and the center body should be 100% to the footer at all times no matter what content is in there. Normally I can do this layout in 20 minutes manually coding tables everywhere, but I have decided to move forward with css and try and learn this so don't laugh too hard ;) Your help is much appreciated!

THanks!

-Julie

http://www.atlantametroappraiser.com/CKA/

[pyro]

Ok, I played around with it a bit and came up with this. Not perfect, but due to an IE bug that I haven't found a workaround for yet, it'll have to do for now.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
body {
margin: 0;
padding: 0;
}
#wrapper {
border: 1px solid #819ebb;
}
#header {
color: #000;
background: #fff;
border-bottom: 1px solid #819ebb;
}
#main {
padding: 5px;
margin-left: 150px;
/*comment line below if #nav is longer than #main*/
border-left: 1px solid #819ebb;
}
#nav {
float: left;
width: 150px;
/*uncomment line below if #nav is longer than #main*/
/*border-right: 1px solid #819ebb;*/
}
#footer {
color: #000;
background: #fff;
clear: both;
border-top: 1px solid #819ebb;
}
</style>

</head>

<body>
<div id="wrapper">
<div id="header">header with a bunch more text</div>
<div id="nav">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
</div>
<div id="main">
<p>The following text consists of a mock Latin which has been based
upon the average frequency of characters and word lengths of the English
language in order to reproduce a reasonably accurate overall visual
impression. Lorem ipsum dolor sit amet, consectetur adipscing elit, sed
diam nonnumy eiusmod tempor incidunt ut labore et dolore magna aliquam
erat volupat.</p>
<p>Et harumd dereud facilis est er expedit distinct. Nam liber a tempor
*** soluta nobis eligend optio comque nihil quod a impedit anim id quod
maxim placeat facer possim omnis es voluptas assumenda est, omnis dolor
repellend. Temporem autem quinsud et aur office debit aut tum rerum
necesit atib saepe eveniet ut er repudiand sint et molestia non este
recusand.</p>
</div>
<div id="footer">footer</div>
</div>
</body>
</html>

[pyro]

Ok, found a workaround for the problem. Now either column can be the longest without a problem. Here's the updated code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
body {
margin: 0;
padding: 0;
}
#wrapper {
border: 1px solid #819ebb;
background: url(images/background.gif) repeat-y;
}
#header {
color: #000;
background: #fff;
border-bottom: 1px solid #819ebb;
height: 1.2em; /*needed for IE 6*/
}
#main {
padding: 5px;
margin-left: 155px;
}
#nav {
float: left;
width: 150px;
}
#footer {
color: #000;
background: #fff;
clear: both;
border-top: 1px solid #819ebb;
}
</style>

</head>

<body>
<div id="wrapper">
<div id="header">header with a bunch more text</div>
<div id="nav">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
</div>
<div id="main">
<p>The following text consists of a mock Latin which has been based
upon the average frequency of characters and word lengths of the English
language in order to reproduce a reasonably accurate overall visual
impression. Lorem ipsum dolor sit amet, consectetur adipscing elit, sed
diam nonnumy eiusmod tempor incidunt ut labore et dolore magna aliquam
erat volupat.</p>
<p>Et harumd dereud facilis est er expedit distinct. Nam liber a tempor
*** soluta nobis eligend optio comque nihil quod a impedit anim id quod
maxim placeat facer possim omnis es voluptas assumenda est, omnis dolor
repellend. Temporem autem quinsud et aur office debit aut tum rerum
necesit atib saepe eveniet ut er repudiand sint et molestia non este
recusand.</p>
</div>
<div id="footer">footer</div>
</div>
</body>
</html>

[Avernus]

Wow, Ok cool, I'm goign to go through this to see exactly what you had to do that was different. That is awesome though. So admittedly it wasn't the easiet place to start with the complex css stuff eh? lol Thanks for your help once again, much appreciated!!

[pyro]

Yes, learning to create CSS layouts takes time and an understanding of how CSS works (and, unfortunatly, how to hack it in non-compliant browsers). It's well worth the time it takes to learn (and keep learning) though. :)