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