Navigation placement help

Hi,

I am currently working on a small personal project, been away from web design for a while but I am slowly getting back into the swing of things.

I have a small problem with the placement of my navigation menu and was hoping someone would be able to help. I want it set up so my navigation menu sits to the right hand side within the header but at the moment it is sitting center. This has been the case since I implemented the “get a free quote” textbox (Link to site below). I want the navigation sitting above that textbox.

here is a link to the site: Web Project

Here is my code:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd"
    >
<html lang="en">
<head>
    <title>Stewart Domestic Services - House and Office Clearances</title>
    <link href="css.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div class="wrapper">
        <div class="header">
            <img class="logo" alt="SDS - House and Office Clearances" src="images/sds_logo.gif" />
            <img class="imageRightMargin" src="images/header_textbox_right.gif" />
                <h1 class="textboxContent">Get a Free Quote by Calling Us Today:<br />
                [Phone Number]</h1>
            <img class="imageRight" src="images/header_textbox_left.gif" />
            <ul class="navigation">
                <li class="navigation">
                    <a class="navigation" href="#">Contact</a>
                </li>
                <li class="navigation">
                    <a class="navigation" href="#">Services</a>
                </li>
                <li class="navigation">
                    <a class="navigation" href="#">About</a>    
                </li>
                <li class="navigation">
                    <a class="navigation" href="#">Home</a>
                </li>
            </ul>
        </div>
        <div class="content">
            <div class="quote">
                <h1 class="quote">Get a Quote!</h1>
                <p class="quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis hendrerit, turpis non condimentum dictum, leo mi lobortis turpis, id feugiat justo nisl et magna. Maecenas semper blandit ligula vel semper. Nullam egestas dignissim ultrices. Curabitur ut nunc felis, et scelerisque leo. Suspendisse non laoreet ligula. Donec in ipsum mattis sapien hendrerit sagittis. Quisque massa lorem, feugiat volutpat faucibus et, rutrum vitae augue. Nulla accumsan suscipit erat, in fringilla eros convallis sed. Cras eu elit odio, at ultricies neque.</p>
            </div>
            <div class="services">
                <h1 class="services">What We Do</h1>
                <ul class="services">
                    <li class="services">
                    <img src="images/house.gif" class="imageLeft" />
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis hendrerit, turpis non condimentum dictum, leo mi lobortis turpis, id feugiat justo nisl et magna. Maecenas semper blandit ligula vel semper. Nullam egestas dignissim ultrices. Curabitur ut nunc felis, et scelerisque leo. Suspendisse non laoreet ligula. Donec in ipsum mattis sapien hendrerit sagittis. Quisque massa lorem, feugiat volutpat faucibus et, rutrum vitae augue. Nulla accumsan suscipit erat, in fringilla eros convallis sed. Cras eu elit odio, at ultricies neque.
                    </li>
                    <li class="services">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis hendrerit, turpis non condimentum dictum, leo mi lobortis turpis, id feugiat justo nisl et magna. Maecenas semper blandit ligula vel semper. Nullam egestas dignissim ultrices. Curabitur ut nunc felis, et scelerisque leo. Suspendisse non laoreet ligula. Donec in ipsum mattis sapien hendrerit sagittis. Quisque massa lorem, feugiat volutpat faucibus et, rutrum vitae augue. Nulla accumsan suscipit erat, in fringilla eros convallis sed. Cras eu elit odio, at ultricies neque.
                    </li>
                    <li class="services">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis hendrerit, turpis non condimentum dictum, leo mi lobortis turpis, id feugiat justo nisl et magna. Maecenas semper blandit ligula vel semper. Nullam egestas dignissim ultrices. Curabitur ut nunc felis, et scelerisque leo. Suspendisse non laoreet ligula. Donec in ipsum mattis sapien hendrerit sagittis. Quisque massa lorem, feugiat volutpat faucibus et, rutrum vitae augue. Nulla accumsan suscipit erat, in fringilla eros convallis sed. Cras eu elit odio, at ultricies neque.
                    </li>
                </ul>
            </div>
        </div>
        <div class="footer"></div>
    </div>
</body>
</html>

CSS:

body {
    background-color: #eeefed;
    font-family: sans-serif;
    font-size: 12px;
}
.wrapper {
    background-color: #FFFFFF;
    float: left;
    width: 98%;
    margin: 1%;
}
.header {
    height: 300px;
    background-image: url('images/header_bg.gif');
    background-repeat: repeat-x;
    margin-bottom: 100px;
}
img.imageRightMargin {
    float: right;
    margin-top: 217px;
    margin-right: 5%;
}
img.imageRight {
    float: right;
    margin-top: 217px;
}
h1.textboxContent {
    text-align: center;
    color: #CCCCCC;
    font-size: 16px;
    padding: 1.5% 1% 1% 1%;
    margin-top: 217px;
    float: right;
    height: 83px;
    background-image: url('images/header_textbox_content.gif');
    background-repeat: repeat-x;
}
img.imageLeft {
    float: left;
    margin-right: 1%;
    margin-bottom: 1%;
}
ul.navigation {
    float: right;
    margin: 3% 3% 0% 0%;

}
li.navigation {
        color: #FFFFFF;
        font-size: 22px;
        list-style-type: none;
        float: inherit;
        display: inline;
        text-align: center;
        padding-right: 20px;
}
a.navigation:link,a.navigation:visited {
    color: #FFFFFF;
    text-decoration: none;
}
a.navigation:hover, a.navigation:active {
    color: #999999;
    text-decoration: none;
}
.content {
    float: left;
    width: 100%;
    background-color: #FFFFFF;
}

.quote {
    margin-left: 1%;
    width: 30%;
    float: left;
}
h1.quote {
    margin-left: 1%;
    width: 85%;
    font-family: sans-serif;
    font-size: 26px;
    color: #000099;
    border-bottom: solid 2px #CCCCCC;
}
p.quote {
    width: 85%;
    margin: 0px 5px 0px 5px;
}
.services {
    width: 69%;
    float: left;
}
h1.services {
    width: 97%;
    font-family: sans-serif;
    font-size: 26px;
    color: #000099;
    border-bottom: solid 2px #CCCCCC;
}
ul.services {
    width: 95%;
    margin: 0px 5px 0px 5px;
}
li.services {
    width: inherit;
    list-style-type: none;
    margin-bottom: 1%;
    padding-bottom: 1%;
    border-bottom: solid 1px #CCCCCC;
}
.footer {
    float: left;
    width: 100%;
    height: 300px;
    margin-top: 1%;
    background-image: url('images/header_bg.gif');   
}

I appreciate any help that can be given, thanks,
Stephen.

Here’s revised code that is closer.


h3.textboxContent {
    text-align: center;clear: both;
    color: #CCCCCC;
    font-size: 16px;
    padding: 1.5% 1% 1% 1%;
    float: right;
    position: relative;top: 150px;
    height: 83px;
    background-image: url('images/header_textbox_content.gif');
    background-repeat: repeat-x;
}

There may be better ways to do it but this is a good start

I cleaned it up a bit but see if this is what you’re looking to accomplish.


body {
    background-color: #eeefed;
    font-family: sans-serif;
    font-size: 12px;
}
.wrapper {
    background-color: #FFFFFF;
    float: left;
    width: 98%;
    margin: 1%;
}
.header {
    height: 300px;
    background-image: url('images/header_bg.gif');
    background-repeat: repeat-x;background-color: #000;
    margin-bottom: 100px;
}

h3.textboxContent {
    text-align: center;
    color: #CCCCCC;
    font-size: 16px;
    padding: 1.5% 1% 1% 1%;
    margin-top: 217px;
    float: right;
    height: 83px;
    background-image: url('images/header_textbox_content.gif');
    background-repeat: repeat-x;
}

ul.navigation {
    float: right;
    margin: 3% 3% 0% 0%;clear: both;

}
ul.navigation li {
        color: #FFFFFF;
        font-size: 22px;
        list-style-type: none;
        display: inline;
        text-align: center;
        padding-right: 20px;
}
ul.navigation li a:link,ul.navigation li a:visited {
    color: #FFFFFF;
    text-decoration: none;
}
ul.navigation li a:hover, ul.navigation li a:active {
    color: #999999;
    text-decoration: none;
}




.footer {
    float: left;
    width: 100%;
    height: 300px;
    margin-top: 1%;
    background-image: url('images/header_bg.gif');   
}

It looks like you needed to clear the navbar’s float: right. This allows the get free section to float right as well.

I took out your images on your header. You shouldn’t need them as you repeat the background on the div.

I also removed all the extra ‘navigation’ references. You shouldn’t need them and can apply them more efficiently with the css above.

Here is the header container.


 <div class="header">
        <img class="logo" style="float: left" alt="SDS - House and Office Clearances" src="images/sds_logo.gif" />
             <ul class="navigation">
                <li>
                    <a href="#">Contact</a>
                </li>
                <li>
                    <a href="#">Services</a>
                </li>
                <li>
                    <a href="#">About</a>    
                </li>
                <li>
                    <a href="#">Home</a>
                </li>
            </ul>
   
<h3 class="textboxContent">Get a Free Quote by Calling Us Today:<br />
                [Phone Number]</h3>
           
        </div>

I didn’t verify this code but it should get you close to where you want. :slight_smile: