DataDev DataDev - 2 months ago 6
HTML Question

Fixed div top of web page broken result

I have a fixed header with a full screen background image under that my sections. what i am trying to do is if i have a alert it will echo above the whole page pushing down the header and hero. but it either wont show up or when i do get it to show it wont stay fixed and scrolls with the page.

.sitrep {
top 0;
height: 50px;
width: 100%;
position: fixed;
z-index: 10000;
}



.siteHeader {
min-height: 76px;
height: 76px;
overflow: visible;
background-color: #000;
color: #f4f4f4;
position: fixed;
top: 0;
z-index: 10000;
}





#hero {
height: 100vh;
}

.hero {
background: url(images/hero-bg.jpg) no-repeat top center;
background-color: #000;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}

#hero-content {
position: absolute;
width: 100%;
bottom: 0%;
}

#hero-content a {
background-color: #131313;
padding-top: 10px;
height: 40px;
display: block;
font-size: 12px;
text-align: center;
text-transform: uppercase;
text-decoration: none;
}

#hero-content img {
display: block;
margin-top: 2px;
max-height: 145px;
margin-right: auto;
margin-left: auto;
margin-bottom: 53px;
padding: 5px;
}


<div class="sitrep">
<div class="alert-status">
<div class="info">
<span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span>
<strong>Announcement!</strong> anouncment goes here.
</div>
</div>
</div>

<div id="siteHeader">my header</div>

<!-- Hero Unit -->
<div id="hero" class="hero">
<div id="hero-content">
<img src="content/images/logo-dt.png" class="img-responsive">
<a class="button" role="button" href="#base">Learn more</a>
</div>
</div>

Answer

You are mixing up classes and ID's.

In your HTML, you give the element the ID of sitrep, whereas you are giving the styles to the elements with the class of siterep.

Try either of the following options and you'll be set :

Changing the element attribute: <div id="sitrep"> to <div class="sitrep">

Changing the CSS to fit the proper elements: .sitrep { to #sitrep {

Happy coding !