Reputation: 640
I added the style position:fixed
to the #wrapper div
element and then the background-color:#333
does not show
Here is my code:
winWidth = window.innerWidth || document.body.clientWidth;
headMarg = (winWidth - 636) / 2;
document.getElementById("header").style.transform = "translate(" + headMarg + "px,10px)";
document.getElementById("wrapper").style.width = winWidth;
document.getElementById("wrapper").style.position = "fixed";
document.getElementById("content").style.width = winWidth * 2 / 3 + "px";
@import url('https://fonts.googleapis.com/css?family=VT323');
body {
font-family: VT323;
font-size: 20px;
background-color: #efefef;
}
#header {
background-color: rgba(255, 255, 255, 0.6);
height: 70px;
position: fixed;
}
.tab {
border-left: 2px solid #F1453D;
border-right: 2px solid #F1453D;
padding-left: 30px;
padding-right: 30px;
transition: all 0.3s;
}
.tab:hover {
background-color: #F1453D;
color: white;
}
#wrapper {
background-color: #333;
height: 90px;
box-shadow: 0px 5px 5px grey;
}
#content {
background-color: white;
height: 1000px;
}
<div id="wrapper">
<div id="header">
<center>
<table style="display:inline;border-collapse:collapse">
<tr>
<td style="padding-left:30px">
<a href="http://clickthebutton.000webhostapp.com/index.html"><img src="http://clickthebutton.000webhostapp.com/button_logo.png" height="64" width="64" /></a>
</td>
<td style="padding-right:50px" valign="center">the Button</td>
<td class="tab">
<center><img src="http://clickthebutton.000webhostapp.com/home_icon.png" /><br />Home</center>
</td>
<td class="tab">
<center><img src="http://clickthebutton.000webhostapp.com/play_icon.png" /><br />Play!</center>
</td>
<td class="tab">
<center><img src="http://clickthebutton.000webhostapp.com/about_icon.png" /><br />About</center>
</td>
<td class="tab">
<center><img src="http://clickthebutton.000webhostapp.com/account_icon.png" /><br />Account</center>
</td>
</tr>
</table>
</center>
</div>
</div>
<center>
<div id="content">hi and test</div>
</center>
Upvotes: 0
Views: 1012
Reputation: 5434
position:fixed
removes the element from the flow, so it doesn't know how long it is (it doesn't have width
). So you need to tell the element how far it should stretch.
#wrapper{
background-color:#333;
height:90px;
width:100%; // <--- add this
box-shadow:0px 5px 5px grey;
}
<!DOCTYPE html>
<html>
<head>
<title>Click the Button | Home</title>
<link rel="shortcut icon" href="favicon.ico" />
</head>
<body>
<style>
@import url('https://fonts.googleapis.com/css?family=VT323');
body {
font-family:VT323;
font-size:20px;
background-color:#efefef;
}
#header{
background-color:rgba(255,255,255,0.6);
height:70px;
position:fixed;
}
.tab{
border-left: 2px solid #F1453D;
border-right: 2px solid #F1453D;
padding-left:30px;
padding-right:30px;
transition: all 0.3s;
}
.tab:hover{
background-color: #F1453D;
color:white;
}
#wrapper{
background-color:#333;
height:90px;
width:100%;
box-shadow:0px 5px 5px grey;
}
#content{
background-color:white;
height:1000px;
}
</style>
<div id="wrapper">
<div id="header">
<center>
<table style="display:inline;border-collapse:collapse">
<tr>
<td style="padding-left:30px"><a href="http://clickthebutton.000webhostapp.com/index.html"><img src="http://clickthebutton.000webhostapp.com/button_logo.png" height="64" width="64"/></a></td>
<td style="padding-right:50px" valign="center">the Button</td>
<td class="tab"><center><img src="http://clickthebutton.000webhostapp.com/home_icon.png"/><br />Home</center></td>
<td class="tab"><center><img src="http://clickthebutton.000webhostapp.com/play_icon.png"/><br />Play!</center></td>
<td class="tab"><center><img src="http://clickthebutton.000webhostapp.com/about_icon.png"/><br />About</center></td>
<td class="tab"><center><img src="http://clickthebutton.000webhostapp.com/account_icon.png"/><br />Account</center></td>
</tr>
</table>
</center>
</div>
</div>
<center>
<div id="content">hi and test</div>
</center>
<script>
winWidth = window.innerWidth || document.body.clientWidth;
headMarg = (winWidth - 636)/2;
document.getElementById("header").style.transform = "translate(" + headMarg + "px,10px)";
document.getElementById("wrapper").style.width = winWidth;
document.getElementById("wrapper").style.position = "fixed";
document.getElementById("content").style.width = winWidth*2/3 + "px";
</script>
</body>
</html>
Upvotes: 2