Visualizacion diferente segun el explorador

ralfillo · #1 (**permalink**) 10/02/2009, 06:09

Hola a todos, escribo este post porque estoy haciendo una web y las banderas que he puesto para seleccionar los idiomas de la web se colocan en diferente posición según la versión del navegador.

La web es la siguiente monvigar.freehostia.com

A continuación os pongo el código html y el css:

CÓDIGO HTML


<title> --- | --- </title>


<link href="css/style.css" type="text/css" rel="stylesheet" />

</head>

<body>

<div id="page_wrapper">

<div id="page_header">

<h1 align="center"> </h1>
<div id="flag_cat"><a href="index_cat.html"><img src="img/flag_cat.gif"/></a></div>
<div id="flag_spa"><a href="index.html"><img src="img/flag_spa.gif"/></a></div>

</div>

<div id="menu_bar">
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Servicios</a></li>
<li><a href="#">Trabajos realizados</a></li>
<li><a href="#">Recursos</a></li>
<li><a href="#">Contactar</a></li>

</ul>

</div>

CÓDIGO CSS

#flag_cat {
width: 0px;
height: 0px;
float:left;
position:relative;
left:735px;
top:32px;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
text-align: right;
font-size: 12px;
background-image: none;
z-index: 100;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
margin: 0px;
padding-bottom: 0px;

}

#flag_spa {
width: 0;
height: auto;
float:left;
position:relative;
left:710px;
top:32px;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
text-align: right;
color: #ccc;
font-size: 12px;
background-color: #fff;
z-index: 10;

}

Gracias de antemano, espero vuestras respuestas!!

Aresillo · #2 (**permalink**) 10/02/2009, 06:36

Buenas..
yo lo haría haciendo un div para los dos lenguajes (en vez de 2 como ahora) y pones las banderas en una lista. Después las posicionas y lo tienes hecho..no se te descuadran
Te dejo un ejemplo que hice para una web (arriba a la derecha):
http://www.emdma.com/web_v.2/es/web.html
Así te puedes guiar si te pierdes..

Un saludo!
Ares

ralfillo · #3 (**permalink**) 10/02/2009, 06:56

Muchas gracias Aresillo!!, ahora me lo miro y te digo a ver que tal.

:)

Aresillo · #4 (**permalink**) 10/02/2009, 07:00

ok..
aunque si las pones las dos en una lista no se te descuadrarán

de res
Ares

ralfillo · #5 (**permalink**) 10/02/2009, 07:02

Me lo he mirado, y como haces para que te reconozca la zona de la bandera con la zona de link???

:P

ralfillo · #6 (**permalink**) 10/02/2009, 07:06

Perdon habia leido mal ahora lo pruebo, a ver si lo consigo, gracias!!!

Aresillo · #7 (**permalink**) 10/02/2009, 07:08

Mira, te pongo el html adaptado un pco a lo tuyo

Código html:

Ver original<div id="lang">
            <ul> 
            <li><a href="link a la versión española"><img src="ruta a la bandera española" alt="Español"/></a></li>
            <li><a href="link a la versión catalana"><img src="ruta a la imagen bandera catalana" alt="Catalán"/></a></li>
            </ul>
 
        </div>

y el css

Código css:

Ver original#lang {/*pon aqui tu ancho, alto y su top y right*/
width:97px; 
height:19px;
float: right;
top: 12px;
right: 8px;
position:relative;
}
#ul{  
float:left;
}
#ul li {
float:left;
list-style-type: none;
}
#ul li a {
text-decoration:underline;
}

Miralo..
lo que hago es que la bandera la pongo como una imagen en el html y el enlace lo envuelve...

Un saludo

Ares

ralfillo · #8 (**permalink**) 10/02/2009, 07:29

Aresillo, eres un crack tio, muchas gracias, me estoy peleando y a ver si lo consigo.

Muchas gracias tio, en serio te lo has currao muxo!!!!

Aresillo · #9 (**permalink**) 10/02/2009, 07:35

don't worry!
ya me dices..

Un saludo

Ares

ralfillo · #10 (**permalink**) 10/02/2009, 07:56

Me tengo que ir a comer, mañana te informo de mis progresos!!

Gracias tio, me has dado un buen empujoncito!!!

ralfillo · #11 (**permalink**) 11/02/2009, 04:54

Hola buenas, continuo con problemillas, he seguido los consejos de Aresillo pero ahora no consigo situar las banderas a la derecha y una al lado de la otra, y no una encima de otra como estan ahora. La web es monvigar.freehostia.com .

A continuación os pego el código:

HTML:

</head>

<body>

<div id="page_wrapper">

<div id="page_header">

<h1 align="center"> </h1>
<div id="flags">
<ul>
<li><a href="xxx"><img src="img/flag_cat.gif" alt="Español"/></a></li>
<li><a href="xxx"><img src="img/flag_spa.gif" alt="English"/></a></li>
</ul>
</div>
</div>

CSS:

#flags ul {
margin-top: 0px;
padding-left: 0px;
margin-left: 0px;
color: White;
float: left;
width: 100px;
font-family: verdana, arial, sans-serif;
font-size:14px;
font-weight: bold;
background-color: #FFFFFF;
background-repeat: no-repeat;
background-position: right bottom;
height: 0px;
}

#flags ul li { display: inline; }

#flags ul li a
{
padding-top:5px;
padding-bottom:5px;
padding-left:15px;
padding-right:15px;
background: #FFFFFF;
color: #FFFFFF;
text-decoration: none;
float: right;
border-right: 1px solid #fff;
}

Supongo que ya debo estar cerca, pero pruebo combinaciones y no lo consigo, espero vuestras respuestas!!!