« anterior próximo »
Páginas: [1]

Autor Tema: Ejemplo position fixed CSS y absolute Propiedad position CSS Ejercicio CU01032D  (Leído 3898 veces)

jimmorrison

  • Principiante
  • **
  • APR2.COM
  • Mensajes: 51
  • la programacion es vida
    • Ver Perfil
Ejemplo position fixed CSS y absolute Propiedad position CSS Ejercicio CU01032D
« en: 25 de Abril 2015, 21:52 »
Ejercicio 1

Citar
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

Código: [Seleccionar]
<!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

Código: [Seleccionar]
*{
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

Citar
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
Código: [Seleccionar]
<!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

Código: [Seleccionar]
*{
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

Citar
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
Código: [Seleccionar]
<!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


Código: [Seleccionar]
*{
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;}
« Última modificación: 27 de Abril 2015, 09:38 por César Krall »
En línea

Mastermind

  • Experto
  • *****
  • Mensajes: 536
    • Ver Perfil
Re:Propiedad position CSS: Ejemplos prácticos (CU01032D)
« Respuesta #1 en: 26 de Abril 2015, 21:49 »
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 ;)
En línea
Páginas: [1]
« anterior próximo »
 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".