Borde a lista ul

#1 (**permalink**) 06/10/2006, 06:36

Hola a todos.

Queiro poner un borde lateral a una lista (a toda la lista no a cada uno de los li de la misma), pero no hay manera.
Ahí va mi código:

Código:

<ul id="navegador">
    <li><a href="#">&Aacute;rea candidatos</a></li>
    <li><a href="#">&Aacute;rea empresas</a></li>
    <li><a href="#">Buscar ofertas</a></li>
    <li><a href="#">Ofertas por empresas</a></li>
    <li><a href="#">Contactar</a></li>
</ul>

#navegador {
    margin: 0em auto;
    list-style: none;
    /*border: dotted #005692 5px;*/
    border-left: 10px solid #005692;
    border-right: 10px solid #005692;
} 
#navegador li {
    margin: 5px;
    float: left;
}

Pero no me hace ni caso. ¿Saben como puedo solucionarlo?

Una vez más muchas gracias por su ayuda.

imagenarte · #2 (**permalink**) 06/10/2006, 09:53

Ok, veo un detalle. quieres mostrar tu lista de manera horizaontal correcto?
bueno no flotes tus elementos li a la izquierda, en cambio pon esto:

display: inline;

a tus elementos li y le quitas el float:left y ya.

tu codigo quedaria asi

Código PHP:

  #navegador {
    list-style: none;
    /*border: dotted #005692 5px;*/
    border-left: 10px solid #005692;
    border-right: 10px solid #005692;
} 
#navegador li {
    margin: 5px;
display: inline;    
}
</style>

fearlex · #3 (**permalink**) 06/10/2006, 10:13

No creo que sea eso lo que el quiera, si quiere ponerle un borde lateral a tu lista, insertala dentro de un div, y le das el borde lateral al div, o sea:

Tu HTML:

Cita:

<div id="contnav">
<ul id="navegador">
<li><a href="#">Área candidatos</a></li>
<li><a href="#">Área empresas</a></li>
<li><a href="#">Buscar ofertas</a></li>
<li><a href="#">Ofertas por empresas</a></li>
<li><a href="#">Contactar</a></li>
</ul>
</div>

tu CSS

Cita:

#contnav {
width: 200px;
border-left: solid 1px #000000;
border-right: solid 1px #000000;
}
#navegador {
margin: 0em auto;
list-style: none;
}
#navegador li {
margin: 5px;
}

#4 (**permalink**) 06/10/2006, 12:34

Muchas gracias por contestar.

Imaginaba que podría hacerlo con una capa, pero no me parece demasiado semántico. ¿Los ul, ol no aceptan bordes?

Gracias y un saludo

fearlex · #5 (**permalink**) 06/10/2006, 12:45

Oh si perdón, se hace asi:

Cita:

Respecto a lo semantico, creo que esta correctamente semantico ponerle un div, pero bueno, eso depende de puntos de vista, y de gustos personales..

espero haberte ayudado

#6 (**permalink**) 07/10/2006, 05:49

Nada, no lo aplica.
Creo que intenetaré lo de la capa, que seguro que lo acepta.

Gracias a todos y un saludo.

fearlex · #7 (**permalink**) 08/10/2006, 00:17

Cita:

Iniciado por yz!

Nada, no lo aplica.
Creo que intenetaré lo de la capa, que seguro que lo acepta.

Gracias a todos y un saludo.

como que no lo aplica, yo lo probe y me funciona, seguro que no te aplica ?

#8 (**permalink**) 09/10/2006, 02:04

Ya he comprobado donde esta el problema.

Si uso float left en los li, los bordes de la lista desaparecen, así que tendré que utilizar una capa contendedora para que me lo muestre.

O quiza pruebe con las pseudoclases #navegador:after y #navegador:before.

fearlex · #9 (**permalink**) 09/10/2006, 08:10

Si funciona, usa el codigo que te di, mira:

imagenarte · #10 (**permalink**) 09/10/2006, 09:24

PARA QUE FLOTAS LOS LI A LA IZQUIERDA?????????????

#navegador li {
margin: 5px;
display: inline;
}

te los muestra en la misma linea no hace falta flotarlos.

#11 (**permalink**) 10/10/2006, 04:35

Cita:

Iniciado por fearlex

Si funciona, usa el codigo que te di, mira:

Si, si tu codgio funciona, el problema es que en cuanto les añado a los li float, para que se coloquen en horizontal, los bordes desaparecen.

imagenarte, uso float, ya que voy a usar display: block, para convertir los enlaces en botones, por tanto no puedo usar display: inline en este caso. Si se os ocurre una forma de hacerlo mejor os agradecería el consejo.

Os dejo un ejemplo de como quiero que quede al final. Por cierto no me acepta #navegador:before, ni :after.