Duda en formulario

[NaRanJiTo78]

Hola!

Me gustaría saber como poner 3 campos seguidos (Día, mes y año) en el siguiente formulario:

(Actualmente salen debajo del día)

http://www.firenetworks.eu/formulari...b-captcha2.php

HTML:

<li><label>*Fecha:</label></li>
<div id="dia"><li><label for="Dia"></label><select class="iselect2" name="Dia" id="Dia">
<option value="1">1</option>
<option value="2">....</option>
<option value="31">31</option>
</select></li></div>
<div id="mes"><li><label for="Mes"></label><select class="iselect3" name="Mes" id="Mes">
<option value="Enero">Enero</option>
<option value="Febrero">...</option>
<option value="Diciembre">Diciembre</option>
</select></li></div>
<div id="año"><li><label for="Ano"></label><select class="iselect3" name="Ano" id="Ano">
<option value="2010">2010</option>
<option value="2011">2011</option>
</select></li></div>

<li><label for="Hora">*Hora:</label><select class="iselect" name="Hora" id="Hora"><option value="13:30">13:30</option>
<option value="14:00">14:00</option>
<option value="14:30">......</option>
<option value="23:30">23:30</option>
</select></li>
</ul>

CSS: (para esto)

.iform {font: 12px/26px Verdana, Geneva, sans-serif; width:400px; margin:30px auto;z-index:10;top:30px;}
.iform ul { margin:0; padding:0; list-style:none;}
.iform ul ul { overflow:auto}
.iform li { padding-bottom:5px;}
.iform label {
width:130px; display:block; float:left; line-height:26px;
}
.iform label.ilabel {
width:auto; display:inline; float:none; line-height:26px; padding:0 5px
}

Alguien me puede ayudar?

Un saludo, muchas gracias

[visitante28]

hola NaRanJiTo78


lo mas probable es que es ancho que le estas dando a la lista no cabe dentro del contenedor que usas . .


.iform li {width:130px; display:block; float:left; line-height:26px;}


revisa esta linea . . .

[NaRanJiTo78]

Gracias por responder, visitante28.

No puede ser eso, pues cada línea de formulario es indivisible:



Lo que quiero saber es eso, poner esos dos campos en fecha

[PrendekZ]

Bueno te daré la solución.

al select coloca un class:

<select class="selectFecha">
<option></option>
</select>

Solo agrega le al de la Fecha es decir, al año, mes y día, y el CSS sería:

select.selectFecha{width:150px; display:block; float:left;}

Si no se soluciona, publica todo el código del index y del CSS.

También el contenedor que se abre cuando tratas de enviar el formulario y te sale la notificación de que falta un campo "Si hablo de la nube verde" colocale z-index:100;

Saludos!

[BloodShadow]

Solo saca cada select del div que los has metido y dejalos en unos solo para que asi te aparezca uno al lado del otro :D
Son elementos de linea así que no es necesario los float, puedes ponerlos perfectamente uno al lado del otro y ya solo recuerda, si el div que los va a contener mide 90px, cada select tiene que medir unos 25px y 5px de espacio entre cada uno... es un ejemplo nomas, seria muy pequeño asi jajaja

[truchito]

Buenas unas cuantas cosas:
te lo comento como profesional de diseño web. Solo a modo informativo.

Cuando usamos formularios, no es viable los ul y li. Si lo pones lo que no es correcto semanticamente es poner un div y dentro de un li.

la estructura seria esta:

<ul>
<li></li>
<li></li>
<li></li>
</ul>

pero yo para formularios no uso esto. Haz una prueba y sustituye todo tu <ul></ul> por este código:

Código HTML:

<ul>
    <li><label for="Tunombre">*Tu nombre:</label>
    <input type="text" id="Tunombre" name="Tunombre" maxlength="32" class="itext text-input validate['required','nodigit','length[2,-1]']" value=""></li>
    
    <li><label>*Tu email:</label>
    <input type="text" id="TuEmail" name="TuEmail" maxlength="32" class="itext text-input validate['required','email']" value=""></li>
    
    <li><label for="Telfono">*Tu movil:</label>
    <input type="text" id="Telfono" name="Telfono" maxlength="32" class="itext text-input validate['required','phone']" value=""></li>                  <li class="iseparator">&nbsp;</li>
    <li><label for="NPersonas">*Nº Personas:</label><select id="NPersonas" name="NPersonas" class="iselect">
        <option value="1">1</option> 
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="Grupos">Grupos</option>
        </select></li>
 
     <li><label>*Fumador:</label>
     <select id="Fumador" name="Fumador" class="iselect">
        <option>Indiferente</option>
        <option value="Si">Si</option>
        <option value="No">No</option>
        </select>
     </li>
     <li><label>*Fecha:</label></li>
     <li class="dia"><label for="Dia"></label><select class="iselect2 selectFecha2" name="Dia" id="Dia">
        <option value="1">1</option> 
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</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></li>
        <li class="mes"><label for="Mes"></label><select class="iselect3" name="Mes" id="Mes">
        <option value="Enero">Enero</option> 
        <option value="Febrero">Febrero</option>
        <option value="Marzo">Marzo</option>
        <option value="Abril">Abril</option>
        <option value="Mayo">Mayo</option>
        <option value="Junio">Junio</option>
        <option value="Julio">Julio</option>
        <option value="Agosto">Agosto</option>
        <option value="Septiembre">Septiembre</option>
        <option value="Octubre">Octubre</option>
        <option value="Noviembre">Noviembre</option>
        <option value="Diciembre">Diciembre</option>    
        </select></li>
        <li class="ano"><label for="Ano"></label><select class="iselect3" name="Ano" id="Ano">
        <option value="2010">2010</option> 
        <option value="2011">2011</option>
        </select></li>
          
        <li><label for="Hora">*Hora:</label><select id="Hora" name="Hora" class="iselect"><option value="13:30">13:30</option>
        <option value="14:00">14:00</option>
        <option value="14:30">14:30</option>
        <option value="15:00">15:00</option>
        <option value="15:30">15:30</option>
        <option value="21:00">21:00</option>
        <option value="21:30">21:30</option>
        <option value="22:00">22:00</option>
        <option value="22:30">22:30</option>
        <option value="23:00">23:00</option>
        <option value="23:30">23:30</option>
      </select></li>
      </ul>
 

y el css añade esto

Código CSS:

.dia{width: 100px; float: left; margin-right: 15px;}
.mes{width: 100px; float: left; margin-right: 0;}
.ano{width: 100px; float: left;}
 

cualquier cosa me mandas un privado

Christian

[NaRanJiTo78]

Muchas gracias!!