Foros del Web » Diseño web » CSS »

Distancia entre cajas css

Estas en el tema de Distancia entre cajas css en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 09/04/2009, 14:01
 
Fecha de Ingreso: septiembre-2008
Mensajes: 184
Antigüedad: 5 años, 6 meses
Puntos: 1
Distancia entre cajas css

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&iacute;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">&nbsp;</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&iacute;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 */
}
<
  #2 (permalink)  
Antiguo 09/04/2009, 22:48
 
Fecha de Ingreso: octubre-2008
Mensajes: 387
Antigüedad: 5 años, 5 meses
Puntos: 18
Respuesta: Distancia entre cajas css

Y para que tenes ese parrafo con el espacio en blanco en el medio de los 2 divs. No sera ese tu problema?

Fijate que entre el Header y el Menu hay un parrafo (<p align="left">&nbsp;</p>"). No se porque razon lo pusiste, pero creo que realmente explica porque te apareceun espacio en blanco.

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 07:28.
SEO by vBSEO 3.3.2