Ayuda con Clear:Both; en Explorer

jplazavidaurre · #1 (**permalink**) 30/01/2009, 06:54

Hola,

Soy principiante.

Estoy haciendo una web con CSS: Una cabecera o banner de 800px, bajo la cabecera una columna de menús a la izda. de 200px y un área de textos central de 600px y bajo estos dos un pie con la dirección de 800px.

La cosa es que para que los menús de la izquierda y el área de textos no monten sobre el pie le he puesto a éste en la hoja de estilos Clear:Both; y así en todos los navegadores todo queda perfecto y en orden MENOS en Explorer, que el área de textos se desplaza hacia abajo en su columna justo por debajo de la parte inferior de los menús de la izquierda y luego debajo de todo ello queda el pié.

¿Qué estoy haciendo mal?

Gracias por la ayuda y la paciencia

willyfc · #2 (**permalink**) 30/01/2009, 07:48

pero como estas usando el clear, te pongo un ejemplo de como debe ser:

Código css:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
#cabecera{ width:800px; height:100px; margin:0 auto; background:#999}
#contenedor{ width:800px; height:auto; overflow:auto; margin:0 auto; padding:0 0 5px 0; background:#333}
#izq{width:200px; height:250px; background:#fff; float:left;}
#der{ width:600px; height:250px; background:#CCC; float:right;}
.clear{clear:both;}
#pie{width:800px; height:30px; margin:0 auto; background:#666;}
</style>
</head>
 
<body>
<div id="cabecera"></div>
<div id="contenedor">
    <div id="izq"></div>
    <div id="der"></div>
    <div class="clear"></div>
</div>
<div id="pie"></div>
</body>
</html>

pruebalo y avisas como te va
PD:las medidas fijas en los altos de las columnas son solo para ejemplo pueden tener cualquier medida o se auto

jplazavidaurre · #3 (**permalink**) 30/01/2009, 08:06

Gracias desde Francia Willifc,

Mira, mi CSS es así. Creo que está bien. Hay en horizontal arriba el banner y la navegación; luego iría debajo: a la izda. el menus_izda y a la derecha el contenido, y abajo de estos dos el pie.

Como te digo va bien salvo en explorer que el contenido se desplaza verticalmente hacia abajo por debajo de los menus_izda y no veo lo que sea.

Gracias por tu amable ayuda.

Código css:

Ver original/*========================================
Estilos para el body
========================================*/
body {
font-family: Verdana, Arial, Helvetica, sans-sherif;
font-size: Small; /*tamaño de la fuente*/
color: green;
background-image:url(img/bg_body.png);
background-attachment: fixed;
background-position: center center;
}
a {text-decoration: none;}
a:link {color: green}
a:visited {color: red}
a:hover, a:focus {text-decoration: underline;}
/*========================================
Estilos para el wrapper
========================================*/
#wrapper {
color: black;
background-color: white;
width: 800px;
margin-right: auto;
margin-left: auto;
border-top: 1px solid #C4C4C4;
border-right: 1px solid #C4C4C4;
border-left: 1px solid #C4C4C4;
border-bottom: 1px solid #C4C4C4;
}
/*========================================
Estilos para el banner
========================================*/
#banner {
 
    background-image:url(img/banner_fondo.jpg);
 
    background-repeat:no-repeat;
    width: 800px;
 
    height:150px;
    margin-bottom: 0;
    }
/*========================================
Estilos para navegacion
========================================*/
#navegacion {
    background-image:url(img/bg_navegacion.png);
 
    background-repeat:repeat-y;
    text-align:right;
    color: black;
    border-bottom: 1px solid #8c8c8c;
    margin-bottom: 0;
    }
    #navegacion li {
        display: inline;
        list-style-type: none;
        padding-right: 15px;
        }
/*========================================
Estilos para menus_izda
========================================*/
#menus_izda {
    font-size: 80%;
    font-style: normal;
    float: left;
    padding-left: 5px;
    padding-top: 5px;
    width: 190px;
    list-style-type: none;
}
/*========================================
Estilos para el contenido -index-
========================================*/
#contenido {
    text-align:justify;
    background-color: white;
    width: 580px;
    margin-left: 190px;
    padding-left: 10px;
    padding-right: 10px;
}
/*========================================
Estilos para el pie
========================================*/
#pie {
clear: both;
padding-top: 10px;
border-top: 1px solid #8c8c8c;
margin-top: 20px;
}
    address {
    text-align: center;
    font-size: 80%;
    font-style: normal;
    letter-spacing: 2px;
    line-height: 1.5em
    }

Dalvenjha · #4 (**permalink**) 30/01/2009, 08:16

Aqui hay algo que siempre he discutido, el uso del div vacío para el "clear:both", es intrusivo y lo que hace es ordenar elementos en su sitio, ¿Por qué?, una buena maquetación no necesita de "cortes", he visto gente nueva, que los usa en demasía, como un trabajo que ordené la vez pasada.

La solución es tan fácil como maquetar bien y TENIENDO UN PLAN de la distribución, poner los elementos inherentes al header tals como logo o slogan, en un div HEADER, meter los elementos inherentes al cuerpo, como el bodytext o el menú dentro deun div WRAPPER O CONTENT, y luego el FOOTER, es tán fácil como ello y una vez colocados esos tres elementos, el resto de nuestra maquetación NO PUEDE FALLAR, asi evitamos el uso de divs vacíos para poner "cortes".

Que si los divs flotantes me joden?

Yeah, yeah... entonces pon un min-height a tu elemento content o wrapper y luego dale overflow:hidden para los navegadores de verdad, y para el IE usa comentarios condicionales, especificando el height y un overflow:visible.

¿Que eso no valida?

Vamos, vamos, el comentario condicional es culpa del IE no mía, y vamos por otro lado, a mi me gusta el standard y eso se sabe, pero prefiero usar un hack para ie, antes de ser intrusivo.

¿Por qué?

Porque el CSS se ha hecho para simplificar las cosas, no para complicarlas, el uso de un div vacío no hace más que alargar el código fuente con un elemento que NO DEBERÍA ESTAR AHÍ.

Pensemos un poco más en evitar este tipo de cosas, dandonos soluciones rápidas, nos agradeceremos el gesto.

Saludos!!

<--- edición-->

podrías poner la estructura que usas amigo? y el CSS completo.

Saludos nuevamente.

jplazavidaurre · #5 (**permalink**) 30/01/2009, 08:21

Hola Dalvenjha;

Supongo que me escribes con la mejor de las intenciones, pero no te he entendido -casi- nada. Como digo arriba soy bastante novato. No trabajo en esto ni soy informático, solo quiero hacer un sitio web y aprender. No sé a qué te refieres con un div vacío... ¿dónde he hecho eso?

Si pudieras ser más didáctico y paciente con un pobre novato te estaré muy agradecido.

Gracias de antemano

PD: El CSS es ese, no hay más, estoy empezando la web.

La estructura está hecha con php, con trozos. Por eso es bastante latoso enviarla, pero si creéis que ayudaría lo hago.

willyfc · #6 (**permalink**) 30/01/2009, 08:25

Cita:

Iniciado por jplazavidaurre

Hola Dalvenjha;

No sé a qué te refieres con un div vacío... ¿dónde he hecho eso?

lo decía por mi, yo si puse un div vacio(que pena no quize molestarlo). Prueba de esta manera, copialo y pegalo en un archivo nuevo para probarlo:

Código css:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
body {
font-family: Verdana, Arial, Helvetica, sans-sherif;
font-size: Small; /*tamaño de la fuente*/
color: green;
background-image:url(img/bg_body.png);
background-attachment: fixed;
background-position: center;
}
a {text-decoration: none;}
a:link {color: green}
a:visited {color: red}
a:hover, a:focus {text-decoration: underline;}
/*========================================
Estilos para el wrapper
========================================*/
#wrapper {
color: black;
background-color: white;
width: 800px;
margin:0 auto;
border: 1px solid #C4C4C4;
}
/*========================================
Estilos para el banner
========================================*/
#banner { 
    background-image:url(img/banner_fondo.jpg); 
    background-repeat:no-repeat;
    width: 800px; 
    height:150px;
    margin: 0;
    }
/*========================================
Estilos para navegacion
========================================*/
#navegacion {
    background-image:url(img/bg_navegacion.png);
    background-repeat:repeat-y;
    text-align:right;
    color: black;
    border-bottom: 1px solid #8c8c8c;
    margin-bottom: 0;
    }
    #navegacion li {
        display: inline;
        list-style-type: none;
        padding-right: 15px;
        }
/*========================================
Estilos para menus_izda
========================================*/
#menus_izda {
    font-size: 80%;
    font-style: normal;
    float: left;
    padding: 5px 0 0 5px;
    width: 190px;
    list-style-type: none;
}
/*========================================
Estilos para el contenido -index-
========================================*/
#contenido {
    text-align:justify;
    background-color: white;
    width: 580px;
    margin-left: 190px;
    padding:0 10px 0 10px;
    border-bottom:1px solid #333;
}
/*========================================
Estilos para el pie
========================================*/
#pie {
clear: both;
padding-top: 10px;
border-top: 1px solid #8c8c8c;
margin-top: 20px;
}
    .address {
    text-align: center;
    font-size: 80%;
    font-style: normal;
    letter-spacing: 2px;
    line-height: 1.5em
    }
 
</style>
</head>
 
<body>
<div id="wrapper">
    <div id="banner">
        <div id="navegacion"></div>
    </div>
    <div id="menus_izda">sdfsdfsdf</div>
    <div id="contenido">sdfasfasdf</div>
    <div id="pie"> asdf asfasf asf asdf </div>
</div>  
</body>
</html>

avisas como te va

Dalvenjha · #7 (**permalink**) 30/01/2009, 08:31

No es que me moleste... es simplemente que podemos evitar ciertas cosas.

En fin...

Bueno entonces te propongo algo distinto, asi no queda como que solo enttré a renegar, lo cual no he hecho tampoco.

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hombres Trabajando</title>
<style type="text/css">
body{
margin:0;
padding:0;
width:100%;
height:100%;
}

#container{
position:relative;
left:0;
top:0;
width:1000px;
min-height:600px;
overflow:hidden;
<!-- Aqui establecemos estas dos propiedades, que serán las que hagan crecer el div a medida que 
haya más contenido.-->
padding-bottom:10px; <!---- para que se aleje tu texto un poco del final del container-->
}

*html #container{
height:600px;
overflow:visible;  
}
<!--aqui usamos el hack del asterisco que consiste poner un asterisco y luego 
html antes del nombre del elemento a distinguir en internet explorer le diremos que tenga una altura definida, 
pero lo que se pase, si se verá y como el IE tiene un defecto, crecerá con el fondo del elemento contenedor.-->
<!--Pasemos a la estructura básica-->

#header{
position:relative;
left:0;
top:0;
width:100%;
height:100px; <!--- la cabecera no crecerá -->
overflow:hidden; <!-- además todo contenido que se pase no se verá-->
background:red;
}

#wrapper{
position:relative;
left:0;
top:0;
width:100%;
min-height:400px; <<!--la misma explicación sobre hacer que crezca con el contenido, 
además también crecerá con los elementos flotados.-->
overflow:hidden;
background:black;
}

#footer{
position:relative;
left:0;
top:0;
width:100%;
height:100px; <!--- el footer tampoco crecerá -->
overflow:hidden; <!-- además todo contenido que se pase no se verá-->
background:blue;
}

</style>
</head>
<body>
<div id="container">
<div id="header">
<!-- aqui el contenido de tu cabecera -->
</div>
<div id="wrapper">
<!-- aqui el contenido de tu texto y etc -->
</div>
<div id="footer">
<!-- aqui el contenido de tu pie de página -->
</div>
</div>
</body>
</html>

jplazavidaurre · #8 (**permalink**) 30/01/2009, 08:38

Hola Willyfc,

Gracias por tomarte tanta molestia y darme tu tiempo. Muy agradecido de verdad.

Mira, he ido repasando tu código y cambiando el mio, cuando veo el resultado sigue pasándome lo mismo... solo en explorer. No sé que puede ser. Os comento que los menús de la izquierda en el html los he hecho con una lista ul con elementos li... ¿puede tener que ver?

Gracias por la ayuda.

willyfc · #9 (**permalink**) 30/01/2009, 08:41

Cita:

Iniciado por Dalvenjha

No es que me moleste... es simplemente que podemos evitar ciertas cosas.

primero: lo dije como en tono de broma solo que se me olvido poner el

y si pienso que podemos evitar ciertas cosas y particularmente yo prefiero hacer que mi web valide, tal vez es cuestión de gustos o no se y pienso que con lo de Ie6 yo también no lo trago al maldito pero hay mucha gente que lastimosamente lo usa aún

en fin...

jplazavidaurre que ie usas?

jplazavidaurre · #10 (**permalink**) 30/01/2009, 08:52

Estimados co-foreros,

He visto que el problema estaba en la lista de la izquierda hecha con elementos ul y li.

Como yo le he dado un ancho determinado a esa columna y en uno de esos menús una palabra más larga entre <h2> </h2> no entra entera en ese espacio de 200px y en explorer lo manda abajo todo lo que hay en la derecha para que sí entre... ¡la leche!

¿Sabéis si hay alguna manera de solucionar esto?

Por ejemplo:

<h2>en un lugar de la mancha</h2>
Hace esto:

en un
lugar
de la
mancha

Pero si es por ejemplo:

<h2>el arzobispo de constantinopla se quiere arzobispodesconstatinopolizar</h2>
Hace esto:
el arzobispo
de constantinopla
se quiere
arzobispodesconstantinopolizar

Y ésta última palabra ocupa más de 200px y entonces manda abajo lo de la derecha en el otro div.

¿Se puede solucionar eso?

Thanks