Autor Tema: CSS superponer varios div efecto superposición relative y absolute CU01032D (Leído 4181 veces)

Dimitar Stefanov · « **en:** 13 de Enero 2016, 20:41 »

Muy buenas,

aquí dejo los códigos del ejercicio CU01032D del curso CSS desde cero.

Ejercicio 1:

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" text="text/css" href="estilos48.css"/>
</head>
<body>
	<div id="padre">
		<div id="a">
		</div>
		<div id="b">
		</div>
		<div id="c">
		</div>
	</div>
</body>
</html>

A)

Código CSS: "estilos48.css"

Código: [Seleccionar]

div {
	border-style: solid;
}
div div {
	width: 300px;
	height: 300px;
	border-style: dashed;
	border-color: green;
	margin: 40px;
	padding: 30px;
}
#a {
	background-color: skyblue;
	position: relative;
	left: 200px;
	top: 100px;
}
#b {
	background-color: pink;
}
#c {
	background-color: yellow;
}

B)

Código CSS: "estilos49.css"

Código: [Seleccionar]

div {
	border-style: solid;
}
div div {
	width: 300px;
	height: 300px;
	border-style: dashed;
	border-color: green;
	margin: 40px;
	padding: 30px;
}
#a {
	background-color: skyblue;
}
#b {
	background-color: pink;
	position: relative;
	right: 50px;
	bottom: 50px;
}
#c {
	background-color: yellow;
}

C)

Código CSS: "estilos50.css"

Código: [Seleccionar]

div {
	border-style: solid;
}
div div {
	width: 300px;
	height: 300px;
	border-style: dashed;
	border-color: green;
	margin: 40px;
	padding: 30px;
}
#a {
	background-color: skyblue;
}
#b {
	background-color: pink;
}
#c {
	background-color: yellow;
	position: relative;
	left: 450px;
	bottom: 300px;
}

Ejercicio 2:

Código HTML:

Código: [Seleccionar]

<!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="estilos51.css"/>
	<title>Ejemplo de position</title>
</head>
<body>
	<div id="div1">
	</div>
	<div id="div2">
	</div>
	<div id="div3">
	</div>
</body>
</html>

Código CSS: "estilos51.css"

Código: [Seleccionar]

#div1 {
	width: 600px;
	height: 600px;
	background-color: yellow;
	position: absolute;
}
#div2 {
	width: 400px;
	height: 400px;
	background-color: green;
	position: absolute;
}
#div3 {
	width: 100px;
	height: 100px;
	background-color: blue;
	position: absolute;
}

Ejercicio 3:

Código HTML:

Código: [Seleccionar]

<!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="estilos52.css"/>
	<title>Ejemplo de position</title>
</head>
<body>
	<div id="div1">
	<p>&lt;&lt;Esta página web utiliza cookies. Si continuas navegando aceptas el uso de cookies.&gt;&gt;</p>
	</div>
	<div id="div2">
	</div>
	<div id="div3">
	</div>
</body>
</html>

Código CSS: "estilos52.css"

Código: [Seleccionar]

#div1 {
	height: 100px;
	background-color: yellow;
	position: fixed;
	top: 0;
}
#div2 {
	height: 1000px;
	background-color: blue;
}
#div3 {
	height: 1000px;
	background-color: pink;
}

PD: ¿Por qué cuando defino las divisiones "div"s con id="1" o id="2" (es decir, cuando les pongo número como id), después cuando me refiero a los mismos en la hora de estilo no me los reconoce?

Ogramar · « **Respuesta #1 en:** 16 de Enero 2016, 23:43 »

Buenas dimiste, en general los identificadores deben comenzar con una letra (además te recomendaría que sea con una letra minúscula) y no con un número. Tal y como indicas si intentas asignar como id un número puedes tener problemas, esto son reglas... y hay que cumplir algunas reglas cuando se hace programación web.

Para el ejercicio 1: Has establecido un desplazamiento para el div 1. ¿Y el desplazamiento para los div 2 y 3 que pedía el enunciado?

Parece que los has puesto en archivos css diferentes ¿Por qué? El enunciado decía "Define un documento HTML..." (sólo uno, no varios). No entiendo bien por qué has creado varios archivos css.

El ejercicio 2 lo veo bien resuelto

El ejercicio 3 pedía "Define un documento HTML con varios div que contengan suficiente texto como para que la página se muestre con scroll" ¿Dónde has definido el texto? No hay texto luego no te estás ateniendo a lo que pedía el ejercicio (aunque hayas logrado el scroll introduciendo div con valores height grandes)

Salu2

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

Buenas Ogramar,

primero, y como siempre, gracias por corregirme el ejercicio.

En el primer ejercicio, pensaba que los subapartados A), B) y C) se tenían que hacer por separado, por eso creé 3 hojas de estilo diferentes.

Y sobre el tercer ejercicio, sí, no puse texto porque pensé q creando las propiedades oportunas para que se pueda ver la barra de scroll ya sería suficiente.

Saludos.

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

Noticias: