CODEWITHSUNDEEP
htmlcss
Drew H
Drew H

Reputation: 4739

Resizing window makes tabs go to next line

Here is my css and html

#header {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    background-image: url('/public/images/header.png');
    background-repeat: repeat-x;
}

#nav {
    background: transparent;
    height: 2.5em;
    left: -25px;
    list-style: none;
    margin: 1em 0 1em;
    min-width: 100%;
    min-height: 100%;
    overflow: hidden;
    padding: 60px 0 30px 0;
}

#nav a {
    color: white;
    display: block;
    float: left;
    height: 2.5em;
    padding-left: 30px;
    text-decoration: none;
    padding-right: 30px;
    text-shadow: 0.1em 0.1em #333;
}

#nav a:hover {
    text-shadow: 0.1em 0.1em white;
    background-color: white;
    color: darkred;
    padding-bottom: 5px;
    text-shadow: 0.1em 0.1em lightgray;
}

#nav a:hover.active, #nav a.active {
    background-color: white;
    background-position: 0 -60px;
    color: darkred;
    text-shadow: 0.1em 0.1em lightgray;
    padding-bottom: 5px;
}

#nav li {
    float: left;
    margin: 0 8px 0 0;
 /* Spacing between tabs */;
}

#nav span {
    cursor: pointer;
    display: block;
    float: left;
    line-height: 1.5em;
    padding: .5em 5px 0 0;
}


<div id="header">
    <div id="navigation">
        <ol id="nav">
            <li><a id="overview" href="/overview"><span>Overview</span></a></li>
            <li><a id="analysis" href="/overview" class="active"><span>Analysis</span></a></li>
            <li><a id="dashboard" href="/dashboard"><span>My Dashboard</span></a></li>
            <li><a id="preferences" href="/overview"><span>Preferences</span></a></li>
            <li><a id="contact" href="/overview"><span>Contact</span></a></li>
            <li><a id="logout" href="/overview"><span>Sign In</span></a></li>
        </ol>
    </div>
</div>

This looks fine on my screen but if I start resizing the window it makes the tabs jump around and go to the next line. I've found that on other sites with tabs this is not the case. What am I doing wrong here? Thanks.

Upvotes: 1

Views: 5748

Answers (1)

thirtydot
thirtydot

Reputation: 228232

These "other sites" probably have their <div id="header"> contained in another element, such as <div id="container">, with an explicit width set with CSS, such as width: 960px:

See: http://jsfiddle.net/mBJQN/

<div id="container">
    YOUR HTML HERE
</div>

#container {
    width: 960px;
    position: relative
}

I added position: relative so that the position: absolute on #header will be relative to #container (see here).

There is another option here, but it's probably not the one you're after.

You can add white-space: nowrap to #header, and change from floats to display: inline-block. If this is the option you want, let me know, because it needs a little more work.

http://jsfiddle.net/mBJQN/1/

Upvotes: 3

Related Questions