Don't put text in a DIV!

[dbrimlow]

90% of the people asking for css help make the same mistake over and over.

 

Text should NOT be put in a "DIV" without first being put in a proper block level tag meant for text - Headers, Paragraphs, lists.

 

Most of the beginners to css who were used to tables think a DIV is like a table-cell where text is dropped in and the text is formated by the css for that class or ID. This is WRONG!

 

Example of what I mean - I see this over and over:

 

<div id="header">Why don't I have proper tags?</div>
<div id="leftnav">
<a href="home.php">home</a> | 
<a href="about.php">about us</a> | 
<a href="guides.html">guides</a> | 
<a href="contactus.php">contact us</a> | 
</div>
<div id="content">
<div class="sometext">I'm text sitting here naked because people think a "div" is a catchall holder for text, links or graphics</div>
<div class="andmoretext">and another bunch of text slapped within a div and expected to emulate a paragraph</div>
</div>
<div id="footer">   
mysite.com © 2008 - 113 S. Main Street, 7th Floor some city, NY 12345
this site is valid html 4 transitional, and valid CSS
</div>

 

Aside from not having proper block level text containment tags, it is also common "DIVtus". All those divs are not necessary.

 

THIS is how the above should be properly coded:

 

<h1 id="header">Why don't I have proper tags?</h1>
<div id="leftnav">
<ul>
<li><a href="home.php">home</a></li>
<li><a href="about.php">about us</a></li>
<li><a href="guides.html">guides</a></li>
<li><a href="contactus.php">contact us</a></li>
</div>
<div id="content">
<p class="sometext">I'm text sitting here naked because people think a "div" is a catchall holder for text, links or graphics</p>
<p class="sometext">and another bunch of text slapped within a div and expected to emulate a paragraph</p>
</div>
<div id="footer">   
<p>mysite.com © 2008 - 113 S. Main Street, 7th Floor some city, NY 12345
this site is valid html 4 transitional, and valid CSS</p>
</div>

 

Notice that DIVS are only used for the page's "wire-frame" layout. They will be positioned via css where the coder wants them on the page.

 

It seems like a small thing, but it makes all the difference in the world.

 

Then headers, paragraphs, lists will be properly tagged and placed within them. classes will be designated to style them accordingly.

 

This is called - SEMANTIC MARKUP. The goal of a good css coder is to reduce as much code as possible and do all styling of tags IN THE CSS, not the markup.

 

 

 

[TheFilmGod]

I completely agree. Don't forget that using <p> 's and other block element containers may make it easier for you as well.

 

Instead of:

 

<div id="body">

<div class="text">Hello! I am some text.</div>

</div>

... CSS ...

#body .text {
color: #000;
font-weight: bold;
}

 

 

You can do this:

 

<div id="body">

<p>Hello! I am some text!</p>

</div>

... CSS ...

#body p {
color: #000;
font-weight: bold;
}

 

 

- Do you see how much less code I used? It may not seem a lot here but if you multiply that over 30 times for an html page.... you get the point.

[haku]

I agree fully!

 

And with Yahoo developing a search engine that will be looking closer at semantic markup, this kind of stuff is just going to become more and more important.

[dbrimlow]

I think 99% of us were guilty of this when we first started using css.

 

I look at my older websites and want to rewrite them all!

 

ALL NEWBIES to CSS BEWARE of falling into this trap!

 

I). A good way to get into the habit of proper semantic coding (with a perfect descending flow) is to initially create your web page without ANY styling or graphics whatsoever. Just use the most basic html. No DIVS, IDs or CLASSES:

 

1. h1 tag for your main site title

2. ul and li tags for navigation

3. h2 - h6 for topic headings

4. p tags for text

5. p tags or ul and li tags for form items

 

This will also get you used to NOT using graphics for elements that should be text, along with the added benefits of having your pages viewable on small screen devices (PDAs & Cell phones) and navigable by those who use screen readers.

 

II). Once you have created the base page using proper semantic markup and simple html tags ... VALIDATE IT. You never want to start the css process with invalid html markup because you only want to debug your css when something isn't working. I can't tell you how much time I've wasted trying to debug CSS only to discover it was a typo or other simple html tag that was wrong and causing the problem.

 

I can now practically ignore the markup code itself entirely whenever I need to make a style change - simply adding or removing any classes to the tags.

 

III). Now you can to apply the css link in the head tag and add the layout wire-frame DIVs to the existing markup.

 

It is a good idea to always use the same ID names and general layout structure for your wire-frame. This will help you get used to creating a new wire-frame for other sites easily.

 

For Layout use one time IDs. I always have at least:

 

a. *container

b. *header

c. *topnav or *leftnav

d. *content

e. *rightnav

f.  *footer

 

DON'T REPLACE ANY OF THE MARKUP TAGS WITH DIVS! You will style/position your paragraphs, lists, headers with classes.

 

IV). Apply the class to any markup tags that you need to style or position (eg: p class="something")

 

Here is an example of a before and after page I created to show clients how to submit text to me, and how it will look when I apply a stylesheet - this more than anything:

 

before - view code

after - view code

 

They are basically the same page. The after page simply applies a stylesheet and a total of only eight divs to create the wire-frame containers for the 2 column layout.

 

[dezkit]

hahahaha wow.

 

that looks sexy

[haku]

Nice little writeup dbrimlow! They should make this thread a sticky in this forum. Many many people who come here could benefit from just that one post, not to mention the rest of this thread.