Concatenate header, logo, navigation bar, and text on top of a page

Question

I've been trying to get all those elements on the same grey background but I don't know why the header and navigation bar are separated, and the logo not being on top of the grey background.

The code:

 .header {
  background-color: #666;
  text-align: center;
  font-size: 35px;
  color: white;
        margin:0;
  
 }

 #navigation {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #666;
 }

 #navigation li {
  float: left;
 }

 #navigation li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
 }

 #navigation li a:hover {
  background-color: #111;
 }

<div>
   <h2 class = "header" >Personal Portal</h2>
 </div>

 <div>
 <div>
 <nav>
  <a> <img src="logo.png" alt="Logo" style="float:right; position:relative; "> </a>

 <ul id = "navigation">
   <li><a class="active" href="Home.htm">Home</a></li>
   <li><a href="OpenedTickets">Opened Tickets</a></li>
   <li><a href="FAQ.htm">FAQ</a></li>
   <li><a href="Stats.htm">Stats</a></li>
 </ul>
 </nav>
 </div>
 <div>
   <div id="loggedas" style = "float:right; padding-top:0; background-color:#666; color:#FFFFFF"> Logged in as </div>

This is a very beginner-style question but I can't find the answers I want. Any help is appreciated thank you!

Possible duplicate of [Why would margin not be contained by parent element?](https://stackoverflow.com/questions/2176520/why-would-margin-not-be-contained-by-parent-element) — CBroe, Jul 02 '18 at 10:36
That duplicate explains the _“why the header and navigation bar are separated”_ issue, it is due to the default margins of the h2 headline element. — CBroe, Jul 02 '18 at 10:36
@CBroe basically the space in between is the largest between margin-bottom of the header and margin-top of navigation, and there's a default margin for the header? — Alain Daccache, Jul 02 '18 at 10:50
@לבנימלכה I was thinking the logo on the level of personal portal and the logged in as in the level of navigation bar — Alain Daccache, Jul 02 '18 at 10:52
There is a default margin for `h2`, coming from the browser stylesheet. Familiarize yourself a bit with your browser’s developer tools, they help to check on such issues quite easily. — CBroe, Jul 02 '18 at 10:56

score 1 · Answer 1 · answered Jul 02 '18 at 10:51

You could try something like this:

<div style="background-color: #666; height: 50px">  
    <nav style="clear: both">
        <ul id = "navigation">
            <li><a class="active" href="Home.htm">Home</a></li>
            <li><a href="OpenedTickets">Opened Tickets</a></li>
            <li><a href="FAQ.htm">FAQ</a></li>
            <li><a href="Stats.htm">Stats</a></li>
        </ul>

       <h2 class = "header" >Personal Portal</h2>

       <div class="rightInfo">
           <div id="loggedas" style = "float:right; padding-top:0; background-color:#666; color:#FFFFFF"> 
      Logged in as 
           </div>

       <a> 
           <img src="logo.png" alt="Logo" style="float:right; position:relative; ">       
       </a>
    </div>
</nav>

.header {
    background-color: #666;
    text-align: center;
    font-size: 35px;
    color: white;
    float: left;
    display: inline-block;
    margin-top: 0;
}

.rightInfo{
    float: right;
}

#navigation {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #666;
    float: left;
}

#navigation li {
    float: left;
}

#navigation li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

#navigation li a:hover {
    background-color: #111;
}

Your three display elements should have a common parent, otherwise, they will not display as you want them to, except if you use position: absolute to position them (I would not recommend that)

score 1 · Answer 2 · answered Jul 02 '18 at 11:16

To complete the previous answer (regarding the question why the title and nav bar are separated). You have placed those elements in separate divisions each with its own background color. You could correct the situation by removing the margin between them, but: if you want two (or more) things to be on a common background, it is best to set that background on a common parent.

Also, in any case when you're wondering why the browser rendered your code as it did: ask the browser. Press Ctrl-Shift-I (works on Chrome, Chromium and Firefox). It will show you all the applied styles (and exactly where they came from), plus the element size, padding, borders and margins.

Concatenate header, logo, navigation bar, and text on top of a page

2 Answers2