I can't get my HTML alert banner to go under my header
Question
I'm trying to get an alert banner under my header, but it won't show up. I've styled it in the CSS and coded it into the actual HTML, but it doesn't show up.
I've tried using argin-top: 120px; (120px is the height of my header) and it screwed up the header. I also tried top: 120px; but that did nothing. This is probably a simple fix, but I'm rather new to coding. Here is my HTML:
.alert { padding: 20px; background-color: #0E6655; color: white; margin-bottom: 12px; }.closebtn { margin-left: 15px; color: white; font-weight: bold; float: right; font-size: 22px; line-height: 20px; cursor: pointer; transition: 0.3s; }.closebtn:hover { color: black; }
<div class="alert"> <span class="closebtn" onclick="this.parentElement.style.display='none';">×</span> My services are not impacted by the COVID-19 pandemic. Please refer to my <a href="https://www.facebook.com/Brett_Gee-103794371341643/">Facebook</a> for more info. </div>
1 answers
solution1
0 2020-05-15 17:12:59
The above problem can be resolved through these 3 steps -
Step 1: Update the CSS for the header to make sure that it always stays on top
Step 2: Add the ID attribute to the alert-box element and use document.getElementById() to access the web element for an accurate result.
Step 3: If the header has fixed position, then set fixed position, margin-top and z-index attributes to the alert-box, so that it will not get hidden behind the header.
Here is the working code with document.getElementById used for finding and closing the alert-box element:
<!DOCTYPE html>
<html>
<head>
<title>Alert - demo</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.alert {
padding: 20px;
background-color: #0E6655;
color: white;
position: fixed;
display: block;
margin-top: 120px;
z-index: 999;
}
.closebtn {
margin-right: 20px;
margin-left: 15px;
color: white;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
}
.closebtn:hover {
color: black;
}
</style>
</head>
<body>
<div style="border:1px solid #0E6655; width: 100%; height: 120px; position: fixed;">
-- Header: 120 px height --
</div>
<div id="alert-box" class="alert">
<span class="closebtn" onclick="document.getElementById('alert-box').style.display='none';">×</span>
My services are not impacted by the COVID-19 pandemic.
Please refer to my
<a href="https://www.facebook.com/Brett_Gee-103794371341643/">
Facebook
</a>
for more info.
</div>
</body>
</html>
Output:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.