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: Pandemia en 10 de Marzo 2016, 22:17
-
Buenas noches amigos, os pido ayuda con este ejercicio porque me está costando sangre sudor y lagrimas, he llegado a un punto de no retorno en el que e dicho que no puedo con el quisiera que me echaseis una mano haber donde esta está el fallo, porque he consultado todo lo que he podido y mas yo creo que debe ser algo que se me pasa pero vosotros tenéis más experiencia y lo veréis más rápido; bueno como siempre muchas gracias de antemano por vuestro tiempo y saludos.
<!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;
}
#caja1{
width: 50%;
background-color: #ADD8E6;
float: left;
}
#caja2{
width: 50%;
background-color: #90EE90;
float: left;
}
#col_der{
width: 25%;
height: 150px;
background-color: yellow;
float: right;
clear: left;
height: 150px;
}
#caja_1{
width: 418px;
height: 50px;
background-color: #DDA0DD;
float: left;
clear: both;
}
#footer{
width: 418px;
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>
<!--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>
<!--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>
-
Hola!
Donde va el texto "Conoce las últimas novedades..." y "Artículo sobre Gimp" debes meterlo en un div
Otra cosa que tienes que tener en cuenta es que no puedes poner width: 50% exactamente porque los margin, border, etc. te comen parte del espacio
Lee lo que se comenta en estos hilos:
https://www.aprenderaprogramar.com/foros/index.php?topic=1647.0
Hay más hilos con comentarios sobre este ejercicio: escribe CU01036D y pulsa buscar en el buscador del foro, ahí podrás encontrar muchos comentarios sobre este ejercicio
Saludos!
-
Hola Pandemia,
cuidado con usar % para delimitar espacios, es muchísimo más cómodo pero tienes que seguir descontando % si añades bordes. Los bordes aunque uses % también restan espacio.
Lo qur he hecho es quitar los bordes y las dos cajas centrales las he delimitado en un mismo div. Así funciona.
Te adjunto código.
<!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{
text-align: center;
}
#cabecera{
background-color: #ADD8E6;
height: 30px;
}
#col_izq{
width: 25%;
background-color: yellow;
float: left;
height: 150px;
}
#cajas{
float:left;
width: 50%;
background-color: #90EE90;
}
#caja1,#caja2{
float: left;
height:75px;
}
#col_der{
width: 25%;
height: 150px;
background-color: yellow;
float: left;
}
#caja_contacto{
width: 50%;
height: 50px;
background-color: #DDA0DD;
float: left;
clear: both;
}
#footer{
width: 50%;
height: 50px;
background-color: pink;
float: right;
}
.limpiador{
clear: both;
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>
<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_contacto">Contacta con nosotros</div>
<!--caja derecha-->
<div id="footer">Aviso legal</div>
<div class="limpiador"></div>
</body>
</html>
Saludos!!
-
Parece que César se me adelantó por 1 minuto. ;D ;)
-
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>