Foros del Web » Creando para Internet » CSS »

css sprite menu vertical

Estas en el tema de css sprite menu vertical en el foro de CSS en Foros del Web. buenas! he estado traveseando esa tecnica del css sprite y me parece genial para hacer menus pero solo puedo hacerlos horizontales. si alguno sabe como ...
  #1 (permalink)  
Antiguo 10/01/2011, 09:45
Avatar de walterfcr  
Fecha de Ingreso: julio-2009
Ubicación: Costa Rica
Mensajes: 148
Antigüedad: 8 años, 5 meses
Puntos: 4
css sprite menu vertical

buenas!

he estado traveseando esa tecnica del css sprite y me parece genial para hacer menus pero solo puedo hacerlos horizontales.

si alguno sabe como hacerlos vertical o que me recomienden algun tutorial se los agradezco
  #2 (permalink)  
Antiguo 10/01/2011, 11:42
Avatar de Ruben_JD  
Fecha de Ingreso: diciembre-2003
Ubicación: Quito-Ecuador
Mensajes: 218
Antigüedad: 14 años
Puntos: 7
Respuesta: css sprite menu vertical

Hola, simplemente juega con los valores de background-position: (+- ##px) (+- ##px); colocando valores positivos o negativos.
para mas info visita web o tambien en webounts o webonuts y mejor aun en google

Suerte.
__________________
RubénJ. Regresando al foro despues de un par de años. A preguntar más de las novedades del foro.
  #3 (permalink)  
Antiguo 10/01/2011, 12:49
Avatar de Kurozaki  
Fecha de Ingreso: diciembre-2010
Ubicación: Con mi Zanpakutou (Colima, MEX).
Mensajes: 175
Antigüedad: 7 años
Puntos: 9
Respuesta: css sprite menu vertical

Horizontal ?? Acerlo vertical ??
Que diferencia hay, el efecto sera el mismo.

En ves de estar en top y al hacer hover pase a bottom
Usa left y al hacer hover que pase a right

O con valores en px.

Hay muchas maneras, pero creo que el resultado sera el mismo. O al menos esto es lo que entiendo cuando dices que hacerlo vertical.
  #4 (permalink)  
Antiguo 10/01/2011, 15:54
Avatar de Ruben_JD  
Fecha de Ingreso: diciembre-2003
Ubicación: Quito-Ecuador
Mensajes: 218
Antigüedad: 14 años
Puntos: 7
Respuesta: css sprite menu vertical

Tu menu tiene la siguiente estructura:
Código HTML:
Ver original
  1. <ul id="menu">
  2.   <li><a href="#">opcion 1</a></li>
  3.   <li><a href="#">opcion 2</a></li>
  4.   <li><a href="#">opcion 3</a></li>
  5. </ul>
el codigo css:
Código CSS:
Ver original
  1. ul#menu{
  2.   widht: 150px;/* ancho*/
  3. }
  4. ul#menu li{
  5.   float:left;
  6.   display:block;/* inline es horizontal*/
  7.   padding:0;
  8.   margin:0;
  9. }
  10. ul#menu li a{
  11.   display:block;
  12.   text-decoration: none;
  13. }
  14. ul#menu li a:hover{
  15.   display:block;
  16.   text-decoration: underline;
  17. }
ahora solo tienes que añadir el codigo a cada boton con su respectiva posicion para el sprite.
Código HTML:
Ver original
  1. <ul id="menu">
  2.   <li><a href="#" class="op1">opcion 1</a></li>
  3.   <li><a href="#" class="op2">opcion 2</a></li>
  4.   <li><a href="#" class="op3">opcion 3</a></li>
  5. </ul>
Código CSS:
Ver original
  1. ul#menu{
  2.   widht: 150px;/* ancho*/
  3. }
  4. ul#menu li{
  5.   float:left;
  6.   display:block;/* inline es horizontal*/
  7.   padding:0;
  8.   margin:0;
  9. }
  10. ul#menu li a{
  11.   display:block;
  12.   text-decoration: none;
  13. background-image: (tuimagen);
  14. }
  15. ul#menu li a.op1{
  16. width: px; /*ancho de la imagen*/
  17. background-position: 0 0; /*posicion x & y*/
  18. }
  19. ul#menu li a.op1:hover{
  20.   display:block;
  21.   text-decoration: underline;
  22. }
  23. ul#menu li a.op2{
  24. ...
  25. cuantas opcines tengas
pruebalo, suerte.
__________________
RubénJ. Regresando al foro despues de un par de años. A preguntar más de las novedades del foro.
  #5 (permalink)  
Antiguo 12/01/2011, 00:29
Avatar de walterfcr  
Fecha de Ingreso: julio-2009
Ubicación: Costa Rica
Mensajes: 148
Antigüedad: 8 años, 5 meses
Puntos: 4
Respuesta: css sprite menu vertical

Cita:
Iniciado por Kurozaki Ver Mensaje
Horizontal ?? Acerlo vertical ??
Que diferencia hay, el efecto sera el mismo.

En ves de estar en top y al hacer hover pase a bottom
Usa left y al hacer hover que pase a right

O con valores en px.

Hay muchas maneras, pero creo que el resultado sera el mismo. O al menos esto es lo que entiendo cuando dices que hacerlo vertical.

tenias razon! lo estudie con bastante calma y tan simple como usar valores en px
gracias a los 2 por responder

Etiquetas: sprite, vertical
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 08:50.