CODEWITHSUNDEEP
cssmenunavigationhtml-lists
user2178790
user2178790

Reputation: 11

Problems with rounded horizontal CSS navigation menu

I'm designing a navigation menu for a website.

The menu must have rounded corners, I've done this using 'border-radius'.

I've set the width as 800px as that's the rough width the menu needs to be, if I remove the width or put width: auto the width goes to 100%.

There is a gap before the first button and after the last button in my navigation menu and what I need to get rid of this gap without losing the curved edges.

How can I make the first and last buttons maintain rounded outside corners and remove the gap between each side of the navigation.

CSS: 

        /* CSS MENU */

        #menu {
        /* DISPLAY SETTINGS */
            text-align: center;
            height: 40px;
            width: 800px;
            margin: 0; 
            padding: 0;
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;    
        /* APPEARANCE SETTINGS */
            border-top: 2px solid #356AA0;
            border-left: 2px solid #356AA0;
            border-bottom: 2px solid #204061;
            border-right: 2px solid #204061;
            background: #628ddb;
        /* FONT SETTINGS */
            color: #15387a;
            font-family: Arial, sans-serif;
            font-weight: bold;
            text-transform: uppercase;
            font-size: 12px;    
        }
        /* LIST SETTINGS */
        #menu li {
            display: inline-block;
        }
        /* HYPERLINK SETTINGS */
        #menu li a {
            text-decoration: none;
            display: block;
            padding: 0 15px;
            line-height: 40px;
        }
        /* HOVER AND ACTIVE BUTTON SETTINGS */
        #menu li a:hover, #menu li.active a {
        color: #15387a; background: #3D7BBB; border-bottom: 2px solid #204061
        }

HTML

<ul id="menu">

        <li class="active end"><a href="#">Home</a></li>
        <li><a href="#">Our Services</a></li>
        <li><a href="#">Testimonials</a></li>
        <li><a href="#">Get A Quote</a></li>
        <li><a href="#">Drive For Us</a></li>
        <li><a href="#">Terms & Conditions</a></li>
        <li class="end"><a href="#">Contact Us</a></li>

    </ul>

Upvotes: 1

Views: 1582

Answers (3)

Ab_c
Ab_c

Reputation: 408

So there are several things that need to happen in order to maintain your design:

1.) The UL tag needs to have display: table

2.) Like what @Netsurfer You'll need to set the LI to have display: table-cell so that the list items flush to the edges

3.) Now that UL has rounded corners, any child elements with squared corners will stick out. You can either: a.) Resolve this by applying overflow: hidden to both the UL and LI or b.) Apply the rounded corners to the LI and A tags.

4.) Your :hover & active state applies a bottom border -- the table-cell will cause this to look strange. It might be better to remove it altogether.

You can check out the code here: http://jsfiddle.net/vuAVV/

Upvotes: 1

Netsurfer
Netsurfer

Reputation: 5542

Change the display setting for the LIs to display: table-cell.
By doing so you are also not "trapped" by the white-space issues when using display: inline-block.

See jsFiddle

PS: Forgot the rounded corners ..., now also included. ;-)

Upvotes: 0

chopper
chopper

Reputation: 6709

Remove text-align: center; from #menu.

You might also want to include padding-left: 10px; to make sure when the first link is highlighted it does not overlap with the rounded corner of the menu.

See this working jsFiddle.

Upvotes: 0

Related Questions