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 3 of 3
  1. #1
    New Coder
    Join Date
    Nov 2010
    Posts
    70
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Can't get an extending header background

    I am trying to get the part of my header that I am using that is a solid color to extend horizontally across the top of my web page and I have followed tutorials, but something seems to be wrong with my coding as the image does not spread across the page. Thanks.

    HTML:
    <link href="DEFAULT.css" rel="stylesheet" type="text/css" />
    </head>

    <body>

    <div id="container">
    <div id="header">
    <img src="images/CampusTaps-bg_01.gif" alt="College Spot" width="1100" height="133" />

    <ul id="nav">

    CSS:
    html, body, div, span, applet, object,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strong,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    }
    body {
    line-height: 1;
    }
    ol, ul {
    list-style: none;
    }
    blockquote, q {
    quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    content: '';
    content: none;
    }

    /* remember to define focus styles! */
    :focus {
    outline: 0;
    }

    a {
    text-decoration; non;
    color:black;
    }

    a:hover {
    text-decoration: underline;
    }

    /*MAIN STYLES*/

    html {
    }

    #container {
    width: 800px;
    background: white;
    margin: 3em auto
    }
    .header{
    width:800px;

    height:131px;
    background:#333333 url(images/CampusTaps-bg_01.gif) repeat-x top;
    }

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,332
    Thanks
    5
    Thanked 363 Times in 360 Posts
    move the header div outside the container div and set width to 100%

  • Users who have thanked teedoff for this post:

    conphill (11-03-2010)

  • #3
    New Coder
    Join Date
    Nov 2010
    Posts
    70
    Thanks
    6
    Thanked 0 Times in 0 Posts
    That solved the problem. Thanks


  •  

    Posting Permissions

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