Buenas:
Me he encontrado con un problema a la hora de hacer una página Web: el contenido central que se encuentra dentro de un contenedor no se muestra (aunque sí que está presente en el código HTML). No he sabido encontrar el motivo de porqué esto pasa, así que escribo éste post para ver si me podéis echar una mano.
Éste es mi código HTML:
Código HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Blabla - Inicio</title>
<link rel="stylesheet" href="css/tema.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Oswald:700">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Noto+Sans">
</head>
<body>
<div id="contenedor">
<div style="position: fixed; width: 100%;">
<header>
<titulo>Logo aquí</titulo>
<nav>
<ul>
<li><a href="#" class="active">Inicio</a></li>
<li><a href="#">Seccion</a></li>
<li><a href="#">Seccion</a></li>
<li><a href="#">Seccion</a></li>
</ul>
</nav>
</header>
</div>
<contenido>
<div id="central">
<h1>Welcome to my webpage</h1>
Contenido principal y central
</div>
<div id="columna">
<h1>Column</h1>
Contenido de la columna
</div>
</contenido>
<footer>
Todos los derechos reservados.
</footer>
</div>
</body>
</html> Y éste es el código CSS:
Código:
@charset "utf-8";
html, body { margin: 0; padding: 0; }
#contenedor
{
margin: 0 auto;
background: #FFF;
width: 100%;
}
header
{
height: 130px;
padding: 1% 1%;
background-color: #22272A;
margin: 0 auto;
position: relative;
}
/*header a { text-decoration: none; }*/
titulo
{
color: #FFF;
margin: 0 auto;
position: absolute;
left: 20%;
top: 2%;
font-size: 48px;
font-family: 'Oswald', sans-serif;
}
nav
{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
nav ul
{
position: relative;
width: 100%;
max-width: 512px;
margin: 0 auto;
}
nav ul li
{
list-style: none;
position: relative;
display: inline-block;
float: left;
padding: 10px;
text-align: center;
}
nav ul li .active
{
color: #3479FA;
background: #FFF;
border: 1px solid white;
border-radius: 5px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
padding: 10px;
}
nav ul li a
{
text-decoration: none;
color: #FFF;
width: 40px;
font-weight: bold;
font-family: 'Noto Sans', sans-serif;
}
nav ul li a:hover { color: #3479FA; }
contenido
{
margin: 0 auto;
width: 61%;
height: 30%;
display: table;
overflow: scroll;
text-align: justify;
font-family: 'Noto Sans', sans-serif;
}
contenido div
{
display: table-cell;
vertical-align: top;
padding: 0 20px;
}
contenido div:first-child
{
border-right: 1px dashed #999999;
}
#central { width: 80%; }
#columna { width: 20%; }
footer
{
position: fixed;
bottom: 0;
width: 100%;
font-family: 'Noto Sans', sans-serif;
background: #22272A;
color: #FFF;
text-align: center;
padding: 10px 0;
}
PD: También acepto revisiones de código: si créeis que hay código que se pueda optimizar o hacer de otra manera mejor y más fácil, estaré muy agradecido.
Gracias de antemano!