Autor Tema: CSS Solapar varios div entre sí efecto superposición propiedad position CU01032D (Leído 2543 veces)

Boletos · « **en:** 29 de Enero 2016, 05:12 »

Hola!! A todos. La solución al ejercicio CU01032D propuesta es:

HTML

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<meta name="description" content="Ejercicio 1032"/>
	<meta name="keywords" content="palabras clave"/>
	<title>Ejercicio 1032 Position</title>
	<link rel="stylesheet" type="text/css" href="1032.css"/>
</head>
<body>
	<div id="padre">
		<div id="uno">
			Esta página web utiliza cookies. Si continúa navegando acepta
			el uso de cookies.
		</div>
		<div id="dos">
			div 2
			<br/><br/><br/><br/><br/><br/>
			Fin
		</div>
		<div id="tres">
			div 3
			<br/><br/><br/><br/>
			Fin
		</div>
	</div>
</body>
</html>

CSS ejercicio 1

Código: [Seleccionar]

div div{width:300px; height:300px; margin:40px; padding:30px;}
#uno{background-color:tan; position:relative; left:200px; top:100;}
#dos{background-color:teal; position:relative; left:-50px; top:-50px;}
#tres{background-color:khaki; position:relative; left:450px; top:-300px;}

CSS ejercicio 2

Código: [Seleccionar]

#uno{width:600px; height:600px; background-color:yellow;}
#dos{width:400px; height:400px; background-color:green;
	position:absolute; left:10px; top:10px;}
#tres{width:100px; height:100px; background-color:blue;
	position:absolute; left:10px; top:10px;}

CSS ejercicio 3

Código: [Seleccionar]

#uno{height:100px; background-color:yellow; position:fixed;}
#dos{height:30cm;}
#tres{height:40cm;}

Un saludo!!

Pd. Supongo que poner todos los ejercicios supone un curro de corrección. En adelante pondré únicamente los que tenga muchas dudas.

Muchas gracias por vuestra ayuda.

Ogramar · « **Respuesta #1 en:** 01 de Febrero 2016, 08:48 »

Buenas Boletos

Sobre poner todos los ejercicios es lo que recomendamos porque así la persona que realiza el curso puede ir corrigiendo los errores o fallos y también porque es una manera de que se pueda acceder a los foros y ver distintas soluciones para un mismo ejercicio. Lo único que pedimos es que cuando se vaya avanzando con los cursos la persona que ha sido ayudada ayude también corrigiendo a quienes estén empezando, así logramos una ayuda colaborativa entre todos.

Te indico los comentarios para los ejercicios de esta entrega

Ejercicio 1: todo bien, te ha faltado indicar px después de top:100;

Ejercicio 2: el ejercicio no pedía aplicar desplazamientos a las cajas por tanto tendrías que eliminar left:10px; top:10px;

Además para el primer div te faltaría añadir position:absolute;

Ejercicio 3: en lugar de con texto haz hecho que se muestre el scroll dándole altura en cm a los div. Bien pero ten en cuenta que medidas en cm raramente se usan en desarrollos web

Salu2

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

Noticias: