The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Background color not filling all the way?
Zulaika
post Jul 5 2012, 12:42 PM
Post #1


Novice
**

Group: Members
Posts: 22
Joined: 8-June 11
Member No.: 14,725
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;
}


Attached thumbnail(s)
Attached Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jul 5 2012, 02:00 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Zulaika
post Jul 5 2012, 02:34 PM
Post #3


Novice
**

Group: Members
Posts: 22
Joined: 8-June 11
Member No.: 14,725
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Cascading Style Sheets · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 20th April 2024 - 12:50 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC