Espacio entre encabezado y menú que no puedo eliminar

kahlito · #1 (**permalink**) 06/08/2007, 16:39

Hola estoy intentando dejar un menú debajo de un encabezado el cual tiene una imagen, sin embargo siempre me deja un hueco entre esta imagen y el menú, y por más que reseteo los margenes o espacios a 0 u otros cambios siempre se me queda igual:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Probando</title>
<style type="text/css">
body {
	margin:0;
	padding:0;}
/** {
  margin:0;
  padding:0;
}*/
	#centro{
	width:650px;
	position:absolute;
	margin:0 auto;
	text-align:center;
	/*height:140px;
	margin-top:0;
	top:0px;
	text-align:center;
	padding:7px;
	padding-bottom:0;
	padding-top:0;
	border:0;*/
	overflow:hidden;
	}
	#ejemplo {
 text-align: center;
}
	#navcontainer ul
{
	margin: 0;
	list-style-type: none;
	text-align: center;
	background-color:#c5e3e9;
	padding-top: 7px;
	padding-right: 0px;
	padding-bottom: 7px;
	padding-left: 0px;
	}
#navcontainer ul li { display: inline;font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; font-size:1em; }
#navcontainer ul li a
{
text-decoration: none;
padding: .2em 1em;
color: #fff;
color:#0d5394;
background-color: #036;
background-color: #4986BF;
background-color:#3BACBE;
background-color:#c5e3e9;
}

#navcontainer ul li a:hover
{
color: #fff;
background-color: #369;
}
</style>
</head>

<body>
<div id="ejemplo">
<img src="imagenes/encabezado_hotel.jpg" alt="Hotel" width="670" height="140" />
</div>
<div id="navcontainer">
<ul>
<li><a href="#">Nuestro Hotel</a></li>
<li><a href="#">Celebraciones y Congresos</a></li>
<li><a href="#">Turismo</a></li>
<li><a href="#">Noticias</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</div>
</body>
</html>

¿Alguna idea?. Gracias de antemano.

PatomaS · #2 (**permalink**) 06/08/2007, 20:49

Hola

Bueno, en el código que nos pasas justamente el * está comentado, por lo que todos los elementos salvo los que especificamente definas tendrán borde, espaciado y margen.

Por otro lado, según la definición del html, un salto de línea (o más) en el código, si está en la zona de CDATA o PCDATA, debe ser interpretado como un espacio en blanco y es exactamente así como muchos lo hacen, aunque no todos, por lo que dentro de la capa ejemplo, tras la imagen, tienes un espacio en blanco.

A la capa ejemplo no le modificas las propiedades de borde y demás, por lo que tiene las por defecto. Lo mismo que la imagen.

La verdad es que justo el tema de los bordes de los objetos no lo tienes controlado en esa página.

La mejor manera de tener 100%, o casi, de control de los espacios, es que inicies tus hojas de estilo con esto:

Código HTML:

* {
	border: 0;
	margin: 0;
	padding: 0;
}

Felicidad

kahlito · #3 (**permalink**) 07/08/2007, 03:17

Hola PatomaS

La verdad es que también lo había probado así y sigue igual

¿Es posible arreglarlo o será mejor cambiar la estructura?

Gracias

PatomaS · #4 (**permalink**) 07/08/2007, 03:57

Hola

He tomado tu código html y le he creado un estilo muy muy sencillo, solo con bordes a las áreas y un fondo para facilitar la visión de lo que hice. Podrás observar que el menú está justo bajo la imagen.

Como yo no tenía la imagen que quieres, le asigné a la capa de la imagen las dimensiones de la imagen, pero eso no afecta.

Código HTML:

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
	<style type="text/css">
		* {border: 0; margin: 0; padding: 0;}
		html,body { width: 100%; height: 100%; background-color: #ccc; }
		#Base { width: 100%; background-color: inherit; }
		#ejemplo {
			border: 1px solid #f00;
			width: 670px;
			height: 140px;
		}
		#navcontainer {
			border: 1px solid #0f0;
		}
	</style>
	<title>Pruebilla</title>
</head>
<body>
<div id="Base">
	<div id="ejemplo"><img src="imagenes/encabezado_hotel.jpg" alt="Hotel" width="670" height="140" /></div>
	<div id="navcontainer">
		<ul>
		<li><a href="#">Nuestro Hotel</a></li>
		<li><a href="#">Celebraciones y Congresos</a></li>
		<li><a href="#">Turismo</a></li>
		<li><a href="#">Noticias</a></li>
		<li><a href="#">Contacto</a></li>
		</ul>
	</div>
</div>
</body>
</html>

Probado en Explorer 5.5 y 6, Opera 9.20 y Firefox 2.0.0.6 en linux (Gentoo) y en explorer 6.0 sp1 y Firefox 2.0.0.4 en Windows 2000

Felicidad

kahlito · #5 (**permalink**) 28/08/2007, 07:01

Hola PatomaS, cuanto tiempo, perdona por la tardanza en mi respuesta

Estuve probando otras opciones y logré arreglaro estructurándolo de otra manera. Sin embargo más adelante tuve que hacer un diseño parecido a este y entonces al probar tu ejemplo me di cuenta que simplemente estableciendo una altura "height" determinada (como bien indicas en tu ejemplo) ya se eliminaria ese espacio

Asunto resuelto, muchas gracias

PatomaS · #6 (**permalink**) 28/08/2007, 10:59

Hola

Perfecto entonces.

Sobre las dimensiones y los espacios, hay un pequeño problema con las imágenes, podemos considerarlo bug o no, depende de quien lo diga, la cuestión es que aun cuando defines que todos los bordes y márgenes sean 0, estas conservan un ligerísimo espacio alrededor, si les asignas un display: block, se elimina este espacio.

Pero claro, eso hace que se pierda la propiedad de inline que las imágenes tienen, por lo que en algunas ocasiones, cuando ese pequeño espacio es realmente un problema, hay dos soluciones viables, una es asignar dimensiones al contenedor y restringir el área que puede contener y la segunda es asignar a la imagen la propiedad de bloque y luego incrustarla en un objeto inline, ya sea un span o un objeto de bloque con un display:inline.

Cuando asignas a un objeto la propiedad inline, no le pasa el problema mencionado del pequeño borde.

Bueno, no te aburro más con esto, menos mal que solucionaste el problema.

Felicidad

kahlito · #7 (**permalink**) 28/08/2007, 21:23

Cita:

Iniciado por PatomaS

hay dos soluciones viables, ... la segunda es asignar a la imagen la propiedad de bloque y luego incrustarla en un objeto inline, ya sea un span o un objeto de bloque con un display:inline.

Cuando asignas a un objeto la propiedad inline, no le pasa el problema mencionado del pequeño borde.

Bueno, no te aburro más con esto, menos mal que solucionaste el problema.

Felicidad

Al contrario no aburres para nada, es más había probado algo parecido, pero ahora que lo dices he probado este otro ejemplo de lo que citas

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Probando</title>
<style type="text/css">
body {
	margin:0;
	padding:0;}
* {
  margin:0;
  padding:0;
}
#contenedor{
	text-align:center;
	padding:0;
	margin:0 auto;
	width:664px;	
}
#ejemplo {
 	text-align: center;
 }
.imagen{
	display:block;}
p{
	background:#036;
	text-align:center;
	color:#fff;}

</style>
</head>
<body>
<div id="contenedor">
<div id="ejemplo">
<img src="imagenes/cabeza.jpg" alt="" class="imagen" />
</div>
<p>Hola este texto tiene que estar pegado al a imagen de arriba.</p>
</div>
</body>
</html>

Gracias de nuevo, muy buena explicación. saludos

asche · #8 (**permalink**) 14/06/2008, 12:19

Recien tuve el mismo problema y se lo consulte a un experto en CSS , y por si alguno tiene el mismo problema lo voy a dejar aca para que no se rompan el bocho buscando por internet.

La etiqueta <img> es un elemnto inline, entonces lo que hace el internet explorer con la imagen, al ser inline considera que es parte de una linea de texto , y para las lineas de texto si no se encuentra el final de dicha linea, se mete ese pequeño espacio, no pregunten por que.

para solucionarlo, pueden convertir la etiqueta img en block, o ponerle un </br> al final asi le dice al explorer que termino la linea.

Espero que les haya servido.

Saludos