Search code examples
htmlcssmenualignmenthtml-lists

How to align specific item into a <li>

I need to align specific items into a <li>. That <li> is the first child of a <ul> menu. I have some ideas like do many <span> and align them together or I can divide my <li> area in 3 sections and align my items the one under the others but I do not know which way is the most practical and the most semantically correct.

Here is my code:

<ul id="menuWorkshops">
  <li>
    <span>Easy</span>
    <span>Middle</span>
    <span>Difficult</span>
    <span class="circle green"></span>
    <span class="circle orange"></span>
    <span class="circle red"></span>
  </li>
  <li>
    <span>Hardware</span>
    <ul>
      <li>
        <img alt="" src="img/hardware_web.png" /> Montage PC
        <span class="circleMenu orange"></span>
      </li>
    </ul>
  </li>
  <li>
    <span>Système</span>
    <ul>
      <li>
        <img alt="" src="img/os_web.png" /> Installation OS
        <span class="circleMenu green"></span>
      </li>
    </ul>
  </li>
  <li>
    <span>Programmation</span>
    <ul>
      <li>
        <img alt="" src="img/html_web.png" /> Développement Web
        <span class="circleMenu orange"></span>
      </li>
      <li>
        <img alt="" src="img/lego_web.png" /> Lego Mindstorm
        <span class="circleMenu green"></span>
      </li>
      <li>
        <img alt="" src="img/catch_me_web.png" /> Jeu Attrape-moi (Processing)
        <span class="circleMenu red"></span>
      </li>
      <li>
        <img alt="" src="img/tetris_web.png" /> Jeu Tetris (Small Basic)
        <span class="circleMenu red"></span>
      </li>
      <li>
        <img alt="" src="img/breakout_web.png" /> Jeu Casse-Brique (Small Basic)
        <span class="circleMenu orange"></span>
      </li>
      <li>
        <img alt="" src="img/scratch_web.png" /> Kinect to Scratch
        <span class="circleMenu green"></span>
      </li>
      <li>
        <img alt="" src="img/bird_web.png" /> Jeu Flappy Bird (Scratch)
        <span class="circleMenu green"></span>
      </li>
    </ul>
  </li>
</ul>

ul#menuWorkshops {
  display: inline-block;
  width: 285px;
  padding-left: 0;
  border: 1px solid #000;
  border-bottom: 0;
  list-style-type: none;
}

ul#menuWorkshops ul {
  padding-left: 0;
}

ul#menuWorkshops > li > span {
  display: block;
  height: 35px;
  border-bottom: 1px solid #000;
  background-color: #4D4D4D;
  color: #FAFAFA;
  font-size: 18px;
  text-align: center;
  line-height: 35px;
}

ul#menuWorkshops > li:first-child {
  height: 50px;
  background-color: #E0E0E0;
  color: #050505;
}

ul#menuWorkshops ul li {
  height: 35px;
  line-height: 35px;
  padding: 5px 10px;
  background-color: #007CB7;
  color: #FAFAFA;
  font-size: 14px;
  border-bottom: 1px solid #000;
}

ul#menuWorkshops img {
  vertical-align: middle;
}

ul#menuWorkshops ul li:hover {
  background-color: #8BBDD9;
  color: #050505;
  font-weight: bold;
  list-style-type: none;
}

span.circleMenu {
  float: right;
  width: 10px;
  height: 10px;
  border: 1px solid #FFF;
  border-radius: 5px;
}

.green {
  background-color: #008000;
}

.orange {
  background-color: #FFA500;
}

.red {
  background-color: #F00;
}

For you to understand my question I will join a screenshot of the result I want to reach.

my screenshot

enter image description here

Solution

  • I would treat that top section as separate from the navigation that follows, as it's not a sibling list item in any true sense. Here, I've created a nav for the entire menu with a header and a series of dl within for the ease-medium-difficult legend, followed by the ul with .submenu uls for the actual nav items. Certainly not the only way to go about this, but definitely a more semantic solution than what you started with. Obviously, if you prefer everything wrapped in a ul, you can also repurpose this CSS to that end.

    body {
  box-sizing: border-box;
  font-family: sans-serif;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
#menuWorkshops {
  border: 1px solid #000;
  display: inline-block;
  width: 325px;
}
#menuWorkshops dl,
#menuWorkshops dt,
#menuWorkshops dd,
#menuWorkshops ul,
#menuWorkshops li {
  margin: 0;
  padding: 0;
}
#menuWorkshops header {
  background-color: #E0E0E0;
  color: #050505;
  padding: 12px 10px;
}
#menuWorkshops header dl {
  display: inline-block;
  font-size: 14px;
  width: 32%;
}
#menuWorkshops header dl,
#menuWorkshops header dt,
#menuWorkshops header dd {
  margin: 0;
  text-align: center;
}
#menuWorkshops header dt,
#menuWorkshops header dd {
  display: block;
}
#menuWorkshops header .circle {
  margin: 4px auto 0;
}
.circle {
  border: 1px solid #FFF;
  border-radius: 50%;
  display: inline-block;
  height: 20px;
  width: 20px;
}
.green {
  background-color: #008000;
}
.orange {
  background-color: #FFA500;
}
.red {
  background-color: #F00;
}
#menuWorkshops ul,
#menuWorkshops li {
  display: block;
  padding-left: 0;
}
#menuWorkshops li {
  color: #FAFAFA;
  line-height: 50px;
}
#menuWorkshops > ul > li {
  background-color: #4D4D4D;
  border-top: 1px solid #000;
  font-size: 18px;
  text-align: center;
}
#menuWorkshops .submenu li {
  border-top: 1px solid #000;
}
#menuWorkshops .submenu a {
  background-color: #007CB7;
  color: #FAFAFA;
  display: block;
  font-size: 14px;
  padding: 0 10px;
  text-align: left;
  text-decoration: none;
}
#menuWorkshops .submenu a:hover {
  background-color: #8BBDD9;
  color: #050505;
  font-weight: bold;
  list-style-type: none;
}
#menuWorkshops .submenu img {
  display: inline-block;
  height: 40px;
  padding: 0 10px;
  vertical-align: middle;
  width: 40px;
}
#menuWorkshops .submenu .circle {
  float: right;
  margin-top: 12px;
}
    <nav id="menuWorkshops">
  <header>
    <dl>
      <dt>Facile</dt>
      <dd class="circle green"></dd>
    </dl>
    <dl>
      <dt>Moyen</dt>
      <dd class="circle orange"></dd>
    </dl>
    <dl>
      <dt>Difficile</dt>
      <dd class="circle red"></dd>
    </dl>
  </header>
  <ul>
    <li>Hardware
      <ul class="submenu">
        <li>
          <a href="#">
            <img alt="" src="img/hardware_web.png" />Montage PC
            <span class="circle orange"></span>
          </a>
        </li>
      </ul>
    </li>
    <li>Système
      <ul class="submenu">
        <li>
          <a href="#">
            <img alt="" src="img/os_web.png" />Installation OS
            <span class="circle green"></span>
          </a>
        </li>
      </ul>
    </li>
    <li>Programmation
      <ul class="submenu">
        <li>
          <a href="#">
            <img alt="" src="img/html_web.png" />Développement Web
            <span class="circle orange"></span>
          </a>
        </li>
        <li>
          <a href="#">
            <img alt="" src="img/lego_web.png" />Lego Mindstorm
            <span class="circle green"></span>
          </a>
        </li>
        <li>
          <a href="#">
            <img alt="" src="img/catch_me_web.png" />Jeu Attrape-moi (Processing)
            <span class="circle red"></span>
          </a>
        </li>
        <li>
          <a href="#">
            <img alt="" src="img/tetris_web.png" />Jeu Tetris (Small Basic)
            <span class="circle red"></span>
          </a>
        </li>
        <li>
          <a href="#">
            <img alt="" src="img/breakout_web.png" />Jeu Casse-Brique (Small Basic)
            <span class="circle orange"></span>
          </a>
        </li>
        <li>
          <a href="#">
            <img alt="" src="img/scratch_web.png" />Kinect to Scratch
            <span class="circle green"></span>
          </a>
        </li>
        <li>
          <a href="#">
            <img alt="" src="img/bird_web.png" />Jeu Flappy Bird (Scratch)
            <span class="circle green"></span>
          </a>
        </li>
      </ul>
    </li>
  </ul>
</nav>