Foros del Web » Creando para Internet » CSS »

Eliminar el espacio entre dos Div´s horizontales

Estas en el tema de Eliminar el espacio entre dos Div´s horizontales en el foro de CSS en Foros del Web. Hola, Quizá sea una cosa sencilla, pero he buscado bastante y no encuentro la manera de eliminar el espacio que deja Dreamweaver CS3 entre dos ...
  #1 (permalink)  
Antiguo 10/04/2008, 08:49
 
Fecha de Ingreso: abril-2004
Mensajes: 100
Antigüedad: 13 años, 7 meses
Puntos: 0
Eliminar el espacio entre dos Div´s horizontales

Hola,

Quizá sea una cosa sencilla, pero he buscado bastante y no encuentro la manera de eliminar el espacio que deja Dreamweaver CS3 entre dos Div´s horizontales o verticales seguidos.O sea, quiero que queden unidos, tocándose.

Os agradezco un poco de luz.

Saludos
  #2 (permalink)  
Antiguo 10/04/2008, 09:13
Avatar de arriaka  
Fecha de Ingreso: febrero-2008
Mensajes: 45
Antigüedad: 9 años, 9 meses
Puntos: 1
Re: Eliminar el espacio entre dos Div´s horizontales

Hola poropopo

Los div por si solos no tienen ninguna separacion, a no ser que se la pongas tu. Como ejemplo aqui tienes este codigo:

Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Documento sin t&iacute;tulo</title>
    <style type="text/css">
        .uno{
            width:760px;
            height:150px;
            border: 1px solid #000000;
        }
        .dos{
            width:760px;
            height:150px;
            border: 1px solid #FF0000;
        }
    </style>
</head>

<body>
	<div class="uno"></div>
    <div class="dos"></div>
</body>
</html> 
Puede ser que lo que te pase sea que tengas algun parrafo, imagen, lista, o cualquier otra cosa dentro de los div que si tengan margin y/o padding. Esto es porque los navegadores, si no especificas margin o paddings, lo ponen por defecto (por eso se suele ver diferente segun en que navegador).

Fijate en que es lo que crea esos espacios y ya nos diras.

Saludos!
  #3 (permalink)  
Antiguo 10/04/2008, 09:48
 
Fecha de Ingreso: abril-2004
Mensajes: 100
Antigüedad: 13 años, 7 meses
Puntos: 0
Re: Eliminar el espacio entre dos Div´s horizontales

Es verdad, Arriaka, funciona pero si le quito el párrafo con párrafo,el h1, o lo que sea .e: <p> texto </p>,

pero la pregunta es..¿Y entonces como escribo en el Div si no utilizo el p o los h?

Gracias.
  #4 (permalink)  
Antiguo 10/04/2008, 11:05
Avatar de arriaka  
Fecha de Ingreso: febrero-2008
Mensajes: 45
Antigüedad: 9 años, 9 meses
Puntos: 1
Re: Eliminar el espacio entre dos Div´s horizontales

Bueno, podrias escribir directamente en el div, aunque no seria muy correcto.

Lo que yo suelo hacer es definir los espacios de <p>, poner margin: 0px y poner padding solo en botton. Es decir:

Código:
p {
	margin: 0px;
	padding: 0px 0px 8px 0px;
}
Normalmente 8 suele ser un tamaño bueno. Puedes probar y a ver que te parece.

Lo mismo seria con los h1, h2, .... Es cuestion de probar a ver donde le puedes meter espacios.

Y si en el primer div quieres que el ultimo <p> no tenga padding-botton (o donde sea), haces un class para ello:

Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Documento sin t&iacute;tulo</title>
    <style type="text/css">
        .uno{
            width:760px;
            height:150px;
            border: 1px solid #000000;
        }
        .dos{
            width:760px;
            height:150px;
            border: 1px solid #FF0000;
        }
        p{
            margin: 0px;
            padding: 0px 0px 8px 0px;
        }
        p.ultimo{
            padding: 0px;
        }
    </style>
</head>

<body>
	<div class="uno">
		<h1></h1>
		<p>Bla bla bla</p>
		<p class="ultimo">Ultimo parrafo sin padding inferior</p>
	</div>
	<div class="dos">
		<p>Bla bla bla</p>
		<p>Bla bla bla</p>
	</div>
</body>
</html> 
Espero que con esto te vaya bien!

Saludos
  #5 (permalink)  
Antiguo 10/04/2008, 13:02
 
Fecha de Ingreso: abril-2004
Mensajes: 100
Antigüedad: 13 años, 7 meses
Puntos: 0
Re: Eliminar el espacio entre dos Div´s horizontales

¡¡Fantástico! Muchas gracias.Era justo lo que quería y me lo has explicado perfecto.

Saludetes.
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

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 21:08.