Foros del Web » Creando para Internet » CSS »

superposición de elementos utilizando clear:left; en explorer

Estas en el tema de superposición de elementos utilizando clear:left; en explorer en el foro de CSS en Foros del Web. muy buenas. dentro del conjunto de una página que estoy diseñando tengo tres elementos (un texto, una imagen y una linea vertical). Yo quiero que ...
  #1 (permalink)  
Antiguo 08/02/2007, 05:02
Avatar de capagris  
Fecha de Ingreso: julio-2003
Mensajes: 131
Antigüedad: 14 años, 5 meses
Puntos: 0
superposición de elementos utilizando clear:left; en explorer

muy buenas.

dentro del conjunto de una página que estoy diseñando tengo tres elementos (un texto, una imagen y una linea vertical).

Yo quiero que se muestren de la siguiente manera:

"texto

imagen (debajo de texto), linea vertical (acontinuación de imagen)"

El tema es, para que no se ponga la imagen acontinuación del texto y se muestre debajo, en la capa de la imagen he puesto clear: left;


pues bien el problema surge, que en firefox se ve de perlas, pero en explorer 6 y 7 se superpone la linea vertical a la imagen y se pega al texto....

Adjunto código:

CSS

Código:
#txt_cat{
    position: relative;
    float: left;    
    background-color: #f2f2f2;
    color: #666666;
    font-size: 12px;
    padding: 0 10px 0 4px;
    margin: 10px 0 0 0px;    
    
}

#img_cab{
    position: relative;
    float: left;
    margin: 10px 0 0 10px;
    clear: left;
}

#lin_vert{
    position: relative;
    float: left;
    background-color: #f2f2f2;
    height: 250px;
    width: 3px;
    overflow: hidden;
    margin: 0px 0 0px 0px;
    
}
HTML

Código:
<div id="txt_cat">Composición modular</div>                
                <div id="img_cab"> <img src="image/img.jpg" /></div>
                <div id="lin_vert"></div>
gracias
__________________
..::Todo lo que no aprendí, no se me ha olvidado.::..
  #2 (permalink)  
Antiguo 08/02/2007, 08:19
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: superposición de elementos utilizando clear:left; en explorer

Posiblemente lo tengas puesto así por otras razones que no apuntas, pero por el conjunto en sí, has puesto innecesariamente un float left al texto. Es lo que te obliga a poner el clear: left, y lo que hace que IE lo interprete mal. Si quitarlo te afectaría a otras partes, encierra tu conjunto en una caja para que mantenga la uniformidad, y si quieres flótala para la relación con el resto de elementos de la página.

Es mi opinión.

Mikel.
  #3 (permalink)  
Antiguo 08/02/2007, 11:34
Avatar de capagris  
Fecha de Ingreso: julio-2003
Mensajes: 131
Antigüedad: 14 años, 5 meses
Puntos: 0
Re: superposición de elementos utilizando clear:left; en explorer

Gracias Mikmoro pero no puedo quitar float:left; si no se me va arriba del todo, a la izquierda y ya no fluye en el contenido.
__________________
..::Todo lo que no aprendí, no se me ha olvidado.::..
  #4 (permalink)  
Antiguo 08/02/2007, 12:41
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: superposición de elementos utilizando clear:left; en explorer

Bueno, como ya decía, he intentado buscar una solución en función del código que has puesto, no de su relación con el resto de elementos.
Ni me imagino qué es lo que te ocurre, por eso siempre lo mejor es poner el conjunto del código completo para ver cómo interactúan las cosas, si no, es buscar soluciones a lo tonto. Creo que primero se debe conocer por qué sucede una cosa, y después cómo solucionarla en el caso concreto.

Mikel.
  #5 (permalink)  
Antiguo 09/02/2007, 02:21
Avatar de capagris  
Fecha de Ingreso: julio-2003
Mensajes: 131
Antigüedad: 14 años, 5 meses
Puntos: 0
Re: superposición de elementos utilizando clear:left; en explorer

pues aqui teneis el churro de código.


HTML

Código:
<body>
    <div id="contenedor">
        <div id="txt_titulo">Titulo</div>
            <div id="linea_gris"></div>
            <div id="linea_fina"></div>
            
                <div id="txt_cat">Composición modular</div>        
                <div id="img_cab"> <img src="../image/img_cabecera.jpg" /></div>
                <div id="lin_vert"></div>
                <div id="img_servicios"><img src="../image/servicios_1.jpg" /></div>
                <div id="linea_fina"></div>
                
                <div id="linea_naran"></div>
                <div id="txt_algunos">Algunos de nuestros productos</div>
                <div id="linea_naran"></div>
                
                <div id="grupo">
                    <div id="img_1">
                      <img src="../image/03_p.jpg" />
                      <div id="txt_nomprod">nombre</div>
                    <div id="txt_info">más información...</div>
                    <div id="linea_pie"></div>                
                    </div>    
                    
                    <div id="img_2"><img src="../mage/05_p.jpg" />
                    <div id="txt_nomprod">nombre</div>
                    <div id="txt_info">más información...</div>
                    <div id="linea_pie"></div>                
                    </div>    
                    
                    <div id="img_3"><img src="../image/15_p.jpg" />
                    <div id="txt_nomprod">nombre</div>
                    <div id="txt_info">más información...</div>
                    <div id="linea_pie"></div>                
                    </div>    
                    
                    <div id="img_4"><img src="../image/102_p.jpg" />
                    <div id="txt_nomprod">nombre</div>
                    <div id="txt_info">más información...</div>
                    <div id="linea_pie"></div>                
                    </div>    
                    
                    <div id="img_5"><img src="../image/106_p.jpg" />
                    <div id="txt_nomprod">nombre</div>
                    <div id="txt_info">más información...</div>
                    <div id="linea_pie"></div>                
                    </div>    
                    
                    <div id="img_6"><img src="../image/107_p.jpg" />
                    <div id="txt_nomprod">nombre</div>
                    <div id="txt_info">más información...</div>
                    <div id="linea_pie"></div>                
                    </div>    
                    
                    <div id="img_7"><img src="../image/111_p.jpg" />
                    <div id="txt_nomprod">nombre</div>
                    <div id="txt_info">más información...</div>
                    <div id="linea_pie"></div>                
                    </div>
                    
                    <div id="img_8"><img src="../image/web2_p.jpg" />
                    <div id="txt_nomprod">nombre</div>
                    <div id="txt_info">más información...</div>
                    <div id="linea_pie"></div>                
                    </div>
                    
                    <div id="img_9"><img src="../image/web8_p.jpg" />
                    <div id="txt_nomprod">nombre</div>
                    <div id="txt_info">más información...</div>
                    <div id="linea_pie"></div>                
                    </div>
                </div>
            <div id="linea_gris"></div>
    </div>
</body>
CSS

Código:
body {
    background: White;
    text-align: left;
    font-size: 10px;
    font-family: Arial, Helvetica, sans-serif;
}


#contenedor {
    position: relative;
    margin: 20px auto;
    width: 638px;
}

#txt_titulo{
    position: relative;
    float: left;
    font-size: 18px;
    font-weight: bold;
    color: #666666;
     
}

#linea_gris{
    position: relative;
    float: left;
    background-color: #666666;
    overflow: hidden;
    height: 6px;
    width: 638px;
    margin: 2px auto;
}

#linea_fina{
    position: relative;
    float: left;
    background-color: #f2f2f2;
    overflow: hidden;
    height: 1px;
    width: 638px;
    margin: 6px auto;
}

#txt_cat{
    position: relative;
    float: left;
    background-color: #f2f2f2;
    color: #666666;
    font-size: 12px;
    padding: 0 10px 0 4px;
    margin: 10px 0 0 0px;    
    overflow: hidden;
}

#img_cab{
    position: relative;
    float: left;
    margin: 22px 0 0 4px;
    
}

#lin_vert{
    position: relative;
    float: left;
    background-color: #f2f2f2;
    height: 250px;
    width: 3px;
    overflow: hidden;
    margin: 0px 0 0px 5px;
    
}
#img_servicios{
    position: relative;
    float: right;
    margin: 3px auto;
}
#linea_naran{
    position: relative;
    float: left;
    background-color: #fbbe54;
    height: 1px;
    width: 200px;
    overflow: hidden;
    margin: 12px 0 2px 0px;
}

#txt_algunos{
    position: relative;
    float: left;
    color: #FBBE54;
    margin: 5px 6px 0 6px;
    font-size: 14px;
    font-weight: bold;
    clear: left;
}



/* productos*/
#grupo{
    position: relative;
    
    clear: left;
}

#img_1{
    position: relative;
    float: left;
    width:176px;
    margin: 25px 0 18px 0px;
    
}

#img_2{
    position: relative;
    float: left;
    width:176px;
    margin: 25px 0 18px 54px;
}

#img_3{
    position: relative;
    float: right;
    width:176px;
    margin: 25px 0 18px 5px;
}

#img_4{
    position: relative;
    float: left;
    width:176px;
    margin: 25px 0 18px 0px;
}

#img_5{
    position: relative;
    float: left;
    width:176px;
    margin: 25px 0 18px 54px;
}

#img_6{
    position: relative;
    float: right;
    width:176px;
    margin: 25px 0 18px 26px;
}

#img_7{
    position: relative;
    float: left;
    width:176px;
    margin: 25px 0 18px 0px;
}

#img_8{
    position: relative;
    float: left;
    width:176px;
    margin: 25px 0 18px 54px;
}

#img_9{
    position: relative;
    float: right;
    width:176px;
    margin: 25px 0 18px 26px;
}

/* fin productos*/

#txt_nomprod{
    position: relative;
    float: left;
    margin: 3px auto;
}

#txt_info{
    position: relative;
    float: left;
    background-color: #87d300;
    color: White;
    font-size: 9px;
    margin: 8px auto;
    padding: 0 2px 0 2px;
    clear: left;
}

#linea_pie{
    position: relative;
    float: left;
    background-color: #f2f2f2;
    width: 176px;
    height: 1px;
    overflow: hidden;
    clear:left;
}
__________________
..::Todo lo que no aprendí, no se me ha olvidado.::..
  #6 (permalink)  
Antiguo 09/02/2007, 04:00
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: superposición de elementos utilizando clear:left; en explorer

Bueno, pues tal y como te decía en el primer mensaje, yo lo que haría es encerrar el conjunto de "texto-foto-lineavertical" en una caja, para colocar dentro de ella los tres elementos como quiera y luego colocarla a ella en relación al resto de la página.

Aquí te devuelvo mi "churro" de propuesta de cómo yo lo solucionaría. Se ve prácticamente igual en FF que en IE 6. A ver si te sirve de algo.

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>web</title>
  <meta http-equiv="Content-Type"
 content="text/html; charset=iso-8859-1">
  <style>
body { background: White;
text-align: left;
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
}
#contenedor {
position: relative;
margin: 20px auto;
width: 638px;
}
#txt_titulo{
position: relative;
float: left;
font-size: 18px;
font-weight: bold;
color: #666666;
}
#linea_gris{
position: relative;
float: left;
background-color: #666666;
overflow: hidden;
height: 6px;
width: 638px;
margin: 2px auto;
}
#linea_fina{
position: relative;
float: left;
background-color: #f2f2f2;
overflow: hidden;
height: 1px;
width: 638px;
margin: 6px auto;
}
#txt_cat{
position: relative;
background-color: #f2f2f2;
color: #666666;
font-size: 12px;
padding: 0 10px 0 4px;
margin: 10px 0 0 0px; overflow: hidden;
display: inline;
}
#img_cab{
position: relative;
float: left;
margin: 0px 0 0 4px;
}
#lin_vert{
position: relative;
background-color: #f2f2f2;
height: 250px;
width: 3px;
overflow: hidden;
margin: 0px 0 0px 25px;
}
#img_servicios{
position: relative;
float: right;
margin: 3px auto;
}
#linea_naran{
position: relative;
float: left;
background-color: #fbbe54;
height: 1px;
width: 200px;
overflow: hidden;
margin: 12px 0 2px 0px;
}
#txt_algunos{
position: relative;
float: left;
color: #FBBE54;
margin: 5px 6px 0 6px;
font-size: 14px;
font-weight: bold;
clear: left;
}
/* productos*/
#grupo{
position: relative;
clear: left;
}
#img_1{
position: relative;
float: left;
width:176px;
margin: 25px 0 18px 0px;
}
#img_2{
position: relative;
float: left;
width:176px;
margin: 25px 0 18px 54px;
}
#img_3{
position: relative;
float: right;
width:176px;
margin: 25px 0 18px 5px;
}
#img_4{
position: relative;
float: left;
width:176px;
margin: 25px 0 18px 0px;
}
#img_5{
position: relative;
float: left;
width:176px;
margin: 25px 0 18px 54px;
}
#img_6{
position: relative;
float: right;
width:176px;
margin: 25px 0 18px 26px;
}
#img_7{
position: relative;
float: left;
width:176px;
margin: 25px 0 18px 0px;
}
#img_8{
position: relative;
float: left;
width:176px;
margin: 25px 0 18px 54px;
}
#img_9{
position: relative;
float: right;
width:176px;
margin: 25px 0 18px 26px;
}
/* fin productos*/
#txt_nomprod{
position: relative;
float: left;
margin: 3px auto;
}
#txt_info{
position: relative;
float: left;
background-color: #87d300;
color: White;
font-size: 9px;
margin: 8px auto;
padding: 0 2px 0 2px;
clear: left;
}
#linea_pie{
position: relative;
float: left;
background-color: #f2f2f2;
width: 176px;
height: 1px;
overflow: hidden;
clear:left;
}
#conjunto {
clear: both;
float: left;}
  </style>
</head>
<body>
<div id="contenedor">
<div id="txt_titulo">Titulo</div>
<div id="linea_gris"></div>
<div id="linea_fina"></div>
<div id="img_servicios"><img
 src="../image/servicios_1.jpg"></div>
<div id="conjunto">
<div id="txt_cat">Composici&oacute;n modular</div>
<div id="img_cab"><img src="../image/img_cabecera.jpg"></div>
<div id="lin_vert"></div>
</div>
<div id="linea_fina"></div>
<div id="linea_naran"></div>
<div id="txt_algunos">Algunos de nuestros productos</div>
<div id="linea_naran"></div>
<div id="grupo">
<div id="img_1"><img src="../image/03_p.jpg">
<div id="txt_nomprod">nombre</div>
<div id="txt_info">m&aacute;s informaci&oacute;n...</div>
<div id="linea_pie"></div>
</div>
<div id="img_2"><img src="../mage/05_p.jpg">
<div id="txt_nomprod">nombre</div>
<div id="txt_info">m&aacute;s informaci&oacute;n...</div>
<div id="linea_pie"></div>
</div>
<div id="img_3"><img src="../image/15_p.jpg">
<div id="txt_nomprod">nombre</div>
<div id="txt_info">m&aacute;s informaci&oacute;n...</div>
<div id="linea_pie"></div>
</div>
<div id="img_4"><img src="../image/102_p.jpg">
<div id="txt_nomprod">nombre</div>
<div id="txt_info">m&aacute;s informaci&oacute;n...</div>
<div id="linea_pie"></div>
</div>
<div id="img_5"><img src="../image/106_p.jpg">
<div id="txt_nomprod">nombre</div>
<div id="txt_info">m&aacute;s informaci&oacute;n...</div>
<div id="linea_pie"></div>
</div>
<div id="img_6"><img src="../image/107_p.jpg">
<div id="txt_nomprod">nombre</div>
<div id="txt_info">m&aacute;s informaci&oacute;n...</div>
<div id="linea_pie"></div>
</div>
<div id="img_7"><img src="../image/111_p.jpg">
<div id="txt_nomprod">nombre</div>
<div id="txt_info">m&aacute;s informaci&oacute;n...</div>
<div id="linea_pie"></div>
</div>
<div id="img_8"><img src="../image/web2_p.jpg">
<div id="txt_nomprod">nombre</div>
<div id="txt_info">m&aacute;s informaci&oacute;n...</div>
<div id="linea_pie"></div>
</div>
<div id="img_9"><img src="../image/web8_p.jpg">
<div id="txt_nomprod">nombre</div>
<div id="txt_info">m&aacute;s informaci&oacute;n...</div>
<div id="linea_pie"></div>
</div>
</div>
<div id="linea_gris"></div>
</div>
</body>
</html>
Mikel.
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 08:55.