Foros aprenderaprogramar.com
Aprender a programar => Aprender a programar desde cero => Mensaje iniciado por: AnalfabetaDigital en 28 de Mayo 2016, 19:49
-
Buenas,
He acabado de hacer este ejercicio, pero el resultado no es el que debería y, por más vueltas que le doy, no soy capaz de ver dónde está el error.
Éste es el código HTML.
<!DOCTYPE html>
<html>
<head>
<title>Ejercicio porpiedad float</title>
<link rel="stylesheet"type="text/css"href="Ejercicio_4.css">
</head>
<body>
<div>
<h1>Bienvenidos a aprenderaprogramar.com</h1>
</div>
<div id="menu">
<ul>
Menu:
<li>Cursos</li>
<li>Humor</li>
<li>Divulgacion</li>
</ul>
</div>
<div id="caja1">
<p>Conoce las ultimas novedades del lenguaje JavaSript.</p>
</div>
<div id="caja2">
<p>Articulo sobre Gimp, un programa de software libre para el diseño grafico.</p>
</div>
<div id="caja3">
<p>Espacio reservado para publicidad</p>
</div>
<div id="caja4">
<p>Contacta con nosotros</p>
</div>
<div id="caja5">
<p>Aviso legal</p>
</div>
</body>
</html>
Al que le he añadido este código CSS:
*{font-family:helvetica;widht:600px;margin:0;padding:0;}
h1{height:40px;width:100%;margin-right:30px;
font-size:20px;border-style:solid;padding:30px;
background-color:#DEB887;text-align:center;}
#menu{height:200px;width:25%;float:left;
font-size:20px;background-color:#FAED8A;
border-style:solid;text-align:center;}
#caja1{height:100px;background-color:#FADE8A;
font-size:20px;border-style:solid;
width:50%;float:left;text-align:center;}
#caja2{height:100px;font-size:20px;margin-top:0px;
border-style:solid;width:50%;float:left;
background-color:#FACD8A;text-align:center;}
#caja3{height:150px;background-color:#FAAB8A;border-style:solid;
font-size:20px;width:20%;float:left;text-align:center;}
#caja4{height:100px;font-size:20px;border-style:solid;width:50%;
float:left;background-color:#DDA0DD;text-align:center;}
#caja5{height:100px;font-size:20px;border-style:solid;width:40%;
float:left;background-color:#FA8AA2;text-align:center;}
Como podéis ver las cajas no quedan completamente unidas, no sé si es por el tamaño. La de "espacio reservado" no consigo que se pegue a la de arriba, y las dos de abajo también quedan flotando.
Si alguien me puede orientar, se lo agradecería mucho.
Un saludo.
-
Buenas,
Como nadie me dice nada, yo sigo haciendo pruebas. He cambiado el código CSS y ahora sólo me descuadra el cuadro "espacio reservado para publicidad".
Os paso el HTML, que también lo he retocado:
<body>
<div class="h1">
<h1>Bienvenidos a aprenderaprogramar.com</h1>
</div>
<div class="menu">
<ul>
Menu:
<li>Cursos</li>
<li>Humor</li>
<li>Divulgacion</li>
</ul>
</div>
<div class="caja1">
Conoce las ultimas novedades del lenguaje JavaSript.
<div class="interior">
Articulo sobre Gimp, un programa de software libre para el diseño grafico.</div>
</div>
<div class="caja2">
<p>Espacio reservado para publicidad</p>
</div>
<div class="caja3">
<p>Contacta con nosotros</p>
</div>
<div class="caja4">
<p>Aviso legal</p>
</div>
</body>
</html>
Y éste es el CSS que he cambiado:
*{font-family:helvetica;margin:0;padding:0;}
body{width:100%;border-style:solid;height:218px;
border-width:2px;}
.h1{width:100%;border-style:solid;height:50px;
font-size:20px;text-align:center;background-color:#DEB887;}
.menu{width:25%;border-style:solid;height:100px;
text-align:center;float:left;background-color:#FAED8A;}
.caja1{width:50%;border-style:solid;height:100px;
text-align:center;float:left;background-color:#FADE8A;}
.interior{width:100%;border-top-style:solid;height:50px;
background-color:#BFF572;margin-top:25px;}
.caja2{width:23%;border-style:solid;height:100px;
text-align:center;float:left;background-color:#FAAB8A;}
.caja3{width:50%;border-style:solid;height:50px;
text-align:center;float:left;background-color:#DDA0DD;}
.caja4{width:49%;border-style:solid;height:50px;
text-align:center;float:left;background-color:#FACD8A;
Me huelo que debe ser un problema con los tamaños, pero no sé.
Si alguien me puede ayudar, se lo agradezco mil.
Un saludo. ;)
-
Hola AnalfabetaDigital.
Como bien dices, el problema está en los tamaños. Al usar porcentajes, es bastante complicado ajustar los anchos.
También deberías intentar no repetir tanto código, por ejemplo, en la caja3 y caja4 se repiten muchas propiedades.:
#caja3{width:50%;background-color:#DDA0DD;}
#caja4{width:49%;background-color:#FACD8A;
.caja3y4{border-style:solid;height:50px;text-align:center;float:left;}
En este enlace puedes ver otra forma de resolverlo.
https://www.aprenderaprogramar.com/foros/index.php?topic=1647.msg8621#msg8621
o en este otro,
https://www.aprenderaprogramar.com/foros/index.php?topic=3862.msg16582#msg16582
Saludos. ;D
-
Buenas,
Muchísimas gracias, Pedro por tu ayuda. Me he estado revisando los enlaces que me has enviado y me ha aclarado bastante la cosa.
Un saludo ;)