Mrudang Shah Mrudang Shah - 2 months ago 10
CSS Question

How to Make <ul> <li> as structured

Q.1) My ul li structure is as below

<ul class="service">
<li>
<ul class="service-sub">
<li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Acura Repair</li>
<li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Chrysler Repair</li>
<li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Honda Repair</li>
<li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Jeep Repair</li>
<li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Mercedes-Benz Repair</li>
<li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Porche Repair</li>
<li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Subaru Repair</li>
</ul>
</li>

<li>
<ul class="service-sub">
<li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Acura Repair</li>
<li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Chrysler Repair</li>
<li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Honda Repair</li>
<li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Jeep Repair</li>
<li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Mercedes-Benz Repair</li>
<li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Porche Repair</li>
<li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Subaru Repair</li>
</ul>
</li>
<li>
<ul class="service-sub">
<li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Acura Repair</li>
<li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Chrysler Repair</li>
<li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Honda Repair</li>
<li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Jeep Repair</li>
<li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Mercedes-Benz Repair</li>
<li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Porche Repair</li>
<li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Subaru Repair</li>
</ul>
</li>
<li>
<ul class="service-sub">
<li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Acura Repair</li>
<li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Chrysler Repair</li>
<li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Honda Repair</li>
<li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Jeep Repair</li>
<li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Mercedes-Benz Repair</li>
<li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Porche Repair</li>
<li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Subaru Repair</li>
</ul>
</li>
<li>
<ul class="service-sub">
<li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Acura Repair</li>
<li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Chrysler Repair</li>
<li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Honda Repair</li>
<li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Jeep Repair</li>
<li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Mercedes-Benz Repair</li>
<li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Porche Repair</li>
<li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Subaru Repair</li>
</ul>
</li>
</ul>


I have write below CSS; but not getting exact output.

.service{width: 100em;}
.service li {display: inline-block; float: left; width: 10em; padding-left: 10px; margin-left: 10px;}
.service-sub li span:first-child{width:10px;}


I need output as below show in image.
enter image description here

Q.2) I also want to create the ul li structure as shown in picture.
enter image description here

For that i have written the below CSS, but i could not getting how to create that yellow color part.

.reseda-autommotive-img li {display:inline-block; border: 2px solid red; background-color: #252324; width: 100px; height: 100px; margin-left: 25px; }

Answer

For the first part of your question, i copied your code over and just added this to the css, now it should look like the image you posted:

.service {
  width: 100em;
}
.service li {
  display: inline-block;
  float: left;
  width: 12em;
  padding-left: 10px;
  margin-left: 10px;
}
.service-sub li span:first-child {
  width: 10px;
}

img {
  padding-right:15px;
}
<ul class="service">
  <li>
    <ul class="service-sub">
      <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Acura Repair</li>
      <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Chrysler Repair</li>
      <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Honda Repair</li>
      <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Jeep Repair</li>
      <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Mercedes-Benz Repair</li>
      <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Porche Repair</li>
      <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Subaru Repair</li>
    </ul>
  </li>

  <li>
    <ul class="service-sub">
      <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Acura Repair</li>
      <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Chrysler Repair</li>
      <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Honda Repair</li>
      <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Jeep Repair</li>
      <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Mercedes-Benz Repair</li>
      <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Porche Repair</li>
      <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Subaru Repair</li>
    </ul>
  </li>
  <li>
    <ul class="service-sub">
      <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Acura Repair</li>
      <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Chrysler Repair</li>
      <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Honda Repair</li>
      <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Jeep Repair</li>
      <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Mercedes-Benz Repair</li>
      <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Porche Repair</li>
      <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Subaru Repair</li>
    </ul>
  </li>
  <li>
    <ul class="service-sub">
      <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Acura Repair</li>
      <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Chrysler Repair</li>
      <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Honda Repair</li>
      <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Jeep Repair</li>
      <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Mercedes-Benz Repair</li>
      <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Porche Repair</li>
      <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Subaru Repair</li>
    </ul>
  </li>
  <li>
    <ul class="service-sub">
      <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Acura Repair</li>
      <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Chrysler Repair</li>
      <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Honda Repair</li>
      <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Jeep Repair</li>
      <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Mercedes-Benz Repair</li>
      <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Porche Repair</li>
      <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Subaru Repair</li>
    </ul>
  </li>
</ul>

For the second part of your question I made this (looks bad when you run the snippet, but when you expand it it looks like the image). You will need to add the pictures yourself JSFIDDLE

2nd Part

.repair,
.trusted,
.expertise,
.low-cost {
  width: 150px;
  height: 150px;
  display: inline-block;
  background-color: black;
  margin: 20px;
  border: 2px solid red;
}
.red {
  width: 100px;
  height: 40px;
  display: inline-block;
  background-color: red;
  margin-left: 25px;
  margin-top: -20px;
  text-align: center;
}
.yellow {
  width: 750px;
  height: 120px;
  border: 2px solid yellow;
  border-radius: 50%;
  margin-top: 40px;
  margin-bottom: -85px;
  margin-left: 20px;
  z-index: 99;
  position: relative;
}
<div class="yellow">

</div>

<div class="repair">

  <div class="red">
    <p>Repair</p>
  </div>

</div>

<div class="trusted">

  <div class="red">
    <p>Trusted</p>
  </div>

</div>

<div class="expertise">

  <div class="red">
    <p>Expertise</p>
  </div>

</div>

<div class="low-cost">

  <div class="red">
    <p>Low Cost</p>
  </div>

</div>