Foros aprenderaprogramar.com
Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: condor12 en 22 de Junio 2017, 07:09
-
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:
!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:
#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 :-\ :'(
-
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>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
#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 >>>>>>>>>>>>>>>>>>>>>>>>>>
<!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 ;)
-
Gracias ahora me di cuenta