Yeah.....I'm in agreeance with Jeeves here. The font tag is one of the most abused elements in Html, and has resulted in phpNuke's layout being FULL of font tags. The font tag is only the extreme beginning of the presentational element in markup/structure. Then there are the presentational attributes. All in all, I don't even like <hr /> or <br /> tags. I like the idea of using the paragraph tag, where spans, em, etc are for the emphasis and styling of text.
That is a good tutorial on the basic Html 3.2 stuff and that's how it was done then. I don't disrespect the old ways of doing it because it's from the disasters of the past (Apollo 1 and Html 2.0,3.2,etc) that we improve upon things. Html 4.01 Strict is the minimal I have actually dealt with since three years. I've been using the XML-Based (Module-based) Extensible Hypertext Markup language (Xhtml 1.1) as well as Xhtml 1.0 Strict and making XML and CSS in sites for a while, and have been thinking about putting a tutorial up for, like, two months I think it is now, but always got side-tracked as of late.
Layouts should not use tables. CSS Positioning and/or floating elements along with clearing those elements (clear:both) to put content underneath them is the best use for layout. Data that must be in a grid that degrades well (in other words, changes with viewport without you having anything over a 100% width, which requires in addition some WML and media="handheld" stylesheets, things like that) can be put in a table, but not so recommended. Turn styles off on your browser (say you have Moz-Firefox and the web developer addon, you can turn off styles on a page) - you can immediately see what the layout would be like with tables and without tables.
One of the sites Jeeves pointed out, which is CSS ZenGarden, works well without styles and lists well, and is compatible with WML. If you were to take styles off on a site with nothing but tables layouts, the widths would not degrade well, in other words it's not very fluid.
For things like statistics and phpmyadmin viewing of MySQL tables, and viewing anything that is a grid, if tables must be used they should be used in a way that doesn't cause overflow off the viewport. Having a minimum width of no more than 640 pixels will virtually guarantee that screen media will be read alright.
How do you accomplish the floating of divs (as opposed to positioning)? Well, the answer comes as somewhat of a surprise. Internet explorer doesn't always react well to it (does it react to anything the way it should - the very existence of an activex/javascript property in css for Internet Explorer is just beyond my ability to figure out why they would do that - that property being expression - just as data, style, and structure should eventually be separated, so should client-side ECMA (Java) script, more or less kept away from each other with a 40-foot cement barrier in between them).
Let's say you have three columns. You are using divs (or if you want to delve into the odd, different types of lists, and they can in cases be good to use for such layouts if they are indeed lists of common data that is being pulled up, like the Revora heads-up menu). You have two choices - positioning or floating. In CSS3 with IE8+Acid2 you'll be able to use a THIRD option. We'll discuss this further in a bit though.
The following div (or you could use a paragraph tag) will clear lines so that your floats don't end up all over the place (if you're like me, you've had it happen to you before):
Html:
<div class="clear_both"></div>
CSS:
.clear_both{clear:both;height:0;max-height:0}
The above clears both sides, right and left, so that the stuff following will not float to the top. The height and max-heights are set as safe-guards against this thing having any kind of size. It simply tricks the browser. To give divs some kind of actual height, you have that as an option, especially in the case that your floating divs have backgrounds or images that you don't want cutting off before the content ends inside
Html:
<div class="article">
<div class="col1"><p>One tequilla</p></div>
<div class="col2"><p>Two tequilla</p></div>
<div class="col3"><p>Three tequilla</p></div>
<div class="floor"><p>FLOOR!!!</p></div>
<div class="clear"></div>
</div>
Css:
.article .col1, .article .col2, .article .col3{float:left;width:25%}
.article .col4{float:right;width:25%}
.article p{border:1px dotted #77f;color:#77f;margin:0.25em;padding:0.25em}
.article .clear{clear:both;height:0;max-height:0}
The paragraph tags will be there just in case you wanna add more lines inside that (which is why I'm going to love Xhtml 2.0 - introduction of the line tag - I have it enabled through XML on my own site though, along with nl (navigation lists), section (a structural element similar to div), separator (which is an empty tag like hr except with the hr (horizontal line) it just seems so presentational in nature)).
In the above example, what you generally get is simply one row. The last clear line simply clears the line so the stuff below it can be display in some dignifying way instead of jumping all over the place. The first three columns float left, the last right. It works in IE7, Mozilla, Opera, and Netscape. I am not sure of IE6 but I imagine it works there, at least to some extent, though while resizing your page in that view in IE you'll likely see the last column jumping to the next row and back up at the end of the row again really quickly as you resize, sort of what you would imagine if your web designer were on a LOT of drugs.
The paragraph tags inside those floating columns have their own text color set by default to #77f (or #7777ff - it can be defined with 3 or 6 characters, depending on what level of complexity in color you wish to have). #77f is a pleasant blue color - not too blue but adds emphasis where needed. It is similar to the color of the arrows on the undo and redo buttons on the post form of the Revora Main Theme. The p tags also have a border of the same color that is dotted. They have margins of 0.25em as well as the same level of padding, so there is consistent padding and margins. If you want to have exactly 0.25em between everything, just remember this:
CSS:
.someclass{margin: top right bottom left}
The margin property can take the auto value as well, and that is useful in the case you want to center a block:
.centerthis{margin: 0 auto}
In that example, 0 is for top and bottom - auto is for left and right.
The "padding" property CANNOT take an auto value.
Fiddle around with that example and see what you can do with that.
Oh, and PLEASE put your style statements at least in an element tag somewhere between the head tags (near all the meta-data) - and not in a style element inside the body tags, or even in an inline style line.
Example of inline styling:
<p style="border: 1px solid #77f">Stuff</p>
The inline style attribute is going to be deprecated in future markup, and is generally confusing anyway since you want all your presentational stuff in one place where you can easily find it - in a CSS file.
Positioning is another way to achieve div columns. Another way will be the display property - the main div would have a style with "display:table" in it and the cells would have "display:table-cell" in them. It's definitely something to consider using eventually, when enough people update to newer browsers that is. Opera and Firefox and Netscape, and Safari, support that alright. Some other browsers just don't.
Now the comparison from the above example to...the older example:
Newer Example:
Html:
<div class="article">
<div class="col1"><p>One tequilla</p></div>
<div class="col2"><p>Two tequilla</p></div>
<div class="col3"><p>Three tequilla</p></div>
<div class="floor"><p>FLOOR!!!</p></div>
<div class="clear"></div>
</div>
Css:
.article .col1, .article .col2, .article .col3{float:left;width:25%}
.article .col4{float:right;width:25%}
.article p{border:1px dotted #77f;color:#77f;margin:0.25em;padding:0.25em}
.article .clear{clear:both;height:0;max-height:0}:( Older Example:
Html:
<table>
<tr>
<td width="25%" border="1"><font color="#7777ff">One tequilla</font></td>
<td width="25%" border="1"><font color="#7777ff">Two tequilla</font></td>
<td width="25%" border="1"><font color="#7777ff">Three tequilla</font></td>
<td width="25%" border="1"><font color="#7777ff">FLOOR!!!</font></td>
</tr>
</table>
Css:
Heh...none, it's all in the markup because it's 1996 all over again.
In olde html I'm not sure what the border color attributes were. I imagine they were probably...um...borderColor="#7777ff" or something. And the font tag had fontStyle, fontColor, fontFamily, and so on.
The above wouldn't be the worst case example. That actually looks really neat compared to what I've seen. Here's an example of what to definitely avoid:
<table class="bodyline" width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td valign="top">
<center>
<table width="100%" border="0" cellspacing="0" cellpadding="2" height="86">
<tr>
<td background="someimage.jpg" width="100%" height="80">
<table width="100%" border="0" cellspacing="2" cellpadding="0" height="168">
<tr>
<td width="7" height="64">
<p align="center">
<td nowrap width="100%" height="64">
<p align="center"><b>
<font class="tit" color="#FFFFFF"> Logo using white space for margins :P</font></b></p>
</td>
</td>
<td width="4" height="64"> </td>
</tr>
</table>
</td>
</tr>
I had to change some of the content in that above example as it would put to shame the organization using that code...and the rest is about 9,000 times worse.
I don't see one line in the example I showed just now that I would agree with.
Amazing how easily controlled by CSS such a layout would be. You would probably end up with 10 times less presentational elements, ZERO presentational elements, and a heck of a lot less of what you don't need. That way you spend less time figuring out where on Earth to modify presentational stuff because your structure is bad, and more time instead on just making a site better just through a CSS file.
Javascript is amazing, it really is. But guess what, it's just as abused and I've seen many make a mockery of it. There are some things best left to CSS and Html. Other things are best left to XML. Javascript should be doing the really cool stuff for your site, but should not be the thing that designs it, it should only extend functionality.
So that's about all for now. I worked late night shift until a bit ago and will have the next day to sleep in, until later.
).
