I recently created a small offline website with a header that includes a logo, navigation bar, and notification bar. While I managed to align everything as intended, I encountered an issue with the text alignment within the notification bar (header-alert).
HTML:
<header class="header">
<img style="float: left; padding-left: 20px" src="images/versace-logo.bmp" width="230" height="120" />
<div class="bottom-header">
<div class="navigation-bar" style="margin-top: 90px">
<ul>
<li>
<a href="#">Home</a>
<div class="dropdown-container dropdown-shadow">
<ul class="dropdown-column">
<li><a href="#">First</a></li>
<li><a href="#">Second</a></li>
</ul>
</div>
</li>
</ul>
<ul>
<li>
<a href="#">Video</a>
</li>
</ul>
</div>
</div>
<div style="clear:left"></div>
<div class="header-alert">
This website is still under development!
</div>
</header>
CSS:
.header
{
background-color: black;
color: white;
display: block;
font-family: "GillSansStdRegular";
margin-bottom: 20px;
padding-top: 10px;
position: relative;
}
.bottom-header
{
display: block;
position: relative;
padding: 0 20px;
}
.navigation-bar
{
clear: right;
color: white;
display: inline-block;
font-size: 12px;
float: right;
text-transform: uppercase;
margin-bottom: 0px;
}
.header-alert
{
background-color: white;
border-bottom: 2px solid black;
color: black;
font-family: "GillSansStdLightRegular";
font-size: 110%;
margin-top: 15px;
text-align: center;
text-transform: uppercase;
width: 100%;
}
Despite attempting various fixes involving the display and margin attributes, I have been unable to find a solution without altering the current layout significantly. Perhaps the solution is simpler than I realize, but for now, I am refraining from making adjustments like adding spaces for even alignment.