Foros del Web » Creando para Internet » CSS »

div con % se desconfigura

Estas en el tema de div con % se desconfigura en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 12/03/2009, 06:20
 
Fecha de Ingreso: diciembre-2005
Mensajes: 19
Antigüedad: 12 años
Puntos: 0
div con % se desconfigura

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.
  #2 (permalink)  
Antiguo 12/03/2009, 06:36
 
Fecha de Ingreso: febrero-2005
Mensajes: 105
Antigüedad: 12 años, 9 meses
Puntos: 1
Respuesta: div con % se desconfigura

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.
  #3 (permalink)  
Antiguo 12/03/2009, 08:04
 
Fecha de Ingreso: diciembre-2005
Mensajes: 19
Antigüedad: 12 años
Puntos: 0
Respuesta: div con % se desconfigura

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!
  #4 (permalink)  
Antiguo 12/03/2009, 08:13
 
Fecha de Ingreso: febrero-2005
Mensajes: 105
Antigüedad: 12 años, 9 meses
Puntos: 1
Respuesta: div con % se desconfigura

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.
  #5 (permalink)  
Antiguo 12/03/2009, 08:49
 
Fecha de Ingreso: diciembre-2005
Mensajes: 19
Antigüedad: 12 años
Puntos: 0
Respuesta: div con % se desconfigura

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!!).
  #6 (permalink)  
Antiguo 12/03/2009, 09:53
 
Fecha de Ingreso: febrero-2005
Mensajes: 105
Antigüedad: 12 años, 9 meses
Puntos: 1
Respuesta: div con % se desconfigura

Pues postea alguna sección de código y su css, indicando el comportamiento que tiene en cada navegador para intentar solucionar el problema...
  #7 (permalink)  
Antiguo 12/03/2009, 14:09
Avatar de talmente  
Fecha de Ingreso: noviembre-2007
Mensajes: 233
Antigüedad: 10 años
Puntos: 4
Respuesta: div con % se desconfigura

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; 
}
  #8 (permalink)  
Antiguo 12/03/2009, 17:21
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
Respuesta: div con % se desconfigura

Cita:
Iniciado por talmente Ver Mensaje
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.
__________________
Visita mi nueva web idplus.org
  #9 (permalink)  
Antiguo 13/03/2009, 03:39
Avatar de talmente  
Fecha de Ingreso: noviembre-2007
Mensajes: 233
Antigüedad: 10 años
Puntos: 4
Respuesta: div con % se desconfigura

Pues a mi eso no me funciona si le quito el float: right y las dos tienen 50% la de la derecha se descuadra.
  #10 (permalink)  
Antiguo 13/03/2009, 05:04
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
Respuesta: div con % se desconfigura

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.
__________________
Visita mi nueva web idplus.org

Última edición por Mikmoro; 13/03/2009 a las 05:11
  #11 (permalink)  
Antiguo 13/03/2009, 07:37
Avatar de talmente  
Fecha de Ingreso: noviembre-2007
Mensajes: 233
Antigüedad: 10 años
Puntos: 4
Respuesta: div con % se desconfigura

Si eso he pensado después el derecho en realidad ocupa el 100% y el izquierdo lo tapa ocupando el 50%.
  #12 (permalink)  
Antiguo 13/03/2009, 07:50
 
Fecha de Ingreso: diciembre-2005
Mensajes: 19
Antigüedad: 12 años
Puntos: 0
Respuesta: div con % se desconfigura

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!!
  #13 (permalink)  
Antiguo 13/03/2009, 07:54
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
Respuesta: div con % se desconfigura

Cita:
Iniciado por Ralpi Ver Mensaje
<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;}
__________________
Visita mi nueva web idplus.org
  #14 (permalink)  
Antiguo 13/03/2009, 07:58
 
Fecha de Ingreso: diciembre-2005
Mensajes: 19
Antigüedad: 12 años
Puntos: 0
Respuesta: div con % se desconfigura

He eliminado el position: absolute; de los títulos pero sigue sin hacerme ni caso....
  #15 (permalink)  
Antiguo 13/03/2009, 11:08
 
Fecha de Ingreso: febrero-2005
Mensajes: 105
Antigüedad: 12 años, 9 meses
Puntos: 1
Respuesta: div con % se desconfigura

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...
  #16 (permalink)  
Antiguo 14/03/2009, 05:11
 
Fecha de Ingreso: diciembre-2005
Mensajes: 19
Antigüedad: 12 años
Puntos: 0
Respuesta: div con % se desconfigura

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)
  #17 (permalink)  
Antiguo 14/03/2009, 12:50
Avatar de talmente  
Fecha de Ingreso: noviembre-2007
Mensajes: 233
Antigüedad: 10 años
Puntos: 4
Respuesta: div con % se desconfigura

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>
  #18 (permalink)  
Antiguo 16/03/2009, 03:37
 
Fecha de Ingreso: diciembre-2005
Mensajes: 19
Antigüedad: 12 años
Puntos: 0
De acuerdo Respuesta: div con % se desconfigura

Funciona perfectamente. Gracias talmente
  #19 (permalink)  
Antiguo 17/03/2009, 05:27
Avatar de talmente  
Fecha de Ingreso: noviembre-2007
Mensajes: 233
Antigüedad: 10 años
Puntos: 4
Respuesta: div con % se desconfigura

De nada
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 12:33.