How could I get my website content to scroll under my fixed menu bar and disappear under a transparant background?

Question

I have quickly made a simple website to try this out, but now the text does go under the menubar wich is perfect, but I want my header (menubar and title) to be transparant but when I make it transparant you do see the text go under it. Is there a way to fix this so that the background is transparant: rgba(0,0,0,0.5) and the text disappears under the header?'

Here's my HTML code:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<link rel="stylesheet" href="css/style.css" type="text/css"/>
<title>Test Website</title>
<meta name="" content="">
</head>
<body>

<header>

    <div id="title">
    <h1 class="headertext">My Test Website</h1>
    </div>

    <div id="menubar">
        <ul>
            <li><a href="index.html">Homepage</a></li>
            <li><a href="index.html">Homepage</a></li>
            <li><a href="index.html">Homepage</a></li>
            <li><a href="index.html">Homepage</a></li>
            <li><a href="index.html">Homepage</a></li>
        </ul>   
    </div>

</header>

    <div id="leftmenu">
        <ul>
            <li><a href="index.html">Homepage</a></li>
            <li><a href="index.html">Homepage</a></li>
            <li><a href="index.html">Homepage</a></li>
            <li><a href="index.html">Homepage</a></li>
            <li><a href="index.html">Homepage</a></li>
        </ul>
    </div>

    <div id="container">

        <div id="content">
        HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT
    </div><!--content div-->

    </div>

Here is the CSS code:

    *{
    margin: 0 auto 0 auto;
    text-align: left;
    color: #ffffff;
}

body{
    margin: 0;
    text-align: left;
    font-size: 13px;
    font-family: arial, helvetica, sens-serif;
    color: #ffffff;
    width: 1200px;
    height: auto;
}

header {
    position: fixed;
    width: 100%;
    top: 0;
    background: rgba(0,0,0,0.8);

}

.headertext{
    margin-top: 15px;
    text-align: center;
}

#title{     
    font-size: 20px;
    margin: 50px 0 30px 0;
    width: 100%;
    height: 80px;
    border-top: 2px solid #000000;
    border-bottom: 2px solid #000000;
}

#menubar{
    margin-top: 10px;
    float: left;
    clear: both;
    width: 100%;
    height: 50px;
    list-style: none;
    background: #white;
    border-bottom: 2px solid #010000;
}

#menubar ul{
    list-style: none;
    margin: 0;
    padding-top: 15px;
    text-align: center;
}

#menubar ul li{
    list-style: none;
    display: inline;
    padding-right: 80px;
}

#menubar ul li a{
    color: #ffffff;
    text-decoration: none;
    font-size: 15px;
    font-weight: bold;
}

#menubar ul li a:hover{
    border-bottom: 2px solid #ffffff;
}

#container{
    width: 1200px;
    height: 1200px;
}

#leftmenu{
    position: fixed;
    margin-top: 223px;
    margin-left: 50px;
    padding-top: 20px;
    float: left;
    width: 160px;
    height: 100%;
    list-style: none;
    background: rgba(0,0,0,0.8);
    color: #ffffff;
    border-left: 2px solid #010000;
    border-right: 2px solid #010000;
    border-bottom: 2px solid #010000;
}

#leftmenu ul li{
    display: block;
    padding-bottom: 20px;
}

#leftmenu ul li a{
    font-weight: bold;
    text-decoration: none;
    color: #ffffff;
    font-size: 15px;
    text-align: center;
}

#leftmenu ul li a:hover{
    border-bottom: 2px solid #ffffff;
}

#content{
    text-align: left;
    margin-left: 100px;
    width: 1000px;
    padding-top: 250px;
    padding-left: 160px;
    color: #000000;
}

Thanks for helping in advance!

score 1 · Answer 1 · answered Dec 26 '13 at 09:57

1

When you position something fixed fe., you should also give a position with it. Something like

left:100px;
top:150px;

answered Dec 26 '13 at 09:57

Valerie

34
2
6

score 1 · Answer 2 · answered Dec 26 '13 at 10:02

YOUR CSS

#topbar {
   width: 100%;
   height: 45px;
   position: fixed;
   top: 0px;
   left: 0px;
   z-index: 150;
   background: url('./images/bg.png') repeat scroll;
   color: white;
}

#stickybartop {
   width: 100%;
   height: 45px;
   position: fixed;
   top: 45px;
   left: 0px;
   z-index:150;       
   background: #fff;
   color: white;
   }

YOUR HTML CODE:

   <html>
   <div id='topbar'>
   <a href='http://yourwebsitename.com'><img src='./images/logo.png' style='width:145px; margin-left:14%;'></a>
   </div>   

   <div id='stickybartop'>
   <ul class="nav nav-tabs" id="nav2">
               <li><a href="index.html">Homepage</a></li>
               <li><a href="index.html">Homepage</a></li>
               <li><a href="index.html">Homepage</a></li>
               <li><a href="index.html">Homepage</a></li>
               <li><a href="index.html">Homepage</a></li>
   </ul>
   </div>
   </html>

score 0 · Answer 3 · answered Dec 26 '13 at 09:57

0

You are missing a background color for your header.

header{
    position: fixed;
    background-color:white;
}

Should fix this for you

here is a fiddle with the issue already resolved http://jsfiddle.net/7kJUX/

answered Dec 26 '13 at 09:57

Enermis

679
1
5
16

score 0 · Answer 4 · answered Dec 26 '13 at 09:58

0

Try doing this. This should get you closer to having the effect of the content sliding under the header.

header {
    position: fixed;
    width: 100%;
    top: 0;
    background: blue;
    box-shadow: 0 0 4px grey;
}

answered Dec 26 '13 at 09:58

CRABOLO

8,605
39
41
68

Sahil Popli · Answer 5 · 2013-12-26T10:04:35.250

0

Give background color to header element all done

and you have done a mistake #white # is used with hexa value i.e #ffffff or #fff for white

edited Dec 26 '13 at 10:04

answered Dec 26 '13 at 09:59

Sahil Popli

1,967
14
21

score 0 · Answer 6 · answered Dec 26 '13 at 10:05

Another "Trick": don't move the content under, use it as scrollable container.

<!DOCTYPE HTML>
<html>
    <head>
        <title>Bla</title>
        <!-- move the style to the css file! -->
        <style type='text/css'>
            div.header { position:absolute;  top:0px; left:0px; height: 50px; width:100%; overflow:hidden; }
            div.container { position:absolute; overflow:auto; top:50px; bottom:0px }
        </style>
    </head>
    <body>
        <div class='header'>
            <div id="title">
            <h1 class="headertext">My Test Website</h1>
            </div>

            <div id="menubar">
                <ul>
                    <li><a href="index.html">Homepage</a></li>
                    <li><a href="index.html">Homepage</a></li>
                    <li><a href="index.html">Homepage</a></li>
                    <li><a href="index.html">Homepage</a></li>
                    <li><a href="index.html">Homepage</a></li>
                </ul>   
            </div>
        </div>
        <div id="container" class='container'>
            <div id="content">
                     Here has to come some 'content', text for example that scroll's under the menubar and header.
                     <script type='text/javascript'>
                         //I'm too lazy to set here a lot of text, so let add it using script
                         for (var i=0; i<1000; i++) {
                             document.write ("bla ");
                         }
                     </script>
            </div>
        </div>
    </body>
</html>

How could I get my website content to scroll under my fixed menu bar and disappear under a transparant background?

6 Answers6