Botones FORM organizados en horizontal

papulo · #1 22-08-2007

Sencillo, lo que quiero conseguir es que varios FORMS cada uno con su botón, estén alineados horizontalmente dentro de un DIV, para hacer un menú.

No se como leches hacerlo y en este caso, Mr. Google no parece ayudarme demasiado o no he sabido ver la respuesta.

Saluditos.

roman · #2 22-08-2007

¿Te refieres a algo como esto?

// Saludos

papulo · #3 22-08-2007

Exacto, veo que tiene que ver con la CSS y la propiedad float.

¿Tengo que aplicarla a cada FORM de forma explícita?

Voy a ver por internet que es eso.

Gracias mil, Roman.

Edito:

Después de hacer unas pruebas, mi código estaba tal que así:

Código PHP:


			
<div id="options_menu" class="optionsmenu">

    <form method="post" action="index.php">

        <input id="search" name="companyaddressid" type="hidden" value="<?php echo $company_address_id; ?>" />

        <input type="submit" value="Clientes"  />

    </form>

    <form method="post" action="temp/clientes.php">

        <input id="addedit" name="companyaddressid"  type="hidden" value="<?php echo $company_address_id; ?>" />

        <input type="submit" value="Añadir/Editar"  />

    </form>    

</div>

Y al ver tu código:

Código PHP:


			
<style type='text/css'>

form

{

    border: 1px solid silver;

    padding: 1em;

    width: 15%;

    float: left;

    margin-right: 1em;

}

</style>

</head>



<body>

<form>

<div><input type='text'></div>

<div><input type='submit'></div>



</form>



<form>

<div><input type='text'></div>

<div><input type='submit'></div>

</form>



<form>

<div><input type='text'></div>

<div><input type='submit'></div>

</form>

</body>

</html>

Yo, en un arranque de ingenio sin precedentes, he puesto lo mío así:

Código PHP:


			
<div id="options_menu" class="optionsmenu">

    <form method="post" action="index.php" style="float: left">

        <input id="search" name="companyaddressid" type="hidden" value="<?php echo $company_address_id; ?>" />

        <input type="submit" value="Clientes"  />

    </form>

    <form method="post" action="temp/clientes.php" style="float: left">

        <input id="addedit" name="companyaddressid"  type="hidden" value="<?php echo $company_address_id; ?>" />

        <input type="submit" value="Añadir/Editar"  />

    </form>    

</div>

Partiendo que la página tiene el contenido centrado (lo indico en las CSS sobre el <body> y tengo un <div> con un ancho y tal, ahora, sin darle estilo de ningún tipo, me salían dos botones (de los form) uno encima del otro, en bloque en medio de la pantalla y con un bonito fondo de color.

Ahora me salen los dos botones en la parte izquierda de la pantalla, pero situados fuera-dabajo de una linea de un par de pixels que deben de ser los margenes del DIV.
No se bien bien donde falla.

roman · #4 22-08-2007

Cita:

Empezado por papulo

¿Tengo que aplicarla a cada FORM de forma explícita?

En el ejemplo, el estilo aplica sobre todos los forms. Puedes restringirlo a una clase

Código:

<style type='text/css'>
form.menu
{
  ...
}
</style>
...

<form class='menu'>
</form>

<form class='menu'>
</form>

o bien, a los forms contenidos dentro de un div específico:

Código:

<style type='text/css'>
div#contenedor form
{
  ...
}
</style>
...

<div id='contenedor'>
  <form class='menu'>
  </form>

  <form class='menu'>
  </form>
</div>

con lo que te ahorras poner el atributo class a cada uno.

// Saludos

papulo · #5 22-08-2007

He editado mientras respondías... jejeje.

roman · #6 24-08-2007

Cita:

Empezado por papulo

Ahora me salen los dos botones en la parte izquierda de la pantalla, pero situados fuera-dabajo de una linea de un par de pixels que deben de ser los margenes del DIV.
No se bien bien donde falla.

Tenía este pendiente, pero realmente sé muy poco de css. La verdad es que ya me había percatado de este problema y como no sabía la causa ni la solución, el ejemplo que puse antes omitía poner los formularios dentro de un contenedor.

Vamos a ver si nos aclaramos.

Para empezar, el asunto no es exclusivo de los formularios, así que por el momento simplifiquemos y trabajemos con cajas (divs) sencillos:

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title> Cajas flotantes </title>
<style type='text/css'>
div.contenedor
{
  border: 1px dashed silver;
  width: 65%;
  height: auto;
}

div.caja
{
  border: 1px solid red;
  background-color: #FFB0B0;
  width: 50px;
  height: 50px;
  margin-right: 1em;
  text-align: center;
}
</style>
</head>
<body>

<div class='contenedor'>
  <div class='caja' style='float: left;'>1</div>
  <div class='caja' style='float: left;'>2</div>
  <div class='caja' style='float: left;'>3</div>
  <div class='caja' style='float: left;'>4</div>
</div>

</body>
</html>

Tenemos cuatro cajas (1, 2, 3 y 4), todas flotando a la izquierda, dentro de un div contenedor.

En Firefox y Opera, las cajas se ven así:

Código:

------------------------------------------------------------
+-----+  +-----+  +-----+  +-----+  
|  1  |  |  2  |  |  3  |  |  4  |  
|     |  |     |  |     |  |     |  
+-----+  +-----+  +-----+  +-----+

tal como ya observaste.

No está de más decir que en IE, se ven así:

Código:

+----------------------------------------------------------+
| +-----+  +-----+  +-----+  +-----+                       |
| |  1  |  |  2  |  |  3  |  |  4  |                       |
| |     |  |     |  |     |  |     |                       |
| +-----+  +-----+  +-----+  +-----+                       |
+----------------------------------------------------------+

¿Qué pasa? ¿Por fin algo que IE hace bien y el resto mal?

No tan rápido. Parece que se ve bien, pero quizá sea sólo porque coincide con el resultado que esperamos, pero, según he leído, lo que flota realmente debe flotar, como si no estuviera presente (casi). En esos términos, esas cajas flotantes no siguen el flujo normal dentro del div contenedor, así que debe ser como si éste no las tuviera dentro, y, no habiendo nada más, es como si estuviera vacío y por ende aparece como la línea punteada que se ve en FF y O.

Ahora bien, ¿qué pasa si agregamos, por ejemplo, un texto después del contenedor:

Código:

<div class='contenedor'>
  <div class='caja' style='float: left;'>1</div>
  <div class='caja' style='float: left;'>2</div>
  <div class='caja' style='float: left;'>3</div>
  <div class='caja' style='float: left;'>4</div>
</div>

<p>
carpe diem

En FF y O se ve así:

Código:

------------------------------------------------------------
+-----+  +-----+  +-----+  +-----+  
|  1  |  |  2  |  |  3  |  |  4  |  carpe diem
|     |  |     |  |     |  |     |  
+-----+  +-----+  +-----+  +-----+

mientras que en IE así:

Código:

+----------------------------------------------------------+
| +-----+  +-----+  +-----+  +-----+                       |
| |  1  |  |  2  |  |  3  |  |  4  |                       |
| |     |  |     |  |     |  |     |                       |
| +-----+  +-----+  +-----+  +-----+                       |
+----------------------------------------------------------+

carpe diem

Es decir, en FF y O los elementos posteriores a las cajas siguen flotando, mientras que en IE la flotación se corta y el texto aparece por debajo.

Llegados a este punto, no me suena tan mal lo que hace IE: cortar el flujo una vez que salimos del contenedor. Es decir, FF y O llevan la flotación al extremo, incluso fuera del contenedor. No sabría yo decir en realidad cuál es el comportamiento correcto, pero al menos esto nos da la clave para lograr lo que queremos.

¿Cómo hacemos para que FF e IE corten la flotación y el texto aparezca por debajo de las cajas?

Para eso está el atributo clear. Si se lo ponemos al párrafo:

Código:

<p style='clear: left'>
carpe diem

le estamos diciendo que ya no floten elementos a su izquierda. Ahora sí, tanto FF como O rompen la flotación.

Bueno, pero el div contenedor se sigue mostrando como una línea. Entonces rompamos la flotación, antes de salir del contenedor. Por ejemplo, poniendo un div vacío con el atributo clear:

Código:

<div class='contenedor'>
  <div class='caja' style='float: left;'>1</div>
  <div class='caja' style='float: left;'>2</div>
  <div class='caja' style='float: left;'>3</div>
  <div class='caja' style='float: left;'>4</div>
  <div style='clear: left'></div>
</div>

<p>
carpe diem

Ahora el resultado se ve así en FF, O ¡e IE!

Código:

+----------------------------------------------------------+
| +-----+  +-----+  +-----+  +-----+                       |
| |  1  |  |  2  |  |  3  |  |  4  |                       |
| |     |  |     |  |     |  |     |                       |
| +-----+  +-----+  +-----+  +-----+                       |
+----------------------------------------------------------+

carpe diem

Aquí podemos ver el resultado final y aplicado a los formularios se ve así.

Desde luego, la explicaciones me las he inventado yo así que no aseguro que sean correctas y tampoco sé si ésta sea la mejor forma de resolver el asunto.

// Saludos

papulo · #7 24-08-2007

Añado este post, para futuras consultas.

Es importante especificar un valor width sobre el componente al que le vamos a aplicar el float, porque sino, no quedará bien.

Aquí hay un buen tutorial sobre el tema enlace(en ingés)

Saludos y espero que os ayude.

Temas Similares
Tema	Autor	Foro	Respuestas	Último mensaje
[CSS] <ul> en horizontal	Ñuño Martínez	HTML, Javascript y otros	2	30-07-2007 13:33:45
imprimir horizontal	karocs	HTML, Javascript y otros	0	28-05-2007 18:50:57
Problema con botones en un form	federico1	Varios	4	30-03-2007 11:03:01
Hoja horizontal	JODELSA	Impresión	1	01-07-2004 21:58:00
form con botones visibles o no	vetustas	OOP	4	12-11-2003 18:46:05