Hola tienes repetida la etiqueta body
Tienes varias cosas que tener en cuenta cuando crees un diseño de este tipo:
- Si usas etiquetas como aside, nav, section... puede que el navegador te genere alguna distorsión, para hacer este ejercicio veo mejor hacerlo todo con div
- Tienes que pensar siempre que los porcentajes están referidos a la caja contenedora. Si la caja contenedora tiene un 50% de width y a otra caja dentro de la contenedora le aplicas otro 50% de width, en realidad tienes un 25% de la pantalla total (la mitad del 50%)
- Cuando quieras romper que los elementos float tienes que hacerlo de alguna manera, yo lo he hecho con un div class="limpia"
- En los anchos y altos tienes que tener en cuenta el borde
Este sería el código con algunos cambios aunque te recomiendo que lo hagas con div:
<html> <head>
<title>Portal web - aprenderaprogramar.com</title>
<meta charset="utf-8">
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
#cuerpo{
text-align: center;
text-family: arial;
}
header{
border: solid black;
border-width: 5px;
background-color: #DEB887;
width: 100%;
box-sizing: border-box;
padding: 20px;
}
nav{
border-right: 5px solid black;
border-bottom: 5px solid black;
border-left: 5px solid black;
width: 25%;
float: left;
box-sizing: border-box;
height:150px;
}
section{
float: left;
border-right: 5px solid black;
border-bottom: solid black 5px;
height:145px;
width: 50%;
/*
background-color: red;
height: 95px;
box-sizing: border-box;*/
}
#articulo_1{
background-color: #ADD8E6;
border-bottom: solid black 1px;
width:50%;
height:50%;
}
#articulo_2{
background-color: #90EE90;
width:50%;
height:50%;
}
aside{
width: 24.5%;
height: 150px;
border-bottom: solid black 5px;
border-right: solid black 5px;
float: left;
box-sizing: border-box;
}
#contacta{
width: 50%;
float: left;
background-color: #DDA0DD;
box-sizing: border-box;
border-right: solid black 5px;
border-bottom: solid black 5px;
border-left: solid black 5px;
padding: 10px;
}
#aviso{
width: 50%;
float: left;
border-bottom: solid black 5px;
border-right: solid black 5px;
box-sizing: border-box;
padding: 10px;
}
.limpia {clear:both;}
</style>
</head>
<body>
<div id="cuerpo">
<header id="cabecera">
Bienvenidos a aprenderaprogramar.com
</header>
<div id="contenedor_central">
<nav>
<ul>
<li>Menú</li>
<li>-Cursos</li>
<li>-Humor</li>
<li>Tutoriales</li>
<li>Divulgacion</li>
</ul>
</nav>
<section>
<article id="articulo_1" class="articulo">
Conoce las últimas novedades del lenguaje JavaScript.
</article>
<article id="articulo_2" class="articulo">
Artículo sobre Gimp, un programa de software libre para el diseño gráfico.
</article>
</section>
<aside>
Espacio reservado para publicidad
</aside>
</div>
<div class="limpia"></div>
<footer>
<div id="contacta">
Contacta con nosotros <a href="https://www.aprenderaprogramar.com/">www.aprenderaprogramar.com</a>
</div>
<div id="aviso">
Aviso legal
</div>
</footer>
</div>
</body>
</html>Saludos
Tema: Diseño web CSS dos, tres, cuatro columnas con float Maquetar una web (CU01036D) (Leído 5481 veces)
RSS -
WAP2