18 Apr 07 4:46 am
Hey Randy,
I think of a DIV as like a box. It can contain text or images, and when you tell it to do things (like "get thee hence to the other side of the page") it takes everything inside it as well, just like a box.
People use DIVs in much the same way that they use tables: You can put a border around a div, you can make it float to the left or the right, you can use it to put your content in a nice shaded box so that it stands out from other text, and you can say things like "all text inside this box should be 20px red Verdana" using CSS.
In that post you referenced, I mentioned that DIVs don't behave the same way across different browsers IF you don't specify a doctype. That's a load of gobbledigook if you're not a webgeek. Basically, people still use tables (<TABLE><TR><TD></TD></TR></TABLE> etc) because the browsers still haven't agreed on how to interpret the sizing of DIVs. So if you say "I want this div to be 240px wide with a nice bit of padding to keep the text away from the edges" -- the box wouldn't be 240px wide in both IE and Firefox, because they disagree on whether to add the padding to the width of the box.
SO... people use tables. They're more predictable, but they clutter up your code a bit. Plus there's a bit of snobbery about "nested tables"... which are tables inside tables inside tables.
The same goes for DIVs though. Divs inside divs inside divs are just as frowned upon. That's the only instance I can think of where you might say having too many divs is a bad thing. In general you should try to keep things simple, purely because it makes things easier to change later, but there's really no "you must not exceed this number" rule.
A simple layout of a webpage might have one div acting as a frame for the content, then one div floated to the left which contains your navigation, then another div floated on the right which contains your article. Inside the article div you might have another div of highlighted text, another div containing an image with a caption, etc.
Absolute positioning simply says "This is where this element is going to be on the page, regardless of what resolution my viewer is using". You plug in your absolute position like co-ordinates: X many pixels from the top, X many pixels from the left. (Or bottom, or right).
The Z-index is sort of like the layer that the div is on. If you've got one div (or other type of element... like an image) with a Z-index of 1, then it's going to sit underneath an element with a Z-index of 2. When you use Z-indexes and absolute positioning together, it lets you plonk things wherever you like on your webpage without having to be worried about the logical order or natural position of things.
The bad thing is that it's very inflexible, and can break in different browsers. Unless you're wanting to be very arty and minimalist with your site, I wouldn't recommend using these CSS tricks.
And as for frames... they're a nightmare as far as SEO goes. Everything that's good about them can be achieved through much easier and more search engine friendly methods.
That's a really long answer, but I hope that clears things up,
Mark
P.S. Which program are you using to build your site?
