Foros del Web » Creando para Internet » CSS »

Problemas para hacer funcionar el clear: both correctamente

Estas en el tema de Problemas para hacer funcionar el clear: both correctamente en el foro de CSS en Foros del Web. Hola a todos, Estoy intentando crear una especie de blog iba todo bien hasta que he intentado usar el "clear:both" para que me rellene con ...
  #1 (permalink)  
Antiguo 13/10/2009, 05:49
 
Fecha de Ingreso: junio-2008
Mensajes: 145
Antigüedad: 9 años, 6 meses
Puntos: 0
Problemas para hacer funcionar el clear: both correctamente

Hola a todos,

Estoy intentando crear una especie de blog iba todo bien hasta que he intentado usar el "clear:both" para que me rellene con el color de fondo que yo quiera los sitios en los que el texto se queda corto, lo he colocado donde está ahora y en otros sitios pero no he conseguido hacerlo funcionar.

Si pudieráis darme alguna pista de que estoy haciendo mal os lo agradecería mucho.

Código HTML:
<div class="contenedor">
<div class="todo">
<div class="blog">
<div class="bloque_i">
    <div class="texto_informacion">
    <h2>Más información</h2>
<p>
Texto auxiliar
</p>
<div class="foto">
<img src="imagenes/foto.jpg" />
</div>
<ul>
    <li><a href="anadir_comentarios.php">A&ntilde;adir  comentario</a></li>
    <li><a href="ver_comentarios.php">Ver comentarios (0)</a></li>
</li>
</ul>
</div>
</div>
<div class="bloque_d"><h2>Post nº 2</h2>
<p>
Texto del post
</p>
</div>
<div class="espacio"></div>
</div>
</div>
        <div class="pie">
            <p>Blog de pruebas</p>
        </div>
</div>
</body>
</html> 
Y estos los estilos CSS para Frirefox, aún no tengo la hoja creada para IE.

Código HTML:
.contenedor{
	width:966px;
	margin: 0 auto;
}
.todo{
	float:left;
	width:100%;
	margin:0;
	padding:0;
	background-color:#666666;
}
.blog{
	float:left;
	margin:0;
	padding:0;
	width:100%;
	border-bottom:1px solid #000000;
}
.bloque_i{
	float:left;
	background-color:#666666;
	width:350px;
}
.bloque_i ul{
 	list-style:none;
	margin:0;
	padding:0;
}
.bloque_i ul li{
 	list-style:none;
	display:inline;
	margin:5px;
	padding:0;	
}
.texto_informacion{
	float:left;
	margin:10px;
	padding:5px;
	border:1px solid #000000;
	background-color:#FFFFFF;
}
.texto_informacion p{
	text-align:justify;
	padding:5px;
}
.texto_informacion h2{
	margin-top:10px;
	padding:10px;
	text-decoration:underline;
	text-align:center;
}
.foto{
	float:left;
	width:306px;
	border:0;
	margin:5px;
	padding:0;	
}
.foto img{
	width:306px;
	height:172px;
	border:1px solid #000000;
	margin: 0 0 5px 0;
}
.bloque_d{
	float:right;
	background-color:#FFFFFF;
	width:616px;

}
.bloque_d h2{
	font-size:1.8em;
	margin:0;
	padding:15px 0 10px 10px;
}
.bloque_d p{
	padding:10px;
	text-align:justify;
}

.espacio{	
	clear:both;
}
.pie{
	float:left;
	width:946px;
	height:30px;
	margin:0;
	padding:0 10px 12px 10px;
	background-color:#000000;
	color:#FFFFFF;
	font-weight:bold;
}
  #2 (permalink)  
Antiguo 13/10/2009, 07:12
Avatar de StarClown  
Fecha de Ingreso: agosto-2008
Ubicación: Virginia
Mensajes: 150
Antigüedad: 9 años, 3 meses
Puntos: 8
Respuesta: Problemas para hacer funcionar el clear: both correctamente

Acabo de intentar ayudarte arreglando tu CSS pero NA'... coloqué el clear:both; por todas partes e incluse probe hacer otras cosas y no funcionó NADA!

Espero que alguien te de la respuesta a este problemilla. Un saludo!
__________________
Soy aprendiz de aprendices, pero aspiro llegar a ser Maestra. ---Yo---
  #3 (permalink)  
Antiguo 13/10/2009, 07:20
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Problemas para hacer funcionar el clear: both correctamente

Hola Haga41
Creo que estás queriendo hacer con el div de corte (o limpiador) algo para lo que no está concebido ni puede hacer.
Me refiero a crear columnas equilibradas (misma altura independientemente del contenido en ellas).

Si estoy en lo cierto, mira a ver si esta composición puede ayudarte:
www.css.devillasbuenas.es/2columnas.html
Es una adaptación de otra que era otra desde otra... y sólo la he mirado en ff e ie7
Si la encuentras útil y te atoras en algún punto al adaptarla, ya comentarás.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #4 (permalink)  
Antiguo 13/10/2009, 07:26
Avatar de loncho_rojas
Colaborador
 
Fecha de Ingreso: octubre-2008
Ubicación: En el mejor lugar del mundo
Mensajes: 2.704
Antigüedad: 9 años, 1 mes
Puntos: 175
Respuesta: Problemas para hacer funcionar el clear: both correctamente

Se estan burlando verdad?

Cita:
coloqué el clear:both; por todas partes
Como si el clear fuese magico.

haga.. Podrías explicarte un poco mejor al respecto de tu problema.. no vi grandes problemas en tu codigo... pero tampoco entiendo que es lo que deseas conseguir, a pesar de que lo leo una y otra vez..

Si veo problemas en las medidas..
tu contenedor: 966px-- uno de tus modulos: 350px; y el otro 616px... es decir, salvo que alguien me corrija, es preferible que los modulos de contenido no sean exactos con respecto al contenedor.. es decir, que la suma de los contenidos no deberian llegar a las medidas del contenedor, y mas aun con flotadores, pues te traeran muchos conflictos en los navegadores...

Aun asi, no se cual es tu real problema
__________________
Ayudo con lo que puedo en el foro, y solo en el foro.. NO MENSAJES PRIVADOS.. NO EMAILS NI SKYPE u OTROS.

Antes de hacer un TOPICO piensa si puedes hallarlo en Google o en el Buscador del Foro...

Última edición por loncho_rojas; 13/10/2009 a las 07:36
  #5 (permalink)  
Antiguo 13/10/2009, 07:38
Avatar de StarClown  
Fecha de Ingreso: agosto-2008
Ubicación: Virginia
Mensajes: 150
Antigüedad: 9 años, 3 meses
Puntos: 8
Respuesta: Problemas para hacer funcionar el clear: both correctamente

Cita:
Iniciado por loncho_rojas Ver Mensaje
Se estan burlando verdad?



Como si el clear fuese magico.

haga.. Podrías explicarte un poco mejor al respecto de tu problema.. no vi grandes problemas en tu codigo... pero tampoco entiendo que es lo que deseas conseguir, a pesar de que lo leo una y otra vez..

Si veo problemas en las medidas..
tu contenedor: 966px-- uno de tus modulos: 350px; y el otro 616px... es decir, salvo que alguien me corrija, es preferible que los modulos de contenido no sean exactos con respecto al contenedor.. es decir, que la suma de los contenidos no deberian llegar a las medidas del contenedor, y mas aun con flotadores, pues te traeran muchos conflictos en los navegadores...

Aun asi, no se cual es tu real problema
No me burlo ni tampoco uso los códigos como artes mágicas jaja es solo que le cambié de sitios como en tres ocasiones (obviamente en sitios en que se puede y debe usar dentro del CSS) y aun así no pasó nada de lo que la Srta. o el caballero pide. Que malo eres!
__________________
Soy aprendiz de aprendices, pero aspiro llegar a ser Maestra. ---Yo---
  #6 (permalink)  
Antiguo 13/10/2009, 08:33
 
Fecha de Ingreso: junio-2008
Mensajes: 145
Antigüedad: 9 años, 6 meses
Puntos: 0
Respuesta: Problemas para hacer funcionar el clear: both correctamente

Muchas gracias a todos por responder,

loncho_rojas
Lo que quiero es lo que ha explicado kseso?, es decir que cuando se acabe el texto principal en la parte derecha de la web antes que en la izquierda, es decir cuando la altura se quede corta, el hueco que queda hasta abajo se rellene con el color de fondo y la anchura del bloque derecho es algo como lo que sale en la web que ha puesto kseso?, el caso es que intentado adaptar el estilo "izquierda" de esa web al equivalente para lo que quiero hacer en la mía "bloque_d" y a pesar del "overflow:hidden" el texto se me sale por debajo y por detrás de la capa de pie de página. Este es el estilo que tengo ahora para bloque_d:

Código HTML:
.bloque_d{
	float:right;
	background:#FFFFFF none repeat scroll 0 0;
	width:616px;
	overflow:hidden;
	margin-bottom:-5000px;
	padding-bottom:5000px;	
}
Por otra parte no entiendo muy bien lo de que la anchura no debe ser exacta para no tener problemas con navegadores, hasta ahora siempre lo he hecho así para IE6, IE 7 y Firefox (creando hojas de estilo por separado para cada uno claro y retocando lo que hacía falta en cada caso) y creo que las webs se veían correctamente. ¿A qué te refieres exactamente con eso?¿Cuál sería la mejor forma de hacerlo?
  #7 (permalink)  
Antiguo 13/10/2009, 08:43
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Problemas para hacer funcionar el clear: both correctamente

Lo tienes fácil, Haga41, hasta que comprendas que hace qué en mi ejemplo y puedas trasladarlo a tu composición:
coloca en "#izquierda" y "#centro" tus contenidos.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #8 (permalink)  
Antiguo 13/10/2009, 09:06
 
Fecha de Ingreso: junio-2008
Mensajes: 145
Antigüedad: 9 años, 6 meses
Puntos: 0
Respuesta: Problemas para hacer funcionar el clear: both correctamente

Muchas gracias kseso?, eso haré. A ver si dentro de poco saco un rato libre y puedo mirar tu ejemplo más detenidamente para ver cómo funciona.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 03:45.