1

En un proyecto de la escuela tengo que hacer una pagina basica con css que se vea asi: Como deberia de estar acomodada la pagina

Pero al ingresar el codigo, el cual muestro a continuacion, la parte de arriba esta bien pero la de abajo desaparece el textbox "cuadrote" y las dos imagenes quedan muy mal acomodadas :/

<!DOCTYPE html>
<html lang="es-ES">
<html>
<head>
<title>2do parcial PROYECTO</title>
<style>
h1{
    text-align:center;
    background-color:violet;
    border-width: 2px;
}
p.cul{
  text-align:  center;
  font-family:  Aharoni;
  font-size:  35px;
  background-color:violet;
  border-style:  dotted;
  border-width:  2px;
  width:  1050px;
}
div{
  float:left;
  background-color:  lightcyan;
   width:  200px;
   border:  15px solid red;
   padding:  25px;
   margin:  15px;
}
img{
   float:middle;
}
div.one{
  float:right;
  background-color:  lightcyan;
   width:  330px;
   border:  15px solid red;
   padding:  25px;
   margin:  15px;
}
p{
float:left;
   background-color:lightcyan;
   width:782px;
   
}
img.one{
  float:right;
  
}
p.dep{
   text-align:center;
   font-family:Aharoni;
   font-size:35px;
   width:1050px;
   background-color:violet;
   border-style: dotted;
    border-width: 2px;
}
div.cuadrote{
  float:left;
  position:  absolute;
  right: %100;
  bottom:  800px;
  background-color:  lightcyan;
   width:  200px;
   border:  15px solid red;
   padding:  25px;
   margin:  15px;
}
 img.batorojo{
   position:  absolute;
   right:570px;
   bottom: -394px;
}
   
}
div.cuadrito{
  vertical-align:middle;
   background-color:  lightcyan;
   border:  15px solid red;
   padding:  25px;
   margin:  15px;
}
img.caribe{
  float:right;
  position:  absolute;
  right:35px;
  bottom:-360px;
}
p.blueboxie{
  background-color:lightcyan;
  float:left;
  width: 1000px;
}
</style>
</head>
<body>
<h1>Evaluacion 2</h1>
<p class="cul">Eventos culturales</p>
<div>&#161;NUEVOS CURSOS CULTURALES EN CEART DISPONIBLES&#33;Se cuentan con clases de:
*Artes plasticas(Lunes,miercoles y viernes de 5:00 a 6:30pm)
*Ballet(Lunes,miercoles y viernes de 7:30 a 9:00pm)
*Violin(Martes y jueves de 9:00 a 11:00am)</div>
<img src="http://mexicali.org/wp-content/uploads/2012/08/Centro-Estatal-de-las-Artes.jpg" alt="x" width=300 height=200>
<div class="one">Se anuncian proximamente funciones de teatrales de obras de shakespeare en el teatro del estado, 
entre ellas se encuentran desde clasicos como Hamlet o Romeo y Julieta hasta los escritos mas rec&oacute;nditos del autor ya mencionado.Puedes conseguir entradas en ticketmaster.com o comprarlas en la taquilla del teatro a partir del 10 de abril.Informes o dudas al (686)111-1111</div class="one">
<p>Con un festival artístico-cultural el Instituto Municipal de Arte y Cultura de Mexicali (IMACUM) conmemorará el 42 aniversario luctuoso del legendario compositor y cantante José Alfredo Jiménez.

El evento tendrá lugar en las instalaciones de la Casa de la Cultura de la Juventu (CREA Cultura) este sábado 21 de noviembre, y para ello se han organizado una serie de actividades gratuitas para el goce de los mexicalenses.

A las 7:00 p.m. en la Galería-Vestíbulo se inaugurará la exposición colectiva “Nomás nuestro amor”, en la que participan artistas gráficos, plásticos e ilustradores, entre ellos Gabriela Badilla, Odette Barajas, Gabriela Buenrostro, Luis Felipe Vargas Brownell, Fernando Corona, Aída Corral, Carlos Cortez, Mara Leticia Dorantes, Roberto Figueroa, Gloria Gachuz, Marco Manríquez, Pablo Martínez, Rogelio Pérezcano, Natalia Rojas, Karla Sánchez, y Karina Venegas.

Estos artistas tomaron el nombre de una canción de José Alfredo para de ahí generar su pieza con libertad de creación, lo que el público mexicalense podrá observar una gran variedad de propuestas en cuanto a trabajo, técnica y colorido.</p>
<img class="one" src="http://www.zonalider.com/sites/default/files/styles/scale_max_width_auto_height/public/article/image/jose_alfredo_jimenez.jpg?itok=9cZnT7Ir" alt="x" width=250 height=200></img>
<p class="dep">Eventos deportivos</p class="dep">
<div class="cuadrote">&#191;SAB&Iacute;AS QUE&#63;...El juego de béisbol más Largo tuvo lugar en el año 1981,
en las Ligas Menores donde se jugaron 33 entradas. Se enfrentaban Rochester (NY) Red Wings contra Pawtucket (RI) Red Sox. Al entrar en la entrada número 21 el juego seguía empatado 2-2 y fue suspendido. Dos meses después el juego se reasignó 
y en 18 minutos el Pawtucket anotó la carrera del gane.</div>
<img class="batorojo" src="http://allswalls.com/images/boston-red-sox-baseball-mlb-k-wallpaper-1.jpg" alt="x" width=200 height=170></img>
<div class="cuadrito">Respecto al base ball se encuentra proximamente la variedad de juegos de la serie del caribe, incluyendo duelos epicos como el de CUBA vs HAITI , ¡No te los puedes perder!</div>
<img class="caribe" src="" alt="x" width=200 height=170></img>
<p class="blueboxie">&#161;SE LE CHISPOTEO&#33;GUADALAJARA, JALISCO (02/ABR/2017).- El Zorro es de los pocos animales capaces de tropezar con la misma piedra dos veces.

Anoche, Matías Alustiza había tenido una noche de ensueño. Dos goles suyos tenían al Atlas en la pelea en el partido y en el Clausura 2017.

A dos minutos del final el argentino puso la pelota en el manchón penal por segunda vez en el juego. En sus pies tenía la victoria que colocaba a los tapatíos en zona de Liguilla.
Alustiza cobró el penalti que representaba la victoria igual que el penalti que representó en su momento el empate a tres. Un disparo con mucha dosis de humillación al arquero.

Gibrán Lajud adivinó la intención del argentino y no se dejó sobajar una segunda vez. Recostó a su derecha y se quedó con la pelota y con el punto para su equipo.

Sí, Alustiza hizo un “Ponchito” González y el Atlas empató 3-3 un juego que debía y tenía que ganar.</p>
</body></html>

Por cierto, la linea 2 fue una sugerencia del sitio en ingles la verdad no se como se usa ni que es, al igual que el uso del position , que lo busque en google pero no se realmente su funcion.Imagen de parte de abajo de la pagina: Esta es una imagen que muestra la parte de abajo de la pagina con el textbox faltante y las imagenes movidas Estoy como loca a ultima hora haciendo esto porfavor ayuda hahahah

2
  • Te recomiendo que uses algún CSS Framework como boostrap o algún grid (como unsemantic) para hacer tu página.
    – albertcito
    el 4 abr. 2017 a las 16:31
  • Es que solo nos dieron 13 ejemplos de paginas y nos dijeron que usaramos solo lo que venia ahi xD, pero lo buscare, aun asi Gracias!
    – Zhenam
    el 4 abr. 2017 a las 16:33

2 respuestas 2

2

te dejo una maquetación muy basica basica, creo que solo falta agregarle los colores y el tamaño de las imágenes,espero sirva de ayuda sigue reforzando tus conocimientos, hay algunos errores que con un poco mas de lectura y practica puedes corregir, ten en cuenta también la respuesta de alejandro, salu2

<!DOCTYPE html>
<html lang="es-ES">
<head>
    <title>2do parcial PROYECTO</title>
    <style>
    div{border:1px solid black;}
    .fila{border: 2px solid black; padding: 10px;margin-bottom: 10px;}
    .dblock{display: inline-block;overflow: hidden;}
    .dseccion1{width: 400px;height: 400px;margin:0 5px;}
    .dseccion2-1{width: 815px;height: 400px;margin:0 5px;}
    .dseccion3{width: 300px;height: 300px; margin: 0 5px;}

    </style>
</head>

<body>

    <div class="fila">
        <h1>Evaluacion 2</h1>
    </div>



    <div class="fila">

        <div>
            <p class="cul">Eventos culturales</p>
        </div>

        <div class='dblock dseccion1'>
            <h3>&#161;NUEVOS CURSOS CULTURALES EN CEART DISPONIBLES&#33;Se cuentan con clases de:</h3>
                *Artes plasticas(Lunes,miercoles y viernes de 5:00 a 6:30pm)
                *Ballet(Lunes,miercoles y viernes de 7:30 a 9:00pm)
                *Violin(Martes y jueves de 9:00 a 11:00am)
        </div>

        <div class='dblock dseccion1'>
            <img src="http://mexicali.org/wp-content/uploads/2012/08/Centro-Estatal-de-las-Artes.jpg" >
        </div>

        <div class='dblock dseccion1'>
            Se anuncian proximamente funciones de teatrales de obras de shakespeare en el teatro del estado, 
entre ellas se encuentran desde clasicos como Hamlet o Romeo y Julieta hasta los escritos mas rec&oacute;nditos del autor ya mencionado.Puedes conseguir entradas en ticketmaster.com o comprarlas en la taquilla del teatro a partir del 10 de abril.Informes o dudas al (686)111-1111
        </div>

    </div>

    <div class="fila">

        <div class="dblock dseccion2-1">
            <p>Con un festival artístico-cultural el Instituto Municipal de Arte y Cultura de Mexicali (IMACUM) conmemorará el 42 aniversario luctuoso del legendario compositor y cantante José Alfredo Jiménez.El evento tendrá lugar en las instalaciones de la Casa de la Cultura de la Juventu (CREA Cultura) este sábado 21 de noviembre, y para ello se han organizado una serie de actividades gratuitas para el goce de los mexicalenses.
                A las 7:00 p.m. en la Galería-Vestíbulo se inaugurará la exposición colectiva “Nomás nuestro amor”, en la que participan artistas gráficos, plásticos e ilustradores, entre ellos Gabriela Badilla, Odette Barajas, Gabriela Buenrostro, Luis Felipe Vargas Brownell, Fernando Corona, Aída Corral, Carlos Cortez, Mara Leticia Dorantes, Roberto Figueroa, Gloria Gachuz, Marco Manríquez, Pablo Martínez, Rogelio Pérezcano, Natalia Rojas, Karla Sánchez, y Karina Venegas.
                Estos artistas tomaron el nombre de una canción de José Alfredo para de ahí generar su pieza con libertad de creación, lo que el público mexicalense podrá observar una gran variedad de propuestas en cuanto a trabajo, técnica y colorido.</p>
            </p>
        </div>

        <div class="dblock dseccion1">
            <img class="one" src="http://www.zonalider.com/sites/default/files/styles/scale_max_width_auto_height/public/article/image/jose_alfredo_jimenez.jpg?itok=9cZnT7Ir" alt="x" width=250 height=200></img>
        </div>

    </div>


    <div class="fila">

        <div>
            <p class="dep">Eventos deportivos</p>
        </div>

        <div class="dblock dseccion3">
            &#191;SAB&Iacute;AS QUE&#63;...El juego de béisbol más Largo tuvo lugar en el año 1981,
en las Ligas Menores donde se jugaron 33 entradas. Se enfrentaban Rochester (NY) Red Wings contra Pawtucket (RI) Red Sox. Al entrar en la entrada número 21 el juego seguía empatado 2-2 y fue suspendido. Dos meses después el juego se reasignó 
y en 18 minutos el Pawtucket anotó la carrera del gane.
        </div>

        <div class="dblock dseccion3">
            <img class="batorojo" src="http://allswalls.com/images/boston-red-sox-baseball-mlb-k-wallpaper-1.jpg">
        </div>

        <div class="dblock dseccion3">
            Respecto al base ball se encuentra proximamente la variedad de juegos de la serie del caribe, incluyendo duelos epicos como el de CUBA vs HAITI , ¡No te los puedes perder!
        </div>

        <div class="dblock dseccion3">
            <img class="caribe" src="" alt ="x">
        </div>        
    </div>

    <div class="fila">
        <p class="blueboxie">&#161;SE LE CHISPOTEO&#33;GUADALAJARA, JALISCO (02/ABR/2017).- El Zorro es de los pocos animales capaces de tropezar con la misma piedra dos veces.

Anoche, Matías Alustiza había tenido una noche de ensueño. Dos goles suyos tenían al Atlas en la pelea en el partido y en el Clausura 2017.

A dos minutos del final el argentino puso la pelota en el manchón penal por segunda vez en el juego. En sus pies tenía la victoria que colocaba a los tapatíos en zona de Liguilla.
Alustiza cobró el penalti que representaba la victoria igual que el penalti que representó en su momento el empate a tres. Un disparo con mucha dosis de humillación al arquero.

Gibrán Lajud adivinó la intención del argentino y no se dejó sobajar una segunda vez. Recostó a su derecha y se quedó con la pelota y con el punto para su equipo.

Sí, Alustiza hizo un “Ponchito” González y el Atlas empató 3-3 un juego que debía y tenía que ganar.</p>   
    </div>


</body>

2
  • WOW esa clase de maquetacion me va a facilitar mucho la vida en futuras tareas mas libres hahahah , pero ahora me dieron un diseño especifico de la pagina y con la condicion de que los divs tengan marco y fondo de color, al igual que los <p> x.x
    – Zhenam
    el 4 abr. 2017 a las 17:33
  • bueno trata de usar lo que mas pueda, en lo que pueda ayudar ;) te aconsejo no darles estilo en la misma etiqueta, mas bien agruparlos por clase y creo que te sera un poco mas facil.
    – DIANGA
    el 4 abr. 2017 a las 18:59
0

Revisa las modificaciones hechas en este código :

* {
  padding: 0;
  margin: 0;
}

h1 {
  text-align: center;
  background-color: violet;
  border-width: 2px;
}

p.cul {
  text-align: center;
  font-family: Aharoni;
  font-size: 35px;
  background-color: violet;
  border-style: dotted;
  border-width: 2px;
  width: 100%;
}

div {
  float: left;
  background-color: lightcyan;
  width: 200px;
  border: 15px solid red;
  padding: 25px;
  margin: 15px;
}

img {
  float: middle;
}

div.one {
  float: right;
  background-color: lightcyan;
  width: 330px;
  border: 15px solid red;
  padding: 25px;
  margin: 15px;
}

p {
  float: left;
  background-color: lightcyan;
  width: 782px;
}

img.one {
  position: absolute;
  left: 70%;
  top: 400px;
}

p.dep {
  text-align: center;
  font-family: Aharoni;
  font-size: 35px;
  width: 100%;
  background-color: violet;
  border-style: dotted;
  border-width: 2px;
  position: absolute;
  top: 600px;
  left: 0px;
}

div.cuadrote {
  float: left;
  position: absolute;
  right: %100;
  bottom: 800px;
  background-color: lightcyan;
  width: 200px;
  border: 15px solid red;
  padding: 25px;
  margin: 15px;
}

img.batorojo {
  position: absolute;
  right: 570px;
  bottom: -394px;
  top: 700px;
}

.festival {
  width: 50%;
  height: 20%;
  position: absolute;
  top: 400px;
  left: 0px;
  padding: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.cuadrito {
  vertical-align: middle;
  background-color: lightcyan;
  border: 15px solid red;
  padding: 25px;
  margin: 15px;
  position: absolute;
  top: 650px;
  left: 800px;
}

img.caribe {
  float: right;
  position: absolute;
  right: 30px;
  bottom: -450px;
}

.blueboxie {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  /* Height of the footer */
  top: 900px;
  left: 0;
}
<h1>Evaluacion 2</h1>
<p class="cul">Eventos culturales</p>
<div>&#161;NUEVOS CURSOS CULTURALES EN CEART DISPONIBLES&#33;Se cuentan con clases de: *Artes plasticas(Lunes,miercoles y viernes de 5:00 a 6:30pm) *Ballet(Lunes,miercoles y viernes de 7:30 a 9:00pm) *Violin(Martes y jueves de 9:00 a 11:00am)</div>
<img src="http://mexicali.org/wp-content/uploads/2012/08/Centro-Estatal-de-las-Artes.jpg" alt="x" width=300 height=200>
<div class="one">Se anuncian proximamente funciones de teatrales de obras de shakespeare en el teatro del estado, entre ellas se encuentran desde clasicos como Hamlet o Romeo y Julieta hasta los escritos mas rec&oacute;nditos del autor ya mencionado.Puedes conseguir entradas
  en ticketmaster.com o comprarlas en la taquilla del teatro a partir del 10 de abril.Informes o dudas al (686)111-1111</div class="one">
<p class="festival">Con un festival artístico-cultural el Instituto Municipal de Arte y Cultura de Mexicali (IMACUM) conmemorará el 42 aniversario luctuoso del legendario compositor y cantante José Alfredo Jiménez. El evento tendrá lugar en las instalaciones de la Casa de
  la Cultura de la Juventu (CREA Cultura) este sábado 21 de noviembre, y para ello se han organizado una serie de actividades gratuitas para el goce de los mexicalenses. A las 7:00 p.m. en la Galería-Vestíbulo se inaugurará la exposición colectiva “Nomás
  nuestro amor”, en la que participan artistas gráficos, plásticos e ilustradores, entre ellos Gabriela Badilla, Odette Barajas, Gabriela Buenrostro, Luis Felipe Vargas Brownell, Fernando Corona, Aída Corral, Carlos Cortez, Mara Leticia Dorantes, Roberto
  Figueroa, Gloria Gachuz, Marco Manríquez, Pablo Martínez, Rogelio Pérezcano, Natalia Rojas, Karla Sánchez, y Karina Venegas. Estos artistas tomaron el nombre de una canción de José Alfredo para de ahí generar su pieza con libertad de creación, lo que
  el público mexicalense podrá observar una gran variedad de propuestas en cuanto a trabajo, técnica y colorido.</p>
<img class="one" src="http://www.zonalider.com/sites/default/files/styles/scale_max_width_auto_height/public/article/image/jose_alfredo_jimenez.jpg?itok=9cZnT7Ir" alt="x" width=250 height=200></img>
<p class="dep">Eventos deportivos</p class="dep">
<div class="cuadrote">&#191;SAB&Iacute;AS QUE&#63;...El juego de béisbol más Largo tuvo lugar en el año 1981, en las Ligas Menores donde se jugaron 33 entradas. Se enfrentaban Rochester (NY) Red Wings contra Pawtucket (RI) Red Sox. Al entrar en la entrada número 21 el juego
  seguía empatado 2-2 y fue suspendido. Dos meses después el juego se reasignó y en 18 minutos el Pawtucket anotó la carrera del gane.</div>
<img class="batorojo" src="http://allswalls.com/images/boston-red-sox-baseball-mlb-k-wallpaper-1.jpg" alt="x" width=200 height=170></img>
<div class="cuadrito">Respecto al base ball se encuentra proximamente la variedad de juegos de la serie del caribe, incluyendo duelos epicos como el de CUBA vs HAITI , ¡No te los puedes perder!</div>
<img class="caribe" src="" alt="x" width=200 height=170></img>
<p class="blueboxie">&#161;SE LE CHISPOTEO&#33;GUADALAJARA, JALISCO (02/ABR/2017).- El Zorro es de los pocos animales capaces de tropezar con la misma piedra dos veces. Anoche, Matías Alustiza había tenido una noche de ensueño. Dos goles suyos tenían al Atlas en la pelea
  en el partido y en el Clausura 2017. A dos minutos del final el argentino puso la pelota en el manchón penal por segunda vez en el juego. En sus pies tenía la victoria que colocaba a los tapatíos en zona de Liguilla. Alustiza cobró el penalti que representaba
  la victoria igual que el penalti que representó en su momento el empate a tres. Un disparo con mucha dosis de humillación al arquero. Gibrán Lajud adivinó la intención del argentino y no se dejó sobajar una segunda vez. Recostó a su derecha y se quedó
  con la pelota y con el punto para su equipo. Sí, Alustiza hizo un “Ponchito” González y el Atlas empató 3-3 un juego que debía y tenía que ganar.</p>

1
  • Gracias por el aporte! Se desacomodaron las cosas pero espero porder acomodarlas yo , aunque no entiendo porque sigue desaparecido el textbox :/, igual ire expermientando con los tamaños para ver si es eso
    – Zhenam
    el 4 abr. 2017 a las 17:31

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.