Comunidad de diseño web y desarrollo en internet online

rowspan y colspan usando CSS

Citar            
MensajeEscrito el 26 Mar 2012 06:04 pm
Hola al foro, hace unos días un cliente me pidió que en una pagina le coloque un formulario de búsqueda de dos campos y buttom ,

El problema que que quiere los campos una arriba del otro del lado izquierdo y el boton para buscar del lado derecho ocupando el alto total .

Usando tablas puedo conseguir ese diseño, pero quería saber si conocen algún equivalente rowspan="2" en css, o algún tip como definir los tamaños exacto y usar posición es absolutas

Ejemplo:

Código :

<!DOCTYPE HTML>
<html>
<head><style>table, td{   border:#000 1px solid;}</style></head>

<body>
<form>
  <table border="1" width="300px">
  <tr>
    <td>                    <input type="text"value="kw" ></td>
    <td rowspan="2"><input type="button"value="search" style="padding:3em;" ></td>
  </tr>
  <tr>
   <td ><input type="text" value="zip code"> </td>
  </tr>
</table>
</form>
</body>
</html>

Por dugalman

7 de clabLevel



Genero:Masculino  

chrome
Citar            
MensajeEscrito el 26 Mar 2012 11:18 pm
No lo creo, rowspan y colspan no son atributos de estilo, tienes que usarlos en la etiqueta HTML. Aún así, no veo porqué es necesario usar tablas, es una mala práctica, mejor coloca un div que tenga adentro otro div con ambos campos y el botón, al botón ponle 100% de altura.

Por Lexas

1207 de clabLevel

7 tutoriales

Genero:Femenino   Desarrollador de GAIA Premio_Secretos

Ilustración y desarrollo de software

firefox
Citar            
MensajeEscrito el 29 Mar 2012 01:55 pm
Gracias lexas por el comentario. Resolví de la manera que decís, coloque dos div, uno a izquierda y otro a derecha y los tablaños de cada elemento los defino por CSS

Código :

      <div data-role="search" class="ui-grid-a" id="buscar">
         <div class="ui-grid-a">
            <div class="ui-block-a" id="camposIzq">
               <div data-role="fieldcontain">
                  <fieldset data-role="controlgroup">
                     <input id="zip" placeholder="Zip" value="" type="text"
                        data-theme="c" />
                  </fieldset>
               </div>
               <div data-role="fieldcontain">
                  <fieldset data-role="controlgroup">
                     <input id="keyword" placeholder="keyword" value="" type="text"
                        data-theme="c" />
                  </fieldset>
               </div>
            </div>
            <div class="ui-block-b" id="camposDer">
               <a href="index.html" data-role="button" style="height: 85px; width: 85px;">
                                               <img src="css/search.png"   alt="search" />
                                         </a>
            </div>
         </div>
      </div>

Por dugalman

7 de clabLevel



Genero:Masculino  

chrome

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.