My Navigation Bar Doesn't End

Discussion in 'HTML & Website Design' started by taracakes, Feb 15, 2010.

  1. #1
    Hi!

    I was hoping someone could help me with the html/css of my nav bar. I'm doing a horizontal nav bar with my own images. For some reason, I can't get the nav bar to end. It continues on into the right and expands the browser screen when I test it. I have attached a screen grab to explain what's happening. I have written the follow html code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Arizona Infrared Services</title>
    <link rel="stylesheet" href="stylesheet.css" type="text/css"> </link>
    </head>

    <body>

    <div class="header"><img src="images/header.jpg" alt="Arizona Infrared Services" longdesc="images/header.jpg" /></div>
    <ul class="nav">
    <li class="first"><a href="heat-and-energy-loss.html"> heat &amp; energy loss</a></li>
    <li><a href="moisture-mold-leak-detection.html"> moisture, mold &amp; leak detection</a></li>
    <li><a href="electical-systems.html"> electrical systems </a></li>
    <li><a href="aboutus.html"> about us </a></li>
    </ul>
    </body>

    </html>

    And the following corresponding css:

    @charset "utf-8";
    /* CSS Document */


    body {
    background-color: #000000;
    font:Tahoma, Geneva, sans-serif;
    margin-left: 200px;
    margin-right: 200px;
    }

    ul.nav {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 150em;
    overflow: hidden;
    background:url(images/nav.jpg);
    font-family:Tahoma, Geneva, sans-serif;
    }

    ul.nav li {
    float: left;
    }

    ul.nav a {
    display: block;
    padding: 0 3em;
    line-height: 2.1em;
    background:url(images/divider.jpg) repeat-y left top;
    text-decoration: none;
    font-size:16px;
    font-weight: 400;
    color: #000000;
    }

    ul.nav .first a {
    background-image: none;
    }

    ul.nav a:hover,
    ul.nav a:focus {
    color: #C90;
    }

    .header {
    text-align: center;
    width: 100%;
    margin-top: -20px;
    }

    Does anyone see a problem with the code?

    I validated and it seems fine.

    I look forward to any responses!!! Thank you!
     

    Attached Files:

    taracakes, Feb 15, 2010 IP
  2. LeetPCUser

    LeetPCUser Peon

    Messages:
    711
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #2
    You have the width on the navbar set to 150em. Give it a set width in pixels.
     
    LeetPCUser, Feb 15, 2010 IP
  3. taracakes

    taracakes Peon

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Wooo hooo!! Thank you!
     
    taracakes, Feb 15, 2010 IP