在页面顶部连接标题，徽标，导航栏和文本

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!

Answer 1

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)

Answer 2

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.