SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Containment div?

    Hello people,

    So, I'm currently learning website design in my spare time and I was advised to put my 'margin' and website inside of a wrapper instead of the <body> tags, how would I go about doing this?

    heres my code, as I said, I'm new to this :

    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" xml:lang="en" lang="en">
    <head>
            <link rel="shortcut icon" href="favicon.ico">
            <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
            <title>Motion Gaming Community Clan</title>
            
            <style type="text/css">
    
    ul.botmenu {
      list-style: none;
      padding: 0px;
      }
    
    .displace {
      position: absolute;
      left: -5000px;
      }
    
    ul.botmenu li {
    width:112px;
    height:112px;
    border:none;
    display:inline-block;
    vertical-align:middle;
      }
    
    ul.botmenu li a {
      display:inline-block;
      width: 112px;
      height: 112px;
      background: url('bigb.png');
      }
    
    
                          ul.botmenu li.stegroup a {
                          background-position: 1px -122px;
                     }
    
                          ul.botmenu li.emailad a {
                          background-position: 0px -231px;
                     }
    
                          ul.botmenu li.skype a {
                          background-position: 0px -11px;
                     }
     
    
                          ul.botmenu li.stegroup a:hover {
                          background-position: -118px -122px;
                     }
    
                           ul.botmenu li.emailad a:hover {
                           background-position: -118px -231px;
                     }
    
                           ul.botmenu li.skype a:hover {
                           background-position: 122px -11px;
                     }
    ul.cssmenu {
      list-style: none;
      padding: 0px;
      }
    
    .displace {
      position: absolute;
      left: -5000px;
      }
    
    ul.cssmenu li {
      float: left;
      }
    
    ul.cssmenu li a {
      display: block;
      width: 97.5px;
      height: 48px;
      background: url('IMG.png');
      }
    
    
                          ul.cssmenu li.home a {
                          background-position: 0px -96px;
                     }
    
                          ul.cssmenu li.about a {
                          background-position: 0px -48px;
                     }
    
                          ul.cssmenu li.forum a {
                          background-position: 0px 0px;
                     }
     
    
                          ul.cssmenu li.home a:hover {
                          background-position: -292px -96px;
                     }
    
                           ul.cssmenu li.about a:hover {
                           background-position: -97.5px -48px;
                     }
    
                           ul.cssmenu li.forum a:hover {
                           background-position: 97.5px 0px;
                     }
    
                    a:link {
                              color:#000000;
                              text-decoration:none;
                         }
                    body {
                            text-align: center;
                            background-image:url(gowallpaper.jpg);
                            margin:50px 0px; padding:0px; 
                    }
                    
                    #pagewrap {
                            position: relative;
                            margin-left: auto;
                            margin-right: auto;
                            border:2px  solid;
                            border-color: #ffffff;  
                            width:462px; 
                            height:400px; 
                            background-color:#484a1e;
                            
                  }
                  #maincontent {
                  width:400px;
                  height:200px;
                  margin:auto;
                  text-align:left;
                  color:#FFA500;
                  font-family:tahoma;
                  font-size:12pt;
                  font-weight:bold;
                  font-variant:small-caps;
                  }
                  .steampage {
                  margin-left:auto;
                  margin-right:auto;
                  width:462px;
                  height:112px;
                  }
                    #nbar {
                            position: absolute;
                            top: -2px;
                            right: 101%;
                            width:100px;
                            height:200px;
                            text-align:right; color:white; font-family: tahoma;
                    }
                    #h1 {
                      text-align:center;
                      color:#d1ff00;
                      font-family:tahoma;
                      font-size:16pt;
                    }
                  }
     </style>
    
    </head>
    
                       <body id="homepage">
    
                         <div id="banner" style="margin: 0 auto;width:462px;height:116px;border: 2px solid white;">
                         <img src="motionban.png" alt="clan banner"/>
                  </div>
    
             <br/>
      
      <div id="pagewrap">
    
        <h1 id="h1">Motion News</h1>
    
        <div id="maincontent">
    
          Join The Group. Wear The Tag, Spread The Word.
      
      </div>
    
        <div id="nbar">
    
          <ul class="cssmenu">
    
      <li class="home"><a href="home.html" class="selected" title="home"><span class="displace">Home</span></a></li>
      <li class="about"><a href="about.html" title="about"><span class="displace">about</span></a></li>
      <li class="forum"><a href="http://steamcommunity.com/groups/motiongamingclan/discussions/" title="forum"><span class="displace">forum</span></a></li>
    
    </ul>
    
        </div>
                  
                   </div>
    
    
     <div class="steampage">
         
         <ul class="botmenu">
            
      <li class="stegroup"><a href="http://steamcommunity.com/groups/motiongamingclan" class="selected" title="home"><span class="displace">steamgroup</span></a></li>
      <li class="emailad"><a href="mailto:cazcsgo@gmail.com" title="emailadmin"><span class="displace">emailadmin</span></a></li>
      <li class="skype"><a href="skype:itscaz2?call" title="skype"><span class="displace">skypeadmin</span></a></li>
    </ul>
                  </div>
    
                      
            
    </body>
    </html>

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,611
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Hi, caz32, Welcome to the SitePoint forums.

    What "To Wrap or Not to Wrap" depends on the page design. Generally, outer containers are a good idea, but not necessarily required.

    For example, whether or not a container div is needed around the <h1> or nav menu depends on the complexity of those objects.

    On the other hand, padding:0 and margin:0 should be assigned to the body tag (via css) and selectively in other places as needed.

    Code:
    <body>
    <div id="outer">
        <h1>header</h1>
        <ul>
            <li>nav menu list</li>
        <ul>
        <div class="content">
            <p>text</p>
        </div>
    </div>  <!-- .outer -->
    <div id="footer">
        <p>footer stuff</p>
    </div>
    </body>
    The HTML in your example code looks like you've got the basic idea.

    This is a pretty simple reply. If you need more depth, let us know.


Tags for this Thread

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
  •