Login

05-29-2008, 04:15 PM

[eluser]Jamie Rumbelow[/eluser]
Hello!

I'm being bugged by a css problem I'm having. I want the navigation bar to site perfectly under the header image, but it is leaving a gap. 2 hours infront of Firebug and TextMate, with no results drove me to the community for help.

index.htm

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;

&lt;head&gt;

    &lt;title&gt;Host It, Baby!&lt;/title&gt;

    &lt;link type="text/css" rel="stylesheet" href="style.css" /&gt;

&lt;/head&gt;

&lt;body&gt;

    <div id="container">

        <a href="#"><img src="images/header.png" alt="hostitbaby" class="noborder" /></a>

        <div id="nav">

            <ul>

                <li><a href="#">Home</a></li>

                <li><a href="#">Sorry, What?</a></li>

                <li><a href="#">My Files</a></li>

                <li><a href="#">Upgrade</a></li>

                <li><a href="#">Forums</a></li>

            </ul>

        </div>

        <div id="content">

            <h2>News Post</h2>

            <small>Posted on 08/12/2008 by Jamie</small>

            <p>BlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlah</p>

        </div>

        <div id="sidebar">

            <ul>

                <li>

                    <h2>Log In!</h2>

                    &lt;form method="post" action="#"&gt;

                        &lt;input type="text" name="username" id="username" /&gt;<br />

                        &lt;input type="password" name="username" id="username" /&gt;<br />

                        &lt;input type="submit" name="username" id="username" value="Log In!" /&gt;

                    &lt;/form&gt;

                </li>

                <li>

                    <h2>Sidebar Things</h2>

                    <p>Ladidadida.</p>

                </li>

            </ul>

        </div>

        <div id="footer">

            <a href="http://www.jamierumbelow.net/"><img src="images/jamierumbelow.gif" alt="It's a JamieRumbelow Kinda Thing" /></a> | We love Valid Markup... | And Valid Stylesheets! | Wanna spread the word?

        </div>

    </div>

&lt;/body&gt;

&lt;/html&gt;

style.css

Code:
body {

    margin: 0;

    padding: 0;

    color: #402A01;

    font-width: 75%;

}

a {

    text-style: none;

    color: #402A01;

    margin: 0;

    padding: 0;

}

#container {

    width: 656px;

    margin-left: auto;

    margin-right: auto;

    margin-top: 20px;

}

#header {

}

#nav {

    background-color: #848C46;

    height: 51px;

}

#nav ul {

    line-height: 51px;

    white-space: nowrap;

}

#nav li {

    display: inline;

}

#nav a {

    height: 100%;

    padding: 16px;

}

#nav a:hover {

    background-color: #9DA658;

}

.noborder {

    border: 0pt none;

}

Thanks,

Jamie

05-29-2008, 05:21 PM

[eluser]onejaguar[/eluser]
A little off topic, but I know how annoying CSS can be.

The header image needs:

Code:
vertical-align: middle

The #nav ul needs:

Code:
margin-top: 0px;

And the #nav div should be set to the width of your header image.

05-29-2008, 05:37 PM

[eluser]Jamie Rumbelow[/eluser]
Brilliant!

Thank you very much!