CODEWITHSUNDEEP
css
Gurjit
Gurjit

Reputation: 564

Error in the navigation menu (CSS) with the border of last-child

I have the following piece of code where I am constructing a navigation menu with pure CSS code but there is seeming a problem to me that I can not figure out how to remove out the extra space(padding) between the both sides of the menu means the last and first child. Plz someone help me out there. 

<!DOCTYPE html>

<html>
<head>
    <title>Navigation</title>
</head>
    <style>
    .menu,.sub_menu li,.menu li,.menu a {
            margin: 0;
            padding: 0;
            border: none;
            outline: none;
            text-decoration: none;
        }

    .menu {
            height: 40px;
            width: 535px;

            background: #4c4e5a;
            background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
            background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
            background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
            background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
            background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);

            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
        }

    .menu li {
            /*position: relative;*/
            list-style: none;
            float: left;
            /*display: block;*/
            height: 40px;
        }

    .sub_menu li {
        display: none;
        }

    .menu li a {
        /*display: block;*/
        padding: 0 14px;
        line-height: 40px;
        /* Border on the left side of the navigation bar     */
        border-left: 1px solid #393942;
        border-right: 1px solid #4f5058;

        font-family: Helvetica, Arial, sans-serif;
        font-weight: bold;
        font-size: 13px;

        color: #f3f3f3;
        text-shadow: 1px 1px 1px rgba(0,0,0,.6);

        -webkit-transition: color .2s ease-in-out;
        -moz-transition: color .2s ease-in-out;
        -o-transition: color .2s ease-in-out;
        -ms-transition: color .2s ease-in-out;
        transition: color .2s ease-in-out;
    }

    .menu li:first-child a {
        border-left: none;
    }

    .menu li:last-child a {
        border-right: none;
        }

    .menu li:hover > a {
        color: #8fde62;
        }    
    </style>

<body>
    <ul class="menu">

    <li><a href="#">My dashboard</a></li>
    <li><a href="#">Likes</a></li>
    <li><a href="#">Views</a>

        <ul class="sub_menu">
            <li><a href="#" class="documents">Documents</a></li>
            <li><a href="#" class="messages">Messages</a></li>
            <li><a href="#" class="signout">Sign Out</a></li>
        </ul>

    </li>
    <li><a href="#">Uploads</a></li>
    <li><a href="#">Videos</a></li>
    <li><a href="#">Documents</a></li>

    </ul>



</body>
</html>

Upvotes: 1

Views: 462

Answers (2)

Josh Crozier
Josh Crozier

Reputation: 241128

If you want the width of the .menu element to fit the containing contents, set the display of the element to inline-block and remove the fixed width.

EXAMPLE HERE

.menu {
    height: 40px;
    display: inline-block;
 /* Other styling.. */
}

Additionally, if you want to remove/change the padding on the last/first a elements:

EXAMPLE HERE

.menu li:first-child a {
    padding-left: 0;
}
.menu li:last-child a {
    padding-right: 0;
}

Upvotes: 1

Connor Simpson
Connor Simpson

Reputation: 487

As a designer for two years, I've always thought it was best to use this piece of code before I try styling my page:

*{
    margin: 0;
    padding: 0;
    overflow: auto;
    font-family: inherit;
    list-style-type: none;
    list-style-position: inside;
}

I use this on top of all my CSS code to eradicate any annoying padding or margin that comes default with some HTML elements.

Upvotes: 0

Related Questions