Tema: Contenido central invisible
Ver Mensaje Individual
  #7 (permalink)  
Antiguo 13/03/2015, 08:54
Avatar de fede5426
fede5426
 
Fecha de Ingreso: diciembre-2014
Ubicación: Córdoba
Mensajes: 446
Antigüedad: 9 años, 11 meses
Puntos: 208
Respuesta: Contenido central invisible
Cita:
Iniciado por pzin Ver Mensaje
La etiqueta contenido por lo pronto no existe.
Pasa igual con la etiqueta titulo

Este seria el uso correcto segun yo:

Código HTML: 
Ver original
  1. <html>
  2. <head>
  3. <meta charset="UTF-8">
  4. <title>Blabla - Inicio</title>
  5. <link rel="stylesheet" href="css/tema.css">
  6. <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Oswald:700">
  7. <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Noto+Sans">
  8. </head>
  9.  
  10. <body>
  11.     <div id="contenedor">
  12.         <div style="position: fixed; width: 100%;">
  13.         <header>
  14.             <h3>Logo aquí</h3>
  15.             <nav>
  16.                 <ul>
  17.                     <li><a href="#" class="active">Inicio</a></li>
  18.                     <li><a href="#">Seccion</a></li>
  19.                     <li><a href="#">Seccion</a></li>
  20.                     <li><a href="#">Seccion</a></li>
  21.                 </ul>
  22.             </nav>
  23.         </header>
  24.         </div>
  25.         <section id="contenido">
  26.             <div id="central">
  27.                 <h1>Welcome to my webpage</h1>
  28.                 Contenido principal y central
  29.             </div>
  30.             <div id="columna">
  31.                 <h1>Column</h1>
  32.                 Contenido de la columna
  33.             </div>
  34.         </section>
  35.         <footer>
  36.             Todos los derechos reservados.
  37.         </footer>
  38.     </div>
  39. </body>
  40. </html>

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.         h3
  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.         display: table;
  77.         overflow: scroll;
  78.         text-align: justify;
  79.         font-family: 'Noto Sans', sans-serif;
  80.     }   
  81.     #contenido div
  82.     {
  83.         display: table-cell;
  84.         vertical-align: top;
  85.         padding:20px;
  86.     }   
  87.     #contenido div:first-child
  88.     {
  89.         border-right: 1px dashed #999999;   
  90.     }   
  91.     #central { width: 80%; }    
  92.     #columna { width: 20%; }
  93.     
  94.     footer
  95.     {
  96.         position: fixed;
  97.         bottom: 0;
  98.         width: 100%;
  99.         font-family: 'Noto Sans', sans-serif;
  100.         background: #22272A;
  101.         color: #FFF;
  102.         text-align: center;
  103.         padding: 10px 0;
  104.     }

Aunque veo totalmente innecesario varios "position" y "display", al igual que aplicar estilos en linea en un div.. según MI punto de vista, es una web muy sencilla y estás complicándote mucho para crearla..
Última edición por fede5426; 13/03/2015 a las 09:10