[scott2500uk]

I read up on many places that i shouldnt do my webdesign layouts using the html table method:

Code:

<table><tr><td></td></tr></table>

Instead I should use CSS for the following reasons:

Easier to make alterations to the site at a later date
File sizes will be smaller saving you bandwidth.

Well I have been reading up on CSS for a few months now on and off and I cant find simple ways to do what I want to do that I can do with html table.

Below is a simple table:

Code:

<table width="100%"  border="5" cellspacing="0" cellpadding="0">
  <tr>
    <td><img src="themes/Blue_Fusion/images/header_01.gif" alt="" /></td>
    <td style="width: 100%; background: url(themes/Blue_Fusion/images/header_02.gif);">&nbsp;</td>
    <td><img src="themes/Blue_Fusion/images/header_03.gif" alt="" /></td>
  </tr>
</table>

So I set out to change that use CSS. This is what I came up with:

Code:

<style>
#header01 {
  background: url(themes/Blue_Fusion/images/header_01.gif);
  width: 508px;
  height: 131px;
  left: 0px;
  position: absolute;
}

#header02 {
  background: url(themes/Blue_Fusion/images/header_02.gif);
  width: 100%;
  height: 131px;
  position: absolute;
}

#header03 {
  background: url(themes/Blue_Fusion/images/header_03.gif);
  width: 51px;
  height: 131px;
  right: 0px;
  position: absolute;
}
</style>
<div id="header02"></div>
<div id="header01"></div>
<div id="header03"></div>

So by looking at it, it uses way more code to achieve, therefor using more bandwidth and it was no easier than the html tables method.

Can some one please point me into the right direction to where im going wrong and can show me how to do a simple thing like above. There is very few examples out there and what is out there are for bigger things.

Regards

Scott

[jfulton]

Originally Posted by scott2500uk

So by looking at it, it uses way more code to achieve, therefor using more bandwidth

Combined, everything might be a bit larger, but it actually won't use more bandwidth. Using the tables, all of the markup is in the html file. Let's say that using the tables layout, your html file is 30kb. Every page request costs 30kb to transfer. Now suppose you convert everything to a "css friendly" layout and you end up with a 25kb html file and a 6kb external stylesheet. So your new layout is costing you more bandwidth, right? Well...not really.

When the page is first hit by someone, yes, there will be a total transfer of 31kb - but, the stylesheet gets cached. So, if a visitor goes to another page that uses the same stylesheet, they don't need to get that information again because they already have it. SO, even though you've increased the total size of the page and its style information, you've actually made it more efficient because less information is downloaded from the webserver per page request.

Originally Posted by scott2500uk

and it was no easier than the html tables method.

Heh, nobody ever said it was easy. Heck, that's why people still argue for using tables - because they work.

Originally Posted by scott2500uk

Can some one please point me into the right direction to where im going wrong and can show me how to do a simple thing like above.

What you have above should work. Using all absolutely positioned elements might not be the best idea though...you might want to try using floats. Or absolutely positioned elements inside of a relatively positioned element.

[Alan+61415484049]

Late in the last century, around '97 I seem to recall, the authors of HTML released version 4.0 of their simple yet powerful language.

They ensured that this release was backward compatible with their last effort, so <font> still works - and always will.

HTML describes the structure of a document; the <elements> are the bricks and mortar holding it together, finally styled & rendered on a Users monitor, mobile phone, in-car aural browser etc.

The good folks who make web-browsers make their work easier by agreeing that if an author says <p> there should be some text coming up.

So don't confuse our browsers with Ye Olde <table> tag when you want to layout a page - dive into <div>s !

Browsers are pretty clever; point yours at this snippet after you save it with a .html extension

<code>

<body>really simple web document</body>

</code>

The possibilities abound...

[DennisTT]

Originally Posted by Alan+61415484049

Browsers are pretty clever; point yours at this snippet after you save it with a .html extension

<code>

<body>really simple web document</body>

</code>

The possibilities abound...

You don't even need <body> </body> and the browser will just display the plain text

[Alan+61415484049]

The <colgroup> and <rowspan> attributes are just as much fun as nailing down every pixel with css, but I'm still gonna give 'em :-

<title="tooltip-text for surfers & gold nuggets for search robots!">

I'm placing my header & footer elements at the top of the table and they display in the correct positions as befits the structural background of the html spec.

It almost makes regular markup look like there's an author's style sheet somewhere...and there should be !

Aligning content in tables is so hard work, all that over-riding default positioning & working out the nesting issues. But hard work never killed anyone...

In the end, it's up to the author to make sure that the browser has enough of the right information to render the table - but the future direction of our web-craft is to completely separate structure from presentation.

Modern browsers expect table elements to conform to certain behaviours, for example:

<TR> defaults to { display: table-row }

Start messing around with these style defaults in your html and the browser may just ignore your layout instructions completely.

[scott2500uk]

thanks guys for all your input. greatly apreciated.

Does any one know of some great places on the web that can show me more bout webpage layouts in css?

[jfulton]

Originally Posted by Alan+61415484049

...but the future direction of our web-craft is to completely separate structure from presentation.

Amen!

Originally Posted by scott2500uk

Does any one know of some great places on the web that can show me more bout webpage layouts in css?

The Web Developer's Handbook is a great collection of useful links. As far as individual sites, maybe A List Apart (ALA), Glish.com, and Position Is Everything (PIE). Also try googling: 'css xxx layout', where xxx is whatever type of layout you're looking for (liquid, jello, fixed-width, 3-column, etc.)