CODEWITHSUNDEEP
htmlcss
Wang
Wang

Reputation: 5

absolute header cuts off when screen size is made smaller

I'm practicing CSS by trying to make a design similar to stackoverflow's.

The top bar looks fine when I can't scroll horizontally. When I make the window size smaller, the ability to scroll horizontally appears. When I scroll, it doesn't show the entire top background.

Full screen:
http://puu.sh/dzSa3/fdf667f3d0.png

Half window, and scrolled to the right:
http://puu.sh/dzSc5/12679216bd.png

CSS:

.topbar {
    font-size: .8em;
    z-index: 1;
    text-transform: lowercase;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: #222222;
}

.topbar-wrapper {
    width: 900px;
    margin: 0 auto;
}

.topbar-wrapper ul {
    margin: 0;
    padding: 0;
}

.topbar-wrapper ul .home {
    float: left;
}

.topbar-wrapper ul li {
    display: inline;
    list-style: none;
    text-align: center;
    float: right;
    padding: 9px 0;
}

.topbar-wrapper ul li a {
    text-decoration: none;
    color: #E0E0D6;
    margin: 10px;
}

.topbar-wrapper ul li:hover {
    background-color: #444444;
}

HTML:

<div class="topbar">
            <div class="topbar-wrapper">
                <ul>
                    <span class="home">
                        <li><a href="/index.php">Home</a></li>
                    </span>
                    <li><a href="#">contact</a></li>
                    <li><a href="#">help</a></li>
                    <li><a href="#">tour</a></li>
                    <li><a href="/users/login.php">log in</a></li>
                    <li><a href="/users/signup.php">sign up</a></li>
                </ul>
            </div>
        </div>

Upvotes: 0

Views: 978

Answers (2)

JakobMiller
JakobMiller

Reputation: 353

Instead of making your .topbar{position:absolute;} try,

body{
    margin:0;
    padding:0;
}

.topbar {
    font-size: .8em;
    z-index: 1;
    text-transform: lowercase;
    width: 100%;
    height:35px;
    background: #222222;
}

And as already mentioned. Instead of setting fixed widths, which is fine if you make sure that you add media width limitations in your CSS, use max-width. This might be what causing your issue. I can't reproduce the problem in jsfiddle though.

Upvotes: 0

alloy
alloy

Reputation: 766

You're going to have issues whenever your window width is 900 pixels or less. For your style for 'topbar-wrapper', you set a defined width of 900. That width is going to be inflexible, so if your screen is less than that width, it will add a horizontal scrollbar.

Instead of setting 'width: 900' set 'max-width: 900'. This will make that element more flexible, so that it can potentially be thinner than 900 pixels if need be.

Upvotes: 1

Related Questions