Foros del Web » Creando para Internet » CSS »

Separar elementos span de barra de navegación

Estas en el tema de Separar elementos span de barra de navegación en el foro de CSS en Foros del Web. Hola, mis páginas las tengo maquetadas a través de divs. Tengo uno para el contenedor global, otro para la cabecera de arriba, otro para el ...
  #1 (permalink)  
Antiguo 12/12/2007, 02:12
 
Fecha de Ingreso: abril-2006
Mensajes: 131
Antigüedad: 11 años, 8 meses
Puntos: 1
Separar elementos span de barra de navegación

Hola, mis páginas las tengo maquetadas a través de divs. Tengo uno para el contenedor global, otro para la cabecera de arriba, otro para el menú de la izqda y otro para el contenido. Dentro de éste último tengo una barra de navegación con el código siguiente:

Código PHP:
<div id="navigation">

<
span class="navigation_agenda"><a href="ruta" class="texblancneg" title="Agenda">AGENDA</a></span>
<
span class="navigation_idioma"><a href="ruta" class="texblancneg" title="Idioma">CASTELLÀ</a></span>
<
span class="navigation_mapa"><a href="ruta" class="texblancneg" title="Mapa Web">MAPA WEB</a></span>
<
span class="navigation_opina"><a href="ruta" class="texblancneg" title="Opina">OPINA</a></span>
<
span class="navigation_guia"><a href="ruta" onclick="javascript:Start('ruta',760,567);" class="texblancneg" title="GUIA DE CARRERS">GUIA DE CARRERS</a></span>

</
div> <!-- de div navigation--> 
Hay cuatro elementos y me gustaría que estuvieran separados para que quedaran más o menos centrados. Para ello, no quiero utilizar tablas y he hecho uso de los siguientes estilos:

Código PHP:
#navigation {
    
width:100%;
    
height:20px;
    
text-alignleft;
    
background-color:#7C99C7;
    
font-familyArialHelveticasans-serif;
    
font-size:12px;
    
padding-top:1px;
    
padding-bottom:1px;
}

.
navigation_agenda, .navigation_idioma, .navigation_mapa, .navigation_opina, .navigation_guia, {
    
width:20%; /*este ancho creo que no hace nada*/
    
height:20px;
    
text-alignleft;
    
background-color:#7C99C7;
    
font-familyArialHelveticasans-serif;
    
font-size:12px;
    
padding-left:50px/*este padding es el que pongo para separar los elementos entre sí*/

Con el padding-left de cada elemento se me visualizan bien separados en el IE, pero no en el Firefox.
¿Alguien me puede ayudar para solucionar este problema? Me gustaría separar estos elementos que tengo en el div de la barra de navegación sin tener que hacer uso de tablas.

Gracias y Saludos!!!
  #2 (permalink)  
Antiguo 12/12/2007, 02:26
 
Fecha de Ingreso: octubre-2006
Ubicación: Murcia - España
Mensajes: 336
Antigüedad: 11 años, 1 mes
Puntos: 6
Re: Separar elementos span de barra de navegación

Añade debajo del padding-left otra linea que contenta lo siguiente:

display:block;

Por otro lado puede sustituir lo siguiente:

.navigation_agenda, .navigation_idioma, .navigation_mapa, .navigation_opina, .navigation_guia, {

por

#navigation span {
  #3 (permalink)  
Antiguo 12/12/2007, 02:48
 
Fecha de Ingreso: abril-2006
Mensajes: 131
Antigüedad: 11 años, 8 meses
Puntos: 1
Re: Separar elementos span de barra de navegación

Hola Eourus,

El display:block me pone cada elemento en una fila distinta. Yo no quiero eso, quiero que estén en la misma fila pero que tengan una cierta separación para que queden equidistantes más o menos. Con el padding-left se ve bien en IE pero no en Firefox.

¿Alguien sabe cómo solucionarlo?
Gracias y saludos!!!
  #4 (permalink)  
Antiguo 12/12/2007, 02:50
 
Fecha de Ingreso: octubre-2006
Ubicación: Murcia - España
Mensajes: 336
Antigüedad: 11 años, 1 mes
Puntos: 6
Re: Separar elementos span de barra de navegación

Ups, se me olvido decirte algo mas jeje, perdón.

Metele tambien la propiedad float:left

Y luego, en el html, donde termina el último enlace y se cierra el span añade

<div style="clear:both"></div>

Espero que con eso te funcione
  #5 (permalink)  
Antiguo 12/12/2007, 02:55
 
Fecha de Ingreso: abril-2006
Mensajes: 131
Antigüedad: 11 años, 8 meses
Puntos: 1
Re: Separar elementos span de barra de navegación

Ok, perfecto ya todo funciona bien
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 20:54.