Foros aprenderaprogramar.com

Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: Boletos en 29 de Enero 2016, 05:12

Título: CSS Solapar varios div entre sí efecto superposición propiedad position CU01032D
Publicado por: Boletos en 29 de Enero 2016, 05:12
Hola!! A todos. La solución al ejercicio CU01032D propuesta es:


HTML

Código: [Seleccionar]
<!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.
Título: Re:CSS Solapar varios div entre sí efecto superposición propiedad position CU01032D
Publicado por: Ogramar 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