Foros del Web » Creando para Internet » CSS »

Personalizar el primer <li>

Estas en el tema de Personalizar el primer <li> en el foro de CSS en Foros del Web. Hola, estoy haciendo un menú horizontal el <li> está así: @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código CSS: Ver original ul #boxnav li {     margin : 0 ...
  #1 (permalink)  
Antiguo 25/09/2009, 11:20
 
Fecha de Ingreso: mayo-2003
Ubicación: Lima
Mensajes: 967
Antigüedad: 20 años, 10 meses
Puntos: 8
Personalizar el primer <li>

Hola, estoy haciendo un menú horizontal el <li> está así:
Código CSS:
Ver original
  1. ul#boxnav li {
  2.     margin: 0;
  3.     padding-left: 30px;
  4.     padding-right: 30px;
  5.     border-left: 1px #FFF solid;
  6.     color: #FFF;
  7.     float: left;
  8. }

Sale bien pero el border-left que pongo también se ve en el primer <li> y ahi no quiero que vaya, buscando en la net vi que se podía poner así:
Código CSS:
Ver original
  1. ul#boxnav li.first {
  2.     margin: 0;
  3.     padding-left: 30px;
  4.     padding-right: 30px;
  5.     border-left: none;
  6.     color: #FFF;
  7.     float: left;
  8. }

De esta forma no saldría el border-left en el primer <li>, pero me digue saliendo. quizas estoy haciendo algo mal.

Espero que me puedan ayudar.
__________________
El aprendiz.
  #2 (permalink)  
Antiguo 25/09/2009, 11:42
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 9 meses
Puntos: 539
Respuesta: Personalizar el primer <li>

Pero falta la segunda parte, aplicarlo al html para que le afecte:
Código html:
Ver original
  1. <ul id="boxnav">
  2.         <li class="first">....</li>
  3.          ....
  4. </ul>
¿lo haces?

y para evitar conflictos
Código css:
Ver original
  1. ul#boxnav li.first {border-left: 0!important;/* resto propiedades*/}
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #3 (permalink)  
Antiguo 25/09/2009, 11:43
Avatar de loncho_rojas
Colaborador
 
Fecha de Ingreso: octubre-2008
Ubicación: En el mejor lugar del mundo
Mensajes: 2.704
Antigüedad: 15 años, 5 meses
Puntos: 175
Respuesta: Personalizar el primer <li>

Pruebalo ASi

Código HTML:
ul#boxnav li:first-child {
  
          margin: 0px;
          padding-left: 30px;
          padding-right: 30px;
          border: none;
		  color: #FFF;
          float: left;

      }
  #4 (permalink)  
Antiguo 25/09/2009, 11:44
 
Fecha de Ingreso: mayo-2003
Ubicación: Lima
Mensajes: 967
Antigüedad: 20 años, 10 meses
Puntos: 8
Respuesta: Personalizar el primer <li>

Gracias loncho_rojas asi salió, chevere.
__________________
El aprendiz.
  #5 (permalink)  
Antiguo 25/09/2009, 12:37
 
Fecha de Ingreso: mayo-2003
Ubicación: Lima
Mensajes: 967
Antigüedad: 20 años, 10 meses
Puntos: 8
Respuesta: Personalizar el primer <li>

lo que quiero hacer es esto:
Pero hay cosas que no me salen, por ejemplo, como poner el texto al medio y que al pasar le mouse por encima de un menú que se ponga así como CONTACTO y que las líneas verticales sean del tamaño del texto y que no sean del tamaño del cuadro rojo.

Por favor si alguien me pudiera guiar.
__________________
El aprendiz.
  #6 (permalink)  
Antiguo 26/09/2009, 09:31
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 14 años, 9 meses
Puntos: 269
Respuesta: Personalizar el primer <li>

juandedios:

Para que cambie el color de fondo debes usar

.tu_clase:hover {
background-color:el_color_que_tu_quieras;
}

con la pseudoclase hover puedes hacer efectos de rollover sin la necesidad de usar javascript, solo con css

Saludos!
  #7 (permalink)  
Antiguo 26/09/2009, 11:06
 
Fecha de Ingreso: mayo-2003
Ubicación: Lima
Mensajes: 967
Antigüedad: 20 años, 10 meses
Puntos: 8
Respuesta: Personalizar el primer <li>

si, eso lo se, el problema que tengo es que cuando le doy los padding correspondientes al " li a " para que tome el tamaño que quiero la linea que los separa toma el mismo tamaño y yo quiero que se siga viendo así de pequeña como la imagen que di.
__________________
El aprendiz.
  #8 (permalink)  
Antiguo 26/09/2009, 11:48
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 14 años, 9 meses
Puntos: 269
Respuesta: Personalizar el primer <li>

bien, probablemente esa linea que tu dices sea un caracter "|" y ese caracter modifica su tamaño con la propiedad font-size:; ¿que tal si le das el font-size adecuado en li a:hover {}?

Saludos!
  #9 (permalink)  
Antiguo 26/09/2009, 12:35
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 9 meses
Puntos: 539
Respuesta: Personalizar el primer <li>

¿Y si pones los códigos que estás utilizando?. Css y html.
Porque esto último es distinto de tu primera consulta.

Un salduo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #10 (permalink)  
Antiguo 26/09/2009, 18:45
 
Fecha de Ingreso: mayo-2003
Ubicación: Lima
Mensajes: 967
Antigüedad: 20 años, 10 meses
Puntos: 8
Respuesta: Personalizar el primer <li>

Y lo resolví, gracias por su tiempo e interés, aquí les dejo el codigo de como quedó:

Código CSS:
Ver original
  1. #boxnav {
  2.     padding-left: 30px;
  3.     width:850px;
  4. }
  5.  
  6. #boxnav ul, li {
  7.     list-style-type: none;
  8. }
  9.  
  10. #boxnav ul {
  11.     margin: 0;
  12.     padding: 0;
  13. }
  14.  
  15. #boxnav li {
  16.     float: left;
  17. }
  18.  
  19. #boxnav a {
  20.     text-decoration: none;
  21.     color: #FFF;
  22.     background: #D83432;
  23.     display: block;
  24.     padding: 7px 32px;
  25.     text-align: center;
  26.     font-weight: bold;
  27.     background: url(../image/sepmenu.gif) no-repeat;
  28.     background-position: left;
  29. }
  30.  
  31. #boxnav a#first {
  32.     background: none;
  33.     font-weight: bold;
  34. }
  35.  
  36. #boxnav a:hover {
  37.     background: #FFF;
  38.     color: #D83432;
  39.     font-weight: bold;
  40. }
  41.  
  42. #boxnav a#first:hover {
  43.     background: #FFF;
  44.     color: #D83432;
  45.     font-weight: bold;
  46. }
__________________
El aprendiz.
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 19:59.