problema con las posiciones en navegadores

estibaliz2006 · #1 (**permalink**) 01/08/2007, 13:45

hola a todos. tengo un problema con la visualización de una web según en el navegador que se vea. resulta que en mi pc, en el explorer, la web maquetada se ve así, donde la imagen es un fondo, y luego el texto se maqueta mediante divs. tenemos esta imagen:

http://www.altomp.com/imagenes/web-3.gif

bien. el caso es que si lo veo en otro navegador diferente o en otro pc, me da este resultado:

http://www.altomp.com/imagenes/web-31.gif

o incluso este otro:

http://www.altomp.com/imagenes/web-32.gif

bien. la página index es esta:

Código PHP:

  <body style="background-image: url(fondo.jpg); background-color: #470300;background-repeat: no-repeat; background-attachment: fixed; background-position: center"> 
<div id="cabecera"> 
aquí texto 
</div>  
<div id="enlaces"> 
aquí enlaces 
</div>

y la hoja de estilos es esta:

Código PHP:

  /************************************Barra***********************************************************/ 
BODY 
{ 
SCROLLBAR-FACE-COLOR: #470300; SCROLLBAR-HIGHLIGHT-COLOR: #FEFDDE; SCROLLBAR-SHADOW-COLOR: #FFFFFF; SCROLLBAR-ARROW-COLOR: #FEFDDE; SCROLLBAR-BASE-COLOR: #FFffff; font-color: #ffffff; scrollbar-3d-light-color: #FFFFFF; scrollbar-dark-shadow-color: #FFFFFF 
} 
/************************************Fuentes***********************************************************/ 
 
.text1 { 
    FONT-WEIGHT: normal; FONT-SIZE: 10px; COLOR:#696969; LINE-HEIGHT: 12px; PADDING-TOP: 3px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif  
} 
/************************************divs***********************************************************/ 
#cabecera 
{ 
padding-top: 120px; padding-left: 405px; FONT-WEIGHT: bold; FONT-SIZE: 9px; COLOR:#FEFDDE; FONT-FAMILY: Verdana; width: 85%;  
} 
#enlaces 
{ 
padding-top: 47px; padding-left: 410px; FONT-WEIGHT: bold; FONT-SIZE: 10px; FONT-FAMILY: Verdana; width: 85%;  
} 
.textenlace0 
{ 
COLOR:#FEFDDE; text-decoration: none  
} 
.textenlace0:hover { 
{ 
COLOR:#FFFFFF; text-decoration: underline 
}

qué tengo que hacer para que en cualquier navegador se vea correctamente, es decir, como lo veo yo en mi equipo?

gracias a todos.

estibaliz2006 · #2 (**permalink**) 02/08/2007, 00:14

alguien me ayuda?

:.SMITEXX.: · #3 (**permalink**) 02/08/2007, 05:04

Oye, la verdad me he tomado el tiempo de ver tu código y te sugiero:
- Crea un contenedor donde metas toda la información, pues asi todo esta regado por todas partes.
- Tu código css tiene errores: te faltan ; en algunas instrucciones, estas mezclando mayúsculas y minúsculas
- La clase que le defines al body dentro de éste, ponla dentro de los estilos

En fin. Traté de hacer algo "similar" a lo que tu quieres, pero creo q es más fácil si pones un jpg (sin maquetar) y te ayudamos a construir lo que necesitas.

pego el código con algunos arreglos, pues no se como hiciste para que se te viera así, lo probe con IE 6 y 7 y FF1 y FF2 y nunca lo pude ver así.

Saludos

Código:

<!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=ibm852" />
<title>Untitled Document</title>
<style type="text/css" media="screen">
/* Barra */
body
{
	scrollbar-face-color: #470300;
	scrollbar-highlight-color: #FEFDDE;
	scrollbar-shadow-color: #FFFFFF;
	scrollbar-arrow-color: #FEFDDE;
	scrollbar-base-color: #FFffff;
	font-color: #ffffff;
	scrollbar-3d-light-color: #FFFFFF;
	scrollbar-dark-shadow-color: #FFFFFF;
	background-image: url(fondo.jpg);
	background-color: #000000;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;
	font-family: Verdana, Arial, Helvetica, sans-serif; 

}
/* Fuentes */

.text1 {
font-weight: normal;
font-size: 10px; 
color:#696969; 
line-height: 12px;
padding-top: 3px; 
}
/* divs */
#cabecera
{
	padding-top: 15px;
	padding-left: 15px;
	font-weight: bold;
	font-size: 1em;
	color:#FEFDDE;
	float: left;
	width: 300px;
	margin-left: 20px;
}
#enlaces
{
	padding-top: 15px;
	padding-left: 15px;
	font-weight: bold;
	font-size: 1em;
	font-family: Verdana;
	width: 300px;
	float: left;
	margin-left: 20px;
}
.textenlace0
{
color:#FEFDDE; 
text-decoration: none; 
}
#contenedor {
	height: 200px;
	width: 335px;
	background-color: #470300;
}
.textenlace0:hover {
{
color:#FFFFFF;
text-decoration: underline;
}  


</style>
</head>

<body>
<div id="contenedor">
<div id="cabecera">
aquí texto
</div> 
<div id="enlaces">
aquí enlaces
</div>  
</div>
</body>
</html>

estibaliz2006 · #4 (**permalink**) 02/08/2007, 06:20

nada....todo sigue igual. a ver. yo lo que quiero es que, con independencia de la resolución del monitor o del navegador que se utilice, el texto aparezca en esa situación y los enlaces en esa otra tal y como se ven aquí:

http://www.altomp.com/imagenes/web-3.gif

es decir, esta sería la forma normal de verse, o como debería verse, con independencia del navegador o de la resolución del monitor.

y no tengo narices a conseguirlo. cuando lo consigo en el explorer, luego lo pruebo en el mismo explorer a otra resolución y se joroba; si lo hago en otro navegador, también se joroba. jo, no hay alguna solución?

fearlex · #5 (**permalink**) 02/08/2007, 09:12

Primeramente:

1- ¿Va a tener un ancho fijo o se debe agrandar a todo el ancho de la resolucion del usuario?

2- ¿Va a tener un alto fijo, o se va a adaptar al contenido que tengas dentro.?

Esto es lo primero que debes pensar, responde las preguntas y seguimos.

Saludos

estibaliz2006 · #6 (**permalink**) 02/08/2007, 09:14

el fondo siempre será del mismo tamaño, es decir, de un ancho y un alto fijo, con lo cual, el texto y los enlaces siempre estarán en la misma posición, sea cual sea el navegador y sea cual sea su resolución. pero no lo consigo. cuando lo obtengo para el explorer, lo pruebo en opera por ejemplo, y nada. y al revés...

estibaliz2006 · #7 (**permalink**) 02/08/2007, 11:29

alguien me echa un cable?

estibaliz2006 · #8 (**permalink**) 02/08/2007, 12:53

nada, no logro entender por qué demonios en ie me va y en firefox, pero en opera no hay modo. sabéis algún modo de que funcione en todos, con independencia de la resolución de la pantalla y del navegador?

estibaliz2006 · #9 (**permalink**) 03/08/2007, 04:07

me estoy volviendo loca.....

fearlex · #10 (**permalink**) 03/08/2007, 08:49

Disculpa la demora pero raramente me conecto durante la noche.

Pues mira, si todo va a ser fijo entonces la cosa es mas facil, como mismo te dijo :.SMITEXX.: necesitas crear primeramente un conteneder el cual le tienes que declara las propiedades width y height en pixeles normalmente 933px X 570px.

Luego le aplicas la propiedad text-align:center al body para que centre tu contenido en IE, y al div contenedor le aplicas una propiedad: margin-left: auto y margin-right: auto;

Eso te lo centrara en Firefox y otros navegadores.

Ahora como regla general, SIEMPRE pon esto en el principio de tu hoja de estilos:

*
{
margin: 0;
padding: 0;
}

Esto reseteara todos los margenes y padding a 0 y a partir de ahi declararas los tuyos. Por que ?? Porque todos los navegadores interpretan las etiquetas HTML por defecto de manera diferente, ejemplo: IE le agrega 20px de margin-left a las listas (ul), etc.

So una vez echo eso, dejame saber.

Saludos