Hi,
One of my friend suggested these forums and so I’m here. I am basically a visual guy with photoshop and illustrator my key things. But recently, for a project I had to convert a small search result filter kind of thing into HTML/CSS. I tried online tools but it gives all images and no proper html.
Can you guys help me please? PSD attached.
Any help appreciated.
P.S. Since I’m a design guy, I’m not really into HTML/CSS and I know that I should better learn this stuff coz it’s useful. But I don’t have time now to learn in this project.
Thanks!!
Hi, Welcome to the forums.
Usually we don’t offer help unless you have had a go yourself first as we are not a resource to get free work done :). We like to see that the member has taken the trouble to have a go even if they are wildly wrong and then we can instruct and point them in the right direction. In that way it becomes a learning experience for all.
I have this time only provided some code to aid you but any further additions such as the icons in the inputs will have to be done by you. If you need any changes then you must have a go first yourself and then ask when you get stuck.
Here is the html and css that you need but you will need to work out the serverside functionality for yourself.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
/* apply a natural box layout model to all elements */
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* main CSS Document */
html, body, table {
margin: 0;
padding: 0;
font-size: 100%;
}
form, fieldset, legend {
margin:0;
padding:0;
border:none;
}
.filter {
width:200px;
padding:7px 10px 0;
background:#374d99;
color:#fff;
box-shadow:10px 10px 20px rgba(0,0,0,0.3);
font-family:Arial, Helvetica, sans-serif;
}
.inp {
width:100%;
height:30px;
line-height:20px;
padding:5px 25px 5px 5px;
margin:0 0 10px;
color:#5f5f5f;
background:#fff;
border:1px solid #abadb3;
display:block;
clear:both;
font-size:75%;/* 12px if all things equal */
}
select.inp{padding-right:2px;padding-left:3px}
.filter legend {
font-size:17px;
padding:0;
float:left;
width:100%;
text-indent:0;
text-align:center;
margin:0 0 13px;
font-weight:bold;
}
.plane {background:#fff url(images/plane.gif) no-repeat 90% 50%} /* apply your image here*/
.calendar {background:#fff url(images/calendar.gif) no-repeat 90% 50%} /* apply your image here*/
.filter label {
display:block;
padding:0 0 5px 2px;
clear:both;
font-weight:bold;
font-size:75%;/* 12px if all things equal */
}
</style>
</head>
<body>
<!--IE8+ only -->
<div class="filter">
<form>
<fieldset>
<legend>Filtrer les résultats</legend>
<label for="airport">Aéroport de départ</label>
<input class="inp plane" type="text" name="airport" id="airport" placeholder="Paris CDG">
<label for="depart">Date de départ</label>
<input class="inp calendar" type="text" name="depart" id="depart" placeholder="Di. 22.05.2014">
<label for="pension">Type de pension</label>
<select class="inp" name="pension" id="pension">
<option value="v1">Tout inclus</option>
<option value="v2">etc...</option>
</select>
<label for="chambre">Type de chambre</label>
<select class="inp" name="chambre" id="chambre">
<option value="chambre1">chambre vue mer</option>
<option value="chambre2">chambre sur mer</option>
</select>
<label for="prix">Prix</label>
<select class="inp" name="prix" id="prix">
<option value="p1">indifferent</option>
<option value="p2">expensive</option>
</select>
</fieldset>
</form>
</div>
</body>
</html>