Dividir pantalla en 6

eddydp · #1 (**permalink**) 23/09/2014, 12:47

Hola amigos necesito hacer una pagina que se divida en 6 secciones
con un header y un footer
he aqui la idea

bueno ya he echo la mayor parte pues mi problema es
que al dividir la pantalla en 6 no se ajusta al navegador aparecen las imagenes mas abajo les dejo unas he aqui los problemas

este es mi codigo css con el que divido la pagina y el pie de pagina

Código:

#izquierda2{
      
	content:url(../img/01.jpg);
	
        width:33%;
	display:inline-block;      
	height:49.5%;    
	background-color:blue;
  }

#centro2{
	float: left;
	width: 33%;
	margin: 0px 0px 0px 0px;
	content:url(../img/02.jpg);
	font: 12pt Verdana;
	text-align: justify;
}

#derecha2{
	float: left;
	width: 33%;
	margin: 0px 0px 0px  0px;
	content:url(../img/03.jpg);
	font: 10pt Verdana;
	text-align: center;
}

#izquierda3{
	
	content:url(../img/04.jpg);
	width:33%;
	display:inline-block;      
	height:49.5%;    
	background-color:blue;
  }
#centro3{
	float: left;
	width: 33%;
        height: 50%;
	content:url(../img/05.jpg);
	font: 10pt Verdana;
	text-align: center;
  }

#derecha3{
	float: left;
	width: 33%;
	margin: 0px 0px 0px  0px;
	content:url(../img/06.jpg);
	font: 10pt Verdana;
	text-align: center;
}  

#pie2{
    position: relative;
    margin-top: -50px; /* altura en px del footer con valor negativo */
    height: 50px; /* Altura del Footer en px*/
    clear: both;
    background: #286af0;
    text-align: center;
    color: #FFFFFF;
}

y mi codigo html

Código HTML:

 <body>
  <header>
    <a href="#" id="logo"></a>
        <nav>
            <a href="#" id="menu-icon"></a>
            <ul>
                <li><a href="#" class="current">Sistemas</a></li>
                <li><a href="#">Equipos</a></li>
                <li><a href="#">Cámaras</a></li>
                <li><a href="#">Redes</a></li>
                <li><a href="#">Contacto</a></li>
            </ul>
        </nav>
  </header>
  <div id="izquierda2">
  </div> 
  
  <div id="centro2"> 
  </div> 
  
  <div id="derecha2"> 
  </div>
  <div id="izquierda3">
  </div>
  <div id="centro3">
  </div> 
  <div id="derecha3">
  </div> 
  <div id="pie2">
  © loquesea.com<br>
  Ancho 100%<br>
  Fuente: Verdana, 8 pt, centrada.</div></div>
  
</body>

Espero me ayuden a resolve el problema gracias saludos

lauser · #2 (**permalink**) 23/09/2014, 13:42

Por que no la haces responsive?

eddydp · #3 (**permalink**) 23/09/2014, 14:11

lauser, ¿Como lo haría para que fuera responsive?, lo que no he logrado hacer es que se ajusten los 6 cuadros sin importar el tamaño
de pantalla

Franchesquini · #4 (**permalink**) 24/09/2014, 10:28

Para que se ajuste a todas las resoluciones de pantalla tenés quie hacerla responsive.

Probá poniendo esto en el <head>

Código:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

y esto en el css (editá de acuerdo a tu html)

Código:

/* para 980px o menos */ 
@media screen and (max-width:980px) {
 .container { 
width:98%; 
} 
section { 
width:68%; } 
}

/* para 700px o menos */ 
@media screen and (max-width:700px) { 
aside,section { 
float:none; width:96%; 
}
 nav, section { 
font-size:1.2em; 
} 
aside { 
margin-top:5px; 
}
 nav ul { 
float:none; clear:both; 
} 
} 

/* para 480px o menos */ 
@media screen and (max-width:480px) { 
aside { 
display:none; 
} 
nav, section { 
font-size:1.5em; 
} 
section { 
width:94%; 
} 
nav ul { 
float:left; 
clear:none; 
width:50%; 
} 
nav ul li { 
float:none; 
} 
}

letsalcido · #5 (**permalink**) 30/09/2014, 15:31

Cita:

Iniciado por Franchesquini

Para que se ajuste a todas las resoluciones de pantalla tenés quie hacerla responsive.

Probá poniendo esto en el <head>

Código:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

y esto en el css (editá de acuerdo a tu html)

Código:

/* para 980px o menos */ 
@media screen and (max-width:980px) {
 .container { 
width:98%; 
} 
section { 
width:68%; } 
}

/* para 700px o menos */ 
@media screen and (max-width:700px) { 
aside,section { 
float:none; width:96%; 
}
 nav, section { 
font-size:1.2em; 
} 
aside { 
margin-top:5px; 
}
 nav ul { 
float:none; clear:both; 
} 
} 

/* para 480px o menos */ 
@media screen and (max-width:480px) { 
aside { 
display:none; 
} 
nav, section { 
font-size:1.5em; 
} 
section { 
width:94%; 
} 
nav ul { 
float:left; 
clear:none; 
width:50%; 
} 
nav ul li { 
float:none; 
} 
}

Franchesquini, con todo respeto pero he visto dos posts tuyos diciendo que con esos códigos se logra hacer responsivo un sitio. Lamentablemente hacer que un sitio sea responsivo está muy lejos de ser un par de códigos extras en el css. Por favor no confundas a las personas que apenas van aprendiendo diseño web.

El diseño responsivo es una técnica en donde se usan media queries (@media) para determinar el tamaño de la pantalla y entonces aplicar un grupo de estilos a los elementos que el diseñador web decida. El viewport meta es requerido para que funcione esto, pero el css que posteas puede que funcione pero en un caso específico. Cada sitio tiene su propio grupo de mediaqueries para que se muestre correctamente.

webosiris · #6 (**permalink**) 01/10/2014, 17:12

eddydp, estás complicando tu css de forma totalmente innecesaria... porque usas ids? porque pones como fondo fotos que son parte del contenido?

Y si se te ven las img cortadas es porque miden más que la altura que le estás asignando a los divs que las muestran.

Franchesquini, go to letsalcido. Copiar y pegar tu código no hace absolutamente nada y no tienen ningún tipo de relación ni soluciona la pregunta inicial.