Hola:
Tras años sin tocar nada de programación de paginas web estoy intentando ponerme de nuevo y empece a mirar los css y las capas. Más o menos va saliendo lo que quiero pero llevo dos días discutiendo con la separación entre dos menus horizontales y ya no se que hacer. Seguro que es una chorrada pero he sido incapaz de corregirlo.
Adjunto una captura de como se ve en el navegador. La idea es que no se vea la separacion entre los dos menus de la parte inferior. captura.jpg
El body esta asi:
<div id=contenedor>
<div id="cabecera">
<div id="logo"><img src="logo.png" width="800" height="100"></div>
</div>
<div id="contenido">
<h1>LA MANSIÓN ENCANTADA</h1>
<h2>Bárbara Checa</h2>
<div class="texto">
<p>Capítulo 1: <a href="casa01.htm">Un corazón solitario.</a> </p>
<p>Capítulo 2: <a href="casa02.htm">El espíritu de la mansión.</a>
<p>Capítulo 3: <a href="casa03.htm">En la mansión</a>.</p>
<p>Capítulo 4: <a href="casa04.htm">Buscando pistas</a>.</p>
<p>Capítulo 5: <a href="casa05.htm">La identidad del espiritu</a>.</p>
<p>Capítulo 6: <a href="casa06.htm">Rencores del pasado</a>.</p>
<p>Capítulo 7: <a href="casa07.htm">Heridas al descubierto</a>.</p>
<p>Comentarios a:<a href="mailto:produccionescheca@gmail.com"> Bárbara Checa</a></p>
</div>
<div id="nav">
<ul>
<li>Descarga esta historia:</li>
<li><a href"casa.pdf">PDF</a></li>
<li><a href="casa.epub">EPUB</a></li>
<li><a href="casa.mobi">MOBI</a></li>
</ul>
</div>
<div id="pie">
<ul>
<li>Portada</li>
<li>Quienes somos</li>
<li>Contacta con nosotras</li>
</ul>
</div>
</div>
</div>
</body>
El css es el siguiente
body{
background-color: #ffffff;
text-align: center;
margin: 0;
}
#contenedor{
background-color: #cacaca;
width: 1000px;
text-align: left;
margin: auto
}
#cabecera{
background-color: #a7545b;
color: #ffffff;
}
#logo{
text-align: center;
}
#contenido{
color: #402023;
}
.texto{
margin: 0 15px;
text-align: justify;
text-indent: 15px;
}
#nav{
background-color: #dcb9bc;
color:#854248;
height: 50px;
margin-bottom: 0;
padding-bottom: 0;
}
#nav li{
list-style: none;
float: left;
padding: 10px 10px;
margin-bottom: 0;
}
#pie{
background-color: #a7545b;
color: #ffffff;
height: 50px;
margin-top: 0;
padding-top: 0;
}
#pie li{
list-style: none;
float: left;
padding: 10px 10px;
margin-top: 0;
}
h1, h2{
text-align: center;
}
a{
text-decoration: none;
color: #402023;
}
He probado a modificar el margin, el padding y el border tanto de los menus como de los li y no consigo eliminar la dichosa separacion. Estoy utilizando firefox como navegador. ¿Alguna idea de donde estoy metiendo la pezuña?
Citar
Marcadores