Autor Tema: CSS desde cero maquetar una web con tres columnas de ancho variable CU01036D (Leído 2392 veces)

Dimitar Stefanov · « **en:** 14 de Enero 2016, 21:39 »

Aquí os dejo los códigos del ejercicio CU01036D del curso CSS desde cero.

Código HTML:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<meta name="description" content="Portal web"/>
	<meta name="keywords" content="programar,cursos"/>
	<link rel="stylesheet" type="text/css" href="estilos64.css"/>
	<title>Ejemplo float</title>
</head>
<body>
	<div id="caja1"><br/>Bienvenidos a aprenderaprogramar.com</div>
	<div id="caja2"><br/>Menú<br/><br/>-Cursos<br/><br/>-Humor<br/><br/>-Divulgación<br/><br/></div>
	<div id="caja3"><br/><br/>Conoce las últimas novedades del lenguaje<br/>JavaScript.</div>
	<div id="caja4"><br/><br/><br/><br/>Espacion reservado para publicidad</div>
	<div id="caja5"><br/><br/>Artículo sobre Gimp, un programa de software<br/>libre para el diseño gráfico.</div>
	<div id="caja6"><br/>Contacta con nosotros</div>
	<div id="caja7"><br/>Aviso legal</div>
</body>
</html>

Código CSS: "estilos64.css"

Código: [Seleccionar]

* {
	font-family: arial;
	font-size: 14px;
	text-align: center;
}
body {
	width: 604px;
}
div {
	border: solid 1px;
}
#caja1 {
	width: 602px;
	height: 60px;	
	background-color: #DEB887;
	border-bottom: none;
}
#caja2 {
	width: 151px;
	height: 181px;
	float: left;
	border-right: none;
}
#caja3 {
	width: 300px;
	height: 90px;
	float: left;
	background-color: #ADD8E6;
}
#caja4 {
	width: 150px;
	height: 181px;
	float: right;
	border-left: none;
}
#caja5 {
	width: 300px;
	height: 90px;
	float: left;
	background-color: #90EE90;	
	border-top: none;
}

#caja6 {
	width: 301px;
	height: 60px;	
	float:left;
	background-color: #DDA0DD;	
	border-top: none;
}
#caja7 {
	width: 301px;
	height: 60px;	
	float: left;
	border-left: none;
	border-top: none;
}

Ogramar · « **Respuesta #1 en:** 17 de Enero 2016, 19:53 »

Buenas dimiste

En el navegador en que lo he probado tu código no se ve bien, aparecen las distintas partes del diseño descolocadas.

Para que la caja4 encaje tengo que bajarle el width a 149px, si no no me encaja.

La caja 7 aparece debajo de la caja 6, cuando debería aparecer al lado.

Deberías revisar esto

Puedes ver propuestas de solución en https://www.aprenderaprogramar.com/foros/index.php?topic=1647.0

Salu2

Dimitar Stefanov · « **Respuesta #2 en:** 18 de Enero 2016, 18:14 »

Buenas Ogramar,

He mirado el enlace que me enviaste y yo no veo el ejercicio igual que como lo pedían en el tutorial. Pensaba que se tenía que hacer literalmente como estaba en el dibujo (sin una caja de contenedor y luego dentro las cajas). De todas maneras, tal y como dices tu, mi ejercicio tampoco ha conseguido el objetivo, porque si no lo has podido ver bien...Además, yo para verlo bien (con el navegador firefox) tenía que subirlo a zoom 150% porque si no, no se visualiza bien.

Saludos

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: