How to set browser full width navigation?


Tags: html,css

Problem :

I've to put a navigation along to the full width of the browser.

The problem is when click on the first item, along to the full browser width of that item shoild be effected.

This is also for last item

To do that, I've just worked with nav first-child and nav last child. You can see my work at here.

This works well at firefox. But, at chrome, if I zoom in/out the brwoser, the nav items will break.

HTML code:

<body>
    <div id="header" class="outer">
        <div class="inner">
            <h1 class="logo"><a href="index.html"><img src="images/logo-1.png" width="314" height="158" alt="logo" /></a></h1>
            <div class="nav">
                <ul>
                    <li><a href="#">home</a></li>
                    <li><a href="#">Nieuws</a></li>
                    <li><a href="#">Praktijk</a></li>
                    <li><a href="#">Behandelingen</a>
                        <ul>
                            <li><a href="#">ouderen</a></li>
                            <li><a href="#">Sport</a></li>
                            <li><a href="#">Algemeen</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="inner">
        <div id="content">
            <p>Lorem...</p>

        </div>
    </div>
</body>

CSS code:

body {
    background: #fff;
    color: #000;
    font-family: 'HelveticaNeueLTStd55Roman';
    font-size: 14px;
    line-height: 1em;
    overflow-x: hidden;
}

.outer {
    width: 100%;
    float: left;    
}
.inner {
    width: 941px;
    margin: 0 auto;
}

#header {
    width: 100%;
    float: left;
    padding: 22px 0 5px 0;
    background: url(../images/header-bg.png) repeat-x;  
}
h1.logo a {
    display: block;
    float: left;
}

.nav { 
    width: auto;
    float: left;
    margin: 24px 0 0 0;
}
.nav ul ul {
    display: none;
}
.nav ul li:hover > ul {
    display: block;
}

.nav ul {
    list-style: none;   
}

.nav ul li {
    float: left;
    margin: 0;
    padding: 0;
    position: relative;
}
.nav ul li a {
    min-width: 155px;
    text-align: center;
    margin: 0 0 8px -21px;
    padding: 0 22px 0 32px;
    display: block;
    font-size: 14px;
    color: #cc3840;
    line-height: 28px;
    font-family: 'HelveticaNeueLTStd75Bold';
    text-transform: uppercase;
    border-radius: 14px;
    background: #fff;
}
.nav ul li.active a, .nav ul li a:hover {
    color: #cf383c;
    background: none;
}
.nav ul li:first-child a {
    margin-left: -900%;
    padding-left: 900%; 
}
.nav ul li:last-child a {
    margin-right: -900%;
    padding-right: 900%;    
}
.nav ul li:hover a {
    color: #cf383c;
    background: none;   
}
    .nav ul ul {
        position: absolute;
        left: 10px;
        right: 0;
        display: none;
        z-index: 5; 
    }
    .nav ul ul li {
        position: relative;
        margin: 0;
        border: none;
    }
    .nav ul ul li a, .nav ul li:hover ul li a {
        width: 140px;
        display: block;
        background: #d0353e;
        color: #ffe597;
        font-size: 18px;
        margin: 6px 0 0 0;
        padding: 0;
        line-height: 26px;
        text-align: center;
        border-radius: 12px;
    }

    .nav ul ul li a:hover, .nav ul li:hover li a:hover {
        color: #fff;
    }

#content {
    width: 100%;
    float: left;
    border-top: 3px solid #fce696;
    margin: 20px 0 0 0; 
}
#content p {
    font-size: 14px;
    padding: 10px 0;    
}

Can you please tell me how can I fix that for chrome and safari.

Thanks in advance



Solution :

you need to set width to .nav > ul > li to fix this issue

.nav ul li:first-child, .nav ul li:last-child {
    width: 165px;
}

its working fine http://demo.sumedhasoftech.com/manoj/test/test.html


    CSS Howto..

    How to use Firebug to easily find which css file defines a particular style

    How to use an image more than one place in CSS

    How to add a border to only percentage of width of element, CSS Trick

    I made a webpage but have excess white space at the bottom, how do I get rid of this?

    CSS: How to get lines to “line up” accross different columns?

    PHP Header Include (nav bar) not showing up [closed]

    CSS: How to display an image in the background of a fixed-width, centered div?

    How to apply different CSS styles to 2 elements with the same class name?

    How to revert back to a value in css [closed]

    how to render tilted images in html or css or javascript ..?

    how to enlarge an element and show text on clicking

    How can I position my navigation bar further up on the page?

    How do I spread out this navbar along with making the links exclusive to the button itself?

    How to change order of divs in HTML code, for 3-column CSS Layout?

    How to write Hover property with CSS for a piece wih :after and :before properties?

    How to convert columns to rows using CSS

    How to let the user choose a page number?

    How to target a specific div out of 4 divs with the same class with CSS

    How to create a template for randomising pictures and quotes without correspondence?

    How do I get one element to respond to the click of another element? - CSS/jQuery

    Mobile Toggle Menu - How to Push Content outside the view of the viewport?

    DevTools: How to visualize scss changes automatically without the need to save

    Amazing CSS Div scrolling effect, cant explain, link provided. This is a web design issue, how to get an effect like this?

    how do i get css source file path from firebug?

    How can I make a drop down menu without changing the width of the main menu item?

    hyperlink inheriting color, how to overcome

    How can I center just one element within a container?

    How can I modify my CSS to require a class instead of a “+ label”?

    How to make gridview and cells bigger?

    how to change to color of pseudo-elements in css through jquery