Hi,
i have this page.
Press “Entrar”.
I’m trying to put the label of the fields on the left of the field. I tried with “float:left” but it’s not working.
Any idea?
Javi
Looking at the page you are pointing to I am not quite sure I follow what the problem is; the labels ARE to the left of the form fields.
But what I really don’t get actually is why you are putting the labels and the fields in 2 separate LI items. Furthermore, you should not have to float them because I believe labels and input fields are both inline (or inline-block) elements…
If they are not, then you need to either need to set width:auto for the container (otherwise your elements will wrap), or set white-space:nowrap on the container to force all inline elements to be on the same line.
Labels are inline elements by default and the benefit of floating them is that you can then apply a width so that the controls are all evenly aligned vertically.
I did a quick revision of the code and I would use something simpler like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="stylesheet" type="text/css" media="screen" href="/rs2/web/css/formularios.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/rs2/web/css/portada.css" />
<style type="text/css">
ul {
list-style:none;
margin:0;
padding:0;
}
.form_1_etiqueta label {
float: left;
width:10em;
padding:0 1em 0 0;
text-align:right;
clear:left;
}
.form_1_etiqueta label.radio_list {
font-size:77%;
color:#f00;
float:none;
width:auto;
padding:0 1em 0 0;
clear:none;
position:relative;
top:-2px;
vertical-align:middle;
}
.form_1_etiqueta li {
width:100%;
overflow:hidden;
clear:both;
font-size:85%;
}
.form_1_etiqueta input {
margin-bottom:10px;
}
.form_1_etiqueta li.submit input {
margin-left:11em
}
.form_1_etiqueta li.radio {
margin:5px 0 0px
}
</style>
</head>
<body>
<form action="/rs2/web/register" method="post">
<ul class="form_1_etiqueta">
<li>
<label for="register_nombre_apellidos">Nombre y apellidos</label>
<input type="text" name="register[nombre_apellidos]" id="register_nombre_apellidos" />
</li>
<li>
<label for="register_email_address">E-mail</label>
<input type="text" name="register[email_address]" id="register_email_address" />
</li>
<li>
<label for="register_password">Contraseña</label>
<input type="password" name="register[password]" id="register_password" />
</li>
<li>
<label for="register_password_confirmation">Repite la contraseña</label>
<input type="password" name="register[password_confirmation]" id="register_password_confirmation" />
</li>
<li>
<label for="register_fecha_nac">Fecha de nacimiento</label>
<select name="register[fecha_nac][day]" id="register_fecha_nac_day">
<option value="" selected="selected">Dia</option>
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
/
<select name="register[fecha_nac][month]" id="register_fecha_nac_month">
<option value="" selected="selected">Mes</option>
<option value="1">enero</option>
<option value="2">febrero</option>
<option value="3">marzo</option>
<option value="4">abril</option>
<option value="5">mayo</option>
<option value="6">junio</option>
<option value="7">julio</option>
<option value="8">agosto</option>
<option value="9">septiembre</option>
<option value="10">octubre</option>
<option value="11">noviembre</option>
<option value="12">diciembre</option>
</select>
/
<select name="register[fecha_nac][year]" id="register_fecha_nac_year">
<option value="" selected="selected">Año</option>
<option value="2010">2010</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
<option value="2007">2007</option>
<option value="2006">2006</option>
<option value="2005">2005</option>
<option value="2004">2004</option>
<option value="2003">2003</option>
<option value="2002">2002</option>
<option value="2001">2001</option>
<option value="2000">2000</option>
<option value="1999">1999</option>
<option value="1998">1998</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
<option value="1994">1994</option>
<option value="1993">1993</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
<option value="1990">1990</option>
<option value="1989">1989</option>
<option value="1988">1988</option>
<option value="1987">1987</option>
<option value="1986">1986</option>
<option value="1985">1985</option>
<option value="1984">1984</option>
<option value="1983">1983</option>
<option value="1982">1982</option>
<option value="1981">1981</option>
<option value="1980">1980</option>
<option value="1979">1979</option>
<option value="1978">1978</option>
<option value="1977">1977</option>
<option value="1976">1976</option>
<option value="1975">1975</option>
<option value="1974">1974</option>
<option value="1973">1973</option>
<option value="1972">1972</option>
<option value="1971">1971</option>
<option value="1970">1970</option>
<option value="1969">1969</option>
<option value="1968">1968</option>
<option value="1967">1967</option>
<option value="1966">1966</option>
<option value="1965">1965</option>
<option value="1964">1964</option>
<option value="1963">1963</option>
<option value="1962">1962</option>
<option value="1961">1961</option>
<option value="1960">1960</option>
<option value="1959">1959</option>
<option value="1958">1958</option>
<option value="1957">1957</option>
<option value="1956">1956</option>
<option value="1955">1955</option>
<option value="1954">1954</option>
<option value="1953">1953</option>
<option value="1952">1952</option>
<option value="1951">1951</option>
<option value="1950">1950</option>
<option value="1949">1949</option>
<option value="1948">1948</option>
<option value="1947">1947</option>
<option value="1946">1946</option>
<option value="1945">1945</option>
<option value="1944">1944</option>
<option value="1943">1943</option>
<option value="1942">1942</option>
<option value="1941">1941</option>
<option value="1940">1940</option>
<option value="1939">1939</option>
<option value="1938">1938</option>
<option value="1937">1937</option>
<option value="1936">1936</option>
<option value="1935">1935</option>
<option value="1934">1934</option>
<option value="1933">1933</option>
<option value="1932">1932</option>
<option value="1931">1931</option>
<option value="1930">1930</option>
<option value="1929">1929</option>
<option value="1928">1928</option>
<option value="1927">1927</option>
<option value="1926">1926</option>
<option value="1925">1925</option>
<option value="1924">1924</option>
<option value="1923">1923</option>
<option value="1922">1922</option>
<option value="1921">1921</option>
<option value="1920">1920</option>
<option value="1919">1919</option>
<option value="1918">1918</option>
<option value="1917">1917</option>
<option value="1916">1916</option>
<option value="1915">1915</option>
<option value="1914">1914</option>
<option value="1913">1913</option>
<option value="1912">1912</option>
<option value="1911">1911</option>
<option value="1910">1910</option>
<option value="1909">1909</option>
<option value="1908">1908</option>
<option value="1907">1907</option>
<option value="1906">1906</option>
<option value="1905">1905</option>
<option value="1904">1904</option>
<option value="1903">1903</option>
<option value="1902">1902</option>
<option value="1901">1901</option>
<option value="1900">1900</option>
</select>
</li>
<li class="radio">
<label for="register_sexo">Sexo</label>
<input name="register[sexo]" type="radio" value="0" id="register_sexo_0" />
<label class="radio_list" for="register_sexo_0">Chica</label>
<input name="register[sexo]" type="radio" value="1" id="register_sexo_1" />
<label class="radio_list" for="register_sexo_1">Chico</label>
</li>
<li>
<label for="register_localidad">Localidad</label>
<input type="text" name="register[localidad]" id="register_localidad" />
</li>
<li>
<label for="register_provincia">Provincia</label>
<input type="text" name="register[provincia]" id="register_provincia" />
<input type="hidden" name="register[_csrf_token]" value="1bf2e9e3b7eb587bf7349ffabc20eadb" id="register__csrf_token" />
</li>
<li class="submit">
<input type="submit" value="Registrarme" />
</li>
</ul>
</form>
</body>
</html>
I usually do forms more simply like this though:
http://www.pmob.co.uk/temp/form-basic.htm
http://www.pmob.co.uk/temp/form-basic2.htm
http://www.pmob.co.uk/temp/form-basic-fieldset.htm
I wasn’t sure any more if labels were inline or block, but if they are block, floating them left will do the trick (or maybe just make them an inline element…)
Hi,
As Tommy said above it would make more sense to have the label and associated input(s) in the same list element.
If you float the label width a width then you will get an even display.
.form_1_etiqueta label{
[B]float: left;
width:10em;
padding:0 1em 0 0;
text-align:right;
clear:left;[/B]
}
[B].form_1_etiqueta li,.form_1 li{display:inline}
.form_1 input{margin-bottom:10px}[/B]
You then need to take the list element out of the equation because it will make the display staggered in IE6, so set the list element to display:inline as shown above.
Where is your ul element? Lists must be contained within a ul element.