SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Thread: Too many divs?

  1. #1
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Too many divs?

    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;
    }

  2. #2
    SitePoint Enthusiast shredder-man's Avatar
    Join Date
    Sep 2007
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What is the purpose of these?

    Code:
    <div id="top">
            </div>
    Code:
    <div id="left-nav-bottom">
                    </div>

  3. #3
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by shredder-man View Post
    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.

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,109
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    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..

  5. #5
    SitePoint Addict
    Join Date
    Jun 2007
    Location
    Sydney, Australia
    Posts
    253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  6. #6
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,836
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  7. #7
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,109
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    ..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.

  8. #8
    SitePoint Addict
    Join Date
    Jun 2007
    Location
    Sydney, Australia
    Posts
    253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Last edited by znebojsa; Oct 10, 2007 at 20:06.

  9. #9
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,109
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by znebojsa View Post
    [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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •