The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

CSS Layout

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?

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.

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.

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.

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.

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?

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...?

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).

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.