Too many divs?

**leverage7** · Oct 10, 2007 15:51

Hello all,

I have a basic layout working for a site I am working on http://www.rlmorris.com/testsite/] and everything looks how I want it to in firefox and ie and passes css and html validation. I am very new to css and have a feeling I am using too many div's to create the layout I want. If anyone cares to take a look at my code and post any alternate css layout ideas that are simpler I would love to see them. Thanks so much in advance.

Code:

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

    <div id="page-container">
        <div id="logo-top">
            <img src="images/wvf-logo.jpg" alt="" /></div>
        <div id="top">
        </div>
        <div id="header">
            <img src="images/777x116.jpg" alt="" />
        </div>
        <div id="menu">
            <p>
                <a href="#">Get started</a>
                <a href="#">Member login</a>
                <a href="#">Vendor login</a>
                <a href="#">Contact us</a>
            </p>
        </div>
        <div id="middle">
            <div id="left-nav-container">
                <div id="left-nav-top">
                    <p>
                        Choose State</p>
                </div>
                <div id="left-nav-middle">
                    <ul>
                        <li><a href="#">Arkansas</a></li>
                    </ul>
                </div>
                <div id="left-nav-bottom">
                </div>
            </div>
            <div id="middle-nav-container">
                <div id="middle-nav-top">
                    <p>
                        Featured National Vendors</p>
                </div>
                <div id="middle-nav-middle">
                    <div id="middle-nav-middle-content">
                        <img src="images/417x117.jpg" alt="" />
                    </div>
                </div>
                <div id="middle-nav-bottom">
                </div>
            </div>
            <div id="right-nav-container">
                <div id="right-nav-top">
                    <p>
                        Other Sites</p>
                </div>
                <div id="right-nav-middle">
                    <div id="right-nav-middle-content">
                        <img src="images/117x117.jpg" alt="" />
                    </div>
                </div>
                <div id="right-nav-bottom">
                </div>
            </div>
        </div>
        <div id="copyright">
            <p>
                WeddingVendorFinder.com</p>
        </div>
        <div id="bottom">
        </div>
    </div>

/* General CSS page properties */
html, body
{
    margin: 0;
    padding: 0;
    text-align: center;
}

div
{
    width: 836px;
    border: 0px solid;
}

a
{
    color: #9cb7df;
    text-decoration: none;
}

p, h1, h2, h3, h4
{
    font: .8em "Century Gothic" , Verdana, serif;
    color: #a8a8a8;
}
h1
{
    font-size: 1.5em;
}
h2
{
    font-size: 1.2em;
}
h3
{
    font-size: 1em;
}
h4
{
    font-size: .8em;
}

ul
{
    margin-top: 0;
    font-family: "Century Gothic" , Verdana, serif;
    color: #9cb7df;
    font-weight: 500;
    font-size: 13px;
}

/* Main container div */
#page-container
{
    height: 100%;
    margin: 0 auto;
    text-align: left;
}

/* WVF text logo */
#logo-top
{
    height: 50px;
    position: relative;
    top: 23px;
    left: 13px;
}

/* Top main div */
#top
{
    background: url(images/bgtop836x28.jpg) top center no-repeat;
    height: 28px;
}

/* Header div that contains header image */
#header
{
    height: 116px;
    background: url(images/bgmiddle836x104.jpg) center repeat-y;
}

#header img
{
    margin-left: 26px;
}


/* Main menu div */
#menu
{
    height: 44px;
    background: url(images/whiteheaderbar836x44.jpg) center;
    overflow: hidden;
}

#menu p
{
    font-weight: 500;
    letter-spacing: 1px;
    text-align: center;
    margin-top: 10px;
}

#menu a
{
    color: #a8a8a8;
    text-decoration: none;
    margin-right: 35px;
}

#menu a:hover
{
    text-decoration: underline;
}

/* Middle main div */
#middle
{
    background: url(images/bgmiddle836x104.jpg) center repeat-y;
    overflow: hidden;
}

/* Copyright div that contains copyright info */
#copyright
{
    height: 44px;
    background: url(images/whiteheaderbar836x44.jpg) center;
    overflow: hidden;
}

#copyright p
{
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 1px;
    text-align: center;
    margin-top: 10px;
}

/* Bottom main div */
#bottom
{
    background: url(images/bgbottom836x43.jpg) bottom center no-repeat;
    height: 43px;
    overflow: hidden;
    clear: both;
}

/* Main left container div */
#left-nav-container
{
    float: left;
    width: 155px;
    margin-left: 28px;
    overflow: hidden;
}

#left-nav-container a:hover
{
    text-decoration: underline;
}

/* Left nav top div */
#left-nav-top
{
    background: url(images/smallcolum155x53.jpg) top center no-repeat;
    width: 155px;
    height: 53px;
    overflow: hidden;
}

#left-nav-top p
{
    font-weight: 500;
    font-size: 15px;
    letter-spacing: 1px;
    text-align: center;
    margin-top: 16px;
}

/* Left nav middle div */
#left-nav-middle
{
    background: url(images/smallcolummid155x53.jpg) center repeat-y;
    width: 155px;
    overflow: hidden;
}

/* Left nav bottom div */
#left-nav-bottom
{
    background: url(images/smallcolumbottom155x53.jpg) bottom center no-repeat;
    width: 155px;
    height: 20px;
    overflow: hidden;
}

/* Main middle container div */
#middle-nav-container
{
    width: 470px;
    float: left;
}

/* Middle nav top div */
#middle-nav-top
{
    background: url(images/bigcolumtop470x53.jpg) top center no-repeat;
    width: 470px;
    height: 53px;
    overflow: hidden;
}

#middle-nav-top p
{
    font-weight: 500;
    font-size: 15px;
    letter-spacing: 1px;
    text-align: center;
    margin-top: 16px;
}

/* Middle nav middle div */
#middle-nav-middle
{
    background: url(images/bigcolummid470x53.jpg) center repeat-y;
    width: 470px;
    overflow: hidden;
}

#middle-nav-middle-content
{
    margin-left: 16px;
    width: 433px;
}

#middle-nav-middle-content img
{
    margin-bottom: 5px;
    margin-left: 7px;
}

#middle-nav-bottom
{
    background: url(images/bigcolumbottom470x53.jpg) bottom center no-repeat;
    width: 470px;
    height: 20px;
    overflow: hidden;
}

/* Right nav container div */
#right-nav-container
{
    float: left;
    width: 155px;
}

/* Right nav top div */
#right-nav-top
{
    background: url(images/smallcolum155x53.jpg) top center no-repeat;
    width: 155px;
    height: 53px;
    overflow: hidden;
}

#right-nav-top p
{
    font-weight: 500;
    font-size: 15px;
    letter-spacing: 1px;
    text-align: center;
    margin-top: 16px;
}

/* Right nav middle div */
#right-nav-middle
{
    background: url(images/smallcolummid155x53.jpg) center repeat-y;
    width: 155px;
    overflow: hidden;
}

#right-nav-middle-content
{
    margin-left: 10px;
    width: 129px;
}

#right-nav-middle-content img
{
    margin-bottom: 5px;
    margin-left: 6px;
}

/* Right nav bottom div */
#right-nav-bottom
{
    background: url(images/smallcolumbottom155x53.jpg) bottom center no-repeat;
    width: 155px;
    height: 20px;
    overflow: hidden;
}

**shredder-man** · Oct 10, 2007 16:44

What is the purpose of these?

Code:

<div id="top">
        </div>

Code:

<div id="left-nav-bottom">
                </div>

**leverage7** · Oct 10, 2007 17:24

Originally Posted by shredder-man

What is the purpose of these?

Code:

<div id="top">
        </div>

Code:

<div id="left-nav-bottom">
                </div>

Those are basically just to hold the "border" top and bottom images that make up the frame around the site and they only contain background images. I couldn't think of a better way to do it but am very open to any suggestions.

**markbrown4** · Oct 10, 2007 17:47

Too many divs?

No, I don't think so. There's some purists who might argue the opposite but I think your use of div's is fine. The only thing I do slightly differently is to nest the elements rather than separating them. e.g.

Code:

<div id="example">
  <div class="top"></div>
  <div class="middle"><p>content</p></div>
  <div class="bottom"></div>
</div>

becomes..

Code:

<div id="example">
  <div class="top">
    <div class="middle">
      <div class="bottom">
        <p>content</p>
      </div>
    </div>
  </div>
</div>

This way the content set's the height of all the elements and they are all equal dimensions - then I give each container the background images they need and a transparent background-color so you can see the others underneath.

I just find this method reduces the amount of CSS needed and is simpler to change / tweak..

**znebojsa** · Oct 10, 2007 18:08

Hi

Code:

<div id="menu">
            <p>
                <a href="#">Get started</a>
                <a href="#">Member login</a>
                <a href="#">Vendor login</a>
                <a href="#">Contact us</a>
            </p>
        </div>

That isnt very semantic having links in a pragraph. Perhaps you could remove that div in place of a ul and style the ul? (and make the ul display: inline)

Code:

<ul id="menu">
  <li><a href="#">Get started</a></li>
  <li><a href="#">Member login</a></li>
  <li><a href="#">Vendor login</a></li>
  <li><a href="#">Contact us</a></li>
</ul>

**felgall** · Oct 10, 2007 18:15

Use semantic tags that identify the content where ever possible. Apply the styles to those semantic tags where ever possible. Only add those divs that identify page divisions or which are needed because there isn't a semantic tag to use.

Without seeing the actual contennt of the divs you have there it is impossible to say whether they are really required or not but those that have only one element in them are not needed as the style can be applied to that element instead.

**markbrown4** · Oct 10, 2007 18:27

..but those that have only one element in them are not needed as the style can be applied to that element instead.

Depending on the style

Each time you need a background image, or a boxy type shape you need an element to hang them on.

But it is good advice.

**znebojsa** · Oct 10, 2007 18:34

Off Topic:

mark, on your site I added a comment on the 'A Solid Foundation' article.
But my comment is not appearing. DO you have to approve of it first or is it not working?
thanks

PS. Whats the off topic tag

Edit: thanks

**markbrown4** · Oct 10, 2007 20:02

Originally Posted by znebojsa

[offtopic]
mark, on your site I added a comment on the 'A Solid Foundation' article.
But my comment is not appearing. DO you have to approve of it first or is it not working?
thanks
[/offtopic]

PS. Whats the off topic tag

Hi,

It's up there now.
You can use [ot ] [/ ot] for Off Topic boxes.

User Tag List

Thread: Too many divs?

Thread Tools

Display

Too many divs?

Bookmarks

Bookmarks

Posting Permissions