SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    55
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Full page layout with responsive web design

    Hi

    I wondered if anyone can help me with this. I am a beginner to mid level user of css. I am trying to get to grips with Responsive Web Design(RWD) and I purchase a book from A List Apart about RWD.

    I am having a problem that I am sure I should be able to fix but cannot. Its probably simple to someone else. I want my header and footer to appear the full width of the page but it still has some white space around it. The css and html I have so far is minimal because I am following the tutorial in the book. But can anyone point out why my header will not expand the full width of the page please?

    /************************************************************************************
    GENERAL STYLING
    *************************************************************************************/
    body {

    /*background: #366774;*/
    /*background: #cab49a;*/
    background: #FFFFFF;
    font-family: Verdana, Geneva, sans-serif;
    }

    img,
    embed,
    object,
    video {
    max-width: 100%;
    }

    /************************************************************************************
    HEADER
    *************************************************************************************/
    #header {
    width:100%;
    /*background-color: #203b44;*/
    background-color: #363333;

    }

    /************************************************************************************
    Page wrapper
    *************************************************************************************/
    #page {
    /*margin: 36px auto;*/
    width: 100%;

    }

    /************************************************************************************
    Content
    *************************************************************************************/
    .content {
    margin: 0 auto 53px;
    width: 93.75%; /* 900px / 960px */

    }

    .content .main {
    float: left;
    width: 62.8888889%; /* 566px / 900px */
    background: Red;
    }

    .content .other {
    float: right;
    width: 36.7777778%; /* 331px / 900px */
    background: Blue;
    }


    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">

    <!-- disable iPhone inital scale -->
    <meta name="viewport" content="width=device-width; initial-scale=1.0">

    <title>RWD</title>

    <!-- main css -->
    <link href="newstyle.css" rel="stylesheet" type="text/css">

    <!-- media queries css -->
    <link href="media-queries.css" rel="stylesheet" type="text/css">

    <!-- html5.js for IE less than 9 -->
    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- css3-mediaqueries.js for IE less than 9 -->
    <!--[if lt IE 9]>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
    <![endif]-->

    </head>

    <body>

    <header id="header">
    <div id="headerImg"><img src="images/logo.jpg" alt="RWD" /></div>
    </header>
    <!-- /#header -->

    <div id="page">
    <div class="content section">
    <div class="main">
    <p>Hi we are a passionate web/graphic designer team, check out our work and feel free to get in touch!</p>
    </div><!-- /end .main -->

    <div class="other">
    <p>Hi we are a passionate web/graphic designer team, check out our work and feel free to get in touch!</p>
    </div><!-- /end .other -->
    </div><!-- /end .blog.section -->
    </div><!-- /end #page -->

    </body>
    </html>

    Kind regards

    Rob

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by rredford View Post
    I want my header and footer to appear the full width of the page but it still has some white space around it.
    Hi Rob. It sounds like a case of needing to add

    Code:
    body {padding: 0; margin: 0;}
    This is where a CSS reset comes in handy. E.g.

    Code:
    html, body, h1, h2, h3, h4, h5, h6, p, a, blockquote, pre, code, hr, img, form, fieldset, legend, label, textarea, span, em, strong, sub, sup, cite, table, tbody, td, tfoot, th, thead, tr, tt, dl, dt, dd, ol, ul, li {margin: 0; padding: 0;}
    
    img {vertical-align: bottom; border: none;}

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    55
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ralph.m

    That's spot on and I learnt something new there because I had seen that in another Responsive Web Design example but did not know what it did.

    Thanks again

    Rob

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Yes, browsers have their own default styles, which you need to override to get consisten results. For example, most put margin or padding around the body element, and each puts slightly different default margins and paddings on lists, for example, which can be quite confusing. You can either set your ow styles as you style each element, or just strip out the default styles in one hit with a reset. There are mixed opinions about whether this is ideal practice or not, but a reset is a common action that is quite handy, really.

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    55
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Excellent that's good to know, thanks very much for your help.

    Cheers

    Rob


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
  •