Foros del Web » Creando para Internet » CSS »

Problema en Firefox al tener floats a ambos lados.

Estas en el tema de Problema en Firefox al tener floats a ambos lados. en el foro de CSS en Foros del Web. Buenos Dias, Tengo un problemilla que llevo arrastrando un tiempecillo y no consigo solucionar en una estructura en particular a la hora de desarrollar plantillas ...
  #1 (permalink)  
Antiguo 27/02/2008, 06:38
 
Fecha de Ingreso: octubre-2007
Mensajes: 118
Antigüedad: 10 años, 1 mes
Puntos: 11
Problema en Firefox al tener floats a ambos lados.

Buenos Dias,

Tengo un problemilla que llevo arrastrando un tiempecillo y no consigo solucionar en una estructura en particular a la hora de desarrollar plantillas web.

La estrutura es una capa de contenido que engloba a 2 capas laterales , donde van los módulos y una capa central donde va el contenido escrito de la pagina.

Ambas capas van flotadas(izquierda y derecha respectivamente) y la capa central con un display:table , al utilizar capas crecientes segun su contenido.

El problema me viene en Firefox, que en localhost, no me suele dar este problema, no se si sera debido al minimo tiempo de carga o .....

Pero una vez subida la pagina al servidor, entre carga y carga de apartados de la pagina, a veces se "caen" las capas central y derecha hacia abajo, teniendo que refrescar la pagina para que se coloquen donde iban.

Mirando con el firebug, en la capa del contenido central me sale como si le hubiera dado la anchura de #content(el ejemplo abajo) cuando siempre la defino .

Un ejemplo basico de como estructuro estas capas principales que englobaran el resto son asi:

Código:
#content{
height:100%;
background:url(img/content.gif) center repeat-y;
width:892px;
}


.left{
width:162px;
float:left;
display:inline;
} 

.right{
float:right;
width:162px;
}

#contenido{
width:553px !important;
margin:auto;
display:table;
}
Ya dentro de ellas, defino mas capas para sus objetivos, pero esta claro que esta base principal es la que me da problemas en Firefox y no se por qué.
  #2 (permalink)  
Antiguo 27/02/2008, 09:58
 
Fecha de Ingreso: febrero-2008
Mensajes: 62
Antigüedad: 9 años, 9 meses
Puntos: 1
Re: Problema en Firefox al tener floats a ambos lados.

Podrias poner el markup que estas utilizando?
Para asi saber el orden de los elementos que usas y a cuales estas aplicando esas clases (me queda duda con ese display: inline)
  #3 (permalink)  
Antiguo 27/02/2008, 10:47
 
Fecha de Ingreso: octubre-2007
Mensajes: 118
Antigüedad: 10 años, 1 mes
Puntos: 11
Re: Problema en Firefox al tener floats a ambos lados.

No te entiendo muy bien que quieres decir con Markup , imagino que sera la disposicion de las capas. Te lo pongo aqui:

Código:
<div id="header">
<div class="anuncios_header">
<p class="telefono">Tel. 967101411</p>
<!--
<a href="" ><img src="<?php //echo "$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]"; ?>/css/img/boton_chat.gif" align="right" class="boton_chat" alt=""/></a>
-->
</div>
</div>

<!-- **********************************CONTENIDO************************************* -->
<div id="content">


<div class="left">


<div class="login">

</div>

<div class="modulo">
<div class="modulo_top">

</div>

<div class="modulo_bottom"></div>
</div><!--CIERRA MODULO-->


</div><!--CIERRA LEFT-->




<div class="right">
<div class="modulo_right">
<div class="modulo_top_right">

</div>


<div class="modulo_bottom_right"></div>
</div><!--CIERRA MODULO-->

</div><!--CIERRA RIGHT-->



<div id="contenido">
<div class="moduleSearch">

</div>

<!--<div class="mainContent">

</div>-->

<div class="moduleBanners">

</div>

</div><!--CIERRA CONTENIDO-->




</div><!--CIERRA CONTENT-->

<div class="pie"></div>

<!-- ******************************************** PIE ********************************** -->
</div><!--CIERRA CONTENEDOR-->


<div class="footer"></div>

No solo me pasa en esta estructura, sino tambien simplemente cuando por ejemplo , tengo 3 imagenes alineadas mediante float las laterales y display:table las centrales, me pasa lo mismo en Firefox que termina cayendose alguna capa.


Lo del display:inline en "LEFT" me lo dijo un amigo pero no me explico el porque ponerlo y la propiedad inline no la he utilizado apenas y no se realmente el uso que me podria hacer ahi pero no me funciono para mi objetivo

Última edición por shilen79; 24/03/2008 a las 06:44
  #4 (permalink)  
Antiguo 27/02/2008, 11:55
 
Fecha de Ingreso: febrero-2008
Mensajes: 62
Antigüedad: 9 años, 9 meses
Puntos: 1
Re: Problema en Firefox al tener floats a ambos lados.

Bueno, aqui vamos.

Comenzare diciendo que la forma en que ordenas tus elementos no es la ideal: poner las capas left y right antes de contenido, puesto que esta ultima es de mayor importancia.

Lo otro es que no estoy del todo seguro que tipo de problema existe con el "display: table;" para IE (por lo menos para versiones que no sean la 7). Pero si no me equivoco si lo hay.

Con lo del "display: inline":
"Inline: Son aquellos elementos que típicamente pueden solo contener texto y otros elementos "Inline". Visualmente no producen línea antes o después."
O sea que no le puedes asignar ancho y alto, como podrias hacer con un elemento de tipo bloque.

http://www.cs.sfu.ca/CC/165/sbrown1/wdgxhtml10/inline.html

Ahora pasemos a tu problema:

Existen diversas formas de conseguir cierto efecto para ordenar los elementos. Cada una tiene sus pro y contras, asi que, esta que te pongo a continuacion no es la mas ideal siempre. Depende de la situacion y gusto. En lo personal casi no la uso, pero la publico por ser mas sencilla en cuanto a codigo.

Basada en una tecnica publicada por Dan Cederholm (simplebits.com).

Utilizaremos los mismos valores que tienes para los anchos (width):
Content: 892px
Contenido: 554px /* Aqui le he agregado 1px para manejar valores pares */
Left: 162px
Right: 162px
Margenes: 169px /* Esto es lo que resta de 892-554-162-162. Ya veras para que se usara. */

Asi que, como dije antes, le daremos prioridad a tu capa de contenido.

Estructura:

Código:
<div id="content">
	<div class="contenido">
		Contenido - Lorem Ipsum Dolor Sit Amet
	</div>
	<div class="left">
		Left - Lorem Ipsum Dolor Sit Amet
	</div>
	<div class="right">
		Right - Lorem Ipsum Dolor Sit Amet
	</div>
</div>
Estilo:
Código:
#content {
	width: 892px;
	position: relative;
	}
.contenido {
	margin: 0px 169px;
	width: 554px;
	}
.left, .right {
	width: 162px;
	position: absolute;
	}
	.left {
		top: 0px;
		left: 0px;
		}
	.right {
		top: 0px;
		right: 0px;
		}
Como veras, la finalidad es:
1. Definirle el position: relative a tu capa contenedora, para que los elementos posicionados absolutamente lo hagan en relacion a dicha capa.

2. Asignarle margenes a tu capa contenido, que sera el mismo valor de las capas laterales, mas 7px para generar un margen visual. (Ya con esto podria eliminarse el width para esta capa)

3. Posicionar absolutamente las capas left y right, a 0px de la parte superior de la capa contenedora, y a 0px de la izquierda y derecha respectivamente.

Bueno, eso seria basicamente. Ya lo demas depende de el tipo de contenido que tengas.

Si tienes alguna otra duda (o si no quedo claro algo de lo anterior) solo nos dices y te ayudamos.
  #5 (permalink)  
Antiguo 28/02/2008, 03:49
 
Fecha de Ingreso: octubre-2007
Mensajes: 118
Antigüedad: 10 años, 1 mes
Puntos: 11
Re: Problema en Firefox al tener floats a ambos lados.

El display:inline ha sido una "columpiada" en toda regla . Despues de mirar ayer el manual de esta propiedad que aun no habia utilizado , vi que para nada era lo que me comento mi amigo .

Tu solución con propiedades absolutas ya la pensé en su momento, pero procuro no usar posiciones absolutas en mis diseños puesto que luego al modificar/ añadir capas , siempre hay que estar posicionando todo y realmente no llevan el flujo normal de la pagina.

Coloco primero las capas laterales , porque la capa izquierda es la primera por defecto , por tanto , al colocarlo de otro modo ya habria que jugar con las posiciones relativas / absolutas, cosa que como dije no quiero.

El display: table lo necesito en Firefox, porque al flotar las capas laterales, la capa central solo me muestra el contenido de ella pero no sus estilos (imagen repetida, etc).

Muchas gracias por tu ayuda, pero espero poder encontrar una solución, si la hay, mas acorde con lo que busco
  #6 (permalink)  
Antiguo 28/02/2008, 05:43
 
Fecha de Ingreso: febrero-2008
Mensajes: 62
Antigüedad: 9 años, 9 meses
Puntos: 1
Re: Problema en Firefox al tener floats a ambos lados.

No se si has probado flotando las 3 capas a la izquierda (float: left;), utilizando una estructura:

<div id="content">
<div class="left"></div>
<div class="contenido"></div>
<div class="right"></div>

<div class="clear"></div>

</div>

Nada mas recuerda que no hay que codificar de acuerdo al orden de los elementos segun su presentacion final, si no, de acuerdo a su importancia. Hay sus excepciones, pero bueno, ya seria otro tema.
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 01:18.