Because of this shutdown I wanted to put in a little notification bar at the top of my website. And be able to easily remove it once over. Here is what I came up with. Easy peasy. Prob a no brainer for half of you, but I haven’t done anything web design for a long while so it took me a little bit to get all the cob webs out again.
body {
padding-top:50px;
}
body:before {
content:"ALERT: Whatever you want to write";
color:#fff;
font-weight:bold;
line-height:50px;
text-align:center;
background:red;
position:absolute;
left:0;right:0;top:0;
text-shadow:2px 2px #000;
}
Hi Eric was there a question there or were you just showing what you had done
If you want a fixed positioned message then these days position:sticky is the way to go and doesn’t require any padding on the body to hold the page open.
body {
margin:0;
}
body:before {
content:"ALERT: Whatever you want to write";
color:#fff;
font-weight:bold;
line-height:50px;
text-align:center;
background:red;
position:-webkit-sticky;
position:sticky;
display:block;
top:0;
text-shadow:2px 2px #000;
}
If you just wanted the message to scroll away then your method is fine although you could have just used display:block instead of absolute positioning.
body {
margin:0;
}
body:before {
content:"ALERT: Whatever you want to write";
color:#fff;
font-weight:bold;
line-height:50px;
text-align:center;
background:red;
display:block;
text-shadow:2px 2px #000;
}
Of course it does depend on whatever else you have going on.
