How would you incorporate css divs within a site that uses tables? example: you make a website in photoshop and have all the coding ready to go. You have a nav bar section, but instead of having the picture, how do you replace it with a div? the div basically looks like this..

nav{
width:700px;
height:24px;
background:url(original_nav_bar.gif);

}

How would you get that div in a table? I don't know how to explain it lol.

class='nav'

First of all, you can't make a Web site in Photoshop. Some people might think I'm arguing semantics, but it's important to realize that the best PS can do is to give you some very poor code based on an image you've created. The code is worthless and does not lend itself well to good structural markup and proper use of CSS.

Second of all your class won't work because you forgot the period at the beginning. (it should be .nav) :)

Third of all, we should probably define <div>. <div> is a tag. It is a generic container that you use to simply group a bunch of elements together. It lets you apply a style to that group. So using it would most likely replace a portion of your PS table - the part holding the navigation.

What you soon come to find out is that you can often replace some, most or all of the tables with these containers, giving you better control over your design and simplifying your code tremendously.

So the end result might look like this:

<div class="nav">
<a href="somewhere.html">Go Somewhere</a>
<a href="somewhere.html">Go Somewhere</a>
<a href="somewhere.html">Go Somewhere</a>
<a href="somewhere.html">Go Somewhere</a>
<a href="somewhere.html">Go Somewhere</a>
</div>

In fact, I'd reckon this is exactly the result you would see once you replaced your cells with that <div>.

Can you post a URL? I'd like to take a look at what you have right now, and see how I would go about doing this part of the conversion.

I know all of that lol :p I wanted to know if it was possible to mix and match. I'm not that great at css so my creativity is limited to how much i know about css. If I were to code a page that isn't related to a double column then i'd be at a loss.

Well, double columns can be done fairly easily with <div>s, but tables work perfectly well to achieve the same effect. Just create a simple table with two cells (make sure you valign everything to the top). Then create a series of containers with whatever elements you want in them in each column, and style accordingly. That's really all there is to it. You should see the code that comes out of it. Clean as a whistle, and very, very lean!

First of all, you can't make a Web site in Photoshop. Some people might think I'm arguing semantics, but it's important to realize that the best PS can do is to give you some very poor code based on an image you've created.

Wow, someone agrees with my point of view :eek:

the double column can also be achieved with css+XHTML, so you aren't abusing tables. and i prefer to use the list for a navigation.

<div id="nav">
<ul>
<li><a href="???">menu 1</a></li>
<li><a href="???">menu 2</a></li>
<li><a href="???">menu 3</a></li>
</ul>
</div>

divs are simply for dividing a page generically and unlike the span they default to display:block

True. Technically, this is an abuse of table, since by the strictest of rules, tables are only meant to display relational data in a matrix. I like to avoid tables whenever possible, just because they are often unnecessary, but I see tables a little differently than the HTML purist.

If you know the history of tissue paper, you know it was first invented as a cold cream remover. But somewhere along the line, someone discovered it made a nice disposable hankerchief. So the purpose of tissue paper changed, completely independent of the manufacturer (Kleenex).

This is sort of how I see tables. Tables were meant to display data, but through common use, their purpose has changed. The W3C has recently shown their willingness to accept common use in specifications (see how the CSS rules for 'height' changed to match common use in CSS2.1), so I have to believe it's not a crime to use tables to display relational visuals.

Again, I would favor a no-table layout for what you've described. But if you're only starting to get a handle on CSS, a very simple table will achieve the results you desire reliably.

That's my .02 (moderately buzzed though, so hopefully I'm making some sense).

Paul H :)

this is a common debate about the english language also: do we obey the rules, or make the rules fit what we use? during language evolution is slowly goes towards what is used, but it kept more logically in place by some of the rules. however, with programming languages i believe the case should be completely different. after all, do we really want HTML ending up like english (the hardest language to learn with too many contratradictions and rules that are really the least-common case scenario)?

so for programming, i suggest using objects as they were intended - not only to keep the language simpler, but to abide by the whole IDEA of it. if you read the XML specs, it says the whole reason XML languages are so great is because they are easily parsed, and easy to read by those who don't even know the language (covering both ends).

if a function needs to be served that can be served by one object, the next version of the language will accomidate that function accordingly with it's new code, so users can keep their code clean.

i believe in coding by spirit, not just what works, because besides just making more sense (easier to modify and understand the code) this promotes forward compatibility - i can be confident my code will still make sense in the future when they fix whatever bugs there might be.

you might be noticing the trend towards w3c standards, this shows the battle is being won by the side that says stick by the rules. in the olden days, the only thing governing the code was the browser-makers, but slowly the standards crew has taken over. The reason they are winning is because programmers like me like it, and they write the code according to those rules. If many of us didn't like it and wrote it differently, the code WOULD change to fit the "trends."

the "table hack" is only referred to as "simple" because it's been around so long - i remember comming up with it when i first started web designing....which was prolly more than 5 years ago. but in reality, all it does is take up bits, fill the page with confusing junk and make the HTML structure require complex nested layout.

on the other hand, if you use XHMTL+CSS the way w3c designed it, the XHTML code is short and to the point - saving everyone time and money and making your life easier by the code.

so in the end, you might have to spend a little time learning the new ways and abandoning the old. but in the end, it's worth it - because that little time you spent to learn will save you SO much time and money, and maybe make you a little proud that your code makes sense.

there's my ending with sense as the last word, so i'll say it again so you can say that was my two cents. ;)

No, you're correct. Ultimately, this is the right way to go about things.

The only point here is that using tables to structure visual elements may break the spirit of the creation of tables, but it is certainly a valid practice, and future browser support is guaranteed, especially as browsers move closer and closer to an industry-wide interpretation of existing specifications. In the end, it's difficult to say a rule has been broken if proper browser practices validate the "improper" use.

But yes, learning to do what you are doing without tables would be a lofty, but achievable goal. It's up to you whether you want to learn this type of CSS (in all of its IE-hacking glory), or whether you're content to take some time to get to this point. I wish I could answer this question for you. I'd say screw tables :) But most people don't, so I'll leave it out there for you as an option...

I don't mean to be arguing too much with the "Web Hosting Master," however i feel i must make this final point. I mean no insult to anyone and do not consider this a flame thread or something.

Anyway, one of my points in my earlier message was that although using tables this way may be perfectly valid as far as browsers are concerned, it should not be considered forward compatible (something that will be valid in the future). The trend i see taking place, is more and more compliance with the w3c standards. In the latest release of browsers (dating back to when IE6 came out) they began to support w3c specs for CSS, rather than what they had been doing by supporting their own variation. And as IE6's bugs are becomming more and more evident in this respect, i see a trend going towards the browsers that PROMOTE their standards-compliance. (My site statistics used to say about 98% of people using IE6, now that has changed to support the 7-8% of people using the FireFox (what I use) that still hasn't even reached version 1 yet!)
Also, as i've navigated across well-renowned web designers sites i notice the XHTML and CSS validation links at the bottom, along with extravagant explanations of why standards are better. And one of the most important things they say is the forwards compatibility of the code.
(For an example of a great standards-promoting website, look up AListApart)

(For an example of a great standards-promoting website, look up AListApart)

I love that site! I was just there before i dropped in here to see what was up. Very informative and I definatly reccomend it to anyone who has never been there.
:D

Originally posted by natmaster
I don't mean to be arguing too much with the "Web Hosting Master," however i feel i must make this final point. I mean no insult to anyone and do not consider this a flame thread or something.

Anyway, one of my points in my earlier message was that although using tables this way may be perfectly valid as far as browsers are concerned, it should not be considered forward compatible (something that will be valid in the future). The trend i see taking place, is more and more compliance with the w3c standards. In the latest release of browsers (dating back to when IE6 came out) they began to support w3c specs for CSS, rather than what they had been doing by supporting their own variation. And as IE6's bugs are becomming more and more evident in this respect, i see a trend going towards the browsers that PROMOTE their standards-compliance. (My site statistics used to say about 98% of people using IE6, now that has changed to support the 7-8% of people using the FireFox (what I use) that still hasn't even reached version 1 yet!)
Also, as i've navigated across well-renowned web designers sites i notice the XHTML and CSS validation links at the bottom, along with extravagant explanations of why standards are better. And one of the most important things they say is the forwards compatibility of the code.
(For an example of a great standards-promoting website, look up AListApart)
You're not flaming me or anyone at all. There's absolutely nothing wrong with a little healthy debate on WHT :)

I think we almost completely agree. The only point of contention is whether or not future browsers will stop supporting tables the way they are used today. The only way they could do this is if browsers did not recognize images as valid data in a table, something I very, very seriously doubt will happen. As long as tables remain part of an HTML spec (and I haven't heard any news of an HTML 5 spec coming anytime soon), authoring layouts based on tables will remain a viable option, even though it is a misguided effort.

But I guess we won't know for sure until the next couple waves of browsers hits the market. I'll start holding my breath right about.........now!

:)