Autor Tema: Crear diseños web usando propiedades CSS float y clear cajas CU01035D (Leído 2858 veces)

freddychpo · « **en:** 21 de Octubre 2015, 04:51 »

Citar

Define un documento HTML donde a través del uso de las propiedades float y clear y de las anteriores propiedades que hemos visto a lo largo del curso crees un diseño con este aspecto:

a) En primer lugar se deben mostrar 8 cajas div de 50x50 píxeles, con margin-right de 5 píxeles para cada una de ellas, y cada una de ellas con distinto color de fondo, alineadas en horizontal hacia la izquierda gracias al uso de float left.

b) En segundo lugar se debe mostrar un div con un texto y color de fondo amarillo, con margen superior e inferior de 20 píxeles, abarcando todo el ancho disponible.

c) En tercer lugar se deben mostrar 3 cajas div de 200x50 píxeles, con margin-right de 5 píxeles para cada una de ellas, y cada una de ellas con distinto color de fondo, alineadas en horizontal hacia la derecha gracias al uso de float right.

d) En cuarto lugar un div de fondo de color #DEB887 que ocupe todo el ancho disponible y contenga el texto <<Curso CSS aprenderaprogramar.com>>

html:

Código: [Seleccionar]

<html>
	<head>
		<title> Ejercicio 35 - CSS</title>
		<link rel="stylesheet" href="styleExer35.css">
	</head>
	<body>
		<div id="caja1" class="cajasleft">Caja 1</div>
		<div id="caja2" class="cajasleft">Caja 2</div>
		<div id="caja3" class="cajasleft">Caja 3</div>
		<div id="caja4" class="cajasleft">Caja 4</div>
		<div id="caja5" class="cajasleft">Caja 5</div>
		<div id="caja6" class="cajasleft">Caja 6</div>
		<div id="caja7" class="cajasleft">Caja 7</div>
		<div id="caja8" class="cajasleft">Caja 8</div>
		
		<div id="fondo">Texto de fondo </div>
		
		<div id="caja9" class="cajasright">Caja 9 </div>
		<div id="caja10" class="cajasright">Caja 10 </div>
		<div id="caja11" class="cajasright">Caja 11 </div>
		
		<div id="caja12"> Curso CSS aprenderaprogramar.com </div>
		
	</body>
</html>

css:

Código: [Seleccionar]

.cajasleft{
	width:50px;
	height:50px;
	margin-right:5px;
	float:left;
}

.cajasright{
	width:200px;
	height:50px;
	margin-right:5px;
	float:right;
}

#caja1 {background-color:yellow;}
#caja2 {background-color:green;}
#caja3 {background-color:brown;}
#caja4 {background-color:red;}
#caja5 {background-color:grey;}
#caja6 {background-color:black;}
#caja7 {background-color:orange;}
#caja8 {background-color:purple;}

#caja9{background-color:red;}
#caja10{background-color:blue;}
#caja11{background-color:orange;}

#caja12{background-color:#DEB887;}


#fondo {
	background-color:yellow;
	margin-top:20px;
	margin-bottom:20px;
	width:100%;
}

pedro,, · « **Respuesta #1 en:** 21 de Octubre 2015, 19:18 »

Hola freddychpo.

El ejercicio pide lo siguiente...

Citar

Define un documento HTML donde a través del uso de las propiedades float y clear y de las anteriores propiedades que hemos visto a lo largo del curso crees un diseño con este aspecto:

No has usado la propiedad clear, sería bueno que resolvieras el ejercicio usándola, de esta manera podrías ver como mejoraría el estilo del html que has creado.

Saludos.

freddychpo · « **Respuesta #2 en:** 23 de Octubre 2015, 03:51 »

Tienes toda la razon pedro,,

Aqui dejo mi codigo corregido usando la propiedad clear

html:

Código: [Seleccionar]

<html>
	<head>
		<title> Ejercicio 35 - CSS</title>
		<link rel="stylesheet" href="styleExer35.css">
	</head>
	<body>
		<div id="caja1" class="cajasleft">Caja 1</div>
		<div id="caja2" class="cajasleft">Caja 2</div>
		<div id="caja3" class="cajasleft">Caja 3</div>
		<div id="caja4" class="cajasleft">Caja 4</div>
		<div id="caja5" class="cajasleft">Caja 5</div>
		<div id="caja6" class="cajasleft">Caja 6</div>
		<div id="caja7" class="cajasleft">Caja 7</div>
		<div id="caja8" class="cajasleft">Caja 8</div>
		
		<div id="fondo">Texto de fondo </div>
		
		<div id="caja9" class="cajasright">Caja 9 </div>
		<div id="caja10" class="cajasright">Caja 10 </div>
		<div id="caja11" class="cajasright">Caja 11 </div>
		
		<div id="caja12"> Curso CSS aprenderaprogramar.com </div>
		
	</body>
</html>

css:

Código: [Seleccionar]

.cajasleft{
	width:50px;
	height:50px;
	margin-right:5px;
	float:left;
}

.cajasright{
	width:200px;
	height:50px;
	margin-right:5px;
	float:right;
}

#caja1 {background-color:yellow;}
#caja2 {background-color:green;}
#caja3 {background-color:brown;}
#caja4 {background-color:red;}
#caja5 {background-color:grey;}
#caja6 {background-color:black;}
#caja7 {background-color:orange;}
#caja8 {background-color:purple;}

#caja9{background-color:red;}
#caja10{background-color:blue;}
#caja11{background-color:orange;}

#caja12{
	background-color:#DEB887;
	clear:right;
	text-align:center;
}


#fondo {
	background-color:yellow;
	margin-top:20px;
	margin-bottom:20px;
	width:100%;
	height:250px;
	clear:left;
	text-align:center;
}

Solo tengo una pregunta, ¿Por que al darle valor a mi propiedad margin-top de mi caja con id="fondo" no obtengo ningun resultado ?

No puedo generar un margen por arriba de mi caja.

Agradeceria la respuesta.

Muchas gracias.

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

Noticias: