SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Nov 2009
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Div Wrapper help!

    Hi I am trying to create some white space on the left and right sides of my web page that run from top to bottom vertically. I believe you create a wrapper to do so.

    I am new to web design so please help.. this is my code so far and css below..

    <!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>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <link rel="stylesheet" href="style_sheet.css" type="text/css" />


    <title>MikeJamesDesigns</title>

    </head>


    <body>

    <div id="wrap">

    <div id="header">
    <h1><img src="pictures\logo.png" width="660" height="100" alt="MikeJamesDesigns logo" /></h1>
    </div><!--end of header div-->

    <div id="menu">
    <ul>
    <li><a href="home.html" title="Home" class="color">Home</a></li>
    <li><a href="portfolio.html" title="Portfolio" class="color">Portfolio</a></li>
    <li><a href="faq.html" title="FAQ" class="color">FAQ</a></li>
    <li><a href="bio.html" title="Biography" class="color">Biography</a></li>
    <li><a href="testimonials.html" title="Testimonials" class="color">Testimonials</a></li>
    <li><a href="contact.html" title="Contact" class="color">Contact</a></li>
    </ul>
    </div><!--end of menu div-->

    <div id="content">
    <p>Welcome to Mike James Designs!</p>

    </div><!--end of content div-->


    </div><!--end of wrap div-->

    </body>
    </html>

    External CSS

    body {
    background-color:brown;
    margin: 0px auto auto -35px;
    }

    #wrap {
    background-color:black;
    height:100%;
    width:100%;
    }


    #content {
    position:relative;
    left:10px;
    bottom:0px;
    margin-top:0;
    margin-bottom:0px;
    margin-left: auto;
    margin-right: auto;
    height:375px;
    width:80%;
    background-color:grey;
    }

    #menu {
    position:absolute;
    left:80px;
    top:140px;
    width:82.8%;
    background-color:black;
    }


    #header {
    position:relative;
    left:-55px;
    padding: 10px;
    margin: 0px;
    text-align: center;
    width:100%;
    }

    ul {
    list-style-type:none;
    margin:0;
    padding:0;
    }

    li {
    float:left;
    position:relative;
    left:140px;
    }

    a {
    display:block;
    width:100px;
    background-color:red;
    }

    please help me! thanks!

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,585
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, if you want gutter space to the lefet and right then set the wrapper to be less then 100&#37; width, aka 70% width (or a pixel width or something) and then give it margin:0 auto;.

    The height:100% shouldn't be on #wrap because then the entire page can only be 100% high since everything is inside it
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Member
    Join Date
    Nov 2009
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you so very much, worked like a charm! Thanks also for the tip!

  4. #4
    SitePoint Member
    Join Date
    Nov 2009
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just out of curiosity, can you explain the margin:0 auto; ? I know the margin is set to 0 but what does auto do? Thanks!

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,585
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    The margin:0 auto sets a 0 margin for the top/bottom (just because) and then the auto will center a block eleement assuming a width less then 100&#37; has been specified .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  6. #6
    SitePoint Member
    Join Date
    Nov 2009
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay sweet thanks! The wrap doesn't go all the way to the bottom of the page. Why is this? There is still a little space underneath the wrap.

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,585
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, well you'd want something like this anyway
    Code:
    #wrap
    {
      min-height:100&#37;;
    }
    * html #wrap
    {
      height:100%;/*IE6*/
    }
    html,body
    {
      margin:0;padding:0;/*make sure these are at 0*/
      height:100%;/*allow percentage height on #wrap to happen*/
    }
    You basically want min-height instead (otherwise your content will be stopped at 100% of the parents height. Then make sure no browser default padding/margins are conflicting with it giong all the way down
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


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
  •