Margenes negativos en capas flotantes

Elalux · #1 (**permalink**) 25/03/2008, 00:05

Saludos maestros.

Después de algunos rompederos de cabeza logré armar el layout a tres cooumnas que andaba batallando, parece que al fín lo logré, lo puedne consultar aquí.

TRes Columnas

Ahora bién, por ahñi leí que para hacer esto se usaban márgenes negativos, pueden consultar la referencia en inglés en el siguiente enlace.

Enlace

Si embargo mí salió sin usar márgenes negativos.

Mi pregunta es, ¿En qué contexto es recomentable usar márgenes negativos para armar layouts de varias columnas? admito que este concepto de margen negativo aún no me acaba de quedar claro, ¿Cómo puede ser un margen negativo? no se , todavía no capto bien el concepto.

Agradezco desde ahora cualquier ayuda.

Saludos.

Raulmmmm · #2 (**permalink**) 25/03/2008, 03:03

Yo lo uso para, por ejemplo, cuando pongo un div llamado #contenedor con texto y le pongo un padding: 10px;. Entonces, en los títulos como h2, h3, h4... pongo margin-left: -10px; margin-right: -10px; Así queda en el borde.

Si quiere responder la gente, para ver como los usa... adelante. Porque en lo de varias columnas tampoco te puedo ayudar, no sé para que usar márgenes negativos si con un float: left; ya sirve.

Mikmoro · #3 (**permalink**) 25/03/2008, 13:23

Mira: una forma práctica de conseguir que tu caja izquierda para un menú (por ejemplo), crezca cuando crece el contenido de una caja central, es no hacer esa caja del menú, sino hacer la caja del contenido con un borde izquierdo igual a lo que mediría tu caja de menú (p.e. 200px). Así, cuando el contenido crece, la caja simulada de la izquierda también lo hace.
Y si es un borde, ¿cómo se coloca algo ahí? pues con un margen negativo, es decir, com por ejemplo margn-left: -185px; de manera que el texto quede sobre el borde izquierdo como si realmente fuera una caja.

Por si no ha quedado claro, copia y pega este código y verás qué curioso: conforme crezca el contenido de la caja central, la de la izquierda también lo hará.

Cita:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="es-es">
<head>
<title>Truco Borde</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
* { margin: 0px;
padding: 0px;
}
#contenedor { border-left: 200px solid rgb(0, 102, 0);
background-color: rgb(51, 153, 153);
}
.texto_izq { margin-left: -185px;
float: left;
width: 185px;
margin-top: 20px;
}
#centro { margin-left: 20px;
padding-top: 20px;
}
</style>
</head>
<body>
<div id="contenedor"><span class="texto_izq">Texto
que quedará en la caja de la izquierda</span>
<div id="centro">
<p>Texto que quedará en la parte
central del contenido</p>
<p>Texto que quedará en la parte
central del contenido</p>
<p>Texto que quedará en la parte
central del contenido</p>
<p>Texto que quedará en la parte
central del contenido</p>
<p>Texto que quedará en la parte
central del contenido</p>
<p>Texto que quedará en la parte
central del contenido</p>
<br>
<br>
</div>
</div>
</body>
</html>

Mikel.

Elalux · #4 (**permalink**) 27/03/2008, 13:51

Muchas grácias, estaré estudiando estas opciones para ver como controlarlos con más precisión.

Saludos.