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: Dimitar Stefanov en 14 de Enero 2016, 21:39
-
Aquí os dejo los códigos del ejercicio CU01036D del curso CSS desde cero.
Código HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="description" content="Portal web"/>
<meta name="keywords" content="programar,cursos"/>
<link rel="stylesheet" type="text/css" href="estilos64.css"/>
<title>Ejemplo float</title>
</head>
<body>
<div id="caja1"><br/>Bienvenidos a aprenderaprogramar.com</div>
<div id="caja2"><br/>Menú<br/><br/>-Cursos<br/><br/>-Humor<br/><br/>-Divulgación<br/><br/></div>
<div id="caja3"><br/><br/>Conoce las últimas novedades del lenguaje<br/>JavaScript.</div>
<div id="caja4"><br/><br/><br/><br/>Espacion reservado para publicidad</div>
<div id="caja5"><br/><br/>Artículo sobre Gimp, un programa de software<br/>libre para el diseño gráfico.</div>
<div id="caja6"><br/>Contacta con nosotros</div>
<div id="caja7"><br/>Aviso legal</div>
</body>
</html>
Código CSS: "estilos64.css"
* {
font-family: arial;
font-size: 14px;
text-align: center;
}
body {
width: 604px;
}
div {
border: solid 1px;
}
#caja1 {
width: 602px;
height: 60px;
background-color: #DEB887;
border-bottom: none;
}
#caja2 {
width: 151px;
height: 181px;
float: left;
border-right: none;
}
#caja3 {
width: 300px;
height: 90px;
float: left;
background-color: #ADD8E6;
}
#caja4 {
width: 150px;
height: 181px;
float: right;
border-left: none;
}
#caja5 {
width: 300px;
height: 90px;
float: left;
background-color: #90EE90;
border-top: none;
}
#caja6 {
width: 301px;
height: 60px;
float:left;
background-color: #DDA0DD;
border-top: none;
}
#caja7 {
width: 301px;
height: 60px;
float: left;
border-left: none;
border-top: none;
}
-
Buenas dimiste
En el navegador en que lo he probado tu código no se ve bien, aparecen las distintas partes del diseño descolocadas.
Para que la caja4 encaje tengo que bajarle el width a 149px, si no no me encaja.
La caja 7 aparece debajo de la caja 6, cuando debería aparecer al lado.
Deberías revisar esto
Puedes ver propuestas de solución en https://www.aprenderaprogramar.com/foros/index.php?topic=1647.0
Salu2
-
Buenas Ogramar,
He mirado el enlace que me enviaste y yo no veo el ejercicio igual que como lo pedían en el tutorial. Pensaba que se tenía que hacer literalmente como estaba en el dibujo (sin una caja de contenedor y luego dentro las cajas). De todas maneras, tal y como dices tu, mi ejercicio tampoco ha conseguido el objetivo, porque si no lo has podido ver bien...Además, yo para verlo bien (con el navegador firefox) tenía que subirlo a zoom 150% porque si no, no se visualiza bien.
Saludos