CODEWITHSUNDEEP
htmlcsshtml-listsnav
abnormalfantasy
abnormalfantasy

Reputation: 21

How to have a <div> element that groups <li> elements inside of <ul>

OK so for my site we have a navbar that uses a list. We have a section of elements that float left, and a section that floats right. My code works perfectly, it's just that the W3 validator constantly tells me that I can't have a div element inside of a ul element. If I assigned each individual li element the class that floats them left, they don't stay on the same line. Here's the code (exact links have been removed): 

.navbar {
  font-family: 'Open Sans', sans-serif;
}
.navbar ul {
  list-style-type: none;
   margin: 0;
   padding: 0;
   overflow: hidden;
   background-color: #333333;
  display: block;
}
.navbar li a {
  display: block;
   color: white;
   text-align: center;
   padding: 10px;
  text-decoration: none;
}

 /* On-site navigation */
.leftnav li {
   float: left;
}
.leftnav li:hover {
  background-color: #111111;
}

/* Links to Social Media */
.medianav li {
  float: right;
}
.medianav li:nth-child(1) {
  background-color: #ff0000;
}
.medianav li:nth-child(1):hover {
  background-color: #ff6666;
}

.medianav li:nth-child(2) {
  background-color: #7289DA;
}
.medianav li:nth-child(2):hover {
  background-color: #99AAB5;
}

.medianav li:nth-child(3) {
  background-color: #1da1f2;
}
.medianav li:nth-child(3):hover {
  background-color: #49baff;
}
<nav class="navbar">
  <ul>
    <div class="leftnav">
      <li><a href="index.html">Home</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="members.html">Members</a></li>
      <li><a href="smash.html">Smash Club</a></li>
    </nav>

    <div class="medianav">
      <li><a href="https://www.youtube.com">YouTube</a></li>
      <li><a href="https://discord.gg">Discord</a></li>
      <li><a href="#">Twitter</a></li>
    </nav>
  </ul>
</nav>

And this is what it has to look like: And this is what it has to look like

However, if I do this to the html, which makes the validator happy:

<nav class="navbar">
    <ul>
        <li class="leftnav"><a href="index.html">Home</a></li>
        <li class="leftnav"><a href="about.html">About</a></li>
        <li class="leftnav"><a href="members.html">Members</a></li>
        <li class="leftnav"><a href="smash.html">Smash Club</a></li>

        <li class="medianav"><a href="https://www.youtube.com">YouTube</a></li>
        <li class="medianav"><a href="https://discord.gg">Discord</a></li>
        <li class="medianav"><a href="#">Twitter</a></li>
    </ul>
</nav>

This happens: This happens

So how do I fix this? Sorry if it was long, or has been asked before in different words, but I couldn't find any other resource.

Upvotes: 1

Views: 2490

Answers (4)

Maarti
Maarti

Reputation: 3719

You openend two <div> tag and closed it with a </nav> tag. Just replace the two </nav> with </div>:

    .navbar {
    font-family: 'Open Sans', sans-serif;
}
.navbar ul {
    list-style-type: none;
   margin: 0;
   padding: 0;
   overflow: hidden;
   background-color: #333333;
    display: block;
}
.navbar li a {
    display: block;
   color: white;
   text-align: center;
   padding: 10px;
    text-decoration: none;
}

 /* On-site navigation */
.leftnav li {
   float: left;
}
.leftnav li:hover {
    background-color: #111111;
}

/* Links to Social Media */
.medianav li {
    float: right;
}
.medianav li:nth-child(1) {
    background-color: #ff0000;
}
.medianav li:nth-child(1):hover {
    background-color: #ff6666;
}

.medianav li:nth-child(2) {
    background-color: #7289DA;
}
.medianav li:nth-child(2):hover {
    background-color: #99AAB5;
}

.medianav li:nth-child(3) {
    background-color: #1da1f2;
}
.medianav li:nth-child(3):hover {
    background-color: #49baff;
}
<nav class="navbar">
    <ul>
        <div class="leftnav">
            <li><a href="index.html">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="members.html">Members</a></li>
            <li><a href="smash.html">Smash Club</a></li>
        </div>

        <div class="medianav">
            <li><a href="https://www.youtube.com">YouTube</a></li>
            <li><a href="https://discord.gg">Discord</a></li>
            <li><a href="#">Twitter</a></li>
        </div>
    </ul>
</nav>

Upvotes: -1

Spirit
Spirit

Reputation: 660

You can use two ul's

<nav class="navbar">
    <ul class="leftnav">
    <li><a href="index.html">Home</a></li>
       <li><a href="about.html">About</a></li>
       <li><a href="members.html">Members</a></li>
       <li><a href="smash.html">Smash Club</a></li>
    </ul>
    <ul class="medianav">
       <li><a href="https://www.youtube.com">YouTube</a></li>
       <li><a href="https://discord.gg">Discord</a></li>
       <li><a href="#">Twitter</a></li>
   </ul>

you need to adjust your css as well

.medianav, .medianav li {
    float: right;
}
.leftnav, .leftnav li {
   float: left;
}
.navbar, .navbar ul {
    list-style-type: none;
   margin: 0;
   padding: 0;
   overflow: hidden;
   background-color: #333333;
    display: block;
}

Upvotes: 3

Umair Qazi
Umair Qazi

Reputation: 385

There was a structure issue. now Nav has 2 lists 

.navbar {
    font-family: 'Open Sans', sans-serif;
    background-color: #333333;
    padding: 0;
    min-height: 1px !important;
    /* Overrided the default min-height of navbar which is 50px by-default in Bootstrap */
}

.navbar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.navbar li {
    float: left;
}

.navbar li a {
    display: block;
    color: white;
    text-align: center;
    padding: 10px;
    text-decoration: none;
}

/* Links to Social Media */

.medianav li:nth-child(1) {
    background-color: #ff0000;
}

.medianav li:nth-child(1):hover {
    background-color: #ff6666;
}

.medianav li:nth-child(2) {
    background-color: #7289DA;
}

.medianav li:nth-child(2):hover {
    background-color: #99AAB5;
}

.medianav li:nth-child(3) {
    background-color: #1da1f2;
}

.medianav li:nth-child(3):hover {
    background-color: #49baff;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar">
    <ul class="navigation-links pull-left">
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="members.html">Members</a></li>
        <li><a href="smash.html">Smash Club</a></li>
    </ul>
    <ul class="medianav pull-right">
        <li><a href="https://www.youtube.com">YouTube</a></li>
        <li><a href="https://discord.gg">Discord</a></li>
        <li><a href="#">Twitter</a></li>
    </ul>
</nav>

Upvotes: 0

Roko
Roko

Reputation: 127

Your HTML syntax is a little bit off, you didn't close the nav and div properly. Trying doing your HTML like this, it worked for me:

<nav class="navbar">
    <ul>
        <div class="leftnav">
            <li><a href="index.html">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="members.html">Members</a></li>
            <li><a href="smash.html">Smash Club</a></li>
        </div>

        <div class="medianav">
            <li><a href="https://www.youtube.com">YouTube</a></li>
            <li><a href="https://discord.gg">Discord</a></li>
            <li><a href="#">Twitter</a></li>
        </div>
    </ul>
</nav>

Upvotes: -1

Related Questions