CODEWITHSUNDEEP
htmlcsshtml-lists
n00n
n00n

Reputation: 664

CSS trouble on List Menu (UL / LI) with user defined icons

I have a LI / UL menu, where the user stores the items himself.

The problems:

  1. there is a small value (red/bubble) left/top of the ICON (image) which is not correctly located on subitems
  2. The text should be in the middle of the height of the image, but it is always on the ground line...

Anyone with a hint or code example how to solve this?

ul.navigation {
  padding: 0px;
  margin: 0px
}
.navigation .item.first {
  padding: 0px
}
.navigation li {
  list-style: none;
  padding-left: 25px;
}
.navigation .item img {
  height: 25px;
}
.navigation .item span {
  display: inline-block;
  line-height: 20px;
  height: 20px;
}
.navigation .item i {
  background-color: #fa3e3e;
  border-radius: 2px;
  color: white;
  padding: 1px 3px;
  font-size: 10px;
  position: absolute;
  /* Position the badge within the relatively positioned button */
  z-index: 5;
  left: 40px;
}
<ul class="navigation">
  <li class="item first">
    <i>24</i>
    <img src="assets/icons/dashboard.png" />
    <span>Caption of Navigation Item</span>
    <ul class="navigation">
      <li class="item">
        <i>24</i>
        <img src="assets/icons/dashboard.png" />
        <span>Caption of Navigation Item</span>
      </li>
    </ul>
  </li>
</ul>

Upvotes: 2

Views: 613

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 371023

Here's a working template based on your requirements:

ul.navigation {
  padding: 0px;
  margin: 0px
}
.navigation .item.first {
  padding: 0px
}
.navigation li {
  position: relative;
  list-style: none;
  padding-left: 25px;
}
.navigation .item img {
  height: 40px;
  vertical-align: middle;
}
.navigation .item span {
  line-height: 40px;
}
.navigation .item i {
  background-color: #fa3e3e;
  border-radius: 2px;
  color: white;
  padding: 1px 3px;
  font-size: 10px;
  position: absolute;
  z-index: 5;
}
<ul class="navigation">
  <li class="item first">
    <i>24</i>
    <img src="http://i.imgur.com/60PVLis.png" width="40" height="40" alt="">
    <span>Caption of Navigation Item</span>
    <ul class="navigation">
      <li class="item">
        <i>24</i>
        <img src="http://i.imgur.com/60PVLis.png" width="40" height="40" alt="">
        <span>Caption of Navigation Item</span>
      </li>
    </ul>
  </li>
</ul>

jsFiddle

Upvotes: 1

Related Questions