Sun, 2005-10-09 11:31
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 <div> 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 © 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> <!-- end topbar -->
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> <!-- end content div -->
as above.
<div id="footer"> <div class="smalltext"> copyright © 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 with margin: 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 the W3C - 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 to separate 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(yourlogo.jpg) 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 reccommended 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.
Sun, 2005-10-09 12:50
#1
Divitis article coming soon
TPH, a nice article for newbies, but is this the correct forum for such a topic?
Sun, 2005-10-09 12:52
#2
Divitis article coming soon
Nope, but it's not ready yet articles go here for C&C, then when they're fine a mod or Tony can move em to the "How To" section.
Thanks for the concern though
Thu, 2005-11-03 11:26
#3
Divitis article coming soon
<bump>
added some more info, any glaring obvious errors so far?
Thu, 2005-11-03 11:39
#4
Divitis article coming soon
thepineapplehead wrote:
To remove the text, add the following: text-indent: -9999em; which will pull it off the page.
You might want to mention that there is a variety of image replacement methods, some of which are more accessible than others.
Thu, 2005-11-03 11:40
#5
Divitis article coming soon
Okey dokey thanks.
Out of interest, what's your favourite?
Thu, 2005-11-03 11:56
#7
Divitis article coming soon
A very good article - well done TPH.
My only technical comments after a quick read-through, are that (1) one should not hide unwanted headline text by moving it off the page as search engines may deem this to be spamming. Instead, just wrap the text in a span and set it to display: none; and (2) setting a container to a fixed width is not in itself 'bad' - it depends on what the individual designer wants to achieve. I use fixed widths and a scaling tool that dynamically changes those widths as the user scales the text, and that is not 'bad' per se IMHO.
Conceptually the article encourages the reader to always minimise the use of divs and I agree that this is 'best practice', but extra divs are often used (e.g. by me) to good effect by placing background images within them such that a fluid page design maintains its complex visual integrity under different width settings (a kind of large-scale sliding doors technique). It probably would not hurt to mention that extra divs sometimes have their uses to add visual interest and achieve certain visual effects.
[edit] cross-posted with above 3 posts.
Thu, 2005-11-03 12:13
#8
Divitis article coming soon
roytheboy wrote:
A very good article - well done TPH.
My only technical comments after a quick read-through, are that (1) one should not hide unwanted headline text by moving it off the page as search engines may deem this to be spamming. Instead, just wrap the text in a span and set it to display: none;
Well, it is extreme removal of divitis - eg, removing as many unecessary tags off the page as possible
Quote:
and (2) setting a container to a fixed width is not in itself 'bad' - it depends on what the individual designer wants to achieve. I use fixed widths and a scaling tool that dynamically changes those widths as the user scales the text, and that is not 'bad' per se IMHO.
Duly noted. I'll explain about the use of scaling - however I like sites to expand
Quote:
Conceptually the article encourages the reader to always minimise the use of divs and I agree that this is 'best practice', but extra divs are often used (e.g. by me) to good effect by placing background images within them such that a fluid page design maintains its complex visual integrity under different width settings (a kind of large-scale sliding doors technique). It probably would not hurt to mention that extra divs sometimes have their uses to add visual interest and achieve certain visual effects.
OK, I'll add that in. Thanks.