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 23 de Abril 2015, 04:14
-
Enunciado:
Crea un documento HTML con 4 elementos div de 400 píxeles de ancho y 400 píxeles de alto, todos ellos con un margin de 40 píxeles en todas direcciones y un padding de 40 píxeles en todas direcciones. En cada uno de los elementos div crea un borde y coloca una imagen de fondo diferente y un background-color diferente. Usa la propiedad background-position para hacer que la imagen esté centrada tanto vertical como horizontalmente respecto al borde del div (por ejemplo, si una imagen mide 100x100 píxeles, deberá existir la misma distancia hasta el borde del div en las cuatro direcciones).
Respuestas:
html
<!Doctype hmtl>
<html lang="es">
<head>
<title>border</title>
<meta name="description" content="ejercicio de aprender a programar con
border">
<meta name="keywords" content="border programar css html">
<meta charset="utf-8">
<link rel="stylesheet" href="css/ejercicio_propiedades_background.css">
</head>
<body>
<div id="caja_1" class="cajas">
caja
</div>
<div id="caja_2" class="cajas">
caja
</div>
<div id="caja_3" class="cajas">
caja
</div>
<div id="caja_4" class="cajas">
caja
</div>
<footer id="pie_de_pagina">
Hecho por carlos enrique gil chong
</footer>
</body>
</html>
css
marigin: 0px;
padding: 0px;
}
body{
text-align: center;
background-color: silver;}
.cajas{
width: 400px;
height: 400px;
margin: 40px;
padding: 40px;
border: solid white 5px;
}
#caja_1{
background-image: url(http://coyotechronicle.net/wp-
content/uploads/2014/05/real-madrid-logos-
0424182101.jpg);
background-color: purple;
background-size: 480px 480px;
background-repeat: no-repeat;
}
#caja_2{
background-image: url(https://encrypted-
tbn2.gstatic.com/images?q=tbn:ANd9GcQq3-
tT90U2KikyS6GRyUjTPwH8G8MKDY9Hif7ZQ2QEKxYf32Qe);
background-color: orange;
background-size: 480px 480px;
background-repeat: no-repeat;
}
#caja_3{
background-image: url(http://life-
famous.com/celebrities/jim-morrison/jim-morrison-01.jpg);
background-color: orange;
background-size: 440px 440px;
background-repeat: no-repeat;
background-position: 20px 20px;
}
#caja_4{
background-image: url(https://encrypted-
tbn3.gstatic.com/images?
q=tbn:ANd9GcRZe5AvsN7toIAt4c04Kb4NJVy8xsggf4_TmaJKC4td8A6
jtUMX7g);
background-color: black;
background-size: 440px 440px;
background-repeat: no-repeat;
background-position: 20px 20px;
}
-
Hola donde dice
marigin: 0px;
padding: 0px;
}
debe decir
*{
margin: 0px;
padding: 0px;
}
También hay algún problema cuando pegas el código por ejemplo se pega
#caja_2{
background-image: url(https://encrypted-
tbn2.gstatic.com/images?q=tbn:ANd9GcQq3-
tT90U2KikyS6GRyUjTPwH8G8MKDY9Hif7ZQ2QEKxYf32Qe);
Cuando lo correcto sería
#caja_2{
background-image: url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQq3-tT90U2KikyS6GRyUjTPwH8G8MKDY9Hif7ZQ2QEKxYf32Qe);
Por eso si se copia el código como lo has pegado no se ven las imágenes
Lo demás el ejercicio está bien
Saludos!!
-
ya revise mi codigo y se ve bien en mi bloc de notas el problema es cuando lo paso aqui se modifica siempre, voy a tener que revisar bien cuando lo pase al foro.
gracias cesar
-
Hola si lo estás haciendo con bloc de notas en el menú Formato hay una opción "Ajuste de línea", desactívala para ver si así se corrige el problema.
Saludos!!