Buenas noches amigos aquí os dejo el ejercicio CU01035D del tutorial CSS desde cero para que le echéis un vistazo. Gracias de antemano por vuestro tiempo. Ah se me olvidaba en la 3º caja del tercer ejercicio el color solo sale por arriba lo he probado todo y no hay manera, a ver si me podéis ayudar.
Gracias y Saludos
<!DOCTYPE html>
<html lanng="es">
<head>
<meta name="description" content="Portal web - Aprenderaprogramar.com">
<meta name="keywords" content="clear css: left, right, both.">
<meta charset="utf-8">
<title>Clear CSS: left, right, both.</title>
<style>
#a{text-align: center; border-style: dotted;background-color: orange;}
#caja1, #caja2, #caja3, #caja4, #caja5, #caja6, #caja7, #caja7, #caja8{
width:50px;height: 50px;margin-right: 5px;border: solid;
}
#caja1{
background-color: red;
float: left;
}
#caja2{
background-color: blue;
float: left;
}
#caja3{
background-color: yellow;
float: left;
}
#caja4{
background-color: greenyellow;
float: left;
}
#caja5{
background-color: pink;
float: left;
}
#caja6{
background-color: darkmagenta;
float: left;
}
#caja7{
background-color: forestgreen;
float:left;
}
#caja8{
background-color: dodgerblue;
float: left;
}
.limpiador{
clear: both;
border: none;
height: 0;
}
#b{text-align: center;border-style: dotted;background-color: orange;}
#header{
text-align: center;
border-style: double;
background-color:yellow;
}
#texto{
background-color: yellow;
margin-top: 20px;
margin-bottom: 20px;
}
#c{
text-align: center;border-style: dashed;background-color: orange;
}
#caja_1{
text-align: center;
width: 200px;
height: 50px;
margin-right: 5px;
background-color: yellow;
float: right;
}
#caja_2{
text-align: center;
width: 200px;
height: 50px;
margin-right: 5px;
background-color: Purple;
float: right;
}
#caja_3{
text-align: center;
width:200px;
height: 5px;
margin-right: 5px;
background-color: pink;
float: right;
}
#d{text-align: center; border-style: solid;background-color: orange;}
#final{
background-color: #DEB887;
clear: both;
}
</style>
</head>
<body>
<div id="a">Ejercicio a:</div> <br/>
<div id="menu">
<div id="caja1">caja1</div>
<div id="caja2">caja2</div>
<div id="caja3">caja3</div>
<div id="caja4">caja4</div>
<div id="caja5">caja5</div>
<div id="caja6">caja6</div>
<div id="caja7">caja7</div>
<div id="caja8">caja8</div>
<div class="limpiador"></div>
</div>
<br/><br/><br/><br/>
<div id="b">Ejercicio b:</div>
<br/><br/>
<div id="header">Textos bonitos</div><br/><br/>
<br/>
<div id="texto">
<br/>
De nuevo, estoy al final de un momento decisivo. Un momento que llevas tanto tiempo esperando... que ahora casi decepciona.
Es el final y el comienzo al miesmo tiempo. Y no estoy segura de si esta sensación del estómago es por miedo, por ilusión.
No sé a qué me voy a tener que enfrentar. Ni a qué mala gente tendré que luchar. No sé si me quedaré sola por el camino,
me dejaré ganar o algo por el estilo.<br/><br/>
Pero es un momento decisivo. En el que por fin puedo decidir completamente cual quiero que sea mi próximo destino,
mi próxima puerta a la que llegar. Esta vez soy sólo yo quien decido los monstruos contra los que pelear.<br/><br/>
El miedo sigue ahí, y la ilusión y la decepción. Pero aun con todos los sentimientos confundidos, voy a ir entrando
fuerte, voy a ir dejando mis huellas en este nuevo camino.<br/><br/>
</div>
<div id="c">Ejercicio c:</div>
<br/><br/>
<div id="menu">
<div id="caja_1">caja_1</div>
<div id="caja_2">caja_2</div>
<div id="caja_3">caja_3</div>
</div><br/><br/><br/><br/>
<div id="d">Ejercicio d:</div><br/><br/>
<div id="final">Curso CSS aprenderaprogramar.com</div>
</body>
</html>
Tema: CSS alinear varios div en horizontal float left, right, both clear CU01035D (Leído 2752 veces)
RSS -
WAP2