SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    need nesting of divs explained

    Can someone please explain the nesting of divs? In the example below the head div has 2 id's but only one closing tag before you get to tagline, while the "tagline" has one?

    It was my understanding that if you had a <div id""> you also needed a </div>. Not the case below. Before you get to <div id"tagline"> shouldn't there be another </div> for <div id="sitebranding">?

    This is an example from a sitepoint book on html.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Bubble Under - The diving club for the south-west UK</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
    <body>
    <div id="header">
    <div id="sitebranding">
    <h1>BubbleUnder.com</h1>
    </div>
    <div id="tagline">
    <p>Diving club for the south-west UK - let's make a splash!</p>
    </div>
    </div> <!-- end of header div -->

    <div id="bodycontent">
    <h2>Welcome to our super-dooper Scuba site</h2>
    <p><img src="divers-circle.jpg" width="200" height="162"
    alt="A circle of divers practice their skills" /></p>
    <p>Glad you could drop in and share some air with us! You've
    passed your underwater navigation skills and successfully
    found your way to the start point - or in this case, our
    home page.</p>
    <h3>About Us</h3>
    <p>Bubble Under is a group of diving enthusiasts based in the
    south-west UK who meet up for diving trips in the summer
    months when the weather is good and the bacon rolls are
    flowing. We arrange weekends away as small groups to cut
    the costs of accommodation and travel and to ensure that
    everyone gets a trustworthy dive buddy.</p>
    <p>Although we're based in the south-west, we don't stay on
    our own turf: past diving weekends away have included
    trips up to Scapa Flow in Scotland and to Malta's
    numerous wreck sites.</p>
    <p>When we're not diving, we often meet up in a local pub
    to talk about our recent adventures (any excuse, eh?).</p>
    <h3>Contact Us</h3>
    <p>To find out more, contact Club Secretary Bob Dobalina on
    01793 641207 or <a href="mailto:bob@bubbleunder.com">email
    bob@bubbleunder.com</a>.</p>
    </div> <!-- end of bodycontent div -->
    </body>
    </html>

  2. #2
    SitePoint Addict
    Join Date
    Nov 2004
    Location
    London
    Posts
    248
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    DIV-wise, there are four "openers" and four "closers"... which is always a good start.

    The nesting of the divs is clearer with a spot of indenting:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Bubble Under - The diving club for the south-west UK</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
    <body>
    <div id="header">
    
        <div id="sitebranding">
        <h1>BubbleUnder.com</h1>
        </div>
    
        <div id="tagline">
        <p>Diving club for the south-west UK - let's make a splash!</p>
        </div>
    
    </div>
    <!-- end of header div -->
    
    <div id="bodycontent">
    <h2>Welcome to our super-dooper Scuba site</h2>
    <p>((LOTS OF BODY)).</p>
    </div>
    <!-- end of bodycontent div -->
    
    </body>
    </html>
    Hope you can see that the header contains not one, but two divs. So the header opens, then a div opens and closes, then another div opens and closes.... and finally the header div closes. Three opens, three closes. And all is right with the universe.

  3. #3
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    To add to what was said above, just think of the divs as boxes. You can put boxes inside other boxes. And if you think about it literally, the <div id=""> and </div> tags are the sides of the outer box, and the boxes inside it go in between those.


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
  •