Autor Tema: HTML y CSS cómo fijar un contenido para que sea siempre visible en web CU01032D  (Leído 1996 veces)

EnigmaticNerd

  • Principiante
  • **
  • Mensajes: 65
    • Ver Perfil
Ejercicio CU01032D del tutorial de programación web con CSS desde cero.

Buenas noches. Este es el enunciado del 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.


Acá el código:
Código: [Seleccionar]
<!DOCTYPE html>
<html lang="es">
    <head>
        <title>
            CU01032D
        </title>
        <meta charset="utf-8"/>
        <link rel="stylesheet" type="text/css" href="estilos/CU01032.css"/>
    </head>
    <body>

        <div id="padre">
            <div></div>
            <div></div>
            <div></div>
        </div>

    </body>
</html>

Acá la hojas de estilos css:
Código: [Seleccionar]
/*Estilos de ejercicio CU01032D*/

#padre div{
    width:300px;
    height:300px;
    margin:40px;
    margin:30px;
}

#padre div:first-child{
    background-color:blue;
    position: relative; left:200px; top:100px;
}

#padre div:nth-child(2){
    background-color:brown;
    position: relative; right:50px; bottom:50px;
}

#padre div:last-child{
    background-color:red;
    position: relative; left:450px; bottom:300px;   
}



Este es el enunciado del 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.

Acá el código:
Código: [Seleccionar]
<!DOCTYPE html>
<html lang="es">
    <head>
        <title>
            CU01032D
        </title>
        <meta charset="utf-8"/>
        <link rel="stylesheet" type="text/css" href="estilos/2CU01032.css"/>
    </head>
    <body>

        <div><p>Esto</p></div>
        <div><p>Es</p></div>
        <div><p>Genial</p></div>

    </body>
</html>

Acá la hoja de estilos css:
Código: [Seleccionar]
/*Estilos de ejercicio 2 CUO1032*/

div:first-child{
    width:600px;
    height:600px;
    background-color:yellow;
}

div:first-child p{
    font-family:Georgia, 'Times New Roman', Times, serif;
    font-size: 2em;
    text-align:center;
    color: purple;
}

div:nth-child(2){
    width:400px;
    height:400px;
    background-color:green;
    position: absolute; bottom:25%; left:7.5%;
}

div:nth-child(2) p{
    font-family:Georgia, 'Times New Roman', Times, serif;
    font-size: 2em;
    text-align:center;
    color: gainsboro;
}

div:nth-child(3){
    width:100px;
    height:100px;
    background-color:blue;
    position: absolute; bottom:45%; left:18.5%;
   
}

div:nth-child(3) p{
    font-family:Georgia, 'Times New Roman', Times, serif;
    font-size: 2em;
    text-align:center;
    color: orange;
}



Este es el enunciado del 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.

Acá el código:
Código: [Seleccionar]
<!DOCTYPE html>
<html lang="es">
    <head>
        <title>
            CU01032D
        </title>
        <meta charset="utf-8"/>
        <link rel="stylesheet" type="text/css" href="estilos/3CU01032.css"/>
    </head>
    <body>

        <div>
            <p>
                Esta página web utiliza cookies. Si continúa navegando acepta el uso de cookies.
            </p>
        </div>
        <div></div>
       
        <div></div>
       
        <div></div>
       
        <div></div>
       
        <div></div>
       
        <div></div>
       
        <div></div>
       
        <div></div>
       
        <div></div>
       
        <div></div>
       
        <div></div>
       
        <div></div>
       
        <div></div>
       
        <div></div>
       
        <div></div>
       
        <div></div>
       
        <div></div>
       
        <div></div>
       
        <div></div>
    </body>
</html>

Acá la hoja de estilos css:
Código: [Seleccionar]
/*Estilos del tercer ejercicio CU01032D*/
*{
    margin:0;
    padding:0;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

p{
    font-size:30px;
    padding:25px;
}

div:first-child{
    height:100px;
    background-color:#FFFF00;
    position: fixed;   
    width: 97%;
    top:-10px;
    border: groove #454499 20px;
}

div{
    height:200px;
    width:200px;
    border-top:dashed 10px #32FFCD;
    border-right:inset 20px #FF4523;
    border-bottom:groove 10px #58DA12;
    border-left:inset 30px #FF43FF;
    text-align:center;
    margin: 20px auto;
}

Si tienen correcciones o sugerencias, se las agradeceré enormemente. Gracias.
« Última modificación: 29 de Septiembre 2017, 20:05 por Alex Rodríguez »

Alex Rodríguez

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2050
    • Ver Perfil
Hola EnigmaticNerd

Ejercicio 1 correcto (como ya se ha comentado en otros hilos, puede ser preferible identificar los elementos por id en lugar de por nth-child)

Ejercicio 2: aunque se ve bien cómo has generado el efecto de superposición, no has cumplido con lo que se pedía, que era que los tres divs tuvieran el mismo origen (digamos que su esquina izquierda superior fuera la misma para los tres div). Compáralo con este otro hilo https://www.aprenderaprogramar.com/foros/index.php?topic=5169.0

Ejercicio 3 correcto.

Saludos

 

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".