Foros del Web » Creando para Internet » CSS »

Duda en formulario

Estas en el tema de Duda en formulario en el foro de CSS en Foros del Web. 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: Cita: ...
  #1 (permalink)  
Antiguo 04/11/2010, 06:46
Avatar de NaRanJiTo78  
Fecha de Ingreso: noviembre-2007
Ubicación: In the BeaCh
Mensajes: 874
Antigüedad: 10 años
Puntos: 10
Pregunta Duda en formulario

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:

Cita:
<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)

Cita:
.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

Última edición por NaRanJiTo78; 04/11/2010 a las 06:59
  #2 (permalink)  
Antiguo 04/11/2010, 09:07
Avatar de visitante28  
Fecha de Ingreso: julio-2009
Ubicación: Black Stone City
Mensajes: 128
Antigüedad: 8 años, 5 meses
Puntos: 1
Respuesta: Duda en formulario

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 . . .
  #3 (permalink)  
Antiguo 04/11/2010, 09:53
Avatar de NaRanJiTo78  
Fecha de Ingreso: noviembre-2007
Ubicación: In the BeaCh
Mensajes: 874
Antigüedad: 10 años
Puntos: 10
Pregunta Respuesta: Duda en formulario

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
  #4 (permalink)  
Antiguo 04/11/2010, 10:24
 
Fecha de Ingreso: noviembre-2009
Ubicación: Colombía
Mensajes: 311
Antigüedad: 8 años
Puntos: 17
Respuesta: Duda en formulario

Bueno te daré la solución.

al select coloca un class:

Cita:
<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:

Cita:
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!
  #5 (permalink)  
Antiguo 04/11/2010, 10:59
Avatar de BloodShadow  
Fecha de Ingreso: marzo-2010
Ubicación: El Salvador
Mensajes: 393
Antigüedad: 7 años, 8 meses
Puntos: 52
Respuesta: Duda en formulario

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
  #6 (permalink)  
Antiguo 05/11/2010, 15:42
 
Fecha de Ingreso: agosto-2010
Ubicación: Barcelona
Mensajes: 22
Antigüedad: 7 años, 4 meses
Puntos: 0
Respuesta: Duda en formulario

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:
Ver original
  1. <ul>
  2.     <li><label for="Tunombre">*Tu nombre:</label>
  3.     <input type="text" id="Tunombre" name="Tunombre" maxlength="32" class="itext text-input validate['required','nodigit','length[2,-1]']" value=""></li>
  4.    
  5.     <li><label>*Tu email:</label>
  6.     <input type="text" id="TuEmail" name="TuEmail" maxlength="32" class="itext text-input validate['required','email']" value=""></li>
  7.    
  8.     <li><label for="Telfono">*Tu movil:</label>
  9.     <input type="text" id="Telfono" name="Telfono" maxlength="32" class="itext text-input validate['required','phone']" value=""></li>                  <li class="iseparator">&nbsp;</li>
  10.     <li><label for="NPersonas">*Nº Personas:</label><select id="NPersonas" name="NPersonas" class="iselect">
  11.         <option value="1">1</option>
  12.         <option value="2">2</option>
  13.         <option value="3">3</option>
  14.         <option value="4">4</option>
  15.         <option value="5">5</option>
  16.         <option value="6">6</option>
  17.         <option value="7">7</option>
  18.         <option value="8">8</option>
  19.         <option value="Grupos">Grupos</option>
  20.         </select></li>
  21.  
  22.      <li><label>*Fumador:</label>
  23.      <select id="Fumador" name="Fumador" class="iselect">
  24.         <option>Indiferente</option>
  25.         <option value="Si">Si</option>
  26.         <option value="No">No</option>
  27.         </select>
  28.      </li>
  29.      <li><label>*Fecha:</label></li>
  30.      <li class="dia"><label for="Dia"></label><select class="iselect2 selectFecha2" name="Dia" id="Dia">
  31.         <option value="1">1</option>
  32.         <option value="2">2</option>
  33.         <option value="3">3</option>
  34.         <option value="4">4</option>
  35.         <option value="5">5</option>
  36.         <option value="6">6</option>
  37.         <option value="7">7</option>
  38.         <option value="8">8</option>
  39.         <option value="9">9</option>
  40.         <option value="10">10</option>
  41.         <option value="11">11</option>
  42.         <option value="12">12</option>
  43.         <option value="13">13</option>
  44.         <option value="14">14</option>
  45.         <option value="15">15</option>
  46.         <option value="16">16</option>
  47.         <option value="17">17</option>
  48.         <option value="18">18</option>
  49.         <option value="19">19</option>
  50.         <option value="20">20</option>
  51.         <option value="21">21</option>
  52.         <option value="22">22</option>
  53.         <option value="23">23</option>
  54.         <option value="24">24</option>
  55.         <option value="25">25</option>
  56.         <option value="26">26</option>
  57.         <option value="27">27</option>
  58.         <option value="28">28</option>
  59.         <option value="29">29</option>
  60.         <option value="30">30</option>
  61.         <option value="31">31</option>
  62.         </select></li>
  63.         <li class="mes"><label for="Mes"></label><select class="iselect3" name="Mes" id="Mes">
  64.         <option value="Enero">Enero</option>
  65.         <option value="Febrero">Febrero</option>
  66.         <option value="Marzo">Marzo</option>
  67.         <option value="Abril">Abril</option>
  68.         <option value="Mayo">Mayo</option>
  69.         <option value="Junio">Junio</option>
  70.         <option value="Julio">Julio</option>
  71.         <option value="Agosto">Agosto</option>
  72.         <option value="Septiembre">Septiembre</option>
  73.         <option value="Octubre">Octubre</option>
  74.         <option value="Noviembre">Noviembre</option>
  75.         <option value="Diciembre">Diciembre</option>   
  76.         </select></li>
  77.         <li class="ano"><label for="Ano"></label><select class="iselect3" name="Ano" id="Ano">
  78.         <option value="2010">2010</option>
  79.         <option value="2011">2011</option>
  80.         </select></li>
  81.          
  82.         <li><label for="Hora">*Hora:</label><select id="Hora" name="Hora" class="iselect"><option value="13:30">13:30</option>
  83.         <option value="14:00">14:00</option>
  84.         <option value="14:30">14:30</option>
  85.         <option value="15:00">15:00</option>
  86.         <option value="15:30">15:30</option>
  87.         <option value="21:00">21:00</option>
  88.         <option value="21:30">21:30</option>
  89.         <option value="22:00">22:00</option>
  90.         <option value="22:30">22:30</option>
  91.         <option value="23:00">23:00</option>
  92.         <option value="23:30">23:30</option>
  93.       </select></li>
  94.       </ul>

y el css añade esto

Código CSS:
Ver original
  1. .dia{width: 100px; float: left; margin-right: 15px;}
  2. .mes{width: 100px; float: left; margin-right: 0;}
  3. .ano{width: 100px; float: left;}


cualquier cosa me mandas un privado

Christian
  #7 (permalink)  
Antiguo 10/11/2010, 05:32
Avatar de NaRanJiTo78  
Fecha de Ingreso: noviembre-2007
Ubicación: In the BeaCh
Mensajes: 874
Antigüedad: 10 años
Puntos: 10
Respuesta: Duda en formulario

Muchas gracias!!

Etiquetas: formulario
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 02:05.