Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Oct 2012
    Posts
    10
    Thanks
    2
    Thanked 1 Time in 1 Post

    Navigation/paragraph not stretching to fit width of page

    Hey there!

    How might I get the bottom background to extend the width of the page? Itís color ##BBFFFF

    As well as top stagnant navigation to extend the width of the page

    thanks!

    LMK if you have any suggestions, here's my code...


    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <title>Sincerely Curious</title>
    <head>
    <style type="text/css">

    body {background-color:white;}
    p {color:#635149;}
    p{font-family:"arial", Times, serif;}

    div.ex
    {
    width:1200px;
    padding:1px;
    border:1px;
    margin:0px;
    background:#BBFFFF;
    }

    #navigation {
    position: fixed;
    top: 0;
    width: 100%;
    color: #ffffff;
    height: 35px;
    text-align: left;
    padding-top: 15px;
    /* Adds shadow to the bottom of the bar */
    -webkit-box-shadow: 0px 0px 8px 0px #000000;
    -moz-box-shadow: 0px 0px 8px 0px #000000;
    box-shadow: 0px 0px 8px 0px #000000;
    /* Adds the transparent background */
    background-color: #635149;
    color: rgba(1, 1, 1, 0.8);
    }
    #navigation a {
    font-size: 14px;
    font-family: "baskerville";
    padding-left: 15px;
    padding-right: 15px;
    color: white;
    text-decoration: none;
    }

    #navigation a:hover {
    color: grey;
    }
    </style>
    </head>
    <header>
    <header role="banner">
    <br>
    <br>
    <br>
    <div id="navigation">
    <a href="default.asp">Facebook</a><a href="news.asp">Linked In</a></li><a href="contact.asp">Twitter</a><a href="about.asp">About</a>
    </ul>
    <br>
    <br>
    <br>
    </header>
    <body>
    <center>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <center><img src="http://farm9.staticflickr.com/8315/8072531684_561cd9347f_m.jpg"</c>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <hr>
    <div class="ex">
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>

    <p>
    This should be an opening paragraph to my insatiable and unfortunately intangible love affair with curiosity.
    <br>It should be sensible and not mention ninjas or my love of cute fluffy thang thangs.</br></p>

    <p>
    This should talk about my work. How I am a freak and actually like to work.
    <br>How itís really the only thing that matters to me because seriously, life sucks. Merp. This is just a joke, holla!</br>
    </p>
    <p>
    In closing I should tell people that I can work limited freelance projects or give them high fives for cheap tricks.
    <br>Hey, why not! Itís what the cool kids do! </br></div>
    </p>
    </body>



    </footer>
    </body>
    </html>

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Remove the set width on .ex - since the div is a block element it will extend to take up the full width of the page without an explicit width.

    Your top navigation doesn't uite take up the full width, dependent on the browser used, because of the default margin/padding that browsers apply to the body element. Reset this in your css by including this statement at the top of your css:

    Code:
    *{margin:0;padding:0}
    This will reset the margin and padding for all elements, and you can then apply your own as required. This avoids difficulties caused by different browsers using different default values for margin and padding.

    I see you're using the deprecated <center> tag. Investigate using css and text-align:center instead.

  • Users who have thanked SB65 for this post:

    catkustes (10-20-2012)


  •  

    Posting Permissions

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