Szabolcs Szűcs Szabolcs Szűcs - 2 months ago 18
CSS Question

Bootstrap,nav,nav-pills,image,image verical align

I tried to make one menu :

I want like this

Now,I have problem,how can i make the images vertical align to bottom? Variable image sizes.

Now it looks like (Too big is the images,the space beettwen image/span/text):

Too big is the images,the space beettwen image/span/text

The code:



.vehicletype{
width:90%;
line-height:70px;
margin-right:5%;
margin-left:5%;
margin-top:5%;
}
.vehicletype img{
vertical-align:bottom;
}
.vehicletype a{
vertical-align:top;
}
.vehicletype ul li {
float:left;
width:12.5%;
list-style:none;
text-align:center;
font-size:14pt;
text-transform:uppercase;
font-stretch:semi-condensed;
font-weight:bold;
}

.vehicletype ul li a{
width:100%;
color:rgba(200,54,55,1);
-webkit-filter: grayscale(100%)
brightness(135%)
contrast(120%);
filter: grayscale(100%)
brightness(135%)
contrast(120%);
transition: filter 0.1s, box-shadow 0.1s;
-webkit-transition: filter 0.1s, -webkit-filter 0.1s, box-shadow 0.1s;


}
.vehicletype ul li a:hover img{
width:100%;
color:rgba(200,54,55,1);
filter:none;
-webkit-filter:none;
text-decoration:none;

}
.vehicletype ul li a:hover{
filter:none;
-webkit-filter:none;
text-decoration:none;
}
.vehicletype ul li a img{
width:100%;
margin-right:auto;
margin-left:auto;
padding-right:5%;
padding-left:5%;
-webkit-filter: grayscale(100%)
brightness(135%)
contrast(120%);
filter: grayscale(100%)
brightness(135%)
contrast(120%);

transition: filter 0.3s, box-shadow 0.3s;
-webkit-transition: filter 0.3s, -webkit-filter 0.3s, box-shadow 0.3s;

}
.vehicletype ul li a img:hover{
filter:none;
-webkit-filter:none;
}

.menuspan{
width:90%;
height:8px;
border-radius:4px;
background-color:rgba(200,54,55,1);
-webkit-filter: grayscale(100%)
brightness(165%)
contrast(100%);
filter: grayscale(100%)
brightness(165%)
contrast(100%);
transition: filter 0.3s, box-shadow 0.3s;
-webkit-transition: filter 0.3s, -webkit-filter 0.3s, box-shadow 0.3s;
margin-top:5%;
margin-left:5%;
margin-right:5%;
}
.vehicletype ul li .active a{
filter:none;
-webkit-filter:none;
}
.vehicletype ul li .active img{
filter:none;
-webkit-filter:none;
}

<div class="vehicletype">
<ul class="vehicletypes">



<li ><a href="?vehicletype=car">
<img src="http://pastorautoservis.com/sunday/theme/default/img/car1.png">
<div class="menuspan"></div>Car</a></li>
<li><a href="?vehicletype=van">

<img src="http://pastorautoservis.com/sunday/theme/default/img/van1.png">

<div class="menuspan"></div>Van</a></li>
<li><a href="?vehicletype=truck">
<img src="http://pastorautoservis.com/sunday/theme/default/img/truck1.png">
<div class="menuspan"></div>Truck</a></li>
<li><a href="?vehicletype=bus">
<img src="http://pastorautoservis.com/sunday/theme/default/img/bus1.png">

<div class="menuspan"></div>Bus</a></li>
<li><a href="?vehicletype=motobike">
<img src="http://pastorautoservis.com/sunday/theme/default/img/motobike1.png">
<div class="menuspan"></div>motobike</a></li>
<li><a href="?vehicletype=boat">
<img src="http://pastorautoservis.com/sunday/theme/default/img/boat1.png">
<div class="menuspan"></div>boat</a></li>
<li><a href="?vehicletype=oldtimer">
<img src="http://pastorautoservis.com/sunday/theme/default/img/oldtimer1.png">
<div class="menuspan"></div>oldtimer</a></li>
<li><a href="?vehicletype=other">
<img src="http://pastorautoservis.com/sunday/theme/default/img/other1.png">
<div class="menuspan"></div>other</a></li>
</ul>
</div>




Answer

I was testing your code, and my suggestion is that you need to set a width/height for each image or resize the images. About the space between the text and image is easy, only you need is change the line-height:70px from vehicleType class.

I'll hope I help you!

.vehicletype{
width:90%;
line-height:40px;
margin-right:5%;
margin-left:5%;
margin-top:5%;
}

.car img{height:21px;}
.van img{height:32px;}
.truck img{}
.bus img{height:38px;}
.moto img{height:21px;}
.boat img{height:30px;}
.old img{height:19px;}
.other img{height:21px;}

.vehicletype img{
	vertical-align:bottom;
}
.vehicletype a{
	vertical-align:top;
    display:block;
}
.vehicletype ul li {
float:left;
width:12.5%;
list-style:none;
 text-align:center;
 font-size:14pt;
 text-transform:uppercase;
 font-stretch:semi-condensed;
 font-weight:bold;
}

.vehicletype ul li a{
width:100%;
color:rgba(200,54,55,1);
  -webkit-filter: grayscale(100%) 
          brightness(135%)
          contrast(120%);
  filter: grayscale(100%) 
          brightness(135%)
          contrast(120%);
  transition: filter 0.1s, box-shadow 0.1s;
  -webkit-transition: filter 0.1s, -webkit-filter 0.1s, box-shadow 0.1s;


}
.vehicletype ul li a:hover img{
	width:auto;
    max-width:100%;
	color:rgba(200,54,55,1);
	filter:none;
	-webkit-filter:none;
	text-decoration:none;

}
.vehicletype ul li a:hover{
	filter:none;
	-webkit-filter:none;
	text-decoration:none;
}	
.vehicletype ul li a img{
	width:auto;
    max-width:100%;
	margin-right:auto;
	margin-left:auto;
	padding-right:5%;
	padding-left:5%;
  -webkit-filter: grayscale(100%) 
          brightness(135%)
          contrast(120%);
  filter: grayscale(100%) 
          brightness(135%)
          contrast(120%);
  
  transition: filter 0.3s, box-shadow 0.3s;
  -webkit-transition: filter 0.3s, -webkit-filter 0.3s, box-shadow 0.3s;
  
}
.vehicletype ul li a img:hover{
	filter:none;
	-webkit-filter:none;
}

.menuspan{
	width:90%;
	height:8px;
	border-radius:4px;
	background-color:rgba(200,54,55,1);
	-webkit-filter: grayscale(100%) 
          brightness(165%)
          contrast(100%);
  filter: grayscale(100%) 
          brightness(165%)
          contrast(100%);
  transition: filter 0.3s, box-shadow 0.3s;
  -webkit-transition: filter 0.3s, -webkit-filter 0.3s, box-shadow 0.3s;
  margin-top:5%;
  margin-left:5%;
  margin-right:5%;
}
.vehicletype ul li .active a{
filter:none;
-webkit-filter:none;
}
.vehicletype ul li .active img{
filter:none;
-webkit-filter:none;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="vehicletype">
<ul class="vehicletypes">
	

	
	<li class="car"><a href="?vehicletype=car">
	<img src="http://pastorautoservis.com/sunday/theme/default/img/car1.png" >
    <div class="menuspan"></div>Car</a></li>
	<li class="van"><a href="?vehicletype=van">
	
		<img src="http://pastorautoservis.com/sunday/theme/default/img/van1.png">
	
	<div class="menuspan"></div>Van</a></li>
    <li class="truck"><a href="?vehicletype=truck">
    <img src="http://pastorautoservis.com/sunday/theme/default/img/truck1.png">
    <div class="menuspan"></div>Truck</a></li>
    <li class="bus"><a href="?vehicletype=bus">
	    <img src="http://pastorautoservis.com/sunday/theme/default/img/bus1.png">
	
    <div class="menuspan"></div>Bus</a></li>
    <li class="moto"><a href="?vehicletype=motobike">
        <img src="http://pastorautoservis.com/sunday/theme/default/img/motobike1.png">
	<div class="menuspan"></div>motobike</a></li>
     <li class="boat"><a href="?vehicletype=boat">
        <img src="http://pastorautoservis.com/sunday/theme/default/img/boat1.png">
	 <div class="menuspan"></div>boat</a></li>
      <li class="old"><a href="?vehicletype=oldtimer">
        <img src="http://pastorautoservis.com/sunday/theme/default/img/oldtimer1.png">
	<div class="menuspan"></div>oldtimer</a></li>
       <li class="other"><a href="?vehicletype=other">
        <img src="http://pastorautoservis.com/sunday/theme/default/img/other1.png">
    <div class="menuspan"></div>other</a></li>
</ul>
</div>