Buenas noches Cesar ayer estuve toda la tarde con el buscador del foro mirando los ejercicios de otros compañeros y la verdad es que me fijé en un par que tenían el div central para las dos cajas centrales pero se me pasó o no les hice caso y ya es que no veía de tanto buscar, de todas maneras muchas gracias por tu tiempo me has ayudado mucho como siempre, saludos.
Bermartinv gracias por tomarte las molestias de hacer el código, pero es que quería ceñirme lo mas posible al ejercicio y poner bordes y todo de todas maderas me ha ayudado ver como lo has echo tú. Gracias por tu tiempo y las molestias que te has tomado
Me habéis ayudado mucho como siempre
saludos
Aquí os dejo el código haber que os parece.
<!DOCTYPE html>
<html lang="es">
<head>
<meta name="description" content="portal web - Aprenprenderaprogramar.com">
<meta name="keywords" content="diseño web CSS con varias columnas con float "><meta charset="utf-8">
<style>
*{font-family: arial;}
body{
width: 900px;
border-style: dotted;
border-width: 1px;
}
div{
border-style: solid;
text-align: center;
border-width: 2px;
margin: 7px;padding: 7px;
}
#cabecera{
background-color: #ADD8E6;
height: 30px;
}
#col_izq{
width: 25%;
background-color: yellow;
float: left;
height: 150px;
}
#cajas{
float:left;
width: 39%;
background-color: #90EE90;
}
#caja1,#caja2{
float: left;
height: 75px;
}
#col_der{
width: 25%;
height: 150px;
background-color: yellow;
float: right;
clear: right;
}
#caja_1{
width: 45.8%;
height: 50px;
background-color: #DDA0DD;
float: left;
clear: both;
}
#footer{
width: 45.8%;
height: 50px;
background-color: pink;
float: right;
}
.limpiador{
clear: both;
padding: 0;
border-style: none;
}
</style>
<title>Diseño web con CSS con varias columnas con float.</title>
</head>
<body>
<!--cabecera de la página-->
<div id="cabecera">Bienvenidos a aprenderaprogramar.com</div>
<!--columna izquierda-->
<div id="col_izq">
Menú<br/>
<ul>
<li>Cursos</li>
<li>Humor</li>
<li>Divulgación</li>
</ul>
</div>
<!--las cajas centrales van en un div contenedor aparte-->
<div id="cajas">
<!--1ª caja central (arriba)-->
<div id="caja1">Conoce las últimas novedades del lenguaje Javascript.</div>
<!--2ª caja central (abajo)-->
<div id="caja2">Articulo sobre Gimp, un programa sobre software libre para el diseño gráfico.</div>
</div>
<!--columna derecha-->
<div id="col_der">Espacio reservado para publicidad</div>
<!--caja izquierda-->
<div id="caja_1">Contacta con nosotros</div>
<!--caja derecha-->
<div id="footer">Aviso legal</div>
<div class="limpiador"></div>
</body>
</html>
Tema: Ejercicio CU01036D del curso de CSS diseño web css con columnas con float (Leído 3467 veces)
RSS -
WAP2