Divitis: what it is, and how to cure it

来源：互联网发布：js添加class 编辑：程序博客网时间：2024/06/10 02:47

Divitis: what it is, and how to cure it.

What is divitis?

Divitis is a common problem with webdesigners. It is the process of using too many nested/unnecessary divs to mark up a page.

A note before we begin

Divs are grouping elements. They are supposed to be used to group sections of the page into divisions - for example, a top division with logo and links, a sidebar, or even a footer. They are generic grouping elements with no default style - no borders, padding, margins, fonts. The only default style of a

is that it is a block-level element - which, by default, will take up the maximum width available.

Divs are not to be ignored completely. Many CSS designers use extra divs to display little niceties for the site - for example, a fixed div with a background image that sits at the top of the page.

How do I contract it?

Divitis usually happens when converting a table-based layout into a CSS-P layout.

Consider this example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >  <html> <head>  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> </head> <body>  <div id="container">  <div id="topbar"> <div id="header">  <img src="/logo.jpg" width="400" height="150" /> </div> <!-- end header -->  <div id="menu">  <ul id="navigation">   <li> <a class="navlink" href="/home.html"> home </a> </li>  </ul> </div> <!-- end menu --> </div> <!-- end topbar -->  <div id="content">  <div id="news">  <div class="headline"> News item 1 </div> <div class="newsstory"> story here </div>  <div class="headline"> News item 2 </div> <div class="newsstory"> story here </div>  </div> <!-- end news div -->  </div> <!-- end content div -->  <div id="footer">  <div class="smalltext"> copyright &amp;copy; 2005 some guy </div> </div>  </div> <!-- end container div-->  </body> </html>

Now this is an exaggerated, rather extreme case, but I have seen sites with this much markup.

Let's go through each piece in turn and explain the apparent need for the divs, and then a fix.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

The doctype. Forget it at your peril

<html> <head>  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> </head>

The <head> section. Character set needed to validate.

<body>

The body tag. Needed to separate the head section (page info) from the body (page content).
Keep in mind that both the <html> and <body> tags are containers, as this is commonly ignored and can actually be used to your advantage.

<div id="container">

Ah, the obligatory container div. Used commonly to contain the entire site, and, when used with a fixed width, to center the site.

Remember what I said about the <html> and <body> tags? Keep that in mind, we'll get back to this later on

<div id="topbar">

The topbar is sometimes used to contain the main branding of the site - logos, search bars, and navigation. Sometimes useful to section up a site, but, hey, we're working on minimalist designs

<div id="header">  <img src="/logo.jpg" width="400" height="150" /> </div> <!-- end header -->

More often than not the <header> div is used primarily to contain a logo. And nothing else. For this, we will get onto <hx> tags later.

<div id="menu">  <ul id="navigation">   <li> <a class="navlink" href="/home.html"> home </a> </li>  </ul> </div> <!-- end menu -->

The main navigation. Helpfully put into another containing div, called "menu". More on this later, too.

</div> 

So many divs require numerous comments to keep track of your website. Not good, they increase bandwidth needed.

<div id="content">

Can sometimes be a useful way of separating the top info from the main content. But not really

<div id="news">  <div class="headline"> News item 1 </div> <div class="newsstory"> story here </div>  <div class="headline"> News item 2 </div> <div class="newsstory"> story here </div>  </div> <!-- end news div -->

Classic Any time you see a div or span with an ID or Class containing the word "head" you can guarantee it should be replaced with a heading tag.

</div> 

as above.

<div id="footer">  <div class="smalltext"> copyright &amp;copy; 2005 some guy </div> </div>

The footer div isn't so bad in itself, what's bad is the nested "smalltext" div inside.

</div> <!-- end container div-->  </body> </html>

Now lets see if we can condense each bit down, shall we?

The container div

Usually a container div is used to "contain" the entire site. It is usually a fixed width (bad) and centred withmargin: auto; and the text-align: center; hack (if you're supporting IE5 - which, let's face it, is pants)

Now keep in mind the "container" tag will hold all of your HTML.

Hang on a minute, what's that tag before the "container"?

A <body> tag?

Yes, often overlooked is the humble <body> tag, which does exactly what your container div does - holds all your HTML.

Speaking of HTML, the <html> tag could also be used as a container. But let's stick with <body> for now.

The Header div

<div id="header">  <img src="/logo.jpg" width="400" height="150" /> </div> <!-- end header -->

Sigh, this is often where newbies to CSS go wrong - wrapping everything in a div and giving it an ID.

There are a whole list of XHTML tags that many people do not know exist over at theW3C - for example, the <acronym> tag, the <cite> citation tag, and even the <q> quotation tag.

The easiest way to remedy this problem is to think - "What is the point of this div?" It is to give a main headline, often including the logo. Because of this, and for the benefit of screen readers (as well as people with styles turned off) it is best toseparate the presentation from the content and move the image to the CSS and the text to the HTML, like so:

<h1> Your Company Name</h1>

That's it. Honest, guv - that's all you need.

Want to make it bold? Why bother wrapping it in <b> tags when you can add this to the css:

h1 {font-weight: bold;}

(NB Headings are bold by default, this is just an example)

Want to add a logo? Simple! As headings (along with <p>s) are block-level by default, you can give them a width and height matching your logo, and set it as the background:

h1 { background: #ccc url&#40;yourlogo.jpg&#41; no-repeat; width: 762px; height: 187px; }

To remove the text, add the following: text-indent: -9999em; which will pull it off the page.

A note about text replacement

There are many methods for replacing text with images; a simple Google for "css image replacement" will bring up a plethora of links. Some are more accessible than others; there is the text-indent method, the <span> method, the AP method, heck even the flash image replacement method! This method comes recommended by our members as an alternative to the text-indent one.

The Navigation List

<div id="menu">  <ul id="navigation">   <li> <a class="navlink" href="/home.html"> home </a> </li>  </ul> </div> <!-- end menu -->

Here we go again - wrapping everything in a div and naming it

ULs are, by default, block level elements - so are the LIs contained within. Because of this, like we did with the header, we can give the <ul> and each <li> if we want, a width and height - thereby eliminating the need for a containing div, "menu".

unless you have more than one list on the page, there is also no need to give it an ID - it can simply be targeted with the CSS code:

ul { }.

Note the class on the list item anchor? Often used to separate an anchor in a list to other anchors on the page, again it is unnecessary when you can target it with this:

ul li a {styles: here;}

Because of this, we can shrink our list down to this:

 <ul>   <li> <a href="/home.html"> home </a> </li>  </ul>

If you have multiple lists on your page, give each one a meaningful id (for example, #mainlinks instead of #bluetextlinks or #rightcolumn_nav). Then you can target the list items with:

ul#mainlinks li{ }

which reduces the need to give every link a class.

The Content Div

<div id="content"> <div id="news"> <div class="headline"> News item 1 </div><div class="newsstory"> story here </div> <div class="headline"> News item 2 </div><div class="newsstory"> story here </div> </div> <!-- end news div --> </div> <!-- end content div -->

More divs!

The #content div can actually be useful, as it groups the content of the site and separates it from the other divisions - header, footer and other columns. Because of this, we're leaving it in.

The #news div is a similar case to the #content div - it separates the news articles from the other content, and can be used as a container if you use an RSS or XML feed for your news. In this case, it is up to you to decide whether it's really needed, or not.

<div class="headline"> News item 1 </div><div class="newsstory"> story here </div>

The sub-divs in the news division are another classic case of divitis. Remember what we learnt about the original

which contained the logo? This comes into play here. Remember about the <ul> not needing to be wrapped in a <div>? That comes in here as well.
This is where the phrases "structural markup" and "semantic html" come into discussion. The headline is a headline of an article, or, if you will, asub-header of the main title. Can you see where this is going?
Use the <h> tags! Determine the level needed - <h1> should only be used once per page for the main title, <h2s> for sub headings, <h3> for sub-sub headings, and so on, up to <h6>. In this case I would suggest a <h3>.

Next is the news itself. Wrapped in a div? Why! It's a paragraph of text! Use the <p> tags!

The Footer Div

As with the content, and in some cases columns, a div can be useful here to group any footer content and separate it from the other divisions. So leave the #footer div in place. Whatisn't needed, is the span, and even less the class.

Remember how we targeted the list-items in the navbar section? That's what to use here.

#footer p {styles here}

Conclusion

I know this has been a long read for you, but hopefully you've learnt about divitis and how to cure yourself from it. A quick way to check if you're on the right track is to disable styles on your page. If it flows properly - a big main title of the site, lists of navigation items, smaller subheadings for sections, news - and makes sense, then you're doing fine.

Have fun!