0

I'm really sorry if I didn't phrase my question correctly, I'm really new at all of this.

I want to put my menu items (I made an unordered list) within my nav block, but they are showing underneath it instead. It overlaps with my body content (not pictured), which is really problematic. Could someone help me?

The pink box is my nav block. I want to put my menu buttons inside it.

enter image description here

I know that the pink block is in fact the nav block?

enter image description here

HTML:

<header>
    <h1>Header</h1><h2> | chapter</h2>
</header>

<nav>
    <ul id="menu">
        <li><a href="#">alpha</a></li>
        <li><a href="#">beta</a></li>
        <li><a href="#">gamma</a></li>
        <li><a href="#">delta</a></li>
    </ul>
</nav>

CSS:

header{
    background-color: green;
    border: 1px solid purple;
    width: 100%;
    height: auto;
}
nav{
    background-color: pink;
    border: 1px solid grey;
    width: 100%;
    height: auto;
}
h1, h2{
    display: inline;
}
/*Set li as buttons*/
#menu li{
    float: left;
    list-style-type: none;
    width: 5em;
    margin-left: -2.5em; /*Removes default indentation of lists*/
    margin-right: 5em;
    display: block;
}
/*display anchor tags as buttons*/
#menu a{
    display: block;
    background-color: white;
    border: 3px solid blue;
    text-align: center; 
    text-decoration: none;
    color: black;
}
/*display setting on button hover*/
#menu a:hover{
    color: white;
    background-color: black;
}

Thank you!

pableiros
  • 10,752
  • 11
  • 79
  • 78
nastybugs
  • 3
  • 3
  • In @JacqueGoupil's answer pay particular attention to `float` vs. `inline-block`. Things I _had_ to use float to do are now nearly always done better with inline-block (or flex layout) and float does weird things with the element flow. I recommend you pretend "float" doesn't exist until you someday find something that only float will do (which I bet is nothing, ever) – Stephen P Aug 23 '16 at 00:53

3 Answers3

1

There are many errors in your CSS:

list-style-type: none; goes on the list, not on its items. It's what disables default list-behavior and makes the list stand on one line.

float: left; will make the elements float, but will also make the parent shrink as if it didn't have any content, which is why the elements sit below the nav block.

display: block; on items makes them stand on their own line. If you want multiple elements to stand side-by-side yet still have margins and paddings like blocks, you need to use inline-block instead. This is much easier to maintain than floating elements.

The margins on the list items are also way too big, I got rid of those. Honestly though, I really don't get why people use lists anymore. You could very well just put the links in the nav directly and save a lot of code.

header {
  background-color: green;
  border: 1px solid purple;
  width: 100%;
  height: auto;
}
nav {
  background-color: pink;
  border: 1px solid grey;
  width: 100%;
  height: auto;
}
h1,
h2 {
  display: inline;
}
/*Set li as buttons*/

#menu {
  list-style-type: none;
}

#menu li {
  width: 5em;
  margin: 0;
  display: inline-block;
}
/*display anchor tags as buttons*/

#menu a {
  display: inline-block;
  background-color: white;
  border: 3px solid blue;
  text-align: center;
  text-decoration: none;
  color: black;
}
/*display setting on button hover*/

#menu a:hover {
  color: white;
  background-color: black;
}
<header>
  <h1>Header</h1>
  <h2> | chapter</h2>
</header>

<nav>
  <ul id="menu">
    <li><a href="#">alpha</a>
    </li>
    <li><a href="#">beta</a>
    </li>
    <li><a href="#">gamma</a>
    </li>
    <li><a href="#">delta</a>
    </li>
  </ul>
</nav>
Domino
  • 4,988
  • 27
  • 51
  • 1
    I would further suggest make `h1, h2` _inline-block_ for more control, and set their _margin_ to `0` to get the same look. `h1 + h2:before { content: " | "; }` allows you to turn `

    | chapter

    ` into `

    chapter

    ` since the vertical bar is _decoration_ and not part of the _content_... or `h1 + h2 { border-left: 2px solid black; }` but then you need margin/padding also.     – Stephen P Aug 23 '16 at 01:02
0

You need to clear the container of the floated elements, as they don't properly stretch the container.

Add the clearfix CSS to your sheets:

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

and then add the clearfix class to menu:

<ul id="menu" class="clearfix">

fiddle

Alternatively, pick one of the other clearfix solutions from here (where I got the solution above).

Joseph Young
  • 2,698
  • 10
  • 23
  • Related: http://stackoverflow.com/questions/218760/how-do-you-keep-parents-of-floated-elements-from-collapsing?rq=1 – Joseph Young Aug 23 '16 at 00:47
0

Get rid of the float left under menu li and replace it with

#menu li{
display:inline-block;
list-style-type: none;
width: 5em;
margin-left: -2.5em; /*Removes default indentation of lists*/
margin-right: 5em;
}

and if you want to move it over to the right a bit more 

#menu li{
display:inline-block;
list-style-type: none;
width: 5em;
margin-right: 5em;
}
Murph_Fish
  • 219
  • 2
  • 12