He creado un div para un header que contiene una imagen
como fondo para el encabezado y un segundo div para el
menu horizontal. Estos dos div estan dentro en el
div contenedor.
Mi pregunta es ¿ como evitar que el div del encabezado y
el div del menu horizontal tengan un espacio en blanco entre
ambos.? Si pongo el cursor en este espacio en blanco y doy
a la tecla supr se corren las palabras del menu hacia arriba
y no consiguo reducir la distancia a cero.
Agradecería que me ayudaseis a resolvar esta cuestión
----------------------------------------------------------
<!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" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW" />
<title>Documento sin título</title>
<!--[if IE]>
<style type="text/css">
/* coloque las reparaciones de css para todas las versiones de IE en este comentario condicional */
.twoColLiqLtHdr #sidebar1 { padding-top: 30px; }
.twoColLiqLtHdr #mainContent { zoom: 1; padding-top: 15px; }
/* la propiedad zoom propia que se indica más arriba proporciona a IE el hasLayout que necesita para evitar diversos errores */
</style>
<![endif]-->
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../httpdocs/ip.css" rel="stylesheet" type="text/css" />
<link href="../SpryAssets/ip.css" rel="stylesheet" type="text/css" />
<style type="text/css">
</style>
<link href="../SpryAssets/ippcv_Vertical.css" rel="stylesheet" type="text/css" />
</head>
<body class="twoColLiqLtHdr">
<div id="Header">
<img src="../imagenes/recortes/ippcv-1.gif" alt="encabezado" width="100%" height="160px" position:absolute;/>
</div>
<p align="left"> </p>
<div id="Menu_Encabezado">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="index.dwt.php">Inicio</a> </li>
<li><a href="Noticias.dwt.php">Noticias</a> </li>
<li><a class="MenuBarItemSubmenu" href="#">Libreria Virtual</a>
<ul>
<li><a href="Nuevo_Documento.dwt.php">Dossiers del Instituto</a> </li>
<li><a href="Nuevo_Documento.dwt.php">Artículos</a></li>
<li><a href="#">Publicaciones de Congresos y Jornadas</a></li>
</ul>
</li>
<li><a href="#">Foro</a></li>
<li><a href="#" class="MenuBarItemSubmenu">Registrarse</a>
<ul>
<li><a href="Nuevo_Usuario.dwt.php">Alta de Registro</a></li>
<li><a href="usuarios.dwt.php">Control del Usuario</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Ingresar</a>
<ul>
<li><a href="#">Requisitos</a></li>
<li><a href="#">Formulario de Ingreso</a></li>
</ul>
</li>
<li><a href="Contacto.dwt.php">Contactar</a></li>
</ul>
</div>
----------------------------------------------------------------
CSS
body {
font: 92% Verdana, Arial, Helvetica, sans-serif;
margin: 0; /* es recomendable ajustar a cero el margen y el relleno del elemento body para lograr la compatibilidad con la configuración predeterminada de los diversos navegadores */
text-align: center; /* esto centra el contenedor en los navegadores IE 5*. El texto se ajusta posteriormente con el valor predeterminado de alineación a la izquierda en el selector #container */
color: #000000;
background-color: #FFFFFF;
border-width: 20px;
border-color:#A4FFFF;
border-style:ridge;
}
.twoColLiqLtHdr #container {
width: 100%; /* esto creará un contenedor con el 80% del ancho del navegador */
height:100%;
background: #FFFFFF; /* los márgenes automáticos (conjuntamente con un ancho) centran la página */
border: 1px solid #000000;
text-align: left; /* esto anula text-align: center en el elemento body. */
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
.twoColLiqLtHdr #header {
background-position:left;
/*background-color:#A4FFFF;*/ /* este relleno coincide con la alineación izquierda de los elementos de los divs que aparecen bajo él. Si se utiliza una imagen en el #header en lugar de texto, es posible que le interese quitar el relleno. */
height: 160px;
width: 100%;}
.twoColLiqLtHdr #Menu_Encabezado {
position:relative;
height: 37px;
clear:left;
clear:both;
margin:0px;
width: 100%;
margin-bottom:6px;
padding-left:5px;
padding-bottom:1px;
}
.twoColLiqLtHdr #container #header #Menu_Encabezado #MenuBar1 {
clear: both;
float: left;
width: 100%;
}
.twoColLiqLtHdr #header h1 {
margin: 0; /* el ajuste en cero del margen del último elemento del div de #header evita la contracción del margen (un espacio inexplicable entre divs). Si el div tiene un borde alrededor, esto no es necesario, ya que también evita la contracción del margen */
padding: 10px 0; /* el uso de relleno en lugar de margen le permitirá mantener el elemento alejado de los bordes del div */
}
<