CSS Layout

**lgomez** · May 7, 2002, 21:10

Hello all,

Today I stumbled on to the reality of accessibility and the advantages of starting to use CSS to control the design of my page. I want to start building my page following these rules but I'm a little confused.

It seems that DIVs are the prefered "placeholder" for content. I might be wrong but if this is so, then there will be a LOT of DIV tags in my code. Right?

You see, my layout has (or used to have) the following structure as it would apear on the browser:

A table with the header.
A table with a banner-like image (no ads in my site)
A table with the main menu which itself is composed of a table with three columns for the three main sections of the site.
A table with the content which may or may not contain its own tables.
A table with the footer.

As you can see, a lot of tables. One of the reasons I have that many tables instead of having one with more rows is that the browser renders the table after it has loaded completely. Dividing the content into different tables gives the illusion of faster downloads.

I'd like to start designing the right way from now but are DIVs the best option?

Simple DIVs don't render right in Dreamweaver.

Example:

Code:

<div class="stage"><p>Hello</p></div>

My stage class specifies that this div should be 700px wide and have an image as a background. It renders right in the browser but forget about it in DW. Is there a workaround?

**Steelsun** · May 7, 2002, 21:19

DW does not show CSS correct, you'll need to preview it in your browser to see if it's looking OK.

I too recently started using CSS, but I also still use tables for part of my layout. One thing I do is use CSS to make borders around the tables or cells (CSS borders look alot better than table borders). Well DW does not show these borders, so I have to keep F12 (previewing) to make sure they look ok.

**lgomez** · May 7, 2002, 21:29

One more thing.

Why is it that h1-h6 tags render with a space below its content. Is there a fix for this?

tnx

Steelsun... Houston TX? Lgomez-> Born in Galveston!

**lgomez** · May 8, 2002, 02:57

Ok, I've done some tests and I think it works great.

My only problem is I don't have access to NS4 or IE4/5. Can anyone test them and see what happens.

Traditional table layout:
http://vfxnetwork.com/CSSLayout/VFXhome.htm

HTML 12.9 kb
CSS 1003b
Images 18.0kb

CSS Layout:
http://vfxnetwork.com/CSSLayout/VFXhomeCSS.htm

HTML 1.83 kb
CSS 3.16 kb
Images 18.3kb

Total table layout: 31.9
Total CSS layout: 23.9

This numbers are not entirely fair. As you can see the traditional version actually has more content but I'll work on that tomorrow.

If you want to download the files you can do so here: http://vfxnetwork.com/CSSLayout/vfxnet.zip
NOTE: Please do not use or distribute this files for anything other that testing related to this post. Thank you.

**mattjacob** · May 8, 2002, 08:17

Originally posted by lgomez
Why is it that h1-h6 tags render with a space below its content. Is there a fix for this?

That's just the "natural" margin of a heading element. To change the margin size, you might do something like this:

Code:

h1 { margin: 0; padding: 0; }

**creole** · May 8, 2002, 12:36

Originally posted by lgomez
One more thing.

Why is it that h1-h6 tags render with a space below its content. Is there a fix for this?

There's no FIX as that is the intended result. H tags are block level elements and as such they imply a full carriage return (equal to 2 <BR> tags) after their close.
http://www.w3.org/TR/html401/struct/global.html#h-7.5.5

By the way, you don't really need to have a P tag nested inside your DIV.

Without making this personal to you, if you want to get into CSS layout then you really need to have a solid understanding of HTML first. This means being able to write your own code and understand how tags work and why they behave a certain way. This will make designing a CSS only site MUCH simpler as you will already have the proper building blocks.

This is of course MY opinion and should not be taken personally.

**Bill Posters** · May 8, 2002, 14:03

As an aside it may be worth noting that the new Dreamweaver Mx claims to support CSS layout and styles directly (and correctly) in its preview window.

Unfortunately, I also hear that the CSS creation process itself is very similar to how it is in v4 (i.e. dire)

Still, I'm looking forward to giving it a go.
(I'd give the trial/prerelease a try, but I need to U/G my (admittedly out of date) OS first.

**Steelsun** · May 8, 2002, 14:09

I've downloaded the MX preview and tried it a few times briefly, but still use DW 4 for most of my work instead of the MX (mostly because I know and am comfortable with 4 and MX is strange).
The preview of CSS in MX to me is not impressive at all and still seems lacking.

**lgomez** · May 8, 2002, 14:12

Don't worry, I don't take it personally. This is exactly why I'm here and that is what I'm looking for. Opinions and sugestions WHILE I work.

If could sit and read everything there is to read I wouldn't get any work done. I learn as I go along and read as much as I can.

Do you know where I can find a listing of CSS browser compatibility?

Regarding the alt attribute for my images. There are some images that serve no purpose other than decoration. Is it possible to set an attribute so that screen readers skip those images. What happens when a screen reader hits an image with no alt attribute?

Thank you,

**mattjacob** · May 8, 2002, 15:29

Originally posted by lgomez
Is it possible to set an attribute so that screen readers skip those images.

Code:

alt=""

**lgomez** · May 8, 2002, 17:00

Tnx.

**Mike Feury** · May 8, 2002, 18:34

Hi Luis,

Page looks nice

Couple of comments/questions about the source code:

1. I've read that it's usually best to have positional CSS defined in the <head>, and styles in an external style sheet. I assume you have the positional classes defined externally because they will appear on every page?

2. How have you used Float here? I'm guessing 2 of the columns, or...?

**creole** · May 8, 2002, 20:06

One of the best bug references I've come across is on www.richinstyle.com .

**Bill Posters** · May 8, 2002, 23:23

Originally posted by Mike Feury
've read that it's usually best to have positional CSS defined in the <head>, and styles in an external style sheet. I assume you have the positional classes defined externally because they will appear on every page?

That sounds familiar, even like a problem I was once experiencing.

However, I systematically farm *all* CSS out to an external now (styling and CSSP) without problems.

Any chance you could show a reference for that statement?
It would be interesting to compare it to my experience with that issue.
As I seemed to have gotten around it without noticing, it could still prove to be useful to know of the pitfalls (if any).

TIA

**Mike Feury** · May 9, 2002, 12:59

Hi Bill,

I'll do a hunt and see if I can find the reference(s) - so many places I've read recently

The reasoning for it was mainly that positioning tends to be unique to a page, whereas style usually applies to many pages. In that situation with a large site, it would make sense to keep CSSP local to the page - otherwise you'd have a huge external style sheet.

However, I think most sites have a consistent layout across all/many pages, so I'd favor your approach. It's like the templates idea - it makes sense to me to have repetitive boxes defined externally.

A well-organized and commented external style sheet shouldn't be a problem even if it gets quite large. Then just add any local tweaks to that page's <head>.

I wonder is there any significant page-loading hit because of reading in a large style sheet? Would have to be pretty large though to offset the advantage of keeping repeated styles in one place.

The SitePoint Forums have moved.

User Tag List

Thread: CSS Layout

Thread Tools

Display

CSS Layout

Testing

Bookmarks

Bookmarks

Posting Permissions