8 replies [Last post]
thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 16 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

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 &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 Oups

<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 Wink

<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 Laughing out loud

<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 Laughing out loud

<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 Laughing out loud 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 &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 with margin: auto; and the text-align: center; hack (if you're supporting IE5 - which, let's face it, is pants Laughing out loud)

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 Tongue

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.

Verschwindende wrote:
  • CSS doesn't make pies

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 5 years 40 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Divitis article coming soon

TPH, a nice article for newbies, but is this the correct forum for such a topic?

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 16 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

Divitis article coming soon

Nope, but it's not ready yet Laughing out loud 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 Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 16 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

Divitis article coming soon

<bump>

added some more info, any glaring obvious errors so far?

Verschwindende wrote:
  • CSS doesn't make pies

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 8 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

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.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 16 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

Divitis article coming soon

Okey dokey Laughing out loud thanks.

Out of interest, what's your favourite?

Verschwindende wrote:
  • CSS doesn't make pies

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 8 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Divitis article coming soon

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 6 years 20 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

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.

Life's a b*tch and then you die!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 16 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

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 Laughing out loud

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 Laughing out loud

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.

Verschwindende wrote:
  • CSS doesn't make pies