CODEWITHSUNDEEP
htmlcss
JimRomeFan
JimRomeFan

Reputation: 413

I can't align my navigation menu properly within its container

I have attached a picture so you can see what kind of problem I am receiving. I want the navigation menu to line up with the navigation container so they appear as the same element. The picture shows the last element of the navigation menu "E-MAIL" and then the container that it sits within is just a yellow strip (as indicated in the code below).

I have tried working with negative margins on the navigation container but no solution as of yet.

web graphic http://jaylefler.com/webgraphic.png 

 <!DOCTYPE html>
    <html>
    <head>
        <title>css example</title>

    <style type="text/css">


    #logo {
        background-color: black;
        width: 100%;
        color: rgb(255,200,0);
    }

    #logo img {
        padding: 10px;
    }

    body {
        font-family: Arial, Helvetica, Verdana;
        margin: 0;
    }

    #contents {
        border: 2px solid black;
        border-radius: 15px;
        box-shadow: 6px 6px 4px 4px #000;
        width: 90%;
        min-height: 650px;
        margin: 0 5%;
        margin-top: 15px;
        padding: 15px;
    }

    #navMenu {
        width: 760px;
        height: 30px;
        background-color:rgb(255,200,0);
        border:1px #000 solid;
        font-weight:bold;
        margin-left: -2px;
    }

    #navMenu ul{
        margin:-1px 0 0 0;
        padding:0;
        line-height:32px;
    }

    #navMenu li{
        margin:0;
        padding:0;
        list-style:none;
        position:relative;
        background-color:rgb(255,200,0);
        float:left;
        border:1px #000 solid;
    }

    #navMenu ul li a{
        text-align:center;
        text-decoration:none;
        height:30px;
        width:150px;
        display:block;
        color:#000;
    }

    #navMenu ul ul{
        position:absolute;
        visibility:hidden;
        top: 31px;
        margin-left: -2px;  
    }

    #navMenu ul li:hover ul{
        visibility: visible;
    }

    #navMenu a:hover {
        background-color:#000;
        color:rgb(255,200,0);
    }

    .left_part {
        background:black;
    }

    .right_part {
       background:yellow;   
       float:right;
       white-space:nowrap;
       display:inline;
       text-overflow:ellipsis;
       overflow:hidden;
    }

    #navContainer {
        background-color:rgb(255,200,0);
        width:100%
        margin-top:-3x;
        padding:0;
        border:1px solid;
        height:31px;
        clear:left;

    }

    </style>

    </head>

    <body>

    <div id="logo">

        <div class="left_part">
            <img src="demo.gif">
        </div>

        <div class="right_part">

        </div>

    </div>


    <div id="navContainer">
        <div id="navMenu">
            <nav>
                <ul>
                    <li><a href="#">HOME</a></li>
                    <li><a href="#">PROFILE</a></li>
                    <li><a href="#">MANAGE SUB</a>
                    <ul>
                        <li><a href="#">VIEW TITLES</a></li>
                        <li><a href="#">ADD TITLE</a></li>
                        <li><a href="#">MODIFY TITLE</a></li>
                        <li><a href="#">REMOVE TITLE</a></li>
                    </ul>
                    </li>
                    <li><a href="#">NEW RELEASES</a></li>
                    <li><a href="#">E-MAIL</a></li>
                </ul>
            </nav>
        </div>
    </div>

    <div id="contents">

        <p>This is just some dummy text. </p>

    </div>

    </body>
    </html>

Upvotes: 0

Views: 2312

Answers (2)

oleron
oleron

Reputation: 483

I did a little cleanup. Since I don't have your logo image i removed that part of the code, I guess you will manage to add that yourself.

Here is a simplified code that fixes your problem:

<!DOCTYPE html>
<html>
<head>
    <title>css example</title>

<style type="text/css">

body {
    font-family: Arial, Helvetica, Verdana;
    margin: 0;
    padding: 0;
}

#contents {
    border: 2px solid black;
    border-radius: 15px;
    box-shadow: 6px 6px 4px 4px #000;
    width: 90%;
    min-height: 650px;
    margin: 0 5%;
    margin-top: 15px;
    padding: 15px;
}

nav {
    width: 100%;
    height: 30px;
    background-color:rgb(255,200,0);
    border-bottom:1px solid #000;
}

nav ul{
    padding:0;
    margin: 0;
    overflow: hidden;
}

nav > ul{
    min-width: 755px;
}

nav ul li{
    float: left;
    margin:0;
    padding:0;
    list-style:none;
    background-color:rgb(255,200,0);
    border-right:1px solid #000;
}

nav ul li a{
    text-align:center;
    text-decoration:none;
    width:150px;
    height: 25px;
    padding-top: 5px;
    display:block;
    color:#000;
}

nav ul li ul{
    position:absolute;
    visibility:hidden;
    top: 31px;
    border-bottom: 1px solid #000;
    border-left: 1px solid #000;
    margin-left: -1px;  
}

nav ul li:hover ul{
    visibility: visible;
}
nav ul li ul li {
    float: none;
}

nav a:hover {
    background-color:#000;
    color:rgb(255,200,0);
}


</style>

</head>

<body>
<nav>
    <ul>
        <li><a href="#">HOME</a></li>
        <li><a href="#">PROFILE</a></li>
        <li><a href="#">MANAGE SUB</a>
        <ul>
            <li><a href="#">VIEW TITLES</a></li>
            <li><a href="#">ADD TITLE</a></li>
            <li><a href="#">MODIFY TITLE</a></li>
            <li><a href="#">REMOVE TITLE</a></li>
        </ul>
        </li>
        <li><a href="#">NEW RELEASES</a></li>
        <li><a href="#">E-MAIL</a></li>
    </ul>
</nav>

<div id="contents">

    <p>This is just some dummy text. </p>

</div>

</body>
</html>

Upvotes: 1

Eric Goncalves
Eric Goncalves

Reputation: 5353

#navmenu {
    width: 760px;
    height: 30px;
    background-color: #FFC800;
    border: 1px black solid;
    border-top: 0; /* REMOVE TOP BORDER */
    margin-left: -2px;
}
#navContainer {
    background-color:rgb(255,200,0);
    width:100%
    height: 30px; /* MATCH HEIGHT */
    margin-top:-3x;
    padding:0;
    border:1px solid;
    height:31px;
    clear:left;

}

Upvotes: 1

Related Questions