Mi pagina se ve bien, excepto cuando maximizo pantalla

abiza2 · 7 May 2008, 20:21 · Solicitar retirada

Tengo una pagina con varias capas.
Cuando la visualizo en Mozilla se ve bien
Cuando la visualizo en IE se ve bien, siempre y cuando la ventana no este en modo maximizado, porque se distorsiona

Lo que hace es bajar la imagen que esta en el primer encabezado a la derecha (esta como fondo de capa) y colocarla debajo del escudo (esta insertado como imagen en una capa)

Que debo hacer? LEs agradeceria mucho su apoyo =)

hq · 14 May 2008, 08:34 · Solicitar retirada

Lo primero que debes hacer es repasar el código y si no consigues solucionarlo pues lo pones aquí para que lo veamos todos, pero vamos a ver si te puedo dar alguna pista.

Si pones las medidas fijas, o sea estableces unos anchos en pixeles, siempre se mostrará igual, aunque aparezcan las barras de desplazamiento.

Si utilizas unas medidas relativas, como por ejemplo los porcentajes, el resultado se adaptará al tamaño de la ventana, por lo que si se maximiza es normal que puedan cambiar cosas, aunque esto lo puedes manejar.

Lo más recomendable es que utilices medidas relativas de forma que la web tenga la misma apariencia independientemente del tamaño de la pantalla, pero eso supone pensar de otra manera.

Tienes que pensar que la "linea" (y llamo línea a todo lo que quieres que se vea en el ancho de la web) tiene que sumar en total 100% o como mínimo 99% (para que no cambie nada al cambiar el tamaño de la pantalla), así si por ejemplo puedes poner un ancho total de 99% (con un div) y dentro establecer un 30% para el logo y el resto para otra cosa y así sucesivamente).

El problema de trabajar con medidas relativas es que da mucho más trabajo para encajar bien todas las piezas del puzle, pero a la larga los resultados son mucho mejores.

abiza2 · 14 May 2008, 16:21 · Solicitar retirada

Muchas gracias por responder HQ.

Mira tratando de entender lo que sucede he vaciado por completo mi pagina, dejando solo la estructura base, a ver si asi logro encontrar el error.

Totalmente de acuerdo contigo, he definido casi todo en porcentajes.

Mi problema reside basicamente con la capa "PANEL DERECHO" que tiene un ancho de 20% (junto con el 20% de "NAVEGACION" y el otro 20% de "DEFINICION" deberian sumar 100%).
Puedo visualizar bien la pantalla en Mozilla, pero en el IE lo que hace es bajar la capa "PANEL DERECHO" inmediatamente abajo de "NAVEGACION"

Podrias nuevamente echarle un ojo a mi codigo por favor?

Esta vez esta recortado, para hacer mas sencilla la lectura:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="estilo_general.css" rel="stylesheet" type="text/css" />
<title>Index</title>
<LINK REL="SHORTCUT ICON" HREF="imagenes/icono.gif">
</head>

<body>
<div id="global">
<div id="cabecera">
</div>
<div id="barra">
</div>
<div id="Contenido">
<div id="navegacion">
</div>
<div id="definicion">
</div>
<div id="panel_derecho">
</div>
</div>
</div>
</body>
</html>

- * - * - * - * - * - * - * - * - * - * -
Esta es la hoja de estilos
- * - * - * - * - * - * - * - * - * - * -

@charset "utf-8";

* {
font-family: Georgia, "Times New Roman", Times, serif;
margin: 0px 0px 0px 0px;
}

#global {
margin: 0px 0px 0px 0px;
width:100%;
height: 100%;
}

#cabecera {
width:100%;
background-color:#000066;
float:left;
height: 120px;
}

#barra {
width:100%;
height:20px;
background-color:#FF0000;
color:#CCCCCC;
float:left;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12pt;
}

#Contenido{
width: 100%;
height: *;
margin:0px 0px 0px 0px;
float:left;
font-family: Georgia, "Times New Roman", Times, serif;
font-size:12px;
text-align:justify;
color:#000066;
}

#navegacion {
width: 20%;
height: 500px;
margin: 0px 0px 0px 0px;
float:left;
background-color:#E1E1E1;
}

#definicion {
width: 60%;
height: 500px;
margin:0px 0px 0px 0px;
float:left;
background-color: #FFFFFF;
}

#panel_derecho {
width:20%;
height: 500px;
margin: 0px 0px 0px 0px;
float: left;
background-color: #E1E1E1;
}

Realmente me he quebrado la cabeza tratando de encontrar el error, muchas gracias por tu ayuda

Sinceramente ---<---@

hq · 14 May 2008, 17:33 · Solicitar retirada

Prueba a hacer que los porcentajes sumen 99, en vez de 100, es probable que así se solucione, pero no te olvides poner a las 3 partes marging y pading = 0

abiza2 · 14 May 2008, 21:06 · Solicitar retirada

Estimado HQ:

He efectuado las modifiaciones que me has indicado y nada!!!
De hecho probe:
a) quitando la capa "GLOBAL"
b) Poniendo las cantidades en pixeles

Para mi que debe ser otra cosa, pero que??!!!!

Alguna otra sugerencia???

Aqui dejo el codigo como ha quedado al final:

- * - * - * - * - * - * - * - * - * -
Pagina
- * - * - * - * - * - * - * - * - * -

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="estilo_general.css" rel="stylesheet" type="text/css" />
<title>Index</title>
<LINK REL="SHORTCUT ICON" HREF="imagenes/icono.gif">
</head>

<body>
<div id="global">
<div id="cabecera">
</div>
<div id="barra">
</div>
<div id="Contenido">
<div id="navegacion">
</div>
<div id="definicion">
</div>
<div id="panel_derecho">
</div>
</div>
</div>
</body>
</html>

- * - * - * - * - * - * - * - * - * -
Hoja de estilos
- * - * - * - * - * - * - * - * - * -
@charset "utf-8";

* {
font-family: Georgia, "Times New Roman", Times, serif;
margin: 0px 0px 0px 0px;
}

#global {
width:1000px;
height: 1000px;
margin: 0px 0px 0px 0px;
padding: 0px;
float:left;
}

#cabecera {
width: 1000px;
height: 120px;
margin: 0px 0px 0px 0px;
padding: 0px;
float:left;
background-color:#000066;
}

#barra {
width: 1000px;
height:20px;
margin:0px 0px 0px 0px;
padding: 0px;
float:left;
background-color:#FF0000;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12pt;
color:#CCCCCC;
}

#Contenido{
width: 1000px;
height: *;
margin:0px 0px 0px 0px;
padding: 0px;
float:left;
font-family: Georgia, "Times New Roman", Times, serif;
font-size:12px;
color:#000066;
text-align:justify;
}

#navegacion {
width: 200px;
height: 500px;
margin: 0px 0px 0px 0px;
padding: 0px;
border:none;
float:left;
background-color:#E1E1E1;
}

#definicion {
width: 600px;
height: 499px;
margin:0px 0px 0px 0px;
padding: 0px;
border:none;
float:left;
background-color: #FFFFFF;
}

#panel_derecho {
width:200px;
height: 500px;
margin: 0px 0px 0px 0px;
padding: 0px;
border:none;
float: left;
background-color: #E1E1E1;
}

hq · 15 May 2008, 17:02 · Solicitar retirada

Pues no, no se me ocurren más cosas, al menos por ahora :cry:

Si se me ilumina la bombilla, te cuento :?

abiza2 · 16 May 2008, 15:02 · Solicitar retirada

Sí, te entiendo.- Ando igual :(
Pero bueno, esperemos que pronto aparezca la solucion.

Gracias de todas formas :wink: ---<---@

abiza2 · 19 May 2008, 16:51 · Solicitar retirada

hq escribió:Pues no, no se me ocurren más cosas, al menos por ahora :cry:

Si se me ilumina la bombilla, te cuento :?

- * - * - * - * - *- * - * - * - * - *- * - * - * - * - *- * - * - * - * - *

Estimado HQ:

Hice algo, que aunque me parece absurdo :!: , produce el efecto que deseo.
Desconozco si pueda traerme alguna otra consecuencia, ya te lo contare.
Por el momento, te digo que hice: a la capa global le puse :idea: un ancho del 101% y las demas las deje intactas (ya tienen especificado borde=0, margin=0 y padding=0)

Como ves? tu que opinas?

Muchas gracias por tus consejos y opiniones :wink:

abiza2 · 19 May 2008, 21:51 · Solicitar retirada

abiza2 escribió:
hq escribió:Pues no, no se me ocurren más cosas, al menos por ahora :cry:

Si se me ilumina la bombilla, te cuento :?

- * - * - * - * - *- * - * - * - * - *- * - * - * - * - *- * - * - * - * - *

Nada!!! Falsa Alarma!! :(
Sigue igual :(

abiza2 · 21 May 2008, 20:29 · Solicitar retirada

Despues de mucho ir y venir, lo he resuelto de la siguiente forma:

A la capa "Panel Derecho" que me quedaba debajo de la primera "Navegacion", le he cambiado la alineacion a "RIGHT"

Parece que con el ancho que tenia de 20% no le quedaba espacio para "flotar". Bueno, eso es lo que creo, el caso es que al final me funciono.

Muchas gracias a HQ por su ayuda, y ahora, lo que sigue!!!

Saludos ---<---@

hq · 23 May 2008, 08:52 · Solicitar retirada

De nada. Curiosa la forma en que has conseguido solucionarlo, aunque ahora que lo leo creo que tiene hasta lógica y todo!!