Contenido central invisible

ShadowHunter · #1 (**permalink**) 13/03/2015, 04:54

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!

GemliosG · #2 (**permalink**) 13/03/2015, 05:57

Ven a esta dirección y mira a ver si es lo que estabas buscando (es tú código pero modificado)

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

Si no lo es, espero que alguien más nos ayude

pzin · #3 (**permalink**) 13/03/2015, 06:10

La etiqueta contenido por lo pronto no existe.

Tanto en preguntas y respuestas, independientemente de si se ponen enlacen a codepen, jsfiddle o lo que sea, es imprescindible adjuntar el código también al mensaje. Así el código se queda también en el foro; no podemos saber qué pasará mañana con esos sitios.

GemliosG · #4 (**permalink**) 13/03/2015, 06:29

El código es este: (el que modifique)

HTML

Código HTML:

 <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>
<h2>Contenido principal y centra</h2>
            </div>
            <div id="columna">
            	<h1>Column</h1>
            <h2>Contenido de la columna</h2>
            </div>
        </contenido>
        <footer>
        	Todos los derechos reservados.
        </footer>
    </div>

CSS

Código:

@charset "utf-8";

html, body { margin: 0; padding: 0; }

#contenedor
{
	margin: 0 auto;
	background: #FFF;
	width: 100%;
}

	header
	{
		height: 100px;
		padding: 1% 1%;
		background-color: #22272A;
		margin: 0 auto;
	}
	
	/*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
		{
			width: 100%;
			max-width: 512px;
			margin: 0 auto;
		}		
		nav ul li
		{
			list-style: none;
			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
	{
	  padding-top:120px;
		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:20px;
	}	
	contenido div:first-child
	{
		border-right: 1px dashed #999999;	
	}	
	#central { width: 80%; }	
	#columna { width: 20%; }
	
	footer
	{
		bottom: 0;
		width: 100%;
		font-family: 'Noto Sans', sans-serif;
		background: #22272A;
		color: #FFF;
		text-align: center;
		padding: 10px;
	}

ShadowHunter · #5 (**permalink**) 13/03/2015, 07:30

Hola:

Lo que viene a ser el encabezado se queda fijado perfectamente, aunque el pie de página (<footer>) se mueve con el scroll, juntamente con el contenido de la página (<contenido>), además de tener un width superior a 100% (se puede mover el scroll hacia la derecha).

Por otra parte el tema del contenido central se ve perfectamente, gracias! :)

GemliosG · #6 (**permalink**) 13/03/2015, 07:52

mira agregé esto

html, body { margin: 0; width:99.1% }

Ahora no debería hacer scroll hacia la derecha

y si quieres que el foot se quede en el lugar

position:fixed;

fede5426 · #7 (**permalink**) 13/03/2015, 08:54

Cita:

Iniciado por pzin

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<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>
            <h3>Logo aquí</h3>
            <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>
        <section id="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>
        </section>
        <footer>
            Todos los derechos reservados.
        </footer>
    </div>
</body>
</html>

Código CSS:

Ver originalhtml, body { margin: 0; padding: 0; }
 
#contenedor
{
    margin: 0 auto;
    background: #FFF;
    width: 100%;
}
 
    header
    {
        height: 100px;
        padding: 1% 1%;
        background-color: #22272A;
        margin: 0 auto;
    }
    
    /*header a { text-decoration: none; }*/ 
        h3
        {
            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
        {
            width: 100%;
            max-width: 512px;
            margin: 0 auto;
        }       
        nav ul li
        {
            list-style: none;
            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
    {
      padding-top:120px;
        margin: 0 auto;
        width: 61%;
        display: table;
        overflow: scroll;
        text-align: justify;
        font-family: 'Noto Sans', sans-serif;
    }   
    #contenido div
    {
        display: table-cell;
        vertical-align: top;
        padding: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;
    }

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..

GemliosG · #8 (**permalink**) 13/03/2015, 09:18

pero cuando la pasas, acabo de revisar, no se si es el navegador o algo por el estilo, pero en el contenido debe hacer scroll para visualizar el contenido completo, pero en el que pusiste fede, no me hace scroll

fede5426 · #9 (**permalink**) 13/03/2015, 21:26

Código HTML:

Ver original<div id="contenedor">
        <div style="position: fixed; width: 100%;">
        <header>
            <div id="titulo">Logo aquí</div>
            <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>
        <div id="contenido">
            <div id="central">
                <h1>Welcome to my webpage</h1>
            <h2>Contenido principal y centra</h2>
            </div>
            <div id="columna">
                <h1>Column</h1>
            <h2>Contenido de la columna</h2>
            </div>
        </div>
        <footer>
            Todos los derechos reservados.
        </footer>
    </div>

Código CSS:

Ver originalhtml, body { margin: 0; padding: 0; }
 
#contenedor
{
    margin: 0 auto;
    background: #FFF;
    width: 100%;
}
 
    header
    {
        height: 100px;
        padding: 1% 1%;
        background-color: #22272A;
        margin: 0 auto;
    }
    
    /*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
        {
            width: 100%;
            max-width: 512px;
            margin: 0 auto;
        }       
        nav ul li
        {
            list-style: none;
            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
    {
      padding-top:120px;
        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: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;
    }

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.