Mostrar Mensajes

Esta sección te permite ver todos los posts escritos por este usuario. Ten en cuenta que sólo puedes ver los posts escritos en zonas a las que tienes acceso en este momento.


Mensajes - Pandemia

Páginas: 1 ... 7 8 9 10 11 [12] 13
221
Buenas noches amigos aquí os dejo el ejercicio para ver que tal esta, como siempre muchas gracias por vuestro tiempo , me estáis ayudando mucho y estoy aprendiando mucho.

muchas gracias por todo

saludos


Ejercicio CU01039D, analiza el código anterio y responde a las siguientes preguntas:


   a) ¿Cuántas cajas contenedoras hay? ¿Están identificadas por id o por class?
   
      Respuesta:
      
      Hay 3 cajas contenedoras y estan identificadas por id.
      
   b) ¿Cuál es el grosor del borde de la caja azul y en qué unidades está expresado?

      Respuesta:
      
      El grosor es de 3 y está expresado en pixeles
      
   c) ¿Por qué se superponen unas cajas encima de otras? ¿En qué orden aparecen las cajas superpuestas (es decir, cuál está
      arriba, cuál está en posición intermedia y cuál está en el fondo)? ¿Por qué aparecen con ese orden y no otro?
      
      Respuesta:
      
      Las cajas se superponen porque el navegador establece el orden normal. Hay superposición porque se establecen margin
      negativos y esto hace que un div se desplace superponiendose uno encima de otro. primero está la caja gris, segunda la caja
      azul y tercera la caja ocre. Se superponen por las propiedades margin hacen que entren una dentro de la otra; así mediante
      el código HTML, está encima la caja ocre, luego la caja azul, y al final la caja gris.
      
   d) Queremos que la caja gris se sitúe por encima del resto de cajas. ¿Qué modificaciones en el código hemos de hacer para
      lograr este objetivo?   
      
      Respuesta:
      
      Para que la caja gris se situe encima de las demas solo tenemos que colocarla en distinta dimensión, y esto lo conseguimos
      posicionandola añadiendole las propiedades #cajagris{z-index: 10; position: absolute;}. El código HTML quedará de esta manera:
      
   
Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es">

<head>
<meta name="description" content="portal web - Aprenderaprogramar.com">
<meta name="keywords" content="z-index control de superposición de elementos como capas, div, o imágenes">
<meta charset="utf-8">
<title>Ejemplo Aprenderaprogramar.com</title>

<style type="text/css">

*{font-family: sans-serif;}
#cajagris{
width:225px;
height: 225px;
border: solid 1px #ccc;
background: #ddd;
margin-top: 20px;
z-index: 10;
position: absolute;
}
#cajaazul{
width: 225px;
height: 225px;
border: solid 3px #4a7497;
background: #8daac3;
margin-top: -50px;
margin-left: 50px;
}
#cajaocre{
width: 225px;
height: 225px;
border: solid 2px #8b6125;
background: #ba945d;
margin-top: -50px;
margin-left: 100px;
margin-bottom: 20px;

}


</style>

</head>
<body>

<div id="cajagris">

Caja Gris

</div>


<div id="cajaazul">

Caja Azul

</div>


<div id="cajaocre">

Caja Ocre

</div>
</body>
</html>

       

   e)Código HTML:


Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es">

<head>
<meta name="description" content="portal web - Aprenderaprogramar.com">
<meta name="keywords" content="z-index control de superposición de elementos como capas, div, o imágenes">
<meta charset="utf-8">
<title>Ejemplo Aprenderaprogramar.com</title>

<style type="text/css">

*{font-family: sans-serif;}
#cajagris{
width:225px;
height: 225px;
border: solid 1px #ccc;
background: #ddd;
margin-top: 20px;
z-index: 1;
position: relative;
}
#cajaazul{
width: 225px;
height: 225px;
border: solid 3px #4a7497;
background: #8daac3;
margin-top: -50px;
margin-left: 50px;
position: relative;
}
#cajaocre{
width: 225px;
height: 225px;
border: solid 2px #8b6125;
background: #ba945d;
margin-top: -50px;
margin-left: 100px;
margin-bottom: 20px;

}


</style>

</head>
<body>

<div id="cajagris">

Caja Gris

</div>


<div id="cajaazul">

Caja Azul

</div>


<div id="cajaocre">

Caja Ocre

</div>
</body>
</html>


222
Ejercicio CU01038D del curso de css desde cero, aquí os dejo el código.

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es">

<head>
<meta name="description" content="Portal web - Aprenderaprogramar.com">
<meta name="keywords" content="overflow css. propiedad visibility.">
<meta charset="utf-8">
<title>Propiedades visibility y overflow en css.</title>
<style>
*{font-family: arial;}
#caja{
width: 200px;
height: 200px;
background-color: yellow;
border-color: blue;
border-width: 2px;
border-style: solid;
font-size: 30px;
overflow: scroll;
}



</style>
</head>
<body>

<div id="caja">
Fuente primaria quot;LA PRESENTE DECLARACIÓN UNIVERSAL DE DERECHOS HUMANOS como ideal común por el que todos los
pueblos y naciones deben esforzarse, a fin de que tanto los individuos como las instituciones, inspirándose constantemente
en ella, promuevan, mediante la enseñanza y la educación, el respeto a estos derechos y libertades, y aseguren, por medidas
progresivas de carácter nacional e internacional, su reconocimiento y aplicación universales y efectivos, tanto entre
los pueblos de los Estados Miembros (...). ARTÍCULO 1.- Todos los seres humanos nacen libres e iguales en dignidad y
derechos y, dotados como están de razón y conciencia, deben comportarse fraternalmente los unos con los otros.
ARTÍCULO 2.- 1. Toda persona tiene todos los derechos y libertades proclamados en esta Declaración, sin distinción
alguna de raza, color, sexo, idioma, religión, opinión política o de cualquier otra índole, origen nacional o social,
posición económica, nacimiento o cualquier otra condición. 2. Además, no se hará distinción alguna fundada en la
condición política, jurídica o internacional del país o territorio (...). ARTÍCULO 3.- Todo individuo tiene derecho a
la vida, a la libertad y a la seguridad de su persona.

</div>


</body>






</html>


223
Buenas noches Cesar ayer estuve toda la tarde con el buscador del foro mirando los ejercicios de otros compañeros y la verdad es que me fijé en un par que tenían el div central para las dos cajas centrales pero se me pasó o no les hice caso y  ya es que no veía de tanto buscar, de todas maneras muchas gracias por tu tiempo me has ayudado mucho como siempre, saludos.

Bermartinv gracias por tomarte las molestias de hacer el código, pero es que quería ceñirme lo mas posible al ejercicio y poner bordes y todo de todas maderas me ha ayudado ver como lo has echo tú. Gracias por tu tiempo y las molestias que te has tomado

Me habéis ayudado mucho como siempre

saludos


Aquí os dejo el código haber que os parece.

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es">

<head>
<meta name="description" content="portal web - Aprenprenderaprogramar.com">
<meta name="keywords" content="diseño web CSS con varias columnas con float "><meta charset="utf-8">
<style>
*{font-family: arial;}

body{
width: 900px;
border-style: dotted;
border-width: 1px;
}
div{
border-style: solid;
text-align: center;
border-width: 2px;
margin: 7px;padding: 7px;
}
#cabecera{
background-color: #ADD8E6;
height: 30px;

}
#col_izq{
width: 25%;
background-color: yellow;
float: left;
height: 150px;
}
#cajas{
float:left;
     width: 39%;
     background-color: #90EE90; 
}
#caja1,#caja2{
float: left;
height: 75px;
}

#col_der{
width: 25%;
height: 150px;
background-color: yellow;
float: right;
clear: right;
}
#caja_1{
width: 45.8%;
height: 50px;
background-color: #DDA0DD;
float: left;
clear: both;
}
#footer{
width: 45.8%;
height: 50px;
background-color: pink;
float: right;

}
.limpiador{
clear: both;
padding: 0;
border-style: none;
}
</style>
<title>Diseño web con CSS con varias columnas con float.</title>
</head>
<body>

<!--cabecera de la página-->
<div id="cabecera">Bienvenidos a aprenderaprogramar.com</div>

<!--columna izquierda-->
<div id="col_izq">
Menú<br/>
<ul>
<li>Cursos</li>
<li>Humor</li>
<li>Divulgación</li>
</ul>

</div>
<!--las cajas centrales van en un div contenedor aparte-->
<div id="cajas">

<!--1ª caja central (arriba)-->
<div id="caja1">Conoce las últimas novedades del lenguaje Javascript.</div>

<!--2ª caja central (abajo)-->
<div id="caja2">Articulo sobre Gimp, un programa sobre software libre para el diseño gráfico.</div>

</div>

<!--columna derecha-->
<div id="col_der">Espacio reservado para publicidad</div>

<!--caja izquierda-->
<div id="caja_1">Contacta con nosotros</div>

<!--caja derecha-->
<div id="footer">Aviso legal</div>
<div class="limpiador"></div>
</body>
</html>


224
Buenas noches amigos, os pido ayuda con este ejercicio porque me está costando sangre sudor y lagrimas, he llegado a un punto de no retorno en el que e dicho que no puedo con el quisiera que me echaseis una mano haber donde esta está el fallo, porque he consultado todo lo que he podido y mas yo creo que debe ser algo que se me pasa pero vosotros tenéis más experiencia y lo veréis más rápido; bueno como siempre muchas gracias de antemano por vuestro tiempo y saludos.

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es">

<head>
<meta name="description" content="portal web - Aprenprenderaprogramar.com">
<meta name="keywords" content="diseño web CSS con varias columnas con float "><meta charset="utf-8">
<style>
*{font-family: arial;}

body{
width: 900px;
border-style: dotted;
border-width: 1px;
}
div{
border-style: solid;
text-align: center;
border-width: 2px;
margin: 7px;padding: 7px;
}
#cabecera{
background-color: #ADD8E6;
height: 30px;

}
#col_izq{
width: 25%;
background-color: yellow;
float: left;
height: 150px;
}
#caja1{
width: 50%;
background-color: #ADD8E6;
float: left;
}
#caja2{
width: 50%;
background-color: #90EE90;
float: left;

}
#col_der{
width: 25%;
height: 150px;
background-color: yellow;
float: right;
clear: left;
height: 150px;
}
#caja_1{
width: 418px;
height: 50px;
background-color: #DDA0DD;
float: left;
clear: both;
}
#footer{
width: 418px;
height: 50px;
background-color: pink;
float: right;

}
.limpiador{
clear: both;
padding: 0;
border-style: none;
}
</style>
<title>Diseño web con CSS con varias columnas con float.</title>
</head>
<body>

<!--cabecera de la página-->
<div id="cabecera">Bienvenidos a aprenderaprogramar.com</div>

<!--columna izquierda-->
<div id="col_izq">
Menú<br/>
<ul>
<li>Cursos</li>
<li>Humor</li>
<li>Divulgación</li>
</ul>

</div>

<!--1ª caja central (arriba)-->
<div id="caja1">Conoce las últimas novedades del lenguaje Javascript.</div>

<!--2ª caja central (abajo)-->
<div id="caja2">Articulo sobre Gimp, un programa sobre software libre para el diseño gráfico.</div>

<!--columna derecha-->
<div id="col_der">Espacio reservado para publicidad</div>

<!--caja izquierda-->
<div id="caja_1">Contacta con nosotros</div>

<!--caja derecha-->
<div id="footer">Aviso legal</div>
<div class="limpiador"></div>
</body>
</html>


225
Ok, bermartinv valla fallo lo que tú dices con tanto código css se me ha pasado el height: 5px, en lugar de height: 50px; ahora lo cambiaré. Muchas gracias por tu ayuda


Gracias
Saludos

226
Buenas noches amigos aquí os dejo  el ejercicio CU01035D del tutorial CSS desde cero para que le echéis un vistazo. Gracias de antemano por vuestro tiempo. Ah se me olvidaba en la 3º  caja del tercer ejercicio el color solo sale por arriba lo he probado todo y no hay manera, a ver si me podéis ayudar.

Gracias y Saludos

Código: [Seleccionar]

<!DOCTYPE html>
<html lanng="es">

<head>
<meta name="description" content="Portal web - Aprenderaprogramar.com">
<meta name="keywords" content="clear css: left, right, both.">
<meta charset="utf-8">
<title>Clear CSS: left, right, both.</title>

<style>
#a{text-align: center; border-style: dotted;background-color: orange;}
#caja1, #caja2, #caja3, #caja4, #caja5, #caja6, #caja7, #caja7, #caja8{
width:50px;height: 50px;margin-right: 5px;border: solid;
}
#caja1{
background-color: red;
float: left;
}
#caja2{
background-color: blue;
float: left;
}
#caja3{
background-color: yellow;
float: left;
}
#caja4{
background-color: greenyellow;
float: left;
}
#caja5{
background-color: pink;
float: left;
}
#caja6{
background-color: darkmagenta;
float: left;
}
#caja7{
background-color: forestgreen;
float:left;
}
#caja8{
background-color: dodgerblue;
float: left;
}
.limpiador{
clear: both;
border: none;
height: 0;
}
#b{text-align: center;border-style: dotted;background-color: orange;}
#header{
text-align: center;
border-style: double;
background-color:yellow;
}
#texto{
background-color: yellow;
margin-top: 20px;
margin-bottom: 20px;
}

#c{
text-align: center;border-style: dashed;background-color: orange;
}



#caja_1{
text-align: center;
width: 200px;
height: 50px;
margin-right: 5px;
background-color: yellow;
float: right;
}
#caja_2{
text-align: center;
width: 200px;
height: 50px;
margin-right: 5px;
background-color: Purple;
float: right;
}
#caja_3{
text-align: center;
width:200px;
height: 5px;
margin-right: 5px;
background-color: pink;
float: right;
}
#d{text-align: center; border-style: solid;background-color: orange;}

#final{
background-color: #DEB887;
        clear: both;
}


</style>
</head>
<body>
<div id="a">Ejercicio a:</div>  <br/>

<div id="menu">

<div id="caja1">caja1</div>
<div id="caja2">caja2</div>
<div id="caja3">caja3</div>
<div id="caja4">caja4</div>
<div id="caja5">caja5</div>
<div id="caja6">caja6</div>
<div id="caja7">caja7</div>
<div id="caja8">caja8</div>
<div class="limpiador"></div>
</div>
<br/><br/><br/><br/>

<div id="b">Ejercicio b:</div>
<br/><br/>
<div id="header">Textos bonitos</div><br/><br/>
<br/>
<div id="texto">
<br/>
De nuevo, estoy al final de un momento decisivo. Un momento que llevas tanto tiempo esperando... que ahora casi decepciona.
Es el final y el comienzo al miesmo tiempo. Y no estoy segura de si esta sensación del estómago es por miedo, por ilusión.
No sé a qué me voy a tener que enfrentar. Ni a qué mala gente tendré que luchar. No sé si me quedaré sola por el camino,
me dejaré ganar o algo por el estilo.<br/><br/>


Pero es un momento decisivo. En el que por fin puedo decidir completamente cual quiero que sea mi próximo destino,
mi próxima puerta a la que llegar. Esta vez soy sólo yo quien decido los monstruos contra los que pelear.<br/><br/>

El miedo sigue ahí, y la ilusión y la decepción. Pero aun con todos los sentimientos confundidos, voy a ir entrando
fuerte, voy a ir dejando mis huellas en este nuevo camino.<br/><br/>

</div>

<div id="c">Ejercicio c:</div>
<br/><br/>
<div id="menu">

<div id="caja_1">caja_1</div>
<div id="caja_2">caja_2</div>
<div id="caja_3">caja_3</div>

</div><br/><br/><br/><br/>

<div id="d">Ejercicio d:</div><br/><br/>

<div id="final">Curso CSS aprenderaprogramar.com</div>


</body>
</html>

   

227
Buenas noches amigos aquí os dejo el ejercicio de la entrega CU01034D por si le podéis echar un vistazo

Gracias por vuestro tiempo

Saludos


/*Concepto float CSS. None, left, right. Colocar texto alrededor de una imagen. Ejemplos de posicionamiento*/


Ejercicio.   CU01034D del curso de CSS

Para cada una de las siguientes afirmaciones indica si es verdadera o falsa, y justifica brevemente tu respuesta:

a) La propiedad float puede tomar cuatro valores: top, right, bottom y left.

   Respuesta:
      Falsa. Solo toma none, right y left
      
b) float es una propiedad que nos permite maquetar páginas web (documentos HTML).

   Respuesta:
      Verdadera. Es una forma de colocar los elementos block, haciendo que los elementos posteriores lo traten como inline (parcialmente) rellenando el espacio que deja al definirlo como right o left.
      
c) Usando float: center; podemos centrar el contenido de un elemento respecto de su caja contenedora.

   Respuesta:
      Falsa. No existe un valor center para esta propiedad. Unicamente sirve para "arrastrar" elementos hacia izquierda o derecha
      
d) Un elemento flotante sale del flujo normal de posicionamiento de elementos en una página web.

   Respuesta:
      Verdadera. Los bordes, imagenes de fondo de los elementos envolventes se sitúan debajo de los elementos flotantes a los que envuelven.
      
e) Todos los elementos a continuación de un elemento flotante lo envuelven, a no ser que especifiquemos lo contrario usando la propiedad clear.

   Respuesta:
      Verdadera. En ocasiones no se quiere que la flotación de un elemento afecte el posicionamiento del elemento siguiente en estos casos se puede utilizar la propiedad clear.
      


228
Buenas noches Mario tienes razón de esta manera se ahorran lineas y se ve más limpio el css
#a, #b, #c {width: 300px;height: 300px;} . ya he modificado el código del ejercicio 1º,


En cuanto al 2º ejercicio yo creo que el problema me venia porque solo miraba el html en el navegador de crome y ahí me salia todo perfecto, pero cuando he leído tu mensaje he caído y lo he comprobado en firefox también y he visto el fallo, cada navegador se comporta de manera distinta pero he modificado el código como me has dicho y se ve bien en todos,
Ya he definido los valores height en el elemento id párrafo_2 del ejercicio 3º.

Aquí os dejo los códigos rectificados, gracias por vuestro tiempo, estoy aprendiendo mucho gracias a vosotros.

saludos.

Ejercicio 1º

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es">

<head>
<meta name="description" content="aprenderaprogramar.com">
<meta name="keywords" content="propiedad position de css">
<meta charset="utf-8">
<title>Propiedad position de CSS</title>

<style>
/*Propiedad positión CSS: static, relative, absolute, fixed.*/

#header{
text-align: center;
border-style: dashed;
}
#padre{
width: 900px;height:1300px;
border-style: double;
}
#a, #b, #c{width: 300px;height: 300px;}

#a{
   margin: 40px;padding: 30px;background-color: yellow;
   position: relative;left: 200px;top: 100px;
   }
#b{
   margin: 40px;padding: 30px;background-color: blue;
   position: relative;right: 50px;bottom: 50px;
   }
#c{
   margin: 40px;padding: 30px;background-color: rgb(188, 64, 64);
   position: relative;left: 450px;bottom: 300px;
   }

.footer{
border-style: dotted;
        width: 95px;height: 50px;
}
</style>

</head>

<body>

<div id="header">

<h1>Propiedad positión css: static, relative, absolute, fixed.</h1>

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

<div ="menu">

<div id="a"></div>
<div id="b"></div>
<div id="c"></div>

</div>

</div>

<br/><br/>
<div class="footer">

Realizado por PANDEMIA.

</div>


</body>


</html>


Ejercicio 3º

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es">

<head>
<meta name="description" content="Aprenderaprogramar.com">
<meta name="keywords" content="propiedad position css. Ejercicio 3º">
<meta charset="utf-8">
<title>Propiedad positión CSS</title>
<style>
#cookies{

height: 100px;
background-color: yellow;
position: fixed;
}
#parrafo{
width:900px;
border-style: solid;
border-color: red;
border-width: 4px;
}
#parrafo_2{
width:900px;
border-style: dashed;
border-color: green;
border-width: 4px;
}
#parrafo_3{
width: 1000px;
border-style: dotted;
border-color: blue;
border-width: 4px;
}

</style>

</head>
<body>
<div id="cookies">
Esta página web utiliza cookies. Si continúa navegando acepta el uso de las cookies.
</div>
<br/><br/><br/>
<h3>Frases de libros famosos que hay que leer</h3><br/><br/>

<div id="parrafo">
<br/><br/>
1-Nuestras vidas se definen por las oportunidades, incluso las que perdemos.-El curioso caso de Benjamin Button de F. Scott Fitzgerald.<br/>

2-Qué maravilloso es que nadie necesita un solo momento antes de comenzar a mejorar el mundo.-El diario de Ana Frank.<br>

3-El hombre razonable se adapta al mundo: el hombre no razonable persiste en intentar adaptar el mundo a si mismo. Por tanto, todo progreso depende del hombre no razonable.-Hombre y superhombre de George Bernad Shaw.<br/>

4-No hay felicidad o infelicidad en este mundo; solo hay comparación de un estado con otro. Solo un hombre que ha sentido la máxima desesperación es capaz de sentir la máxima felicidad. Es necesario haber deseado morir para saber lo bueno que es vivir.-El conde de Monte Cristo de Alexandre Dumas.<br/>

5-La muerte destroza al hombre: la idea de la muerte le salva.-Howards End de E. M. Forster.<br/>

6-Cuando amamos, siempre nos esforzamos por ser mejores de lo que somos. Cuando nos esforzamos por ser mejor de lo que somos, todo a nuestro alrededor se vuelve mejor.-El Alquimista de Paulo Coelho.<br/>

7-Es mejor mirar al cielo que vivir allí.-Desayuno con diamantes de Truman Capote.<br/>

8-Deja de preocuparte por envejecer y piensa en crecer.-El animal moribundo de Philip Roth.<br/>

9-Querían hablar, pero no pudieron; había lagrimas en sus ojos. Ambos estaban pálidos y delgados; pero aquellos rostros pálidos estaban iluminados con el amanecer de un nuevo futuro. Crimen y castigo de Fiódor Dostoyevski.<br/>

10-No tengo idea de qué me espera, o que ocurrirá cuando todo esto termine. Por el momento se esto: hay gente enferma y necesito curarlas.-La plaga de Albert Camus.
</div>
<br/><br/>

<h3>Párrafos inolvidables</h3><br/><br/>
<div id="parrafo_2">
<br/><br/>
"Amor: una sola palabra, una cosa pequeña, una palabra no mayor ni más larga que el filo de una navaja. Eso es lo que es: una cuchilla. Corta tu vida por el centro, separándolo todo en dos, haciendo que caiga a uno u otro lado. Antes y después.
Antes y después. Pero también durante: un instante no mayor ni más largo que el filo de una navaja."
<br/><br/>
"Amor, la más mortal de las cosas mortales. Te mata tanto cuando la tienes como cuando no la tienes.
Pero no es así exactamente.
Eres el que condena y el condenado. El verdugo, la cuchilla, el indulto de última hora, la respiración jadeante y el cielo tormentoso y el «gracias, gracias, gracias, Dios».
Amor: te mata y te salva a la vez."
<br/><br/>

En ese instante se oyó un fuerte estrépito: Hermione había soltado los colmillos de basilisco que llevaba en los brazos. Corrió hacia Ron, se le echó al cuello y le plantó un beso en la boca. El chico soltó también los colmillos y la escoba y le devolvió el beso con tanto entusiasmo que la levantó del suelo.
- ¿Os parece que es el momento más oportuno? - preguntó Harry con un hilo de voz, y como no le hicieron ni caso, sino que se abrazaron aún más fuerte y se balancearon un poco, gritó -: ¡Eh! ¡Que estamos en guerra!
Ambos se separaron un poco, pero siguieron abrazados.
- Ya lo sé, colega - dijo Ron con cara de atontado, como si acabaran de darle en la cabeza con una bludger - Precisamente por eso. O ahora o nunca, ¿no?'
</div>
<br/><br/>
<h3>Frases de libros</h3>
<br/><br/>
<div id="parrafo_3">
<br/>
-Saber apreciar la belleza, no es lo mismo que sentir debilidad. ( En llamas)<br/>



-Dibujar algo es intentar capturarlo para siempre. ( Cazadores de sombras)<br/>


-Amar es destruir y ser amado es ser destruido (Ciudad de hueso)<br/>


-Pero la música es vida, y mientras suene nada muere para siempre (contra el viento del norte)<br/>


- Para hacerse un enemigo no se necesita nada. Mejor dicho, hasta es fácil... En cambio, el verdadero honor estriba en saber hacerse un amigo. Tienes que querer, ser querido, currártelo, ser leal, ser amado... y eso es mucho más difícil, más trabajoso, pero también más hermoso. (Federico Moccia)<br/>


-Estoy fuera de los recuerdos, del pasado, pero también estoy perdido. Antes o después las cosas que has dejado atrás te alcanzan, y las cosas más estúpidas, cuando estas enamorado, las recuerdas como las más bonitas... Porque su simplicidad no tiene comparación. Y me dan ganas de gritar. En este silencio que hace daño... (Federico Moccia)<br/>



-La única cosa verdaderamente importante, la única cosa que cuenta de verdad, es darle un sentido a la propia vida, aunque esta carezca de sentido, porque la felicidades no es una meta... si no un estilo de vida. (Perdona si te llamo amor)<br/>



-Sintonizar...¿qué querrá decir?. La sintonía es algo que tiene que ver con la música, o peor aún, con los circuitos. El amor, en cambio, es cuando no respiras, cuando es absurdo, cuando echas de menos, cuando es bonito aunque esté desafinado, cuando es locura... Cuando sólo de pensar en verlo con otra cruzarías a nado el océano... (Perdona si te llamo amor)<br/>



-Soñamos con el amor, lo perseguimos, lo encontramos y luego acabamos perdiéndolo. Día tras día, pensando que lo bueno estaba aún por llegar, esperando... y sin darnos cuenta acabamos perdidos en el presente. El amor es cuando no respiras, cuando es absurdo, cuando echas de menos, cuando es bonito aunque esté desafinado, cuando es locura... (Tengo ganas de ti)<br/>



-Hay pocas razones para decir la verdad, pero para mentir el número es infinito. (Carlos Ruiz Zafón)<br/>



-Las casualidades son las cicatrices del destino. No hay casualidades, somos títeres de nuestra inconsciencia. (Carlos Ruiz Zafón)<br/>



-Creía que la vida nos concede a cada uno de nosotros unos escasos momentos de pura felicidad. A veces son sólo días o semanas. A veces, años. Todo depende de nuestra fortuna. El recuerdo de esos momentos nos acompaña para siempre y se transforma en un país de la memoria al que tratamos de regresar durante el resto de nuestra vida sin conseguirlo. (Marina)<br/>



-No había un momento específico. Era como poco a poco despertarte. Pasas de estar dormido, en el espacio entre el sueño la vigilia y la conciencia. Es un proceso lento, pero cuando estás despierto, no te puedes confundir. No había duda de que estás enamorado.(we"ll always have summer)<br/>



" Qué fecha, a qué hora, nace un amor es algo difícil de precisar. ¿Nace la primera vez que vemos a la persona amada? ¿O la primera vez que, al buscarle los ojos, nos encontramos correspondidos con la misma mirada, esa que no pretende ver sino entrar a través de las pupilas? ¿Nace la primera vez que pronunciamos su nombre como si invocáramos todo el universo? ¿Nace cuando se dice, cuando se reconoce <>? ¿Nace y crece tan poco a poco que no se sabe cuándo nació? Nadie registra, cronómetro en mano, la fecha de nacimiento de un amor. Pero todo el mundo necesita un número rodeado con rotulador rojo en el calendario."<br/>



Pomelo y limón de Begoña Oro

-La vida real no está confinada por dimensiones exactas. Se extiende mas allá de los límites. Viene con defectos. Las cosas nunca son fáciles, en especial cuando tú esperas que lo sean. Como cuando las personas te decepcionan porque resultan ser completamente diferentes de quienes pensabas que eran. (So much closer- Susanne Collanti)<br/>





 
-Una pelea es como el fuego. Crees que lo tienes bajo control, crees que puedes detenerlo cuando quieras, pero antes de darte cuenta, está ardierdo, y no hay manera de controlarlo y fuiste tonta por creer que podrías hacerlo.<br/>





-Todo en la vida tiene un momento que lo cambia por completo. El momento no depende de alguien más, pero tu díficlmente sabes cuando éste ha llegado.<br/>



-Son las imperfecciones de una persona lo que la hacen perfecta para alguien más.<br/>



-"Los momentos cuando se pierden, no se pueden encontrar de nuevo. Sólo han pasado."<br/>



-“No importa que hagas o a dónde vayas para distraerte, la realidad te alcanza en algún momento”<br/>



-"Nada graba tan fijamente una cosa en nuestra memoria como el deseo de olvidarla".<br/>



-No es malo tener miedo, lo malo es dejar que el miedo domine tu vida, porque entonces no tendrás vida, solo miedo.<br/>



-A veces nos creemos que las personas son décimos de loteria: que están ahí para hacer realidad nuestras ilusiones absurdas.<br/>



-Los que mueren de verdad son los que no viven. Los que se reprimen porque los asusta el qué dirán. Los que hacen descuentos a la felicidad. Los que se comportan siempre de la misma forma pensando que no se puede hacer nada diferente, los que piensan que amar es como una jaula, los que nunca cometen pequeñas locuras para reírse de sí mismos o de los demás. Mueren los que no saben pedir ni ofrecer ayuda.<br/>



-"Alguien dijo una vez que en el momento en que te paras a pensar si quieres a alguien,ya has dejado de quererle para siempre..."<br/>



-Hay ocasiones en que no ves. No ves las cosas que tienes delante cuando lo único que buscas es la felicidad. Una felicidad que te ofusca, que te distrae, una felicidad que te absorbe como una esponja. No lo ves. Sólo ves lo que quieres ver, lo que necesitas, lo que te sirve.<br/>



-Hay instantes en la vida en que creemos haber caído en un agujero oscuro y profundo del que no lograremos salir jamás, como si una bomba hubiera estallado sobre nosotros y hubiese destrozado nuestras vidas con un toque ligero y limpio. Todo lo que hemos vivido hasta ese momento se derrumba, se destruye, desaparece de la faz de la tierra, y entonces nos preguntamos qué va a ser de nosotros, cómo vamos a hacer para volver a sonreír. Lo peor de todo es que salimos a la calle y vemos que la gente sigue riendo, los niños siguen jugando en el parque, las parejas siguen besándose como si no hubiera mañana. Nada ha cambiado, todo permanece igual, sólo tú eres distinto.<br/>



-Es extraño, pero a menudo ocurre que determinadas personas, importantes en nuestra existencia, al principio no nos gustan nada.<br/>



-Los recuerdos tristes dormitan largo tiempo en una de las innumerables cavernas de la memoria; se mantienen allí durante años, decenios, la vida entera. Después, un buen día vuelven a la superficie, el dolor que los había acompañado vuelve a estar presente, tan intenso y punzante como lo era aquel día de hace tantos años.<br/>



-A lo largo de los cruces de tu camino te encuentras con otras vidas: conocerlas o no conocerlas, vivirlas a fondo o dejarlas correr es asunto que sólo depende de la elección que efectúas en un instante. Aunque no lo sepas, en pasar de largo o desviarte a menudo esta en juego tu existencia, y la de quien está a tu lado.




</div>


</body>
</html>


     

229
Hola amigos buenas noches aquí os dejo los 3 html del ejercicio CU01032D del tutorial CSS desde cero  para ver qué os parece. Gracias por vuestro tiempo

Saludos


Ejercicio 1º

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es">

<head>
<meta name="description" content="aprenderaprogramar.com">
<meta name="keywords" content="propiedad position de css">
<meta charset="utf-8">
<title>Propiedad position de CSS</title>

<style>
/*Propiedad positión CSS: static, relative, absolute, fixed.*/

#header{
text-align: center;
border-style: dashed;
}
#padre{
width: 900px;height:1300px;
border-style: double;
}

#a{
   width: 300px;height: 300px;margin: 40px;
   padding: 30px;background-color: yellow;
   position: relative;left: 200px;top: 100px;
   }
#b{
   width: 300px;height: 300px;margin: 40px;padding: 30px;
   background-color: blue;
   position: relative;right: 50px;bottom: 50px;
   }
#c{
   width: 300px;height: 300px;margin: 40px;
   padding: 30px;background-color: rgb(188, 64, 64);
   position: relative;
   left: 450px;bottom: 300px;
   }

.footer{
border-style: dotted;
        width: 95px;height: 50px;
}
</style>

</head>

<body>

<div id="header">

<h1>Propiedad positión css: static, relative, absolute, fixed.</h1>

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

<div ="menu">

<div id="a"></div>
<div id="b"></div>
<div id="c"></div>

</div>

</div>

<br/><br/>
<div class="footer">

Realizado por PANDEMIA.

</div>


</body>


</html>


Ejercicio 2º

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es">

<head>
<meta name="description" content="Aprenderaprogramar.com">
<meta name="keywords" content="propiedad position css: static, relative, absolute, fixed.">
<meta charset="utf-8">
<title>Propiedad position CSS</title>
<style>
/*Ejercicio 2º de CU01032D del curso de CSS. Propiedad position css.*/


#header{
text-align:center;
border-style: dashed;
border-width: 4px;
}
#caja_1{
width:600px;
height: 600px;
background-color: yellow;
position: absolute;
}
#caja_2{
width: 400px;
height: 400px;
background-color: green;
position: absolute;
}
#caja_3{
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
}


</style>


</head>
<body>

<div id="header">
Ejercicio 2º<br/>
Cajas contenedoras con posicionamiento ABSOLUTO.
</div>
<br/><br/>


<div id="menu">

<div id="caja_1"></div>
<div id="caja_2"></div>
<div id="caja_3"></div>
</div>




</body>
</html>


Ejercicio 3º


Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es">

<head>
<meta name="description" content="Aprenderaprogramar.com">
<meta name="keywords" content="propiedad position css. Ejercicio 3º">
<meta charset="utf-8">
<title>Propiedad positión CSS</title>
<style>
#cookies{

height: 100px;
background-color: yellow;
position: fixed;
}
#parrafo{
width:900px;
height: 400px;
border-style: solid;
border-color: red;
border-width: 4px;
}
#parrafo_2{
width:900px;
height: 300px;
border-style: dashed;
border-color: green;
border-width: 4px;
}
#parrafo_3{
width: 1000px;
height: 1100px;
border-style: dotted;
border-color: blue;
border-width: 4px;
}

</style>

</head>
<body>
<div id="cookies">
Esta página web utiliza cookies. Si continúa navegando acepta el uso de las cookies.
</div>
<br/><br/><br/>
<h3>Frases de libros famosos que hay que leer</h3><br/><br/>

<div id="parrafo">
<br/><br/>
1-Nuestras vidas se definen por las oportunidades, incluso las que perdemos.-El curioso caso de Benjamin Button de F. Scott Fitzgerald.<br/>

2-Qué maravilloso es que nadie necesita un solo momento antes de comenzar a mejorar el mundo.-El diario de Ana Frank.<br>

3-El hombre razonable se adapta al mundo: el hombre no razonable persiste en intentar adaptar el mundo a si mismo. Por tanto, todo progreso depende del hombre no razonable.-Hombre y superhombre de George Bernad Shaw.<br/>

4-No hay felicidad o infelicidad en este mundo; solo hay comparación de un estado con otro. Solo un hombre que ha sentido la máxima desesperación es capaz de sentir la máxima felicidad. Es necesario haber deseado morir para saber lo bueno que es vivir.-El conde de Monte Cristo de Alexandre Dumas.<br/>

5-La muerte destroza al hombre: la idea de la muerte le salva.-Howards End de E. M. Forster.<br/>

6-Cuando amamos, siempre nos esforzamos por ser mejores de lo que somos. Cuando nos esforzamos por ser mejor de lo que somos, todo a nuestro alrededor se vuelve mejor.-El Alquimista de Paulo Coelho.<br/>

7-Es mejor mirar al cielo que vivir allí.-Desayuno con diamantes de Truman Capote.<br/>

8-Deja de preocuparte por envejecer y piensa en crecer.-El animal moribundo de Philip Roth.<br/>

9-Querían hablar, pero no pudieron; había lagrimas en sus ojos. Ambos estaban pálidos y delgados; pero aquellos rostros pálidos estaban iluminados con el amanecer de un nuevo futuro. Crimen y castigo de Fiódor Dostoyevski.<br/>

10-No tengo idea de qué me espera, o que ocurrirá cuando todo esto termine. Por el momento se esto: hay gente enferma y necesito curarlas.-La plaga de Albert Camus.
</div>
<br/><br/>

<h3>Párrafos inolvidables</h3><br/><br/>
<div id="parrafo_2">
<br/><br/>
"Amor: una sola palabra, una cosa pequeña, una palabra no mayor ni más larga que el filo de una navaja. Eso es lo que es: una cuchilla. Corta tu vida por el centro, separándolo todo en dos, haciendo que caiga a uno u otro lado. Antes y después.
Antes y después. Pero también durante: un instante no mayor ni más largo que el filo de una navaja."
<br/><br/>
"Amor, la más mortal de las cosas mortales. Te mata tanto cuando la tienes como cuando no la tienes.
Pero no es así exactamente.
Eres el que condena y el condenado. El verdugo, la cuchilla, el indulto de última hora, la respiración jadeante y el cielo tormentoso y el «gracias, gracias, gracias, Dios».
Amor: te mata y te salva a la vez."
<br/><br/>

En ese instante se oyó un fuerte estrépito: Hermione había soltado los colmillos de basilisco que llevaba en los brazos. Corrió hacia Ron, se le echó al cuello y le plantó un beso en la boca. El chico soltó también los colmillos y la escoba y le devolvió el beso con tanto entusiasmo que la levantó del suelo.
- ¿Os parece que es el momento más oportuno? - preguntó Harry con un hilo de voz, y como no le hicieron ni caso, sino que se abrazaron aún más fuerte y se balancearon un poco, gritó -: ¡Eh! ¡Que estamos en guerra!
Ambos se separaron un poco, pero siguieron abrazados.
- Ya lo sé, colega - dijo Ron con cara de atontado, como si acabaran de darle en la cabeza con una bludger - Precisamente por eso. O ahora o nunca, ¿no?'
</div>
<br/><br/>
<h3>Frases de libros</h3>
<br/><br/>
<div id="parrafo_3">
<br/>
-Saber apreciar la belleza, no es lo mismo que sentir debilidad. ( En llamas)<br/>



-Dibujar algo es intentar capturarlo para siempre. ( Cazadores de sombras)<br/>


-Amar es destruir y ser amado es ser destruido (Ciudad de hueso)<br/>


-Pero la música es vida, y mientras suene nada muere para siempre (contra el viento del norte)<br/>


- Para hacerse un enemigo no se necesita nada. Mejor dicho, hasta es fácil... En cambio, el verdadero honor estriba en saber hacerse un amigo. Tienes que querer, ser querido, currártelo, ser leal, ser amado... y eso es mucho más difícil, más trabajoso, pero también más hermoso. (Federico Moccia)<br/>


-Estoy fuera de los recuerdos, del pasado, pero también estoy perdido. Antes o después las cosas que has dejado atrás te alcanzan, y las cosas más estúpidas, cuando estas enamorado, las recuerdas como las más bonitas... Porque su simplicidad no tiene comparación. Y me dan ganas de gritar. En este silencio que hace daño... (Federico Moccia)<br/>



-La única cosa verdaderamente importante, la única cosa que cuenta de verdad, es darle un sentido a la propia vida, aunque esta carezca de sentido, porque la felicidades no es una meta... si no un estilo de vida. (Perdona si te llamo amor)<br/>



-Sintonizar...¿qué querrá decir?. La sintonía es algo que tiene que ver con la música, o peor aún, con los circuitos. El amor, en cambio, es cuando no respiras, cuando es absurdo, cuando echas de menos, cuando es bonito aunque esté desafinado, cuando es locura... Cuando sólo de pensar en verlo con otra cruzarías a nado el océano... (Perdona si te llamo amor)<br/>



-Soñamos con el amor, lo perseguimos, lo encontramos y luego acabamos perdiéndolo. Día tras día, pensando que lo bueno estaba aún por llegar, esperando... y sin darnos cuenta acabamos perdidos en el presente. El amor es cuando no respiras, cuando es absurdo, cuando echas de menos, cuando es bonito aunque esté desafinado, cuando es locura... (Tengo ganas de ti)<br/>



-Hay pocas razones para decir la verdad, pero para mentir el número es infinito. (Carlos Ruiz Zafón)<br/>



-Las casualidades son las cicatrices del destino. No hay casualidades, somos títeres de nuestra inconsciencia. (Carlos Ruiz Zafón)<br/>



-Creía que la vida nos concede a cada uno de nosotros unos escasos momentos de pura felicidad. A veces son sólo días o semanas. A veces, años. Todo depende de nuestra fortuna. El recuerdo de esos momentos nos acompaña para siempre y se transforma en un país de la memoria al que tratamos de regresar durante el resto de nuestra vida sin conseguirlo. (Marina)<br/>



-No había un momento específico. Era como poco a poco despertarte. Pasas de estar dormido, en el espacio entre el sueño la vigilia y la conciencia. Es un proceso lento, pero cuando estás despierto, no te puedes confundir. No había duda de que estás enamorado.(we"ll always have summer)<br/>



" Qué fecha, a qué hora, nace un amor es algo difícil de precisar. ¿Nace la primera vez que vemos a la persona amada? ¿O la primera vez que, al buscarle los ojos, nos encontramos correspondidos con la misma mirada, esa que no pretende ver sino entrar a través de las pupilas? ¿Nace la primera vez que pronunciamos su nombre como si invocáramos todo el universo? ¿Nace cuando se dice, cuando se reconoce <>? ¿Nace y crece tan poco a poco que no se sabe cuándo nació? Nadie registra, cronómetro en mano, la fecha de nacimiento de un amor. Pero todo el mundo necesita un número rodeado con rotulador rojo en el calendario."<br/>



Pomelo y limón de Begoña Oro

-La vida real no está confinada por dimensiones exactas. Se extiende mas allá de los límites. Viene con defectos. Las cosas nunca son fáciles, en especial cuando tú esperas que lo sean. Como cuando las personas te decepcionan porque resultan ser completamente diferentes de quienes pensabas que eran. (So much closer- Susanne Collanti)<br/>





 
-Una pelea es como el fuego. Crees que lo tienes bajo control, crees que puedes detenerlo cuando quieras, pero antes de darte cuenta, está ardierdo, y no hay manera de controlarlo y fuiste tonta por creer que podrías hacerlo.<br/>





-Todo en la vida tiene un momento que lo cambia por completo. El momento no depende de alguien más, pero tu díficlmente sabes cuando éste ha llegado.<br/>



-Son las imperfecciones de una persona lo que la hacen perfecta para alguien más.<br/>



-"Los momentos cuando se pierden, no se pueden encontrar de nuevo. Sólo han pasado."<br/>



-“No importa que hagas o a dónde vayas para distraerte, la realidad te alcanza en algún momento”<br/>



-"Nada graba tan fijamente una cosa en nuestra memoria como el deseo de olvidarla".<br/>



-No es malo tener miedo, lo malo es dejar que el miedo domine tu vida, porque entonces no tendrás vida, solo miedo.<br/>



-A veces nos creemos que las personas son décimos de loteria: que están ahí para hacer realidad nuestras ilusiones absurdas.<br/>



-Los que mueren de verdad son los que no viven. Los que se reprimen porque los asusta el qué dirán. Los que hacen descuentos a la felicidad. Los que se comportan siempre de la misma forma pensando que no se puede hacer nada diferente, los que piensan que amar es como una jaula, los que nunca cometen pequeñas locuras para reírse de sí mismos o de los demás. Mueren los que no saben pedir ni ofrecer ayuda.<br/>



-"Alguien dijo una vez que en el momento en que te paras a pensar si quieres a alguien,ya has dejado de quererle para siempre..."<br/>



-Hay ocasiones en que no ves. No ves las cosas que tienes delante cuando lo único que buscas es la felicidad. Una felicidad que te ofusca, que te distrae, una felicidad que te absorbe como una esponja. No lo ves. Sólo ves lo que quieres ver, lo que necesitas, lo que te sirve.<br/>



-Hay instantes en la vida en que creemos haber caído en un agujero oscuro y profundo del que no lograremos salir jamás, como si una bomba hubiera estallado sobre nosotros y hubiese destrozado nuestras vidas con un toque ligero y limpio. Todo lo que hemos vivido hasta ese momento se derrumba, se destruye, desaparece de la faz de la tierra, y entonces nos preguntamos qué va a ser de nosotros, cómo vamos a hacer para volver a sonreír. Lo peor de todo es que salimos a la calle y vemos que la gente sigue riendo, los niños siguen jugando en el parque, las parejas siguen besándose como si no hubiera mañana. Nada ha cambiado, todo permanece igual, sólo tú eres distinto.<br/>



-Es extraño, pero a menudo ocurre que determinadas personas, importantes en nuestra existencia, al principio no nos gustan nada.<br/>



-Los recuerdos tristes dormitan largo tiempo en una de las innumerables cavernas de la memoria; se mantienen allí durante años, decenios, la vida entera. Después, un buen día vuelven a la superficie, el dolor que los había acompañado vuelve a estar presente, tan intenso y punzante como lo era aquel día de hace tantos años.<br/>



-A lo largo de los cruces de tu camino te encuentras con otras vidas: conocerlas o no conocerlas, vivirlas a fondo o dejarlas correr es asunto que sólo depende de la elección que efectúas en un instante. Aunque no lo sepas, en pasar de largo o desviarte a menudo esta en juego tu existencia, y la de quien está a tu lado.




</div>


</body>
</html>


230
Tenias razón el error estaba en background: no repeat, es background: no-repeat, lo he probado y ahora sale todo ok.

Y en cuanto a la manera de colocar el código tienes razón se ve mucho más claro como me has enseñado tú, es que soy novato en todo esto y cada día aprendo algo nuevo y la verdad es que me gusta mucho y quiero seguir aprendiendo; me has ayudado mucho agradezco el tiempo que te has tomado.

saludos.

231
Este es el código, gracias por revisarme lo de ante mano

saludos
Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es">

<head>
<title>CSS background position attachment; clip origin y size</title>
<meta name="description" content="aprenderaprogramar.com">
<meta name="keywords" content="posicion de imagenes de fondo">
<meta charset="utf-8">
<style>
div div div div {width: 400px;height: 400px;margin: 40px;padding: 40px;border: solid 4px;
}

#imagen1{background-image: url("http://www.ecoosfera.com/wp-content/imagenes/22-de-abril-dia-de-la-tierra.jpg");
background-color: yellow;background-position: center;background-repeat: no repeat;
}

#imagen2{background-image: url("http://estaticos04.elmundo.es/assets/multimedia/imagenes/2015/12/21/14506973737666.jpg");background-color: blue;
background-position: center;background-repeat: no repeat;
}

#imagen3{background-image: url("http://static.batanga.com/sites/default/files/curiosidades.batanga.com/files/Apuesto-que-no-conocias-estos-15-datos-interesantes-sobre-la-Tierra.jpg");
background-color: green;background-position: center top;background-repeat: no repeat;
}

#imagen4{background-image: url("https://imagenesyfondos.files.wordpress.com/2012/12/planeta_tierra.jpg");background-color: pink;
background-position: center;background-repeat: no repeat;

}

</style>


</head>

<body>

<div id="page">
<div id="header">
<h1>Imagenes de fondo</h1>

</div>
<div id="wrapper">

<div id="menu">

</div>

<div id="body">

<div id="imagen1"></div>
<div id="imagen2"></div>
<div id="imagen3"></div>
<div id="imagen4"></div>

</div>

</div>

<div id="footer">
Realizado por PANDEMIA
</div>

</div>
</body>



</html>


232
Buenas noches Alex he retocado el html como me has dicho y al quitarle el div id="page
se me van todas las imágenes y cuando las puse ya comprobé que fuesen mas pequeñas que las medidas que nos daban.
No se que puede pasar!!!

gracias por tu tiempo

saludos

233
Aquí os dejo el ejercicio que he realizado haber que os parece, en la tercera imagen me sale una linea negra que no logro quitar, haber si alguien me puede echar una mano.

Gracias por vuestro tiempo, estoy aprendiendo mucho gracias a vosotros.

saludos


Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es">

<head>
<title>CSS background position attachment; clip origin y size</title>
<meta name="description" content="aprenderaprogramar.com">
<meta name="keywords" content="posicion de imagenes de fondo">
<meta charset="utf-8">
<style>
div div div div {width: 400px;height: 400px;margin: 40px;padding: 40px;border: solid 4px;
}

#imagen1{background-image: url("http://www.ecoosfera.com/wp-content/imagenes/22-de-abril-dia-de-la-tierra.jpg");
background-color: yellow;background-position: center;background-repeat: no repeat;
}

#imagen2{background-image: url("https://i.ytimg.com/vi/0yc-Lal-FA0/maxresdefault.jpg");background-color: blue;
background-position: center;background-repeat: no repeat;
}

#imagen3{background-image: url("http://static.batanga.com/sites/default/files/curiosidades.batanga.com/files/Apuesto-que-no-conocias-estos-15-datos-interesantes-sobre-la-Tierra.jpg");
background-color: green;background-position: center top;background-repeat: no repeat;
}

#imagen4{background-image: url("https://imagenesyfondos.files.wordpress.com/2012/12/planeta_tierra.jpg");background-color: pink;
background-position: center;background-repeat: no repeat;

}

</style>


</head>

<body>

<div id="page">
<div id="header">
<h1>Imagenes de fondo</h1>

</div>
<div id="wrapper">

<div id="menu">

</div>

<div id="body">

<div id="imagen1"></div>
<div id="imagen2"></div>
<div id="imagen3"></div>
<div id="imagen4"></div>

</div>

</div>

<div id="footer">
Realizado por PANDEMIA
</div>
</div>

</body>



</html>


234
Aquí os dejo el código rectificado.

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es">

<head>
<title>Web con imagen única de pequeño tamaño</title>
<meta name="description" content="web con imagen unica de pequeño tamaño 135*135 pixeles">
<meta name="keywords" content="imagen de 135*135 pixeles">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="estilos13.css">

</head>

<body>



<div id="page">
<div id="header">
</div>
<div id="wrapper">
<div id="menu">
</div>
<div id="body">
</div>
</div>
<div id="footer">
</div>
</div>




</body>


</html>


y ahora el CSS

Código: [Seleccionar]

/*background-image propiedad repeat se expanda como fondo de página web*/



body {background-image: url("https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcR0HLGaq8ZZPQpgXgv01Gb_eGTO-Y_gI6eUEUg7m6iMczff9RQ2JQ");
background-repeat: repeat;}



235
Muchas gracias tenias razón  le daba color de fondo y pixeles a la imagen y ahí estaba el error
no me había fijado antes muchas gracias por la ayuda otra vez.

saludos   

236
Aquí os dejo los ejercicios que pide esta entrega nº 30, he tenido problemas con la parte b) del 2º ejercicio, agradecería que alguien me dijera donde ve el error porque me he vuelto loco probando de todo y no hay manera de que me salga.

  b) Una página web debe tener una imagen de pequeño tamaño (por ejemplo 135x135 píxeles) que mediante el uso de la propiedad repeat se expanda como fondo de la página web creando un efecto tapiz.

Esta es la pregunta.

Aquí os dejo el resto de códigos de los otros ejercicios:


Código: [Seleccionar]
EJERCICIO 1

Crea un documento HTML con 4 elementos div de 250 píxeles de ancho y 250 píxeles de alto, todos ellos con un margin de 30 píxeles en todas direcciones y un padding de 30 píxeles en todas direcciones. En cada uno de los elementos div coloca una imagen de fondo diferente y un background-color diferente. Para comprobar si tus respuestas son correctas puedes consultar en los foros aprenderaprogramar.com.


<!DOCTYPE html>
<html lang="es">

<head>
<title>Definidion de fondo CSS. background-image y efecto fondo página con papel tapiz, background-repeat</title>
<meta name="description" content="Descripcion de fondo css. background-image y efecto fondo pagina con papel tapiz. ">
<meta name="keywords" content="Definicion de fondo css">
<meta charset="utf-8">
<style>
/*definición de fondo css.background-image y efecto fondo*/
#div1{width: 250px;height: 250px;margin: 30px;padding: 30px;background-color: yellow;background-image: url(https://i.ytimg.com/vi/6rLuO37DSUM/hqdefault.jpg)}
.div2{width: 250px;height: 250px;margin: 30px;padding: 30px;background-color: orange;background-image: url("https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSZ1frib1PqeHmIq3nudJIHbxKrCsjkbxIfQf7T9g6Py4f3igbR")}
#div3{width: 250px;height: 250px;margin: 30px;padding: 30px;background-color: green;background-image: url("http://imagenesdebuenosdiasamor.com/wp-content/uploads/2015/09/buenosdiasregalorosa.jpg")}
.div4{width: 250px;height:250px;margin: 30px;padding: 30px;background-color: gray;background-image: url("https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcS1TPUNunORNxgvUPW_mgznqRptBkt98u7TDR_h2lOYx_7rfIpRoQ")}
</style>


</head>

<body>

<div id="div1">


</div>

<div class="div2">


</div>

<div id="div3">

</div>

<div class="div4">


</div>
</body>
</html>


EJERCICIO 2

Crea dos páginas web cumpliendo estos requisitos:

a) Una página web debe tener una única imagen de gran tamaño (por ejemplo 1024x768 píxeles) como imagen de fondo, sin repetición de la misma.



<!DOCTYPE html>
<html lang="es">

<head>
<title>Web con imagen única de gran tamaño</title>
<meta name="description" content="web con imagen unica de gran tamaño (1024*768px)">
<meta name="keywords" content="imagen de 1024*768px ">
<meta charset="utf-8">
<style>

#imagen{background-color: yellow;background-image: url("http://www.imagenesderisa.com.mx/wp-content/uploads/2015/10/imagenes-graciosas-1.jpg" width="1024" height="768");margin 0 auto;background-repeat: no repeat;}


</style>

</head>

<body>
2º Ejercicio a)

<div id="imagen">

<img src="http://www.imagenesderisa.com.mx/wp-content/uploads/2015/10/imagenes-graciosas-1.jpg" width="1024" height="768">

</div>

</body>
</html>

b) Una página web debe tener una imagen de pequeño tamaño (por ejemplo 135x135 píxeles) que mediante el uso de la propiedad repeat se expanda como fondo de la página web creando un efecto tapiz.

Este es el ejercicio que no me funciona!!!!!!!


<!DOCTYPE html>
<html lang="es">

<head>
<title>Web con imagen única de pequeño tamaño</title>
<meta name="description" content="web con imagen unica de pequeño tamaño 135*135 pixeles">
<meta name="keywords" content="imagen de 135*135 pixeles">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="estilos13.css">

</head>

<body>



<div id="page">
<div id="header">
</div>
<div id="wrapper">
<div id="menu">
</div>
<div id="body">
</div>
</div>
<div id="footer">
</div>
</div>




</body>


</html>

y ahora el CSS

/*background-image propiedad repeat se expanda como fondo de página web*/



body {background-color: yellow;background-image: url(https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcR0HLGaq8ZZPQpgXgv01Gb_eGTO-Y_gI6eUEUg7m6iMczff9RQ2JQ" width="300" height="300");
background-repeat: repeat;}



Saludos y gracias

237
vale bermartinv ya lo he entendido hoy ya lo he empezado ha hacer así, es que cogí la mania de crear el archivo css al principio del curso y hasta hoy y la verdad es que va mucho mejor y es más rápido.

muchas gracias me has ayudado mucho

saludos

238
He  encontrado unos errores que e retocado ( left : derecha right: izquierda ) que me me hacia unos lios que no te digo, pensaba que funcionaban en el código al revés righ era para la parte derecha de la pantalla, de todas maneras en el ejercicio no logro poner el estyle dashed y ridge en su sitio y no se porque, lo he probado todo y para  que quede con trazos rectangulares lo tengo que poner en la izda.

haber si me podéis ayudar.

saludos y gracias por vuestro tiempo

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es">

<head>
<title>padding y margin css</title>
<meta name="description" content="padding y margin en css. margin negativo y centrar con margin auto">
<meta name="keywords" content="padding y margin en css">
<meta charset="utf-8">
<link rel="stylesheet"type="text/css"href="estilos12.css">
</head>

<body>
<div id="wrapper">
<header>
<h1>Padding y Margin CSS</h1>
</header>
</div>

<div id="div1">

Este es el div 1

</div>

<div id="div2">

Este es es el div 2

</div>




</body>

</html>



/*padding y margin en css */

#wrapper{text-align: center;
}

#div1{float: left;width: 250px;margin: 20px;background-color: #FFB6C1;border-top-style: dotted;border-top-width: 15px;
border-top-color: #DC143C;padding: 30px; border-left-style: dashed;border-left-width: 10px;border-left-color: green;
padding: 45px; border-bottom-style: double;border-bottom-width: 10px;border-bottom-color: #FF00FF;padding: 0px;
border-right-style: ridge;border-right-width: 40px;border-right-color: #2F4F4F;padding: 60px;
}





#div2{float: left;width: 250px;margin: 20px; background-color: #FFB6C1;border-top-style: dotted;border-top-width: 15px;
border-top-color: #DC143C;padding: 30px; border-left-style: dashed;border-left-width: 10px;border-left-color: green;
padding: 45px; border-bottom-style: double;border-bottom-width: 10px;border-bottom-color: #FF00FF;padding: 0px;
border-right-style: ridge;border-right-width: 40px;border-right-color: #2F4F4F;padding: 60px;
}


239
ok, Ogramar me ha quedado todo claro, espero no cometer más fallos

saludos y gracias por tu tiempo

240
Buenas noches saludos a todos, aquí os dejo este ejercicio que he realizado, me he liado un poco con los cálculos pero creo que al final ha salido bien, os agradecería que le echarais un vistazo.

Gracias de antemano. Saludos


Código: [Seleccionar]
<!DOCTYPE html>
<html lang="es">

<head>
<title>padding y margin css</title>
<meta name="description" content="padding y margin en css. margin negativo y centrar con margin auto">
<meta name="keywords" content="padding y margin en css">
<meta charset="utf-8">
<link rel="stylesheet"type="text/css"href="estilos12.css">
</head>

<body>
<div id="wrapper">
<header>
<h1>Padding y Margin CSS</h1>
</header>
</div>

<div id="div1">

Este es el div 1

</div>
<div id="div2">
Este es es el div 2
</div>
</body>
</html>
 


Y ahora el CSS

Código: [Seleccionar]
/*padding y margin en css */
#wrapper{text-align: center;}

#div1{float: left;width: 250px;margin: 20px;background-color: #FFB6C1;border-top-style: dotted;border-top-width: 15px;
border-top-color: #DC143C;padding: 30px; border-right-style: dashed;border-right-width: 10px;border-right-color: green;
padding: 45px; border-bottom-style: double;border-bottom-width: 10px;border-bottom-color: #FF00FF;padding: 0px;
border-left-style: ridge;border-left-width: 40px;border-left-color: #2F4F4F;padding: 60px;
}

#div2{float: left;width: 250px;margin: 20px; background-color: #FFB6C1;border-top-style: dotted;border-top-width: 15px;
border-top-color: #DC143C;padding: 30px; border-right-style: dashed;border-right-width: 10px;border-right-color: green;
padding: 45px; border-bottom-style: double;border-bottom-width: 10px;border-bottom-color: #FF00FF;padding: 0px;
border-left-style: ridge;border-left-width: 40px;border-left-color: #2F4F4F;padding: 60px;
}




a) ¿Cuál es el ancho total ocupado por cada div (incluyendo sus bordes y rellenos)?

      250px ancho interior + 10px borde izquierdo + 45px relleno izquierdo + 40px borde derecho + 60px relleno derecho : total 405px

          Mas el margin: 40px            total respuesta a)445px

b) ¿Cuál es el alto total ocupado por cada div (incluyendo sus bordes y rellenos)?

     El alto será variable dependiendo del contenido del div. Si no especificamos nada lo pondrá el navegador por defecto.

c) ¿Cuál es el ancho total desde el límite izquierdo del borde del div más a la izquierda hasta el límite derecho del borde del div más a la derecha (teniendo en cuenta márgenes, bordes y rellenos)?

     El ancho total para los dos div sera de 890px


Páginas: 1 ... 7 8 9 10 11 [12] 13

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