Help - Search - Members - Calendar
Full Version: Background color not filling all the way?
HTMLHelp Forums > Web Authoring > Cascading Style Sheets
Zulaika
Why won't the header fill in all the way?

CODE
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>

<div id="container">    
    
    <div id="header">
        <p><span id="header-title">Header</span></p>
        <p><span id="header-description">Description</span></p>
    </div>
    
    <div id="navigation">
        <div class="menu">
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="about.html">About</a></li>
            </ul>
        </div>
    </div>

    <div id="content">

        <div id="post">
            <span id="post-title">Post Title 1</span>
            <p>This is a sample <a href="#">link</a>.</p>
            <link rel="alternate" type="application/rss+xml" title="RSS" href="http://elgg.org/pg/thewire/?view=rss" />
        </div>

        <div id="sidebar">
            <div id="secondary" class="widget-area" role="complementary">
                <h3>Search</h3>
                <form method="get" action="http://www.google.com/search">
            <div>
            <table border="0" cellpadding="0">
                <tr>
                <td>
                    <input type="text" name="q" size="25" maxlength="255" value="" />
                    <input type="submit" value="Search" />
                </td>
                </tr>
                <tr>
                <td style="font-size:75%">
                    <input type="checkbox"  name="sitesearch" value="prosalamander.com" checked /> only search PRO SALAMANDERRR!
                </td>
                </tr>
            </table>
            </div>
            </form>
            </div>

    </div>
    
        <div id="footer">
            <p>All right reserved.</p>
        </div>
    </div>

</div>

</body>
</html>

CODE

a:link {
    color:#ff0000;
}
a:visited {
    color:#ff0000;
}
a:hover {
    color:#dd0000;
}
a:active {
    color:#dd0000;
}

body {
    font-family:arial,sans-serif;
    background:#333;
}

#container {
    background: #fff;
    border: solid #000 1px;
    margin-left: 25%;
    margin-right: 25%;
}

#header {
    text-align: center;
    background: #333;
}
    
#header-title {
    font-size: 26px;
    font-weight: bold;
}

#header-description {
}

#navigation {
    background: #ff0000;
    display: block;
    float: left;
    margin: 0 auto 1em;
    width: 100%;
    border-top: solid #000 1px;
        border-bottom: solid #000 1px;
}
#navigation ul {
    list-style: none;
    margin: 0;
    padding-left: 0;
}
#navigation li {
    float: left;
    position: relative;
}
#navigation a {
    display: block;
    line-height: 2em;
    padding: 0 1em;
    text-decoration: none;
    color:#fff;
    border-right: solid #000 1px;
}
#navigation li:hover > a {
    background: #dd0000;
}
#navigation ul ul a:hover {
    background: #dd0000;
}
#navigation ul li:hover > ul {
    display: block;
}
#navigation li:active > a {
    background: #dd0000;
}

#content {
    padding-left: 5px;
    padding-right: 5px;
}

#post {
    float: left;
    width: 75%;
    clear:both;
}

#post-title {
    font-weight: bold;
    font-size: 20;
}

#sidebar {
    margin: -17px 0 0;
    float: right;
    width: 25%;
}

#footer {
    clear:both;
    text-align: center;
}
pandy
It's related to your other problem. P also has default margins, top and/or bottom and size varies with browser. Most block level elements except DIV are given some kind of margin by browsers or the text would run together.
Zulaika
QUOTE(pandy @ Jul 5 2012, 03:00 PM) *

It's related to your other problem. P also has default margins, top and/or bottom and size varies with browser. Most block level elements except DIV are given some kind of margin by browsers or the text would run together.


Oh wow, thank you. This is definitely an eye opener.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2014 Invision Power Services, Inc.