Foros del Web » Creando para Internet » CSS »

Visualizacion diferente segun el explorador

Estas en el tema de Visualizacion diferente segun el explorador en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 10/02/2009, 06:09
 
Fecha de Ingreso: octubre-2008
Mensajes: 19
Antigüedad: 9 años, 1 mes
Puntos: 0
Visualizacion diferente segun el explorador

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

<!-- Site Title -->
<title> --- | --- </title>

<!-- Link to Style External Sheet -->
<link href="css/style.css" type="text/css" rel="stylesheet" />

</head>

<body>

<div id="page_wrapper">

<div id="page_header">


<h1 align="center">&nbsp;</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!!
  #2 (permalink)  
Antiguo 10/02/2009, 06:36
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
Respuesta: Visualizacion diferente segun el explorador

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
__________________
Las dudas son el alimento de la inteligencia. A. Einstein
Everything we are is the end result of our thoughts. Sidhartta Gautama
  #3 (permalink)  
Antiguo 10/02/2009, 06:56
 
Fecha de Ingreso: octubre-2008
Mensajes: 19
Antigüedad: 9 años, 1 mes
Puntos: 0
Respuesta: Visualizacion diferente segun el explorador

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

:)
  #4 (permalink)  
Antiguo 10/02/2009, 07:00
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
Respuesta: Visualizacion diferente segun el explorador

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

de res
Ares
__________________
Las dudas son el alimento de la inteligencia. A. Einstein
Everything we are is the end result of our thoughts. Sidhartta Gautama
  #5 (permalink)  
Antiguo 10/02/2009, 07:02
 
Fecha de Ingreso: octubre-2008
Mensajes: 19
Antigüedad: 9 años, 1 mes
Puntos: 0
Respuesta: Visualizacion diferente segun el explorador

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

:P
  #6 (permalink)  
Antiguo 10/02/2009, 07:06
 
Fecha de Ingreso: octubre-2008
Mensajes: 19
Antigüedad: 9 años, 1 mes
Puntos: 0
Respuesta: Visualizacion diferente segun el explorador

Perdon habia leido mal ahora lo pruebo, a ver si lo consigo, gracias!!!
  #7 (permalink)  
Antiguo 10/02/2009, 07:08
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
Respuesta: Visualizacion diferente segun el explorador

Mira, te pongo el html adaptado un pco a lo tuyo
Código html:
Ver original
  1. <div id="lang">
  2.             <ul>
  3.             <li><a href="link a la versión española"><img src="ruta a la bandera española" alt="Español"/></a></li>
  4.             <li><a href="link a la versión catalana"><img src="ruta a la imagen bandera catalana" alt="Catalán"/></a></li>
  5.             </ul>
  6.  
  7.         </div>
y el css
Código css:
Ver original
  1. #lang {/*pon aqui tu ancho, alto y su top y right*/
  2. width:97px;
  3. height:19px;
  4. float: right;
  5. top: 12px;
  6. right: 8px;
  7. position:relative;
  8. }
  9. #ul{  
  10. float:left;
  11. }
  12. #ul li {
  13. float:left;
  14. list-style-type: none;
  15. }
  16. #ul li a {
  17. text-decoration:underline;
  18. }

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

Un saludo

Ares
__________________
Las dudas son el alimento de la inteligencia. A. Einstein
Everything we are is the end result of our thoughts. Sidhartta Gautama

Última edición por Aresillo; 10/02/2009 a las 07:35
  #8 (permalink)  
Antiguo 10/02/2009, 07:29
 
Fecha de Ingreso: octubre-2008
Mensajes: 19
Antigüedad: 9 años, 1 mes
Puntos: 0
Respuesta: Visualizacion diferente segun el explorador

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!!!!
  #9 (permalink)  
Antiguo 10/02/2009, 07:35
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
Respuesta: Visualizacion diferente segun el explorador

don't worry!
ya me dices..

Un saludo

Ares
__________________
Las dudas son el alimento de la inteligencia. A. Einstein
Everything we are is the end result of our thoughts. Sidhartta Gautama
  #10 (permalink)  
Antiguo 10/02/2009, 07:56
 
Fecha de Ingreso: octubre-2008
Mensajes: 19
Antigüedad: 9 años, 1 mes
Puntos: 0
Respuesta: Visualizacion diferente segun el explorador

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

Gracias tio, me has dado un buen empujoncito!!!
  #11 (permalink)  
Antiguo 11/02/2009, 04:54
 
Fecha de Ingreso: octubre-2008
Mensajes: 19
Antigüedad: 9 años, 1 mes
Puntos: 0
Respuesta: Visualizacion diferente segun el explorador

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">&nbsp;</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!!!
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 04:59.