Nesting an unordered list inside of my nav div

Question

Why does my unordered list show up below the division element that I want to style?

* {
  padding: 0;
  margin: 0
}

#nav {
  width: 100%;
  background-color: #00ff00;
}

#cog {
  padding-left: 100px;
}

li {
  color: black;
  float: left;
  padding-left: 100px;
  list-style-type: none;
}

ul {
  color: black;
  float: right;
}

a {
  color: black;
  text-decoration: none;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Karuki Wireframe Project (p2)</title>
  <link rel="stylesheet" href="css/font-awesome.min.css">
  <link rel="stylesheet" href="regular.css">
  <link rel="stylesheet" href="style.css" type="text/css">

</head>

<body>
  <div id="nav">
    <nav>
      <ul>
        <i class="fa fa-cog" aria-hidden="true" id="cog"></i>
        <li><a href="#">Username</a></li>
        <li><a href="#">Home</a></li>
        <li><a href="#">Privacy</a></li>
        <li><a href="#">Deadline</a></li>
    </nav>
  </div>
</body>

<script>
  var windowSize = 0;
  window.onresize = function() {
    windowSize = window.innerWidth
    console.log(windowSize);

    if (windowSize < 600) {
      alert("you are mobile");
    }
  }
</script>

</html>

I do not see the green background-color behind the unordered list. Why is this?

The only solution I found was to put a height on the #nav division, but when I did that it looked as though the two elements were not connected to each other at all. It was as though the ul was not even written into the inside of the #nav division.

Not related but important, put the `` tag inside it own `li` tag: https://stackoverflow.com/a/2161486/863110 — Mosh Feu, Aug 25 '19 at 16:26
Not sure if this got solved or not, but seems to me like a classic case of a collapsing parent element caused by a floating child. Related: https://stackoverflow.com/questions/2062258/floating-elements-within-a-div-floats-outside-of-div-why — agrm, Aug 25 '19 at 18:35

score 1 · Accepted Answer · answered Aug 25 '19 at 16:30

What about giving background-color to <ul>? Like this:

* {
  padding: 0;
  margin: 0
}

#nav {
  width: 100%;
}

#cog {
  padding-left: 100px;
}

li {
  color: black;
  float: left;
  padding-left: 100px;
  list-style-type: none;
}

ul {
  color: black;
  float: right;
  background-color: #00ff00;
}

a {
  color: black;
  text-decoration: none;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Karuki Wireframe Project (p2)</title>
  <link rel="stylesheet" href="css/font-awesome.min.css">
  <link rel="stylesheet" href="regular.css">
  <link rel="stylesheet" href="style.css" type="text/css">

</head>

<body>
  <div id="nav">
    <nav>
      <ul>
        <i class="fa fa-cog" aria-hidden="true" id="cog"></i>
        <li><a href="#">Username</a></li>
        <li><a href="#">Home</a></li>
        <li><a href="#">Privacy</a></li>
        <li><a href="#">Deadline</a></li>
    </nav>
  </div>
</body>

<script>
  var windowSize = 0;
  window.onresize = function() {
    windowSize = window.innerWidth
    console.log(windowSize);

    if (windowSize < 600) {
      alert("you are mobile");
    }
  }
</script>

</html>

score 1 · Answer 2 · edited Jun 20 '20 at 09:12

1

As you can see the ul tag will cover the whole section. But li will take only individual a tag:

So, in order to give color to ul put background-color: #00ff00; in it. And it will be like:

And if you want to give each li the background-color, Simply put the code in style for li tag.

Hope it helped you in your project. Good Luck..

edited Jun 20 '20 at 09:12

Community

1
1

answered Aug 25 '19 at 17:53

Jency

269
1
13

Nesting an unordered list inside of my nav div

2 Answers2