Foros del Web » Creando para Internet » CSS »

problemas con enlaces horizontales

Estas en el tema de problemas con enlaces horizontales en el foro de CSS en Foros del Web. muy buenas a todos/as. os cuento. Estoy programando un sistema horizontal de enlaces en css. de tal modo que lo que quiero es que aparezca ...
  #1 (permalink)  
Antiguo 26/11/2007, 13:20
Avatar de estibaliz2006  
Fecha de Ingreso: noviembre-2006
Mensajes: 439
Antigüedad: 11 años
Puntos: 1
problemas con enlaces horizontales

muy buenas a todos/as. os cuento. Estoy programando un sistema horizontal de enlaces en css. de tal modo que lo que quiero es que aparezca centrado. bien.

para ello, la estructura que tengo es esta en el documento html:

Código:
<div id="contenedor">
<div id="enlaces">
<UL id="barra">
  <LI class=izquierda><A  
  href="#">INICIO</A> 
  </LI>	
  <LI><A  
  href="#">SECCION 1</A>
  </LI>	
  <LI>><A  
  href="#">SECCION 2</A> 
  </LI>	
  <LI>><A  
  href="#">SECCION 3</A>
  </LI>	
  <LI>><A  
  href="#">SECCION 4</A>
  </LI>	    
  </UL>
</DIV></DIV>
Uso un condicional para explorer que meto en el head:
Código:
<!--[if IE]>
<STYLE type=text/css>#barra{
	DISPLAY: inline-block
}
#barra{
	DISPLAY: inline
}
#barraLI {
	FLOAT: left
}
#enlaces{
	TEXT-ALIGN: center
}
</STYLE>
<![endif]-->
bien. la hoja de estilos tiene estos parámetros:
Código:
BODY { 
   font: 8pt Verdana, Geneva, Arial, Helvetica, sans-serif; 
   margin: 30 0 10 0px; 
   text-align: center; 
   background-color: #ffffff; 
} 
#contenedor{ 
   text-align: left; 
   width: 770px; 
   margin: auto; 
}

#enlaces {
	BORDER-TOP: #006633 6px solid; MARGIN-BOTTOM: 50px; PADDING-TOP: 1px; 
}
#barra {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: url(derecha.gif) #006633 no-repeat right bottom; PADDING-BOTTOM: 0px; MARGIN: 0px auto; PADDING-TOP: 0px; WHITE-SPACE: nowrap; LIST-STYLE-TYPE: none
}
#barra LI {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
#barra LI.izquierda{
	BACKGROUND: url(izquierda.gif) no-repeat left bottom
}
#barra LI A {
	PADDING-RIGHT: 15px; PADDING-LEFT: 15px; FONT-WEIGHT: bold;  FONT-SIZE: 11px; FLOAT: left; PADDING-BOTTOM: 5px; COLOR: #fff; PADDING-TOP: 5px; FONT-FAMILY: arial; LETTER-SPACING: 1px; TEXT-DECORATION: none
}
#barra LI A:hover {
	COLOR: #FFFF00;
}
Cuál es el problema? pues varios:

en primer lugar, en IExplorer lo interpreta todo perfectamente: centrado y con las dos esquinas, izquierda y derecha, redondeadas, con fondo todo verde oscuro.

pero en Opera, Firefox y Safari empiezan los problemas:
En primer lugar no aparece centrado, sino a la izquierda.
En segundo lugar, no coge el fondo verde sino blanco, porque (creo que es por eso) en el #barra LI A y en el #barra LI A:hover no coge el color del fondo del #barra y lo queda en blanco.
En tercer y último lugar, si le pongo en esos #barra LI A y #barra LI A:hover el color del fondo, no me coge entonces ni la esquina izquierda redondeada ni la derecha (izquierda.gif y derecha.gif)

A ver si me podéis echar un cable.
gracias
  #2 (permalink)  
Antiguo 27/11/2007, 02:41
Avatar de estibaliz2006  
Fecha de Ingreso: noviembre-2006
Mensajes: 439
Antigüedad: 11 años
Puntos: 1
Re: problemas con enlaces horizontales

alguien me echa un cablecito?
:(
  #3 (permalink)  
Antiguo 27/11/2007, 13:20
Avatar de estibaliz2006  
Fecha de Ingreso: noviembre-2006
Mensajes: 439
Antigüedad: 11 años
Puntos: 1
Re: problemas con enlaces horizontales

Hola de nuevo. Tenéis alguna solución a mi problema? por más vueltas que le doy no hay forma :(
  #4 (permalink)  
Antiguo 28/11/2007, 01:28
 
Fecha de Ingreso: octubre-2006
Ubicación: Murcia - España
Mensajes: 336
Antigüedad: 11 años, 1 mes
Puntos: 6
Re: problemas con enlaces horizontales

¿has probado a poner al identificador enlaces margin:auto y un width?
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 03:45.