Foros del Web » Creando para Internet » CSS »

Layout con html5 y ccs3

Estas en el tema de Layout con html5 y ccs3 en el foro de CSS en Foros del Web. Saludos, hoy estaba tratando de crear un layout en HTML y CCS3 ya que tenia varios años alejado de la programación web (casi 4 años) ...
  #1 (permalink)  
Antiguo 13/05/2015, 21:52
Avatar de elpapineo  
Fecha de Ingreso: septiembre-2008
Ubicación: Bolivar
Mensajes: 2
Antigüedad: 16 años, 2 meses
Puntos: 1
Sonrisa Layout con html5 y ccs3

Saludos, hoy estaba tratando de crear un layout en HTML y CCS3 ya que tenia varios años alejado de la programación web (casi 4 años) y por fin lo logre a mi manera (no lo vi en ningún sitio web de tanto que busque) y quería compartirlo con ustedes para que me den su opinión al respecto y saber si esta bien hecho o si esta mal hecho, que le quitarían o que le cambiarían? el layout es parecido al de mail.live.com (hotmail) la dificultad que tenia era que las columnas de la izquiera y derecha tomaran la misma altura de la ventana del navergador es decir, que NO tuvieran una altura fija y que al redimencionar la ventana del navegador este layout se adaptara solo usando CSS3 (sin ayuda de javascript o jquery).

Codigo:

Código:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Layout</title>
<style>
html, body, header, nav, ul, li, aside, section, footer {
	margin: 0;
	padding: 0;
}
header {
	background-color: #FF8C00;
	width: 100%;
	height: 50px;
}
aside {
	float: left;
	width: 200px;
	height: calc(100vh - 70px);
	background-color: #FFD9CA;

}
section {
	float: left;
	width: calc(100% - 200px);
	height: calc(100vh - 70px);
	background-color: #3399FF;
}
footer {
	clear: both;
	width: 100%;
	height: 20px;
	background-color: #FF8C00;
}
</style>
</head>
	
<body>

<header></header>

<aside></aside>

<section></section>

<footer></footer>

</body>
</html>
Si tienen una mejor forma de hacerlo por favor compartirla, saludos..
  #2 (permalink)  
Antiguo 14/05/2015, 01:44
Avatar de NueveReinas  
Fecha de Ingreso: septiembre-2013
Ubicación: No tan Buenos Aires
Mensajes: 1.101
Antigüedad: 11 años, 3 meses
Puntos: 145
Respuesta: Layout con html5 y ccs3

Por lo visto no es responsive...

Respecto a la primera línea de CSS, ahora existe algo llamado normalize.css
__________________
¿Te sirvió la respuesta? Deja un +1
  #3 (permalink)  
Antiguo 14/05/2015, 16:04
Avatar de elpapineo  
Fecha de Ingreso: septiembre-2008
Ubicación: Bolivar
Mensajes: 2
Antigüedad: 16 años, 2 meses
Puntos: 1
Respuesta: Layout con html5 y ccs3

Se me olvido mencionar que estoy utilizando el navegador chrome Versión 42.0.2311.152 dev-m. Todavía no tengo muy claro el funcionamiento de responsive y si tengo añadido el normalize.css lo que pasa es que no coloque la etiqueta aquí.

Respecto a la 1ra linea de CSS la coloque porque el normalize no me inicializa todos esos elementos en margin 0 y padding 0;

Quiciera saber porque dices que no es responsive? Si al redimencionar la ventana del navegador el layout se adapta

El layout es para una aplicación web en desktop, por eso no le estoy tomando tanta importancia a lo de responsive.

Lo que me gustaría saber es que si existen otras formas de realizar este layout en CSS para que los contenedores aside y section sean del mismo alto y que el layout ocupe el mismo tamaño que la ventana del navegador? Si es así se agradece los ejemplos...

Saludos..

Última edición por elpapineo; 14/05/2015 a las 17:19

Etiquetas: css3, html5
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 09:31.