I am currently working on a new website and have encountered an issue with the header design. The Mainline "PersIntra" is overlapping the "log out button" box, which I would like to be positioned beside it instead.
Despite my efforts with CSS and nesting divs, I cannot seem to get the layout right. The header has become too wide vertically, and increasing the text size of the headline only makes it worse by causing it to overlap the logout box.
To better illustrate my problem, please refer to these screenshots.
The website is in Danish, but language shouldn't hinder your understanding of the issue (as shown in the screenshots).
Below is the HTML code:
<div id="header">
<h2> PersIntra </h2>
<div id="border">
Velkommen <?php echo $_SESSION['enummer']; ?> <br>
Du har 1 ny besked <br>
<a href="logout.php" style="color: white">Log Ud</a> <br>
</div>
</div>
</div>And here is the corresponding CSS:
#header {
background-color:#66cc33;
color:white;
text-align:center;
padding:5px;
border: 10px solid;
border-radius: 25px;
}
#border {
width: 150px;
padding: 5px;
border: 5px solid navy;
margin: 25px;
border-style: solid;
border-color: #eeeeee;
}