Foros del Web » Creando para Internet » CSS »

Margenes negativos en capas flotantes

Estas en el tema de Margenes negativos en capas flotantes en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 25/03/2008, 01:05
 
Fecha de Ingreso: enero-2002
Mensajes: 4.156
Antigüedad: 15 años, 10 meses
Puntos: 21
Margenes negativos en capas flotantes

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.
  #2 (permalink)  
Antiguo 25/03/2008, 04:03
Avatar de Raulmmmm  
Fecha de Ingreso: marzo-2007
Ubicación: En otro lugar que tú
Mensajes: 1.549
Antigüedad: 10 años, 8 meses
Puntos: 36
Re: Margenes negativos en capas flotantes

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.
  #3 (permalink)  
Antiguo 25/03/2008, 14:23
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Margenes negativos en capas flotantes

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&aacute; en la caja de la izquierda</span>
<div id="centro">
<p>Texto que quedar&aacute; en la parte
central del contenido</p>
<p>Texto que quedar&aacute; en la parte
central del contenido</p>
<p>Texto que quedar&aacute; en la parte
central del contenido</p>
<p>Texto que quedar&aacute; en la parte
central del contenido</p>
<p>Texto que quedar&aacute; en la parte
central del contenido</p>
<p>Texto que quedar&aacute; en la parte
central del contenido</p>
<br>
<br>
</div>
</div>
</body>
</html>
Mikel.
  #4 (permalink)  
Antiguo 27/03/2008, 14:51
 
Fecha de Ingreso: enero-2002
Mensajes: 4.156
Antigüedad: 15 años, 10 meses
Puntos: 21
Re: Margenes negativos en capas flotantes

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

Saludos.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 05:16.