Foros del Web - Ver Mensaje Individual

jonh_doe · #1 (**permalink**) 27/01/2014, 03:30

Hola buenas,
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;
}