Botones FORM organizados en horizontal

roman · #7 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

Herramientas	Buscar en Tema
Mostrar Versión Imprimible Enviar por Correo	Buscar en Tema: Búsqueda Avanzada
Desplegado
Cambiar a Modo Lineal Cambiar a Modo Hibrido Modo Hilado

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