Autor Tema: CSS y HTML uso Propiedad position: static, relative, absolute y fix CU01032D (Leído 2397 veces)

Jack_F · « **en:** 17 de Febrero 2017, 19:19 »

Propiedad position: static, relative, absolute y fixed.

Bueno amigos aqui resolviendo los tres ejercicio de la entrega nº32 del curso de básico de codificación web con CSS.

Ejercicio 1:

Código HTML

Código: [Seleccionar]

<!DOCTYPE html>
<html>
	    <head>
	    	   <title>Ejercicio CU01032D hecho por, Jorgito Pucheta</title>
	    	   <meta charset="utf-8" />
	    	     <link rel="stylesheet" type="text/css" href="estilos.css" />
	    </head>
	    <body>
	    	   <div class="padre">
	    	   	  <div class="div1"></div>
	    	   	    <div class="div2"></div>
	    	   	      <div class="div3"></div>
	    	   </div>
	    </body>
</html>

Código CSS

Código: [Seleccionar]

/*Una imagen de fondo para toda la web y un color fondo si la imagen no carga*/
body{
	background-image: url(http://i44.photobucket.com/albums/f30/Jack_f1/img4_zps9bk4wtx1.png);
	  background-color: #42b0ac;
}
/*anchura y altura para los div hijos*/
.padre div{
	width: 300px;
	  height: 300px;
	    margin: 40px;
	      padding: 30px;
	        position: relative;
	          border: solid 4px red;
}
.div1{
	left: 200px; top: 100px;
	  background-color: #458fdb;
}
.div2{
	right: 50px; bottom: 50px;
	  background-color: #049d00;
}
.div3{
	left: 450px; bottom: 300px;
	  background-color: #795f1f;
}

Ejercicio 2:

Código HTML

Código: [Seleccionar]

<!DOCTYPE html>
<html>
	    <head>
	    	    <title>Segundo ejercicio CU01032D</title>
	    	    <meta charset="utf-8" />
	    	      <link rel="stylesheet" type="text/css" href="estilos2.css" />
	    </head>
	    <body>
	    	    <div class="div1"></div>
	    	      <div class="div2"></div>
	    	        <div class="div3"></div>
	    </body>
</html>

Código CSS

Código: [Seleccionar]

/*Una imagen de fondo para toda la web*/
body{
	background-image: url(http://i44.photobucket.com/albums/f30/Jack_f1/img4_zps9bk4wtx1.png);
}
/*Div1 unas dimenciones de 600x600px y color de fondo*/
.div1{
	width: 600px;
	  height: 600px;
	    background-color: yellow;
}
/*Div2 unas dimenciones de 400x400px y un color de fondo verde*/
.div2{
	width: 400px;
	  height: 400px;
	    background-color: green;
}
/*Div3 unas dimenciones de 100x100px y un color de fondo azul*/
.div3{
	width: 100px;
	  height: 100px;
	    background-color: blue;
}
/*posicionamiento absolute para el div2 y div3 y el mismo uso de cordenadas en anbas*/
.div1, .div2, .div3{
	position: absolute;
	  
}

Ejercicio 3:
Bueno aqui use un div como padre y con position relative. Y position absolute para el div del cuerpo, cabecera y el indice. Pero a un div fixed que seria el texto del cookies. Tambien use dos anclas.

Código HTML

Código: [Seleccionar]

<!DOCTYPE html>
<html>
	    <head>
	    	    <title>Tercer ejercicio CU01032D</title>
	    	     <meta charset="utf-8" />
	    	       <link rel="stylesheet" type="text/css" href="estilos3.css" />
	    </head>
	    <body>
	        <!--div padre-->
	          <div class="padre">
	          <!--div para el fixed-->
	    	    <div class="fixed">
	    	       Esta página web utiliza cookies. Si continúa navegando acepta el uso de cookies.
	    	    </div>
	    	    <!--la cebecera de la pagina-->
	    	    <div class="cabecera">
	    	    	<h1>Midori No Hibi</h1>
	    	    </div>
	    	    <!--fin de la cebecera-->

	    	    <!--indice de la página-->
	    	    <div class="indice">
                       <a href="#historia">Historia</a>
                         <a href="#personajes">Personaje</a>
	    	    </div>
	    	    <!--fin de indice-->
                <!--cuerpo de la pagina-->
                <div class="cuerpo">
                <img src="http://static.zerochan.net/Midori.no.Hibi.full.174259.jpg" alt="midori no hibi" width="300px" />
                	<p>Midori no Hibi (美鳥の日々? Los días de Midori, también conocida en inglés como Midori Days), es una serie de <a href="https://es.wikipedia.org/wiki/Manga">manga</a> que consta de 85 capítulos creada por <a href="https://es.wikipedia.org/wiki/Kazur%C5%8D_Inoue">Kazurou Inoue</a> y que posteriormente fue adaptada a una versión de anime de 13 episodios, que deja de lado partes importantes en el manga ya que se creó mientras aún era publicado.</p>
                	<p>El manga fue publicado en la revista Shōnen Sunday hasta julio del 2004 mientras que el anime estuvo al aire en la televisión japonesa desde abril hasta junio del 
                	2004. La serie de anime fue producida por Studio Pierrot y posteriormente fue licenciada en los Estados Unidos por Media Blasters bajo el título de Midori Days. VIZ 
                	Media licenció la versión en inglés del manga bajo el mismo título. La editorial Ivrea ha publicado el manga en español.</p>
                	<p>El título Midori no Hibi está basado en el nombre de la celebración tradicional japonesa Midori no hi (みどりの日) o día del verdor. La palabra hibi no es más que el 
                	plural de hi (día), y Midori es el color verde. En algunas versiones en español, el manga y a veces el anime son llamados Midori, échame una mano.</p>

                	<a id="historia"><h2>Historia</h2></a>
                	<p>El personaje principal, Seiji "Perro Salvaje" Sawamura, es un estudiante de 17 años que cursa segundo de bachillerato, cabello teñido de rubio y adicto a las peleas. 
                	Debido a su conducta siempre se mantiene en problemas, pero en estos, son sus enemigos quienes se llevan siempre la peor parte. Seiji no está complacido con su 
                	vida, ya que las chicas le temen, por lo cual nunca ha tenido una novia en su vida. Tras recibir su rechazo número 20 se lamenta de que "la única novia que ha tenido 
                	es su mano derecha", descubre de pronto que esta ha desaparecido y en su lugar está una chica llamada Midori Kasugano, aproximadamente del tamaño de su mano, que lleva mucho tiempo enamorada de él pero 
                	no tiene ni idea de cómo llegó hasta allí. Desde ese momento, ambos vivirán una vida llena de trastornos y enredos entre los que Seiji deberá manejarse para mantener en secreto su situación por la seguridad de
                	ambos. Midori no Hibi es una serie llena de comedia, drama, romance y un poco de ecchi.</p>
                	<a id="personajes"><h2>Personajes</h2></a>
                	<span>Seiji Sawamura (沢村 正治 Sawamura Seiji):</span><br />
                	<p>
                     Es un estudiante de 17 años, que alardea de sus habilidades en la pelea. Cuando era pequeño, era muy tímido y débil, por lo que era común que su hermana mayor debiera defenderlo ya que él simplemente sonreía y aguantaba los maltratos de otros niños, esto hasta el día en que ella comenzó a entrenarlo; volviéndose fuerte, siguió por su cuenta  al tomarle gusto, desde ese día nadie ha vuelto a derrotarlo aunque muchos lo intentan a diario.
                     Sin embargo, y debido a ello, su reputación con las mujeres es bastante mala ya que su actitud es malinterpretada con maldad y es temido por todos. Su vida cambia por completo cuando su mano derecha se transforma repentinamente. Para él es una desgracia que Midori haya llegado a su mano, ya que no podrá volver a pelear y se siente mal al ver la extraña situación en la que se encuentran, en general trata a Midori de manera brusca y grosera (debido a su poca relación con mujeres y su incapacidad de mostrar sus sentimientos), cosa que no evita que la proteja y se preocupe por su seguridad ya que desde que su padre se fuera al extranjero y hermana fuera a vivir con su novio, él ocupa solo su casa y tras poco tiempo se le hace indispensable la compañía de Midori.
                     Entre los estudiantes de la ciudad es conocido como "Perro Salvaje", por su salvajismo y lenguaje grosero (aunque los fanáticos del manga y anime lo llaman "El dios de los otakus", tras un incidente en una convención). También se sabe que es un gran fanático del actor de acción Sho Aikawa y de la actriz porno Miruku Moriyama. Seiji, a pesar de ser una persona fuerte, tiene debilidad por ayudar a los más débiles y contra su mala fama, la mayoría de las peleas en las que participa son para proteger a desvalidos o castigar a los abusivos, su mayor virtud es la determinación de no rendirse nunca. </p> 
                     <span>Midori Kasugano (春日野 美鳥 Kasugano Midori):</span><br />
                     <p>Es la chica que acabó con el gran poder de Seiji al convertirse en su mano derecha. Heredera de una de las familias más adineradas de la ciudad y alumna del Instituto Ogurabashi, un colegio solo para la élite. Estuvo enamorada de Seiji durante tres años pero nunca se atrevió a confesarlo. Posteriormente, como la mano derecha de Seiji, le confiesa su amor rápidamente; esto es por que en su cuerpo real, su personalidad era muy tímida, al punto incomodarse hablando con sus amigas o su madre, a diferencia de su versión en la mano de Seiji.Durante los tres años antes de la historia, trató cada día de declararse a Seiji, pero jamás hacía otra cosa más que mirarlo. Fue la única persona que se dio cuenta que contra su fama criminal, era un sujeto sensible que se preocupaba de sus amigos y para ella, contrario a lo pueda pensarse, no es una desgracia haberse transformado en una mano, ya que ahora, puede estar al lado de su amado "Seiji-Kun". Mientras ella ocupa el lugar de la mano derecha de Seiji, su cuerpo real permanece en estado de coma en su mansión, para desesperación de su madre, quien intenta lo imposible con tal de despertarla. En algunas ocasiones Midori esconde emociones tales como los celos de otras chicas que van detrás de Seiji; está determinada a conquistar su corazón sin importar que suceda. De acuerdo con el manga parece poseer la fuerza de Seiji y algo de dominio sobre su cuerpo cuando está determinada a hacer algo o Seiji está dormido. Los días que estuvo como mano llevó un diario de todo lo que sucedía, cuando regresa a su cuerpo normal pierde todos los recuerdos de cuando estaba con Seiji. Poco después ella reúne el valor necesario y le confiesa su amor, el cual es correspondido por Seiji. En el manga regresa tres veces a su cuerpo, pero al no haber superado sus complejos solo la última vez logra quedarse en él.</p>
                     <span>Takako Ayase (綾瀬 貴子 Ayase Takako):</span><br />
                     <p>
                        Es una adolescente de carácter duro y fuerte, atleta sobresaliente pero muy poco femenina según sus compañeros. Cuando algo le molesta, no duda en decirlo, aun si resulta hiriente; pero en realidad esto es solo una apariencia. En el fondo, es una joven dulce y soñadora que cree en la llegada del príncipe azul; cuando Seiji visita su casa se sorprende ya que, contrario a lo proyecta su imagen, su dormitorio está lleno de mangas Shoujo y peluches hechos por ella.
                        Al inicio de la serie, Ayase detesta a Seiji al igual que toda su clase, pero luego que la salvara de una pandilla que intentó abusar de ella, comienza un secreto amor por él, por lo que se debate entre el desprecio que simula tenerle y sus deseos de confesarle su amor. Es normal verla intentando llevar a cabo algún plan para que Seiji se enamore y le proponga noviazgo, pero estos jamás funcionan, en parte por que son descabellados y en parte por que Sawamura, por su récord de rechazos, no reconoce a una mujer enamorada. En los últimos capítulos decide declararse a Seiji (después que Midori desaparece de su mano según el anime y cuando aún estaba según el manga), pero este se da cuenta que está enamorado de Midori y por lo que la rechaza. A pesar de su fracaso, ella le está agradecida por ser sincero y le anima a hacer lo necesario para conquistar a Midori. En el manga, tras enterarse de los sentimientos de Seiji decide seguir siendo su amiga y se encarga de que suba sus calificaciones en tercer año.
                        Si bien profesores y alumnos se refieren siempre a ella como la representante de la clase, en realidad este cargo es de otro alumno, pero por su fuerte carácter todos presuponen que es ella (esto se aclara en el manga). </p>
                        <span>Rin Sawamura (沢村 凛 Sawamura Rin):</span><br />
                        <p>
                           Hermana mayor de Seiji. Líder de una poderosa pandilla de motociclistas, su mayor hobbie es torturar a Seiji. Fue quien le enseñó a luchar cuando pequeño. Su aspecto es el de una joven de grandes senos, vestida siempre de traje blanco, blusa, tacones, gafas y cabello negro largo y suelto. Esta apariencia esconde a la única persona más fuerte y cruel en las peleas que Seiji. Le gusta molestar y humillar a su hermano, por lo que es normal que lo golpee y le quite el dinero cuando va a dormir a su casa (esto sucede cuando tiene problemas con su novio). Pero realmente, es la única persona que se ha preocupado por él y lo trata de esta forma para que se haga fuerte, sintiéndose orgullosa de su hermano desde el día que comenzó defenderse a sí mismo y los demás.
                            Le tiene un especial cariño a Midori, a quien le encomienda que lo cuide ya que la ve como alguien que le cambiará la vida; pero de todas maneras, en general se divierte poniendo en riesgo el secreto de ambos. Al final del manga, viaja a Sudamérica para reunirse con su novio, al cual ama con locura pero en público es menos cariñosa que cuando esta a solas con él. </p>
                            <span>Kouta Shingyoji (真行寺 耕太 Shingyōji Kōta):</span><br />
                            <p>    Amigo de la niñez de Midori y también compañero del primer año de la escuela superior de Ogurabashi. Siempre estuvo enamorado de Midori, por lo que cuando cae en coma vence sus temores para pedir a Seiji que la visite por si se produce un milagro, al conocerlo mejor se da cuenta que no es como los rumores lo muestran, por ello le toma aprecio, llegando al extremo de sentirse enamorado de Seiji e imaginándose bastante seguido en el manga (tras descubrir el secreto), en situaciones comprometedoras en las cuales se encuentra convertido en su mano izquierda, o cayendo en situaciones de feminidad.
                            Por su aspecto frágil y tierno es presa de Nekobe y su pandilla, en quienes despierta ternura y deseos de vestirlo como mujer, a pesar que Nekobe está enamorada de Kota. Tras el despertar definitivo de Midori, convence a Seiji para que vaya, hable con ella y le cuente la verdad sobre lo que pasó el tiempo que estuvo en coma, ya que ella no recordaba. En el manga se debate entre sus intentos por ganarse el amor de Seiji, su cariño por Midori y el deseo que este intente despertarla. Finalmente comprende lo inmenso del amor entre ambos por lo que se resigna y los apoya.</p>
                            <span>Osamu Miyahara (宮原 オサム Miyahara Osamu):</span><br />
                            <p>
                               Subordinado de Seiji. Idolatra a Sawamura por sus habilidades en la pelea, pero no se mantiene alejado de los problemas, siendo casi siempre, capturado por alguna pandilla para provocar a Seiji. Es la única persona a la que Seiji no asusta y es capaz de recibir una golpiza por él, cosa que hace más de una vez.
                               En la historia, Miyahara es una persona muy cómica a quien nunca le ha interesado lo que piensen los demás sobre él. Para él, Seiji es su mejor amigo y aun cuando Seiji tiene más amigos, Miyahara en el único que al inicio de la historia tiene el valor y la confianza de hablarle sin mostrar temor. Al igual que Seiji, está  obsesionado con el actor Sho Aikawa y por la pornografía de Miruku Moriyama.
                               En el manga se enamora de Lucy Winrad y pide la ayuda de Seiji para conquistarla, cosa que logra poco a poco, aunque en un comienzo debió competir con la imagen que su mejor amigo proyectaba en para Lucy. </p>
                               <span>Shuichi Takamizawa (高見沢 修一 Takamizawa Shūichi):</span><br />
                               <p>
                                  Compañero de clases de Sawamura y un otaku de los muñecos coleccionables. Siempre lleva consigo una muñeca, del personaje Ultra-Marin, notando obsesión por este personaje de anime. Es un excelente diseñador de ropa para muñecos, su sueño es tener como novia una marioneta, ya que desprecia a las mujeres reales por que lo discriminan, creyendo que las muñecas son "tiernas e inocentes"; por ello cuando conoce a Midori la ve como la mujer ideal. Más adelante (después de una extorsión, una sesión fotográfica, dos proposiciones, una falta de respeto y varios días de amnesia por trauma craneal) se conforma con ser amigo de Midori, ayudándolos en lo que necesiten, pidiéndoles consejo y dando a veces trabajo a Seiji, a quien siempre le escasea el dinero.
                                   Es el creador de una muñeca y una página web, ambas sobre Midori, que hace que ella obtenga miles de fans. En una ocasión se enamoró de una chica normal lo cual extrañó a sus dos amigos, sin embargo esto fue por su semejanza a Ultra Marin. Aunque tras comenzar su amistad con Seiji y Midori madura bastante, no abandona su actitud de otaku, pero decide tomarse su vida más en serio, por lo que comienza a crear diseños con los que gracias a un concurso gana fama y la promesa de una futura carrera. </p>
                </div>
	    	     </div>
	    </body>
</html>

Un saludo para todos los del foro.

pedro,, · « **Respuesta #1 en:** 21 de Febrero 2017, 16:13 »

Hola Jorgito.

El ejercicio 1 y el 2 son correctos, del ejercicio 3 te faltaría pegar el código CSS para poder comprobarlo.

También comentarte que usas clases para todo, cuando el estilo que creas es solo para un elemento, es má adecuado asignarle el atributo id, y dejar las clases para cuando más de un elemento se aprovechen de las propiedades que contenga dicha clase.

Saludos.

Jack_F · « **Respuesta #2 en:** 23 de Febrero 2017, 20:57 »

Ah me olvide el código css.

Código: [Seleccionar]

/*un imagen de fondo para  toda la web*/
body{
	background-image: url(http://i44.photobucket.com/albums/f30/Jack_f1/img4_zps9bk4wtx1.png);
	  background-color: #42b0ac;
}
/*Use  un elemento padre ,position relative y absolute para hacer que el cuerpo y el indice quede mas chula la web*/
.padre{
	    position: relative;
}
.padre div{
	border: inset 5px #0d2a29;
}
/*El cookies para la pagina*/
.fixed{
	margin: auto;
	  background-color: yellow;
	    text-align: center;
	      height: 100x;
	      width: 20%;
	        position: fixed;
}
/*Cabecera de la pagina*/
.cabecera{
    margin: auto;
	    width: 30%;
	      text-align: center;
	        background-color: #e82288;
}
/*Un indice con color de fondo*/
.indice{
	width: 20%;
	  background-color: #46ae70;
	    margin: 10px;
	      position: absolute; left: 0;
}
.cuerpo{
	width: 70%;
	  margin: 10px;
        position: absolute; left: 300px;
          background-color: #0b7b2a;
}
.cuerpo span{
	color: #4d340e;
	  text-decoration: underline;
}
img{
	margin: 10px;
	  border: dotted red;
}

Aqui esta, bueno sobre los clases, si los uso demasiado. Entonces usare tambien el selector "id".

Un abrazo.

pedro,, · « **Respuesta #3 en:** 28 de Febrero 2017, 09:37 »

Buenas Jorgito.

Ahora todo bien y completo.

Saludos.

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

Noticias: