Photoshop Question posted in
The official user guide can be found here.

Putting 2 lists side by side – Photoshop

The 1st list is filled with icons for my other list which is the skill bar, I am trying to put them side by side however it doesn’t work. I tried putting display: inline, it doesn’t work. I also tried float: left; and float: right; it still doesn’t work.

This is the HTML code:

.content {
  width: 278px;
  margin: 0;
  position: relative;
  float: left;
  font-size: 20px;
  line-height: 2em;
  padding: 30px 0 30px;
}
.col {
  width: 16em;
}
#skill {
  top: -500px;
  list-style: none;
  padding-top: 30px;
  float: right;
}
#skillimg {
  list-style: none;
  padding-top: 30px;
}
#skill li {
  margin-left: 150px;
  margin-bottom: 70px;
  background: #000;
  height: 10px;
  width: 14em;
  border-radius: 3px;
  border-left: 1px solid #111;
  border-top: 1px solid #111;
  border-right: 1px solid #333;
  border-bottom: 1px solid #333;
}
#skill li em {
  float: left;
  position: relative;
  top: -40px;
}
.expand {
  height: 5px;
  margin: 2px 0;
  background: #2187e7;
  position: absolute;
  box-shadow: 0px 0px 10px 1px rgba(0, 198, 255, 0.4);
}
.illustrator {
  width: 70%;
  -moz-animation: illustrator 2s ease-out;
  -webkit-animation: illustrator 2s ease-out;
}
.photoshop {
  width: 70%;
  -moz-animation: photoshop 2s ease-out;
  -webkit-animation: photoshop 2s ease-out;
}
.premiere {
  width: 60%;
  -moz-animation: premiere 2s ease-out;
  -webkit-animation: premiere 2s ease-out;
}
.flash {
  width: 50%;
  -moz-animation: flash 2s ease-out;
  -webkit-animation: flash 2s ease-out;
}
.sql {
  width: 70%;
  -moz-animation: sql 2s ease-out;
  -webkit-animation: sql 2s ease-out;
}
.java {
  width: 70%;
  -moz-animation: java 2s ease-out;
  -webkit-animation: java 2s ease-out;
}
.unity {
  width: 70%;
  -moz-animation: unity 2s ease-out;
  -webkit-animation: unity 2s ease-out;
}
.html {
  width: 70%;
  -moz-animation: html 2s ease-out;
  -webkit-animation: html 2s ease-out;
}
.javascript {
  width: 70%;
  -moz-animation: javascript 2s ease-out;
  -webkit-animation: javascript 2s ease-out;
}
.visualstudio {
  width: 70%;
  -moz-animation: visualstudio 2s ease-out;
  -webkit-animation: visualstudio 2s ease-out;
}
@-moz-keyframes illustrator {
  0% {
    width: 0px;
  }
  100% {
    width: 70%;
  }
  ;
}
@-moz-keyframes photoshop {
  0% {
    width: 0px;
  }
  100% {
    width: 90%;
  }
  ;
}
@-moz-keyframes premiere {
  0% {
    width: 0px;
  }
  100% {
    width: 50%;
  }
  ;
}
@-moz-keyframes flash {
  0% {
    width: 0px;
  }
  100% {
    width: 10%;
  }
  ;
}
@-moz-keyframes sql {
  0% {
    width: 0px;
  }
  100% {
    width: 100%;
  }
  ;
}
@-moz-keyframes java {
  0% {
    width: 0px;
  }
  100% {
    width: 100%;
  }
  ;
}
@-moz-keyframes unity {
  0% {
    width: 0px;
  }
  100% {
    width: 100%;
  }
  ;
}
@-moz-keyframes html {
  0% {
    width: 0px;
  }
  100% {
    width: 100%;
  }
  ;
}
@-moz-keyframes javascript {
  0% {
    width: 0px;
  }
  100% {
    width: 100%;
  }
  ;
}
@-moz-keyframes visualstudio {
  0% {
    width: 0px;
  }
  100% {
    width: 100%;
  }
  ;
}
@-webkit-keyframes illustrator {
  0% {
    width: 0px;
  }
  100% {
    width: 70%;
  }
  ;
}
@-webkit-keyframes photoshop {
  0% {
    width: 0px;
  }
  100% {
    width: 90%;
  }
  ;
}
@-webkit-keyframes premiere {
  0% {
    width: 0px;
  }
  100% {
    width: 50%;
  }
  ;
}
@-webkit-keyframes flash {
  0% {
    width: 0px;
  }
  100% {
    width: 10%;
  }
  ;
}
@-webkit-keyframes sql {
  0% {
    width: 0px;
  }
  100% {
    width: 100%;
  }
  ;
}
@-webkit-keyframes java {
  0% {
    width: 0px;
  }
  100% {
    width: 100%;
  }
  ;
}
@-webkit-keyframes unity {
  0% {
    width: 0px;
  }
  100% {
    width: 100%;
  }
  ;
}
@-webkit-keyframes html {
  0% {
    width: 0px;
  }
  100% {
    width: 100%;
  }
  ;
}
@-webkit-keyframes javascript {
  0% {
    width: 0px;
  }
  100% {
    width: 100%;
  }
  ;
}
@-webkit-keyframes visualstudio {
  0% {
    width: 0px;
  }
  100% {
    width: 100%;
  }
  ;
}
<div class="content">
                    <div class="col">
                      <h2>My Skills</h2>
                        <ul id="skillimg">
                            <li><img src="img/ai.png" width="50px" height="50px"></li>
                            
                            <li><img src="img/ps.png" width="50px" height="50px"></li>
                            
                            <li><img src="img/pr.png" width="50px" height="50px"></li>
                            
                            <li><img src="img/flash.png" width="50px" height="50px"></li>
                            
                            <li><img src="img/sql.png" width="50px" height="50px"></li>
                            
                            <li><img src="img/java.png" width="50px" height="50px"></li>
                            
                            <li><img src="img/unity.png" width="100px" height="50px"></li>
                            
                            <li><img src="img/html.png" width="50px" height="50px"></li>
                            
                            <li><img src="img/js.png" width="50px" height="50px"></li>
                            
                            <li><img src="img/vs.png" width="100px" height="50px"></li>
                        </ul>
                        
                        <ul id="skill">
                            <li><span class="expand illustrator"></span><em>Illustrator</em></li>
                            
                            <li><span class="expand photoshop"></span><em>Photoshop</em></li>
                            
                            <li><span class="expand premiere"></span><em>Premiere Pro</em></li>
                            
                            <li><span class="expand flash"></span><em>Flash</em></li>
                            
                            <li><span class="expand sql"></span><em>SQL</em></li>
                            
                            <li><span class="expand java"></span><em>Java</em></li>
                            
                            <li><span class="expand unity"></span><em>Unity</em></li>
                            
                            <li><span class="expand html"></span><em>HTML5</em></li>
                            
                            <li><span class="expand javascript"></span><em>JavaScript</em></li>
                            
                            <li><span class="expand visualstudio"></span><em>Visual Studio</em></li>
                        </ul>
                    </div>
                </div>
Tags:

3

Answers


  1. 0

    You need to do only 2 things

    in HTML

    <ul class="skills"></ul>
<ul class="skills"></ul>

    In CSS

    ul.skills{float:left; width:45%; margin:3px;}

    It will be your output.

    In LI, even its text or images, doesn’t matter for the css

    Login or Signup to reply.
  2. 0

    Just display:flex; to .col do the trick.

    .content {
  width: 278px;
  margin: 0;
  position: relative;
  float: left;
  font-size: 20px;
  line-height: 2em;
  padding: 30px 0 30px;
}
.col {
  width: 16em;
  display:flex;
}
#skill {
  top: -500px;
  list-style: none;
  padding-top: 30px;
  float: right;
}
#skillimg {
  list-style: none;
  padding-top: 30px;
}
#skill li {
  margin-left: 150px;
  margin-bottom: 70px;
  background: #000;
  height: 10px;
  width: 14em;
  border-radius: 3px;
  border-left: 1px solid #111;
  border-top: 1px solid #111;
  border-right: 1px solid #333;
  border-bottom: 1px solid #333;
}
#skill li em {
  float: left;
  position: relative;
  top: -40px;
}
.expand {
  height: 5px;
  margin: 2px 0;
  background: #2187e7;
  position: absolute;
  box-shadow: 0px 0px 10px 1px rgba(0, 198, 255, 0.4);
}
.illustrator {
  width: 70%;
  -moz-animation: illustrator 2s ease-out;
  -webkit-animation: illustrator 2s ease-out;
}
.photoshop {
  width: 70%;
  -moz-animation: photoshop 2s ease-out;
  -webkit-animation: photoshop 2s ease-out;
}
.premiere {
  width: 60%;
  -moz-animation: premiere 2s ease-out;
  -webkit-animation: premiere 2s ease-out;
}
.flash {
  width: 50%;
  -moz-animation: flash 2s ease-out;
  -webkit-animation: flash 2s ease-out;
}
.sql {
  width: 70%;
  -moz-animation: sql 2s ease-out;
  -webkit-animation: sql 2s ease-out;
}
.java {
  width: 70%;
  -moz-animation: java 2s ease-out;
  -webkit-animation: java 2s ease-out;
}
.unity {
  width: 70%;
  -moz-animation: unity 2s ease-out;
  -webkit-animation: unity 2s ease-out;
}
.html {
  width: 70%;
  -moz-animation: html 2s ease-out;
  -webkit-animation: html 2s ease-out;
}
.javascript {
  width: 70%;
  -moz-animation: javascript 2s ease-out;
  -webkit-animation: javascript 2s ease-out;
}
.visualstudio {
  width: 70%;
  -moz-animation: visualstudio 2s ease-out;
  -webkit-animation: visualstudio 2s ease-out;
}
@-moz-keyframes illustrator {
  0% {
    width: 0px;
  }
  100% {
    width: 70%;
  }
  ;
}
@-moz-keyframes photoshop {
  0% {
    width: 0px;
  }
  100% {
    width: 90%;
  }
  ;
}
@-moz-keyframes premiere {
  0% {
    width: 0px;
  }
  100% {
    width: 50%;
  }
  ;
}
@-moz-keyframes flash {
  0% {
    width: 0px;
  }
  100% {
    width: 10%;
  }
  ;
}
@-moz-keyframes sql {
  0% {
    width: 0px;
  }
  100% {
    width: 100%;
  }
  ;
}
@-moz-keyframes java {
  0% {
    width: 0px;
  }
  100% {
    width: 100%;
  }
  ;
}
@-moz-keyframes unity {
  0% {
    width: 0px;
  }
  100% {
    width: 100%;
  }
  ;
}
@-moz-keyframes html {
  0% {
    width: 0px;
  }
  100% {
    width: 100%;
  }
  ;
}
@-moz-keyframes javascript {
  0% {
    width: 0px;
  }
  100% {
    width: 100%;
  }
  ;
}
@-moz-keyframes visualstudio {
  0% {
    width: 0px;
  }
  100% {
    width: 100%;
  }
  ;
}
@-webkit-keyframes illustrator {
  0% {
    width: 0px;
  }
  100% {
    width: 70%;
  }
  ;
}
@-webkit-keyframes photoshop {
  0% {
    width: 0px;
  }
  100% {
    width: 90%;
  }
  ;
}
@-webkit-keyframes premiere {
  0% {
    width: 0px;
  }
  100% {
    width: 50%;
  }
  ;
}
@-webkit-keyframes flash {
  0% {
    width: 0px;
  }
  100% {
    width: 10%;
  }
  ;
}
@-webkit-keyframes sql {
  0% {
    width: 0px;
  }
  100% {
    width: 100%;
  }
  ;
}
@-webkit-keyframes java {
  0% {
    width: 0px;
  }
  100% {
    width: 100%;
  }
  ;
}
@-webkit-keyframes unity {
  0% {
    width: 0px;
  }
  100% {
    width: 100%;
  }
  ;
}
@-webkit-keyframes html {
  0% {
    width: 0px;
  }
  100% {
    width: 100%;
  }
  ;
}
@-webkit-keyframes javascript {
  0% {
    width: 0px;
  }
  100% {
    width: 100%;
  }
  ;
}
@-webkit-keyframes visualstudio {
  0% {
    width: 0px;
  }
  100% {
    width: 100%;
  }
  ;
}
    <div class="content">
                    <div class="col">
                      <h2>My Skills</h2>
                        <ul id="skillimg">
                            <li><img src="img/ai.png" width="50px" height="50px"></li>
                            
                            <li><img src="img/ps.png" width="50px" height="50px"></li>
                            
                            <li><img src="img/pr.png" width="50px" height="50px"></li>
                            
                            <li><img src="img/flash.png" width="50px" height="50px"></li>
                            
                            <li><img src="img/sql.png" width="50px" height="50px"></li>
                            
                            <li><img src="img/java.png" width="50px" height="50px"></li>
                            
                            <li><img src="img/unity.png" width="100px" height="50px"></li>
                            
                            <li><img src="img/html.png" width="50px" height="50px"></li>
                            
                            <li><img src="img/js.png" width="50px" height="50px"></li>
                            
                            <li><img src="img/vs.png" width="100px" height="50px"></li>
                        </ul>
                        
                        <ul id="skill">
                            <li><span class="expand illustrator"></span><em>Illustrator</em></li>
                            
                            <li><span class="expand photoshop"></span><em>Photoshop</em></li>
                            
                            <li><span class="expand premiere"></span><em>Premiere Pro</em></li>
                            
                            <li><span class="expand flash"></span><em>Flash</em></li>
                            
                            <li><span class="expand sql"></span><em>SQL</em></li>
                            
                            <li><span class="expand java"></span><em>Java</em></li>
                            
                            <li><span class="expand unity"></span><em>Unity</em></li>
                            
                            <li><span class="expand html"></span><em>HTML5</em></li>
                            
                            <li><span class="expand javascript"></span><em>JavaScript</em></li>
                            
                            <li><span class="expand visualstudio"></span><em>Visual Studio</em></li>
                        </ul>
                    </div>
                </div>
    Login or Signup to reply.
  3. 0

    You can apply the following CSS to do the floating correctly. Flexbox is not required to achieve this behaviour:

    #skillimg {
position: relative;
width: 150px;
float: left;
}

#skill {
position: relative;
width: 150px;
float: left;
}

    JSfiddle: https://jsfiddle.net/hfx09m3m/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search