Cita:
Iniciado por dooplanillo Perdona pero no entiendo tu problema, los enlaces son pulsables sin problemas y aunque bajes el tamaño del texto o incluso quites la caja del título, el menu sigue en el mismo sitio.
Que es lo que quieres conseguir exatamente??
Si te fijas, ahora mismo el header parece tener una especie de padding-bottom de unos 30px, sin embargo yo no le pongo ningun padding. Si utilizas firebug o algo parecido veras que la caja que contiene OBRA es muy grande y tiene mucho espacio por arriba y por abajo. Quiero eliminar ese espacio porque al añadir el footer, todo lo que esta por debajo del header se desplaza hacia arriba y la caja del texto queda por encima de los enlaces haciendo que sea imposible presionarlos. Te pongo el código con el footer y la barra lateral para que lo entiendas mejor. Muchas gracias por contestar tan rápido.
Un saludo.
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">
<form id="form1" runat="server">
</form>
</div>
<aside>
<div id="imagenUsuario">
<div id="fondoImagenUsuario">
<div id="fondoImagenUsuario2">
<img src="css/Picture%2055.png" /></div></div></div><p id="mensajeUsuario">Hola <a href="#">Alberto</a>, bienvenido.</p>
<ul>
<li><a id="primerBotonLateral" href="#">PREFERENCIAS</a></li>
<li><a href="#">REVISAR FICHAS</a></li>
<li><a href="#">NUEVA FICHA</a></li>
<li><a href="#">BUSCAR</a></li>
<li><a id="ultimoBotonLateral" href="#">SALIR</a></li>
</ul>
</aside>
</div>
</div>
<footer>
Pecan Soluciones S.L.
</footer>
</div>
</body>
</html>
Al css solo hay que añadirle esto...
[CSS]
aside {
background:#bee4fe;
border-radius:5px;
/*display:block;*/
/*border:solid;*/
border-color:#63afe4;
float:left;
width: 175px;
margin-left:10px;
box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
}
aside ul {
margin:0;
padding:0;
padding:5px;
border-color:#3743a1;
list-style: none;
display:block;
/*border:solid;*/
}
aside ul li {
margin: 5px;
}
aside ul li a {
border-radius:5px;
background:#3743a1;
font-size: 14px;
display:block;
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);
line-height: 44px;
}
#primerBotonLateral {
border-radius:50% 50% 0% 0%;
}
#ultimoBotonLateral {
border-radius:0% 0% 50% 50%;
}
aside ul li a:hover {
color: #3743a1;
background-color: #bee4fe;
}
aside ul li.selected a {
color: #f6e851;
}
#imagenUsuario {
display:block;
height:110px;
/*border:solid;*/
background-color: #63afe4;
border-radius:35% 35%;
margin:10px;
padding:2px;
}
#fondoImagenUsuario {
display:block;
height:110px;
/*border:solid;*/
background-color: #3743a1;
border-radius:35% 35%;
margin-left:10px;
margin-right:10px;
padding:2px;
}
#fondoImagenUsuario2 {
display:block;
height:110px;
/*border:solid;*/
background-color: #bee4fe;
border-radius:35% 35%;
margin-left:10px;
margin-right:10px;
padding:2px;
}
#imagenUsuario img {
display:block;
height:110px;
width:85px;
border-radius:30% 30%;
margin:0 auto;
box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
}
#mensajeUsuario {
display:block;
text-align:center;
margin:0;
padding:0;
font-size:12px;
border-top:1px solid #3743a1;
}
#mensajeUsuario a {
text-decoration:none;
color:#3743a1;
font-weight:bold;
}
footer {
/*border:solid;*/
border-color:#f52929;
height:100px;
background: #686464;
color:#fff;
font-size:15px;
text-align:center;
padding:20px;
margin:0 auto;
}
[/CSS]