div con % se desconfigura

Ralpi · #1 (**permalink**) 12/03/2009, 05:20

Hola a todos,
Después de una larga temporada viendo las excelentes soluciones que proponéis a los problemas planteados me animo a compartir con vosotros uno que me está enloqueciendo...

Tengo una página hecha con <div> y su correspondiente .css basado en % para adaptarlo a las diferentes resoluciones de pantalla pero el resultado es catastrófico y MUUUUY confuso para mi....

En el PC donde he hecho el desarrollo (1440x900):
- con IE7: Perfecto
- con Mozila Firefox 3.0.7 la apariencia es buena pero de 2 menus idénticos (uno en la parte superior y otro en la inferior) sólo funciona 1 de ellos (

)

En otro PC (IE5 y Firefox 3.0.7):
- utilizando 1280x1024, 1024x768 y 800x600 con IE 5: fatal. Cada bloque aparece donde quiere.
- con 1280x1024, 1024x768 y 800x600 con Mozila Firefox se visualiza razonablemente bien (no es perfecto pero aceptable) pero el mismo problema con los menús (sólo funciona el de la parte inferior).

Como véis, realmente necesito que me echéis un cable. ¿Sugerencias? ¿Necesitáis que pegue el código para analizarlo?

Gracias de antemano.

gazpachoymochil · #2 (**permalink**) 12/03/2009, 05:36

Hola Ralpi, no es que vaya a darte una solución porque tu exposición es bastante genérica, pero intentaré aclararte alguna cosilla...

Muchas veces, los resultados de nuestra programación en CSS se ve descuadrada en distintos navegadores porque los hay que siguen los estándares definidos por el W3C (World Wide Web Consortium) y otros que no. Por ejemplo, puedes buscar los modelos de caja para Firefos e IE y verás a qué me refiero.

Por ello creo que, a parte de si tienes algún problema con tu código (algo que se te haya pasado por alto, por ejemplo) creo que la diferencia entre tus resultados con IE y otro navegador es que cada uno interpreta tu código de una forma diferente, con lo que te descuadra la presentación.

Intenta buscar información respecto al tema... sino puedes poner alguna captura y el código utilizado para ello... si no es muy largo.

Un saludo.

Ralpi · #3 (**permalink**) 12/03/2009, 07:04

Gracias a tu comentario me he puesto manos a la obra dando vueltas al tema del DOCTYPE para evitar que los navegadores usen el modo Quirks (un tema del que tengo que confesar he pasado siempre de puntillas....).

He verificado mi código con validator.w3.org cambiando el DOCTYPE y algunas pequeñas variaciones de sintaxis en <head> (ej. en meta) y los resultados finales han sido que:
a) el código está perfecto para XHTML 1.0 Transitional y
b) también es correcto HTML 4.01 Transitional (aunque tengo los problemas de visualización con IE y con Firefox como comentaba antes)

Por otro lado, he averiguado que para evitar completamente el modo Quirks, debería ser HTML 4.01 estricto. ¿Cierto? ¿Cómo de complejo es adaptar el código?

Gracias de nuevo!

gazpachoymochil · #4 (**permalink**) 12/03/2009, 07:13

Héchale un vistazo a la siguiente web para aclararte mejor el tema.

http://www.librosweb.es/css/capitulo..._de_cajas.html

De todas formas, que se vea de forma distinta en Firefox, Safari, IE, etc no quiere decir que tu código no sea correcto. El problema es la interpretación que hace cada navegador de este código, no del código en sí mismo.

Ralpi · #5 (**permalink**) 12/03/2009, 07:49

La página que me indicas ya la había leído y es una de las que me ha llevado a la conclusión de que los documentos deben ser HTML 4.01 Strict para evitar interpretaciones diferentes por parte de los navegadores.

En el rato desde mi última intervención hasta ahora, he modificado mi documento y lo he hecho HTML 4.01 estricto pero sigue visualizándose de manera diferente con Mozila y con IE.....

¡¡Ya no entiendo nada!!! Quiero decir, que si el diseño está mal hecho se debería mostrar mal pero IGUAL en diferentes navegadores. ¿Estoy en lo cierto?
¿Qué se me está escapando? (me temo que es algo fundamental que debo entender antes de seguir.... Ayuda, por favor!!

).

gazpachoymochil · #6 (**permalink**) 12/03/2009, 08:53

Pues postea alguna sección de código y su css, indicando el comportamiento que tiene en cada navegador para intentar solucionar el problema...

talmente · #7 (**permalink**) 12/03/2009, 13:09

Hola, no desesperes estas intentando hacer una web de la forma a mi entender más difícil y tendrás que tener cuidado con muchas cosas.

Por ejemplo error básico entre navegadores:

Un contenedor 100% de ancho, dentro pones dos div, uno lo flotas a la izq. El otro a la derch, le das un 50% de ancho a los dos, bueno pues en IE6 y no se si en el 7 la de la derecha se te va a descuadrar por que para IE 50+50 no es 100 es 101 creo, por lo tanto para IE será una 50% y la otra 49.9999% y eso se ve igual en ff que en IE. Solución sacar una hoja de estilos para los IE y otra para los demás navegadores. Para esta prueba si la quieres hacer usa:

Código:

#container {
width:100%;
background: #006666 ;
}
#izquierda{
	width:50%;
	float:left;
	background: #990000;
}

#derecha{
width:49.9999%;
float:right;
background-color: #00CCFF;
}

html>body #derecha {
width:50%;
float:right;
background-color: #00CCFF; 
}

Mikmoro · #8 (**permalink**) 12/03/2009, 16:21

Cita:

Iniciado por talmente

Solución sacar una hoja de estilos para los IE y otra para los demás navegadores.

Y si el diseño lo permite, también hay una solución muy práctica: la de la izquierda se flota y la de la derecha no. La izquierda ocupa el 50% y la derecha el resto, sea este cual sea.

talmente · #9 (**permalink**) 13/03/2009, 02:39

Pues a mi eso no me funciona si le quito el float: right y las dos tienen 50% la de la derecha se descuadra.

Mikmoro · #10 (**permalink**) 13/03/2009, 04:04

Perdón, no lo he dicho completo, aunque era evidente por lo que digo después: la de la izquierda se flota y la de la derecha no, y si digo que la de la derecha ocupará el resto es porque le quitamos el width, si no sería imposible que ocupara el resto "sea este cual sea", como había dicho.
No lo he explicado bien.
Ejemplo

Cita:

<!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" xml:lang="es-es" lang="es-es">
<head>
<title></title>
<style type="text/css">
* {margin: 0px; padding: 0px;}
html, body, div {height: 100%;}
#izquierda {background: #f00;
float: left;
width: 50%;
}
#derecha {background: #f0f;}
</style>
</head>
<body>
<div id="izquierda"></div>
<div id="derecha"></div>
</body>
</html>

En cualquier navegador.

talmente · #11 (**permalink**) 13/03/2009, 06:37

Si eso he pensado después el derecho en realidad ocupa el 100% y el izquierdo lo tapa ocupando el 50%.

Ralpi · #12 (**permalink**) 13/03/2009, 06:50

Hola de nuevo,
Antes de nada... ¡¡Mil gracias a todos por vuestros consejos!! Gracias a ellos, he conseguido que mi fantástica página se visualice igual en los navegadores

.

Problemilla colateral: En la cabecera tengo 2 areas con texto pero no consigo alinearlas a la base. He utilizado {position: absolute; bottom: 0px;} pero no hay manera....
Os pego el trocito de código por si me podéis ayudar:

<body>
<div id="cabecera">
<div id="cabecera1" class="titulo1">Tit-izq</div>
<div id="cabecera2" class="titulo2">Tit-der</div>
</div>

donde:
#cabecera {height: 10%; color: #fff; margin-left: 10px; position: relative;}
#cabecera1{float: left; width: 50%; position: relative;}
#cabecera2{position: relative;}
.titulo1{font-size: 2em; font-weight: bold; color: white; text-align: left; position: absolute; bottom: 0px;}
.titulo2 {font-size: 1.2em; font-weight: bold; color: white; font-style: italic; text-align: center; position: absolute; bottom: 0px;}

Gracias!!

Mikmoro · #13 (**permalink**) 13/03/2009, 06:54

Cita:

Iniciado por Ralpi

<div id="cabecera1" class="titulo1">Tit-izq</div>

donde:

#cabecera1{float: left; width: 50%; position: relative;}
.titulo1{font-size: 2em; font-weight: bold; color: white; text-align: left; position: absolute; bottom: 0px;}

Ralpi · #14 (**permalink**) 13/03/2009, 06:58

He eliminado el position: absolute; de los títulos pero sigue sin hacerme ni caso....

gazpachoymochil · #15 (**permalink**) 13/03/2009, 10:08

Sabes qué puedes hacer... lo que yo siempre he hecho es ponerles visualizar los bordes con border: 1px solid red, por ejemplo, de esta forma puedo ver el área de la web que abarca el contenedor (teniendo en cuenta que el píxel del borde también cuenta como espacio).

Código PHP:

  <body>
<div id="cabecera">
<div id="cabecera1" class="titulo1">Tit-izq</div>
<div id="cabecera2" class="titulo2">Tit-der</div>
</div>

Código:

#cabecera {
    height: 10%;
    color: #fff;
    margin-left: 10px;
    position: relative;}
#cabecera1{
    float: left;
    width: 50%;}
#cabecera2{
    float: left;
}

Prueba a ver esto...

Ralpi · #16 (**permalink**) 14/03/2009, 04:11

Lo he conseguido!!!!

Aparentemente la solución la tenía ayer delante de mis ojos, pero no funcionaba.....
Os pego el código CSS:

#cabecera {position:relative; height: 80px; }
#cabecera1 {position: absolute; bottom:5px; left: 10px; width:50%;}
#cabecera2 {position: absolute; bottom:5px; left: 50%; width: 49.9%;}
.titulo1{font-size: 2em; font-weight: bold; color: white; text-align: left;}
.titulo2 {font-size: 1.2em; font-weight: bold; color: white; font-style: italic; text-align: center;}

El html sin cambios:
<div id="cabecera">
<div id="cabecera1" class="titulo1">titulo1</div>
<div id="cabecera2" class="titulo2">titulo2</div>
</div>

Mil gracias a todos de nuevo por vuestra ayuda

y... ¡¡Hasta la próxima!! (creo que será muuuy pronto)

talmente · #17 (**permalink**) 14/03/2009, 11:50

Prueba esto, es más simple y creo mejor que lo que tienes.

Código:

#cabecera {
	background: #993300;
	width: 98%;
	padding-top: 2%;
	border-bottom: 2px solid #999900;
	margin: 0px;
	padding-left: 2%;
}
#cabecera h1 {
	margin: 0px;
	display: inline;
}
#cabecera h2 {
     margin: 0px;
	display: inline;
	font-style: italic;
	color: #FFFFFF;
	padding-left: 50%;
}

Código:

<div id="cabecera">
<h1>titulo1</h1>
<h2>titulo2</h2>
</div>

Ralpi · #18 (**permalink**) 16/03/2009, 02:37

Funciona perfectamente. Gracias talmente

talmente · #19 (**permalink**) 17/03/2009, 04:27

De nada