hello
i was creating a popover on a button and implementing a few things in it …
but in the css margin-top is the property i want to use for my text field search button for my lables but i am unable to do so … can anyone help me with this problem …
and i want is that MY PRICE RANGE LABEL AND SLIDEBAR AND THE VALUE OF THE PRICE RANGE SHOUD COME INLINE … but when i move my bar all my label and value also move and it dosent come inline…
<@page contentType="text/html" pageEncoding="UTF-8">
<form>
<span id="loginForm">
<span class="form-label" style="text-decoration: none;color: #669900">Find Your Accommodation</span>
<span > <input class="abc" type="text" ></span>
<a href="#" class="S1" style="text-decoration: none;background-color: #669900">SEARCH </a>
<label class="form-label1" style="color: #669900;">Rental Type</label>
<span class="form-label2" style="color: #669900">Property Type</span>
<span class="form-label3" style="color: #669900">Listing source</span>
<select size="1" class="ss">
<option value="nnnj">Family</option>
<option value="nnnj">Shared</option>
<option value="nnnj">Individuals</option>
</select>
<select size="1" class="aa">
<option value="nnnj">PG</option>
<option value="nnnj">Hostel</option>
<option value="nnnj">Apartment</option>
<option value="nnnj">Independent Rooms</option>
</select>
<select size="1" class="dd">
<option value="nnnj">Any Source</option>
<option value="nnnj">Agent</option>
</select>
<span class="form-label4" style="color: #669900">Price Range
<input class="ll" type="range" min="0" max="10000" value="0" step="20" onchange="showValue(this.value)" />
<class="tt" id="range" style="color: #669900">0
</span>
//this is where css begins
.tt{
margin-top: 20px;
}
.ll
{margin-top: 10px;
}
.aaa
{
margin-top: -86px;
height: 55px;
}
.dv
{
margin-top: 30px;
}
.ss
{
margin-left: 20px;
border-radius: 5px;
}
.popover{
position: absolute;
margin-left: -370px;
font-size: 0px;
line-height: 0%;
width: 5px;
border-top: 25px solid rgba(0,0,0,0);
border-left: 25px solid rgba(0,0,0,0);
border-right: 25px solid rgba(0,0,0,0);
border-bottom: 25px solid black;
margin-top: 30px;
}
.aa
{
margin-left: 30px;
border-radius: 5px;
}
.dd{margin-left: 30px; border-radius: 5px;
}
.S1{
height: 20px;
width: 70px;
border-style: groove;
border-radius: 5px;
background-color: black;
font-weight: bold;
font-size: 1em;
text-align: center;
vertical-align: middle;
color: #fff;
margin-top: 30px;
}
.abc{
height: 20px;
width: 300px;
border-style: groove;
border-radius: 5px;
margin-top: 10px;
margin-left: 20px;
}
#loginForm {
border: #333;
border-style: groove;
border-radius: 15px;
position: fixed; margin-left: 400px;
margin-top: 125px;
display: none;
width: 440px;
height: 170px;
color: black;
background-color: black;
}
#login {
display:block;
opacity: 0.7;
}
.form-label {
font-size: 24px;
font-weight: bold;
margin-left: 23px;
}
.form-label1 {
font-size: 15px;
font-weight: bold;
margin-left: 20px;
margin-top: 150px;
}
.form-label2{
font-size: 15px;
font-weight: bold;
margin-left: 40px;
}
.form-label3 {
font-size: 15px;
font-weight: bold;
margin-left: 90px;
}
.form-label4 {
font-size: 15px;
font-weight: bold;
margin-left: 80px;
}
#a li
{ //position: absolute;
float: left;
opacity: 0.7;
padding: 20px;
}
.fancy_button {
//margin-top: 330px;
position: absolute;
top: 300px;
left: 400px;
display: block;
background: #62869b;
width: 130px;
height: 120px;
font-weight: bold;
font-size: 1em;
text-align: center;
vertical-align: middle;
line-height: 100px;
//font: 0.8em/8px Verdana, Arial, Helvetica, sans-serif;
color: #fff;
text-decoration: none;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 20px;
background-color: black;
border-style: groove;
}
.fancy_button:hover {
background: blueviolet;
}
