Foros del Web » Creando para Internet » CSS »

Borde a lista ul

Estas en el tema de Borde a lista ul en el foro de CSS en Foros del Web. 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), ...
  #1 (permalink)  
Antiguo 06/10/2006, 07:36
yz!
 
Fecha de Ingreso: junio-2004
Ubicación: Zaragoza
Mensajes: 168
Antigüedad: 13 años, 5 meses
Puntos: 0
Borde a lista ul

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.
  #2 (permalink)  
Antiguo 06/10/2006, 10:53
 
Fecha de Ingreso: julio-2006
Mensajes: 46
Antigüedad: 11 años, 5 meses
Puntos: 0
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-stylenone;
    
/*border: dotted #005692 5px;*/
    
border-left10px solid #005692;
    
border-right10px solid #005692;

#navegador li {
    
margin5px;
displayinline;    
}
</
style
  #3 (permalink)  
Antiguo 06/10/2006, 11:13
Avatar de fearlex  
Fecha de Ingreso: septiembre-2003
Ubicación: Exiliado de mi patria
Mensajes: 1.047
Antigüedad: 14 años, 2 meses
Puntos: 5
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="#">&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>
</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;
}
__________________
Ya viene llegando, el comunismo en Cuba, ya se esta acabando.
www.fearlex.com | www.fearlexworld.com
  #4 (permalink)  
Antiguo 06/10/2006, 13:34
yz!
 
Fecha de Ingreso: junio-2004
Ubicación: Zaragoza
Mensajes: 168
Antigüedad: 13 años, 5 meses
Puntos: 0
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
  #5 (permalink)  
Antiguo 06/10/2006, 13:45
Avatar de fearlex  
Fecha de Ingreso: septiembre-2003
Ubicación: Exiliado de mi patria
Mensajes: 1.047
Antigüedad: 14 años, 2 meses
Puntos: 5
Oh si perdón, se hace asi:

Cita:
<style type="text/css">

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

</style>
</HEAD>

<BODY>

<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>

</BODY>
</HTML>
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
__________________
Ya viene llegando, el comunismo en Cuba, ya se esta acabando.
www.fearlex.com | www.fearlexworld.com
  #6 (permalink)  
Antiguo 07/10/2006, 06:49
yz!
 
Fecha de Ingreso: junio-2004
Ubicación: Zaragoza
Mensajes: 168
Antigüedad: 13 años, 5 meses
Puntos: 0
Nada, no lo aplica.
Creo que intenetaré lo de la capa, que seguro que lo acepta.

Gracias a todos y un saludo.
  #7 (permalink)  
Antiguo 08/10/2006, 01:17
Avatar de fearlex  
Fecha de Ingreso: septiembre-2003
Ubicación: Exiliado de mi patria
Mensajes: 1.047
Antigüedad: 14 años, 2 meses
Puntos: 5
Cita:
Iniciado por yz! Ver Mensaje
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 ?
__________________
Ya viene llegando, el comunismo en Cuba, ya se esta acabando.
www.fearlex.com | www.fearlexworld.com
  #8 (permalink)  
Antiguo 09/10/2006, 03:04
yz!
 
Fecha de Ingreso: junio-2004
Ubicación: Zaragoza
Mensajes: 168
Antigüedad: 13 años, 5 meses
Puntos: 0
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.
  #9 (permalink)  
Antiguo 09/10/2006, 09:10
Avatar de fearlex  
Fecha de Ingreso: septiembre-2003
Ubicación: Exiliado de mi patria
Mensajes: 1.047
Antigüedad: 14 años, 2 meses
Puntos: 5
Si funciona, usa el codigo que te di, mira:

__________________
Ya viene llegando, el comunismo en Cuba, ya se esta acabando.
www.fearlex.com | www.fearlexworld.com
  #10 (permalink)  
Antiguo 09/10/2006, 10:24
 
Fecha de Ingreso: julio-2006
Mensajes: 46
Antigüedad: 11 años, 5 meses
Puntos: 0
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)  
Antiguo 10/10/2006, 05:35
yz!
 
Fecha de Ingreso: junio-2004
Ubicación: Zaragoza
Mensajes: 168
Antigüedad: 13 años, 5 meses
Puntos: 0
Cita:
Iniciado por fearlex Ver Mensaje
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.

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 22:15.