Ver Mensaje Individual
  #9 (permalink)  
Antiguo 13/03/2015, 21:26
Avatar de fede5426
fede5426
 
Fecha de Ingreso: diciembre-2014
Ubicación: Córdoba
Mensajes: 446
Antigüedad: 9 años, 5 meses
Puntos: 208
Respuesta: Contenido central invisible

Código HTML:
Ver original
  1. <div id="contenedor">
  2.         <div style="position: fixed; width: 100%;">
  3.         <header>
  4.             <div id="titulo">Logo aquí</div>
  5.             <nav>
  6.                 <ul>
  7.                     <li><a href="#" class="active">Inicio</a></li>
  8.                     <li><a href="#">Seccion</a></li>
  9.                     <li><a href="#">Seccion</a></li>
  10.                     <li><a href="#">Seccion</a></li>
  11.                 </ul>
  12.             </nav>
  13.         </header>
  14.         </div>
  15.         <div id="contenido">
  16.             <div id="central">
  17.                 <h1>Welcome to my webpage</h1>
  18.             <h2>Contenido principal y centra</h2>
  19.             </div>
  20.             <div id="columna">
  21.                 <h1>Column</h1>
  22.             <h2>Contenido de la columna</h2>
  23.             </div>
  24.         </div>
  25.         <footer>
  26.             Todos los derechos reservados.
  27.         </footer>
  28.     </div>

Código CSS:
Ver original
  1. html, body { margin: 0; padding: 0; }
  2.  
  3. #contenedor
  4. {
  5.     margin: 0 auto;
  6.     background: #FFF;
  7.     width: 100%;
  8. }
  9.  
  10.     header
  11.     {
  12.         height: 100px;
  13.         padding: 1% 1%;
  14.         background-color: #22272A;
  15.         margin: 0 auto;
  16.     }
  17.    
  18.     /*header a { text-decoration: none; }*/
  19.         #titulo
  20.         {
  21.             color: #FFF;
  22.             margin: 0 auto;
  23.             position: absolute;
  24.             left: 20%;
  25.             top: 2%;
  26.             font-size: 48px;
  27.             font-family: 'Oswald', sans-serif;
  28.         }
  29.        
  30.         nav
  31.         {
  32.             position: absolute;
  33.             bottom: 0;
  34.             left: 0;
  35.             width: 100%;
  36.         }          
  37.         nav ul
  38.         {
  39.             width: 100%;
  40.             max-width: 512px;
  41.             margin: 0 auto;
  42.         }      
  43.         nav ul li
  44.         {
  45.             list-style: none;
  46.             display: inline-block;
  47.             float: left;
  48.             padding: 10px;
  49.             text-align: center;
  50.         }
  51.         nav ul li .active
  52.         {
  53.             color: #3479FA;
  54.             background: #FFF;
  55.             border: 1px solid white;
  56.             border-radius: 5px;
  57.             border-bottom-right-radius: 0;
  58.             border-bottom-left-radius: 0;
  59.             padding: 10px;
  60.         }
  61.         nav ul li a
  62.         {
  63.             text-decoration: none;
  64.             color: #FFF;
  65.             width: 40px;
  66.             font-weight: bold;
  67.             font-family: 'Noto Sans', sans-serif;  
  68.         }
  69.         nav ul li a:hover { color: #3479FA; }
  70.        
  71.     #contenido
  72.     {
  73.       padding-top:120px;
  74.         margin: 0 auto;
  75.         width: 61%;
  76.         height: 30%;
  77.         display: table;
  78.         overflow: scroll;
  79.         text-align: justify;
  80.         font-family: 'Noto Sans', sans-serif;
  81.     }  
  82.     #contenido div
  83.     {
  84.         display: table-cell;
  85.         vertical-align: top;
  86.         padding:20px;
  87.     }  
  88.     #contenido div:first-child
  89.     {
  90.         border-right: 1px dashed #999999;  
  91.     }  
  92.     #central { width: 80%; }   
  93.     #columna { width: 20%; }
  94.    
  95.     footer
  96.     {
  97.       position:fixed;
  98.         bottom: 0;
  99.         width: 100%;
  100.         font-family: 'Noto Sans', sans-serif;
  101.         background: #22272A;
  102.         color: #FFF;
  103.         text-align: center;
  104.         padding: 10px;
  105.     }

http://codepen.io/anon/pen/myzNdE

Ya.. pero hay que insistir ShadowHunter, no uses etiquetas que no existen, y en lo posible evita los estilos en linea que para eso esta CSS.
Busca en google hay muchas paginas que explican como organizar las etiquetas, te va a auydar en cuanto posicionamiento web, aparte de tener un trabajo mas limpio y ordenado.