DIV vs Tables 5

[doctorChuckles]

This is partly an attempt to better understand a helpful suggestion made by vragabond in a previous thread.

Lets say I want to place formatted text, including some links, and a few small images, in a rectangle in a certain area of a page. I might want to give the rectangle a border of a certain width or color. I might want to give the rectangle a subtle background image or color.

In addition, let's say I want to place narrow colored or textured rectangles at the right, and possibly top and bottom, for design purposes, and a rectangle containing navigation links at the left.

It seems there are several ways to do this. I can apparently put all my formatted text, links and images, in a DIV area, and I can apparently set the height, width and position of the DIV area with CSS. The other rectangles can be table cells, or possibly GIFs. I suppose they might even be other DIV areas.

Alternately, I could set up a table. A large table cell in the center could contain my formatted text, links and a few small pictures. Adjacent table cells to the left, right, top and bottom can contain links, for navigation, colors, images, and so on.

There might be other ways...

I want to use CSS and HTML, and avoid javascript, because I want to maintain the site myself and I don't know javascript well enough.

Vragabond's previous message seemed to suggest that it's better to use DIVs rather than tables, but I'm not sure I understood that correctly. Reality check please? Are DIVs better?

If so... why are DIVs better?


Thanks a bunch.


Tim

 

[monksnake]

Maintenance on DIV's + CSS is soooooooo much easier.

Table is like the lazy man/woman's way out, it can look ok,
at first it's easier than setting up CSS + DIVs, but it's a pain to manipulate.

There are WAY more possibilities to layouts too when using CSS as opposed to tables.

<.

 

[kaht]

I could type up a big explanation, but it's all been said 1000s of times before. So, I'll let my good friend google do the busy work:

[google]whats wrong with table layout[/google]

-kaht

Looking for a puppy?

http://www.silkypups.com

[small](Silky Terriers are hypoallergenic dogs that make great indoor pets due to their lack of shedding and small size)[/small]

 

[doctorChuckles]

Great! I totally get it.

I'm afraid <div> is a little new to me, but it doesn't seem that hard, and CSS seems easier than HTML once you get the hang of it.

What about decorative rectangles to border the div rectangle where I put my text? For those, what's recommended?

--more div areas?

--table cells?

--gifs?

--something else?

Thanks again.


Tim

 

[Vragabond]

You mean boxes with [google]custom corners[/google]?

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[johnwm]

Or just set the Border property of the element as seen here

http://www.w3schools.com/css/css_border.asp

___________________________________________________________
If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller
Steam Engine Prints

 

[monksnake]

CSS seems easier than HTML once you get the hang of it

That's what you say now.

Soon enough you will learn to dispise IE because of all the hacks and workarounds you will have to use to get your page to look similar cross-browser.

<.

 

[doctorChuckles]

Soon enough you will learn to dispise IE because of all the hacks and workarounds you will have to use to get your page to look similar cross-browser.

Heck, I hate IE now, and I don't even know about this issue! ;-) Firefox and Apple are more to my taste.

But seriously folks, I've seen this mentioned once or twice on the forum. Would someone be so kind as to post a url for a list of hacks and workarounds necessary to get IE to diplay CSS correctly?

You mean boxes with custom corners?

Thanks, vragabond. That looks like it would do the trick and then some, but I prefer to avoid javascript, because I don't understand it very well. I'd better stick with the "Keep it simple, sputid!" principal.

Unless someone posts otherwise, I'll go on the assumption that div elements will do the job for decorative rectangles and possibly navigation-link rectangles.

Cheers,

Tim

 

[monksnake]

Here's a page I have bookmarked that will list all the bugs (workarounds for some):

http://www.quirksmode.org/bugreports/archives/explorer_windows/

<.

 

[ChrisHunt]

Yes, you can do lots of stuff with <div>s, though some things are easier than others. But you're putting the cart before the horse.

You need to think about your documents in a different way. Think about them in pure structural terms first, without worrying too much about their presentation. You might come up with a <body> like this:

<body>
  <div id="container">
    <div id="header">
      <img src="/images/logo.gif" alt="My Groovy Site" />
    <div>
    <div id="menu">
      <ul>
        <li><a href="home.htm">Home</a></li>
        <li><a href="about.htm">About</a></li>
        <li><a href="contact.htm">Contact</a></li>
      </ul>
    </div>
    <div id="content">
      <h1>All About Me</h1>
      <p>Blah blah blah.</p>
      <p>Yadda yadda yadda.</p>
      <h2>Sub Title</h2>
      <p>Yak yak yak</p>
    </div>
    <div id="footer">
      &copy Chris Hunt 2007
    </div>
  </div>
</body>

Once you've got the bare bones of the structure in place, you can worry about the presentation. You may find that to achieve a particular effect you have to change the order of the <div>s, you may find that you need to add empty or wrapping elements. That's OK - just add/move them as you need them.

Experienced page builders can do the whole thing in one step, seeing that they'll need particular hooks to hang styles on and putting the elements in place to begin with (arguably the div#container above is an example of this). Newcomers should start with the bare bones and add complexity as (and if) required.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[Foamcow]

I would also add that you shouldn't think of things in terms of divs as opposed to tables

A div is simply an html block level element. It's semantic meaning is a page division, but you don't need to use it unless absolutely necessary.

For example, a ul element is also a block level element so it may well be pointless creating something like:

<div id="mynav">
    <ul>
      <li>..</li>
       (etc)
      </li>
    </ul>
</div>

One of the major hurdles in getting the hang of this way of working is getting out of the 'tables mindset'. Chris gives excellent advice above when he says to consider the structure of your document first. This will help a great deal.

Just don't fall into the trap of exchanging tables/cells for divs. It will work, but it may well be come overcomplex and you won't really get the full benefits in the long run.

At the end of the build, your HTML should be so simple it could be understood by a complete novice.

<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.