How do 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 which is perfect, but I want my header (menubar and title) to be transparent 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 transparent: rgba(0,0,0,0.5) and the text disappears under the header?'

Here's my HTML code: and jsfiddle

<!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>


</body>
</html>

And here's my 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,.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;
    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 in advance!

These might help : 1) http://stackoverflow.com/questions/11774250/make-the-whole-page-scroll-beneath-a-certain-height-at-the-top-without-any-scrol 2) http://stackoverflow.com/questions/14137378/div-above-another-div-but-should-scroll-beneath-the-later-one — Istiaque Ahmed, Dec 26 '13 at 11:30
no that didn't work for me could someone explain in clearly with my code pls (I'm a beginner) Thanks! — Sander van Hooff, Dec 26 '13 at 11:39
Patience is a virtue... Asked 50mins ago... Thats merely waiting — DarkBee, Dec 26 '13 at 12:12
@user3123507 : you do not have `
` in your fiddle, m assuming its on the top-most, above `#title`..... — NoobEditor, Dec 26 '13 at 13:21

NoobEditor · Answer 1 · 2013-12-26T13:47:28.790

sorry to break this to you but I think that, what you are trying to achieve is not possible, because, simply put, it fails the concept of transparency....

The whole idea of transparent background is to show the underlying div ot text or pictures etc. If you want to keep a transparent <header> but want to hide the things scrolling under it, then why keep it transparent, why not keep it opaque....

Still,If you want to show the text and keep transparent header at the same time (pure css way), i'll suggest do something like a scrollable div like :

#content > p {
    color: rgba(0, 0, 0, 1);
    height:200px;
    overflow-y:scroll;
}

see demo here

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

1 Answers1