Autor Tema: CSS position relative y absolute diferencias y ejemplos Ejercicio CU01032D (Leído 6362 veces)

Elanti · « **en:** 03 de Junio 2015, 03:56 »

Hola:

Este ejercicio no me pareció particularmente difícil, pero me desconcierta el hecho de que sólo puedo visualizar mi respuesta en Chrome. El resto de los navegadores que he probado (Firefox, Explorer y Opera) sólo me muestran una página en blanco. Agradecería si alguien me pudiera decir qué es lo que estoy haciendo mal.

Citar

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.

Mi código HTML:

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejercicio propiedad position</title>
<link type="text/CCS" rel="stylesheet" href="estilosposition.css"/>
</head>
<body>
<div id="DivPadre">
 <div id="div1"></div>
 <div id="div2"></div>
 <div id="div3"></div>
</div>
</body>
</html>

Mi hoja de estilos:

Código: [Seleccionar]

#DivPadre{border:solid 5px green;
}
div div{width:300px;
      height:300px;
      margin:40px;
      padding:30px;
}
#div1{background-color:magenta;
      position:relative;left:200px;top:100px;
} 
#div2{background-color:cyan;
      position:relative;right:50px;bottom:50px; 
}
#div3{background-color:skyblue;
      position:relative;left:450px;bottom:300px;
}

Elanti · « **Respuesta #1 en:** 03 de Junio 2015, 06:36 »

Citar

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.

A este ejercicio yo lo resolví utilizando dos métodos diferentes, que me dieron un resultado casi idéntico (en ambos casos, los elementos div se visualizan en forma concéntrica).

MÉTODO 1:

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>ejercicio2position</title>
<link rel="stylesheet" type="text/CSS" href="ej2positionMetodo1.css"/>
</head>
<body>
 <div id="grande"></div>
 <div id="mediana"></div>
 <div id="chica"></div>
</body>
</html>

Código: [Seleccionar]

#grande{ width:600px;
         height:600px;
         background-color:yellow;
         position:absolute;left:200px;top:0px;         
}
#mediana{width:400px;
         height:400px;
         background-color:green;
         position:absolute;left:300px;top:100px;         
         }
#chica{width:100px;
       height:100px;
       background-color:blue;
       Position:absolute;left:450px;top:250px;
       }

MÉTODO 2:

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8"/>
<title>Ejercicio 2 Position (Método 2)</title>
<link rel="stylesheet" type="text/CSS" href="ej2positionMetodo2.css"/>
</head>
<body>
 <div id="grande">
  <div id="mediana">
   <div id="chica">
   </div>
  </div>
 </div>
</body>
</html>

Código: [Seleccionar]

#grande{width:600px;
        height:600px;
        background-color:yellow;
        position:absolute;left:200px;
        }
#mediana{width:400px;
         height:400px;
         background-color:green;
         position:absolute;left:100px;top:100px;
         }
#chica{width:100px;
       height:100px;
       background-color:blue;
       position:absolute;left:150px;top:150px;
       }

Ogramar · « **Respuesta #2 en:** 03 de Junio 2015, 08:31 »

EJERCICIO 1

Hola Elanti para el ejercicio 1 he probado el código en varios navegadores introduciendo el css dentro del mismo archivo html y en todos los navegadores se muestra bien.

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejercicio propiedad position</title>
<style type="text/css">
#DivPadre{border:solid 5px green;
}
div div{width:300px;
      height:300px;
      margin:40px;
      padding:30px;
}
#div1{background-color:magenta;
      position:relative;left:200px;top:100px;
}
#div2{background-color:cyan;
      position:relative;right:50px;bottom:50px;
}
#div3{background-color:skyblue;
      position:relative;left:450px;bottom:300px;
}

</style>
</head>
<body>
<div id="DivPadre">
 <div id="div1"></div>
 <div id="div2"></div>
 <div id="div3"></div>
</div>
</body>
</html>

Creo que el problema puede estar en la ruta que has puesto con barra final <link type="text/CCS" rel="stylesheet" href="estilosposition.css"/> quítale esa barra final déjalo <link type="text/CCS" rel="stylesheet" href="estilosposition.css">

Salu2

Ogramar · « **Respuesta #3 en:** 03 de Junio 2015, 08:40 »

EJERCICIO 2

Lo tienes bien resuelto aunque no has hecho exactamente lo que pedía el ejercicio. Cuando dice "establece el mismo origen" yo entiendo que se refiere a que la esquina superior izquierda de los tres div tiene que tener el mismo punto de partida como en este ejemplo

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>ejercicio2position</title>
<style type="text/css">
#grande{ width:600px;
         height:600px;
         background-color:yellow;
         position:absolute;left:200px;top:0px;         
}
#mediana{width:400px;
         height:400px;
         background-color:green;
         position:absolute;left:200px;top:0px;         
         }
#chica{width:100px;
       height:100px;
       background-color:blue;
       Position:absolute;left:200px;top:0px;
       }
</style>

</head>
<body>
 <div id="grande"></div>
 <div id="mediana"></div>
 <div id="chica"></div>
</body>
</html>

Salu2

Elanti · « **Respuesta #4 en:** 03 de Junio 2015, 15:58 »

Hola, Ogramar:
Muchas gracias por tomarte la molestia de revisar mis respuestas.
Efectivamente, con el código CSS insertado dentro del HTML puedo ver el ejercicio 1 en cualquier navegador… pero cuando los separo, sólo Chrome es capaz de mostrarlo. Hice el intento de quitarle la barra final, como me dijiste, pero fue inútil. Lo extraño es que no me había ocurrido esto con ninguno de los ejercicios anteriores.
El ejercicio 2, tal vez no comprendí cómo tenía que ser exactamente el resultado final, pero me quedo tranquilo de que supe utilizar bien la propiedad "position".
Muchas gracias nuevamente.
Saludos.

Ogramar · « **Respuesta #5 en:** 03 de Junio 2015, 17:26 »

Hola como te he comentado yo visualizo bien en firefox ¿puede ser que tengas una versión antigua de firefox? ¿El código que puse yo no logras visualizarlo en firefox?

Elanti · « **Respuesta #6 en:** 03 de Junio 2015, 17:46 »

Sí, el que pusiste tú sí lo puedo ver en Firefox, pero tiene el CSS adentro del HTML. El problema que tengo con este ejercicio en particular, aparece cuando separo el CSS y el HTML en dos archivos diferentes.
Mi Firefox no está actualizado, pero aún así es capaz de mostrar este ejercicio cuando le inserto el CSS dentro del HTML. Por otra parte, no sé si será un código tan complicado para requerir una versión más reciente del navegador. No sé…

Ogramar · « **Respuesta #7 en:** 03 de Junio 2015, 17:59 »

Por lo que dices pienso que puede ser algún problema con el archivo: que esté corrupto, o que el juego de caracteres no sea el correcto o algo así. Prueba a generar los archivos desde cero pasando el código por el bloc de notas primero para limpiarlo de posibles caracteres extraños.

Salu2

Elanti · « **Respuesta #8 en:** 03 de Junio 2015, 18:33 »

¡Ja,ja,ja! Ya encontré el error. En el link al archivo CSS, donde dice:

<link type="text/CCS" rel="stylesheet" href="estilosposition.css"/>

debería decir:

<link type="text/CSS" rel="stylesheet" href="estilosposition.css"/>

Una letra de diferencia. A Chrome no le importaba, pero a los otros navegadores, sí.
¡Gracias!

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

Noticias:

Autor Tema: CSS position relative y absolute diferencias y ejemplos Ejercicio CU01032D (Leído 6362 veces)

Elanti

CSS position relative y absolute diferencias y ejemplos Ejercicio CU01032D

Elanti

Propiedad position CSS (CU01032D), ejercicio 2

Ogramar

Re:CSS position relative y absolute diferencias y ejemplos Ejercicio CU01032D

Ogramar

Re:CSS position relative y absolute diferencias y ejemplos Ejercicio CU01032D

Elanti

Re:CSS position relative y absolute diferencias y ejemplos Ejercicio CU01032D

Ogramar

Re:CSS position relative y absolute diferencias y ejemplos Ejercicio CU01032D

Elanti

Re:CSS position relative y absolute diferencias y ejemplos Ejercicio CU01032D

Ogramar

Re:CSS position relative y absolute diferencias y ejemplos Ejercicio CU01032D

Elanti

Re:CSS position relative y absolute diferencias y ejemplos Ejercicio CU01032D

Preguntas y respuestas