estoy teniendo bastantes problemas con el título de una página. El caso es que la caja que contiene el texto donde pone "OBRA" es demasiado grande y me desplaza la barra de navegación hacia abajo. Al poner contenido a continuación, la barra de navegación vuelve a su sitio, pero la caja contenedora del texto sigue siendo del mismo tamaño y me impide pulsar en algunos enlaces. Os dejo el código que está listo para ejecutar por si quereis hacerlo. Un saludo y muchas gracias de antemano.
Código HTML:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link type="text/css" rel="stylesheet" href="css/style.css" /> <link href='http://fonts.googleapis.com/css?family=Averia+Sans+Libre|Fenix|Rosarivo|Exo+2|Medula+One' rel='stylesheet' type='text/css'> <script type="text/javascript" src="Script/jquery-2.0.3.js"></script> <title>Ficha de Obra</title> </head> <body> <div id="pagina"> <header> <!--<img src="css/fundacion.gif" class="logo"/> --> <h1 class="titulo"><span class="tituloMedio">FICHA</span><span class="tituloPequeño">de</span><span class="tituloGrande">OBRA</span></h1> <img src="img/vinilo%20pizarra%20skyline%20ciudad_azul.png" class="skyline"/> </header> <nav> <ul> <li><a href="#">INICIO</a></li> <li><a href="#">ARCHIVO</a></li> <li><a href="#">CONTACTO</a></li> <li><a href="#">TARJETA</a></li> <li><a href="#">AYUDA</a></li> </ul> </nav> <div id="content"> <div id="contenidoPrincipal"> </div> </div> </div> <footer> Pecan Soluciones S.L. </footer> </div> </body> </html>
Código:
body {
border-color:#467612;
background: -webkit-linear-gradient(top, #fff 0%, #cecece 100%);
background: -moz-linear-gradient(top, #fff 0%, #cecece 100%);
background: -o-linear-gradient(top, #fff 0%, #cecece 100%);
background: linear-gradient(top, #fff 0%, #cecece 100%);
background: -ms-linear-gradient(top, #fff 0%, #cecece 100%);
/* IE 6 y 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff000000', endColorstr='#cecece', gradientType='1');
/* IE 8 y 9 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff000000', endColorstr='#cecece', gradientType='1')";
margin:0;
padding:0;
}
#pagina {
margin:0 auto;
width:960px;
}
header {
z-index:1;
background: -webkit-gradient( linear, left bottom, left top, color-stop(0,#fff), color-stop(1, #bee4fe));
background: -moz-linear-gradient( center bottom, #fff 0%, #bee4fe 100% );
background: -webkit-linear-gradient(left, #fff 0%, #bee4fe 100%);
background: -moz-linear-gradient(left, #fff 0%, #bee4fe 100%);
background: -o-linear-gradient(left, #fff 0%, #bee4fe 100%);
background: linear-gradient(left, #fff 0%, #bee4fe 100%);
background: -ms-linear-gradient(left, #fff 0%, #bee4fe 100%);
/* IE 6 y 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff000000', endColorstr='#bee4fe', gradientType='1');
/* IE 8 y 9 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff000000', endColorstr='#bee4fe', gradientType='1')";
border-color:#f52929;
height:auto;
padding-top:10px;
}
.skyline {
width:300px;
display:inline-block;
margin-left:42px;
margin-bottom:-7px;
}
.titulo {
margin:0;
padding:0;
display:inline-block;
}
.tituloMedio {
font-family:monospace, serif;
font-size: 65px;
color:#3743a1;
text-decoration-color:#3743a1;
text-shadow: 2px 2px 3px #000;
padding:0;
line-height: 30px;
display:inline-block;
}
.tituloPequeño {
font-family:monospace, serif;
font-size: 40px;
color:#3743a1;
text-decoration-color:#3743a1;
text-shadow: 2px 2px 3px #000;
line-height: 30px;
display:inline-block;
margin-left:10px;
}
.tituloGrande {
font-family:monospace, serif;
font-size: 150px;
color:#3743a1;
text-decoration-color:#3743a1;
text-shadow: 4px 4px 6px #000;
margin:0;
padding:0;
display:inline-block;
}
nav {
border-top:1px solid #3743a1;
display:block;
background:#bee4fe;
height:46px;
font-family: 'Fenix', serif;
z-index:2;
}
nav ul {
list-style:none;
margin:0;
padding-left:52px;
}
nav ul li {
display:block;
float: left;
}
nav ul li a {
background:#3743a1;
display: block;
margin-right: 20px;
width: 155px;
height:44px;
font-size: 18px;
line-height: 44px;
text-align: center;
text-decoration: none;
color: #fff;
font-weight: bold;
border-top: 1px solid #3743a1;
border-bottom: 1px solid #3743a1;
box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
}
nav ul li a:hover {
border-top: 1px solid #bee4fe;
border-bottom: 1px solid #bee4fe;
color: #3743a1;
background-color: #bee4fe;
}
nav ul li.selected a{
border-top: 1px solid #bee4fe;
border-bottom: 1px solid #bee4fe;
color: #3743a1;
background-color: #bee4fe;
box-shadow:none;
}
#content {
font-family: 'Fenix', serif;
display:block;
border-color:#3743a1;
overflow:hidden;
padding:5px;
}
#contenidoPrincipal {
background:#fff;
display:block;
border-color:#f52929;
float:left;
width:755px;
}
