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: jimmorrison en 25 de Abril 2015, 21:52
-
Ejercicio 1
Define un documento HTML con un div padre (divPadre), dentro del cual existan otras 3 cajas contenedoras div (div1, div2 y div3), cada una de ellas con unas dimensiones de 300x300px, 40 píxeles de margin en todas direcciones, 30 píxeles de padding en todas direcciones y un background color diferente. Usando posicionamiento relativo genera un desplazamiento de los div de la siguiente manera:
a) El div 1 deberá desplazarse 200 píxeles a la derecha y 100 píxeles hacia abajo respecto a lo que sería su posición normal.
b) El div 2 deberá desplazarse 50 píxeles a la izquierda y 50 píxeles hacia arriba respecto a lo que sería su posición normal.
c) El div 3 deberá desplazarse 450 píxeles a la derecha y 300 píxeles hacia arriba respecto a lo que sería su posición normal.
html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- Código base para el curso CSS -->
<html>
<head>
<title>Portal web - aprenderaprogramar.com</title>
<meta charset="utf-8">
<meta name="description" content="Portal web aprenderaprogramar.com">
<meta name="keywords" content="aprender, programar, cursos, libros">
<link rel=stylesheet href=css/ejercicio_posicionamiento.css>
</head>
<div id="papi" class="caja">
<div id="hijo_junior" class="cajitas">
</div>
<div id="hija_mediana" class="cajitas">
</div>
<div id="hijo_mayor" class="cajitas">
</div>
</div>
<footer>
Hecho por carlos enrique gil chong
</footer>
</body>
</html>
css
*{
margin: 0px;
padding: 0px;}
#papi{
border: solid blue 5px }
.cajitas{
width: 300px;
height: 300px;
margin: 40px;
padding: 30px;
}
#hijo_junior{background-color: red;
position: relative;
left: 200px;
top: 100px;
}
#hija_mediana{background-color: orange;
position: relative;
right: 50px;
bottom: 50px;
}
#hijo_mayor{background-color: purple;
position: relative;
left: 450px;
bottom: 300px;
}
Ejercicio 2
Define un documento HTML con 3 cajas contenedoras div (div1, div2 y div3), la primera con unas dimensiones de 600x600px y un background color amarillo. La segunda con dimensiones 400x400px y un background color verde. La tercera con dimensiones 100x100px y background color azul. Usando posicionamiento absoluto establece para el div2 y el div3 el mismo origen que para el div1, de modo que el efecto generado sea ver un cuadrado amarillo dentro del cual hay un cuadrado verde dentro del cual hay un cuadrado azul.
html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- Código base para el curso CSS -->
<html>
<head>
<title>Portal web - aprenderaprogramar.com</title>
<meta charset="utf-8">
<meta name="description" content="Portal web aprenderaprogramar.com">
<meta name="keywords" content="aprender, programar, cursos, libros">
<link rel=stylesheet href=css/ejercicio1_posicionamiento.css>
</head>
<div id="div1" class="cajitas">
</div>
<div id="div2" class="cajitas">
</div>
<div id="div3" class="cajitas">
</div>
<footer>
Hecho por carlos enrique gil chong
</footer>
</body>
</html>
css
*{
margin: 0px;
padding: 0px;}
#div1{background-color: red;
width: 600px;
height: 600px;
background-color: yellow;
}
#div2{background-color: orange;
width: 400px;
height: 400px;
background-color: green;
position: absolute;
top: 0px;
}
#div3{background-color: purple;
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
top: 0px;
}
Ejercicio 3
Define un documento HTML con varios div que contengan suficiente texto como para que la página se muestre con scroll (barras de desplazamiento). El primero de los div debe contener el texto <<Esta página web utiliza cookies. Si continúa navegando acepta el uso de cookies.>>, un valor height (altura) de 100 píxeles y color de fondo amarillo. Usando posicionamiento fixed, fija este div en la parte superior de la página de modo que se continúe visualizando aún cuando hagamos scroll.
html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!-- Código base para el curso CSS -->
<html>
<head>
<title>Portal web - aprenderaprogramar.com</title>
<meta charset="utf-8">
<meta name="description" content="Portal web aprenderaprogramar.com">
<meta name="keywords" content="aprender, programar, cursos, libros">
<link rel=stylesheet href=css/ejercicio2_posicionamiento.css>
</head>
<div id="div1" class="cajitas">
Esta página web utiliza cookies. Si continúa navegando acepta el uso de
cookies.
</div>
<div id="div2" class="cajitas">
EJERCICIO 2
Define un documento HTML con 3 cajas contenedoras div (div1, div2 y div3),
la primera con unas dimensiones de 600x600px y un background color
amarillo. La segunda con dimensiones 400x400px y un background color verde.
La tercera con dimensiones 100x100px y background color azul. Usando
posicionamiento absoluto establece para el div2 y el div3 el mismo origen
que para el div1, de modo que el efecto generado sea ver un cuadrado
amarillo dentro del cual hay un cuadrado verde dentro del cual hay un
cuadrado azul. Para comprobar si tus respuestas son correctas puedes
consultar en los foros aprenderaprogramar.com.
EJERCICIO 3
Define un documento HTML con varios div que contengan suficiente texto como
para que la página se muestre con scroll (barras de desplazamiento). El
primero de los div debe contener el texto <<Esta página web utiliza
cookies. Si continúa navegando acepta el uso de cookies.>>, un valor height
(altura) de 100 píxeles y color de fondo amarillo. Usando posicionamiento
fixed, fija este div en la parte superior de la página de modo que se
continúe visualizando aún cuando hagamos scroll. Para comprobar si tus
respuestas son correctas puedes consultar en los foros
aprenderaprogramar.com.
</div>
<div id="div3" class="cajitas">
EJERCICIO 1
Define un documento HTML con un div padre (divPadre), dentro del cual
existan otras 3 cajas contenedoras div (div1, div2 y div3), cada una de
ellas con unas dimensiones de 300x300px, 40 píxeles de margin en todas
direcciones, 30 píxeles de padding en todas direcciones y un background
color diferente. Usando posicionamiento relativo genera un desplazamiento
de los div de la siguiente manera:
a) El div 1 deberá desplazarse 200 píxeles a la derecha y 100 píxeles hacia
abajo respecto a lo que sería su posición normal.
b) El div 2 deberá desplazarse 50 píxeles a la izquierda y 50 píxeles hacia
arriba respecto a lo que sería su posición normal.
c) El div 3 deberá desplazarse 450 píxeles a la derecha y 300 píxeles hacia
arriba respecto a lo que sería su posición normal.
Para comprobar si tus respuestas son correctas puedes consultar en los
foros aprenderaprogramar.com.
</div>
<footer>
Hecho por carlos enrique gil chong
</footer>
</body>
</html>
css
*{
margin: 0px;
padding: 0px;}
#div1{background-color: red;
height: 100px;
background-color: yellow;
position: fixed;
left: 500px;
}
#div2{
font-size: 32px;
font-family: arial;
background-color: orange;
height: 600px;
}
#div3{
font-size: 32px;
font-family: arial;
background-color: purple;
height: 600px;
}
footer{
background-color: silver;
font-size: 32px;
font-family: arial;
text-align: center;}
-
Hola te faltan las comillas en <link rel=stylesheet href=css/ejercicio1_posicionamiento.css> en los tres ejercicios pasa lo mismo
<link rel="stylesheet" href="css/ejercicio1_posicionamiento.css">
El ejercicio 1 lo veo perfecto
Tienes un despiste
#papi{
border: solid blue 5px }
falta el ; de cierre en border: solid blue 5px;
En el ejercicio 2 todo bien
En el ejercicio 3 todo bien
¡Buenos efectos!
Saludos ;)