Autor Tema: Como alinear dos divs en html 5 crear un diseño en cajas según instrucciones  (Leído 3305 veces)

condor12

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 5
    • Ver Perfil
Buenas noches a todos, espero que me puedan ayudar con este problema porque hace rato que me tiene loco, estos haciendo un curso de html y me han pedido hacer lo siguiente con etiquetas div

El diseño, indicado de arriba a abajo y de izquierda a derecha debe ser el siguiente:

1º) Caja de 1000 px de ancho por 400 px de alto
2º) Tres cajas de 250 px de ancho por 40 px de alto
3º) Dos cajas cuadradas de 500 px
4º) En en lateral izquierdo dos cajas cuadradas de 350 px y en el lateral derecho una caja rectacgular de 600 px de ancho por 710 px de alto
 
He realizado lo siguiente:

Código: [Seleccionar]
!DOCTYPE html>
<html lang="es">
<bacgroud>
<head>
<meta charset="UTF-8">
<title>Ejercicio 4</title>
<link rel="stylesheet" type="text/css" href="estilo.css">
</head>
<body bgcolor="black">
</body>

<h1 id="cabecera"> Ejercicio 4</h1>

<div id="section1"></div>


<div id="cuadro2"></div>
<div id="cuadro3"></div>
<div id="cuadro4"></div>
</div>

<div id="cuadro5">Cuadrado Rojo 1</div>
<div id=="cuadro6"></div>
</div>

<div id="cuadrado3"></div>
<div id="cuadrado4"></div>
</div>
</body>
</html>


CSS:



Código: [Seleccionar]
#cabecera {

background-color: white;
text-align: center;
}

#section1 {
height: 400px;
width: 1000px;
background-color: green;
margin-top: 20px;
margin-left: 20px;

}

#cuadro2 {

height: 40px;
width: 250px;
background-color: blue;
margin-top: 20px;
margin-left: 20px;
float: left;
}

#cuadro3 {
height: 40px;
width: 250px;
background-color: blue;
margin-top: 20px;
margin-left: 20px;
float: left;
}

#cuadro4 {
height: 40px;
width: 250px;
background-color: blue;
margin-top: 20px;
margin-left: 20px;
float: left;
}

#cuadro5 {
height: 500px;
width: 500px;
background-color: red;
margin-top: 100px;
margin-left: 20px;

}

#cuadro6 {
height: 500px;
width: 500px;
background-color: red;
margin-top: 100px;
float: left;
}


pero no puedo alinear los dos cuadrados de 500px como me pide, por favor ayuda ya no se que hacer  :-\ :'(
« Última modificación: 24 de Julio 2017, 19:41 por Ogramar »

paramonso

  • Intermedio
  • ***
  • Mensajes: 241
  • El ignorante afirma, el sabio duda y reflexiona.
    • Ver Perfil
Re:Como alinear dos divs en html 5
« Respuesta #1 en: 23 de Junio 2017, 18:37 »
Hola condor12.

He repasado tu código y veo que tienes algunos cierres </div> que no tienen su apertura <div>

Te pongo el código tuyo  que he repasado.
Yo creo que se hace así.
<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<CSS>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
Código: [Seleccionar]
#cabecera {

background-color: white;
text-align: center;
}
body{
height:1950;
width:auto;
}
#seccion1{

border:solid 2px white;
height: 430px;
width: 1030px;
margin: 5px auto;/* Centrado */
}

#cuadro1 {
   
   height: 400px;
   width: 1000px;
   background-color: green;
   margin-top: 20px;
   margin-left: 20px;
   
}
#seccion2 {
border:solid 2px white;
height: 80px;
width: 830px;
margin:5px auto;
}
#cuadro2 {
 
   background-color: blue;
   height: 40px;
   width: 250px;
   margin-top: 20px;
   margin-left: 20px;
   float:left;
}

#cuadro3 {
   
   background-color: blue;
   height: 40px;
   width: 250px;
   margin-top: 20px;
   margin-left: 20px;
   float:left;
}

#cuadro4 {
   
   background-color: blue;
   height: 40px;
   width: 250px;
   margin-top: 20px;
   margin-left: 20px;
    float:left;
}

 
#seccion3{
border:solid 2px white;
height: 540px;
width: 1060px;
margin:5px auto;
}


#cuadro5 {
 
   
    height: 500px;
width: 500px;
background-color: red;
margin-top: 20px;
    margin-left: 20px;
float:left;
 
}

#cuadro6 {
   
   background-color: red;
    height: 500px;
width: 500px;
    margin-top: 20px;
    margin-left: 20px;
float:left;
 
 
}


<<<<<<<<<<<<<<<<<<<<<<<<<<<< HTML >>>>>>>>>>>>>>>>>>>>>>>>>>
Código: [Seleccionar]


<!DOCTYPE html>
<html lang="es">
<!--<bacgroud>-->
<head>
   <meta charset="UTF-8">
   <title>Ejercicio 4</title>
   <link rel="stylesheet" type="text/css" href="estilo.css">
</head>
   <body bgcolor="black">
   </body>
   
<h1 id="cabecera"> Ejercicio 4</h1>
   
   <div id="seccion1">
   <div id="cuadro1"></div>
   
   </div>
   
   <div id="seccion2">
   <div id="cuadro2"></div>
   <div id="cuadro3"></div>
   <div id="cuadro4"></div>
   </div>
   
   <div id="seccion3">
   <div id="cuadro5">Cuadrado Rojo 1</div>
   <div id="cuadro6">Cuadrado Rojo 2</div>
</div>

   <div id="cuadrado3"></div>
   <div id="cuadrado4"></div>
 
</body>
</html>

Se reparte el tamaño de las caja en los contenedores y el tamaño de los contenedores en el
body despues se alinean.

Espero haberte ayudado  ;)

condor12

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 5
    • Ver Perfil
Re:Como alinear dos divs en html 5
« Respuesta #2 en: 28 de Junio 2017, 13:07 »
Gracias ahora me di cuenta

 

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