user6408005 user6408005 - 6 months ago 19
CSS Question

image size and position

I added an image on my navigation bar but this image position is not set. So I try to set through margin. When I add

margin-right:20px
then "events" title goes to the right side but I want to set position of image right side.

Image what I try:

image 1

Image what I want:

image 2



.lefttabs{
background-color:#1E1E1E;
color:White;
font-family:Calibri;
font-weight:bold;
font-size:medium;
width: 187px;
height: 100%;
z-index:1;/* Stay on top */
padding-top: 60px;
/* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}
.lefttabs a {
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
font-size:medium;
color:White;
width: 133px;
margin-left: 0px;
}
.lefttabs ul{
list-style:none;
margin:0px 20px 0px 0px;
border:1 px solid;
border-color:Black;
}
.lefttabs li{
list-style:none;
}
.lefttabs li a {
list-style:none;
display:block;
padding: 0px 0px 30px 0px;
padding-left: 10px;
padding-top: 10px;
}
.lefttabs a:hover,.offcanvas a:focus{
color: green;
background-color:White;
border-bottom-color:Red;
color:#000!important;
border:1px solid;
}
.imga{
margin-right:20px;
}

<div class="lefttabs">
<ul>
<li>
<a href=""> <img class="imga" alt="" src="images/eve.bmp" border="0" />EVENTS</a>
</li>
</ul>
</div>




Answer

Without going trough all your CSS, this are the basics:

.lefttabs{
  background:#444;
}
.lefttabs ul{
  list-style: none;
  margin:0; padding: 0;
}
.lefttabs a{
  display: block; 
  padding: 8px;
  text-decoration: none;
  color:#fff;
  line-height: 24px;        /* 24px are icons so use same line height */
}
.lefttabs a img{
  margin:0 8px 0 0;
  vertical-align: top;     /* needed */
}
<div class="lefttabs">
  <ul>
    <li> 
      <a href="#"><img class="imga" alt="icon" src="//placehold.it/24x24"/>EVENTS</a>
    </li>
    <li> 
      <a href="#"><img class="imga" alt="icon" src="//placehold.it/24x24/f0f"/>STUFF</a>
    </li>
  </ul>
</div>