Foros del Web » Creando para Internet » CSS »

Opcion SELECTED en un LI o A

Estas en el tema de Opcion SELECTED en un LI o A en el foro de CSS en Foros del Web. Pues veran estoy haciendo unas pestañas con un query que e bajado y aplicando CSS busco que tengan una opcion SELECTED es decir cuando estoy ...
  #1 (permalink)  
Antiguo 26/09/2011, 09:10
Avatar de JuJoGuAl  
Fecha de Ingreso: julio-2009
Ubicación: Venezuela
Mensajes: 754
Antigüedad: 13 años, 4 meses
Puntos: 19
Opcion SELECTED en un LI o A

Pues veran estoy haciendo unas pestañas con un query que e bajado y aplicando CSS busco que tengan una opcion SELECTED es decir cuando estoy en DICHA pestana me tenga un diseno diferente al uso normal...

ahora bien asi tengo las pestanas:

Código HTML:
Ver original
  1. <ul class="tabs idTabsShort">
  2.                     <li><a href="#tab1">M&aacute;s</a></li>
  3.                     <li><a href="#tab2">Ficha t&eacute;cnica</a></li>
  4.                     <li><a href="#tab3">3ra Ficha</a></li>
  5.                 </ul>

y el CSS seria:

Código CSS:
Ver original
  1. /* Tabs */
  2. .tabs {
  3.     list-style-type: none;
  4.     border-bottom: solid 1px #76839b;
  5.     height: 21px;
  6.     margin-top: 1em
  7. }
  8. ul.tabs li {
  9.     float: left;
  10.     margin-right: 1px
  11. }
  12. .tabs a {
  13.     background-image: url('tab_bg.jpg');
  14.     display: block;
  15.     width: 173px;
  16.     height: 18px;
  17.     text-align: center;
  18.     text-decoration: none;
  19.     text-transform: uppercase;
  20.     font-weight: bold;
  21.     padding-top: 3px;
  22.     color: #374853
  23. }
  24. .tabs a:active {
  25.     background-image: url('tab_bg_selected.jpg');
  26.     color: white
  27. }
  28.  
  29. /* IdTabs Short*/
  30. .idTabsShort a {
  31.     background-image: url('tab_bg_short.jpg');
  32.     width: 138px
  33. }
  34. .idTabsShort a:active {
  35.     background-image: url('tab_bg_selected_short.jpg');
  36.     color: white
  37. }
  38. div.sheets {
  39.     clear: both;
  40.     padding: 1em
  41. }

probe con a.selected y con li.selected pero no me lo reconoce, lo puse a.active para saber si yo estaba haciendo algo mal pero quiero q la imagen que esta en a.active sea el selecte osea el tab seleccionado, hay alguna forma de hacerlo?

Gracias
  #2 (permalink)  
Antiguo 26/09/2011, 09:23
 
Fecha de Ingreso: agosto-2011
Ubicación: Viña del Mar, Chile
Mensajes: 311
Antigüedad: 11 años, 3 meses
Puntos: 50
Respuesta: Opcion SELECTED en un LI o A

Hola de nuevo..jeje..dime que jquery usas..ando medio perdido con tu código..saludos
  #3 (permalink)  
Antiguo 26/09/2011, 09:26
Avatar de JuJoGuAl  
Fecha de Ingreso: julio-2009
Ubicación: Venezuela
Mensajes: 754
Antigüedad: 13 años, 4 meses
Puntos: 19
Respuesta: Opcion SELECTED en un LI o A

Este:http://craftyman.net/tabs-css-simples-con-jquery/

si conoces uno mejor me lo pichas soy muy nuevo ene sto de plugins es la primera web que uso que le anado los plugins
  #4 (permalink)  
Antiguo 26/09/2011, 09:31
 
Fecha de Ingreso: agosto-2011
Ubicación: Viña del Mar, Chile
Mensajes: 311
Antigüedad: 11 años, 3 meses
Puntos: 50
Respuesta: Opcion SELECTED en un LI o A

qué es esto??? dos clases??
Código HTML:
class="tabs idTabsShort">
  #5 (permalink)  
Antiguo 26/09/2011, 09:33
Avatar de JuJoGuAl  
Fecha de Ingreso: julio-2009
Ubicación: Venezuela
Mensajes: 754
Antigüedad: 13 años, 4 meses
Puntos: 19
Respuesta: Opcion SELECTED en un LI o A

bueno la web q estoy usando la tome de una que me pasaron y si efectivamente puedo aplicar 2 clases pues hay unas donde tengo CLASS="rte justify"

y en la hoja de estilo tengo una clase rte y otra clase justify... en el caso de esas tabs una clase es para tabs pequenas y otra para tabs grandes....

y las 2 funcionan....

Nose porque xD

YA LO CAMBIE Y DEJE UNA SOLA CLASEE LA DE TABS (que posee la imagen mas grande...)
  #6 (permalink)  
Antiguo 26/09/2011, 10:05
 
Fecha de Ingreso: agosto-2011
Ubicación: Viña del Mar, Chile
Mensajes: 311
Antigüedad: 11 años, 3 meses
Puntos: 50
Respuesta: Opcion SELECTED en un LI o A

no entendí si te funcionó de todos modos prueba con esta clase:

ul.tabs li. a:active{
background-image: url('tab_bg_selected.jpg');
}

Lo de la consulta anterior era una duda, no era para que eliminaras una clase...
Saludos
  #7 (permalink)  
Antiguo 26/09/2011, 10:09
Avatar de JuJoGuAl  
Fecha de Ingreso: julio-2009
Ubicación: Venezuela
Mensajes: 754
Antigüedad: 13 años, 4 meses
Puntos: 19
Respuesta: Opcion SELECTED en un LI o A

nop nada no hace nada =(
  #8 (permalink)  
Antiguo 26/09/2011, 10:45
 
Fecha de Ingreso: agosto-2011
Ubicación: Viña del Mar, Chile
Mensajes: 311
Antigüedad: 11 años, 3 meses
Puntos: 50
Respuesta: Opcion SELECTED en un LI o A

esto es lo único que no te funciona o hay algo más?
  #9 (permalink)  
Antiguo 26/09/2011, 11:01
Avatar de JuJoGuAl  
Fecha de Ingreso: julio-2009
Ubicación: Venezuela
Mensajes: 754
Antigüedad: 13 años, 4 meses
Puntos: 19
Respuesta: Opcion SELECTED en un LI o A

eso pues los tabs funcionan perfecto solo quiero q se ponga un fondo cuando se esta en tab actual por eso supuse que la propiedad es SELECTED
  #10 (permalink)  
Antiguo 26/09/2011, 11:05
 
Fecha de Ingreso: agosto-2011
Ubicación: Viña del Mar, Chile
Mensajes: 311
Antigüedad: 11 años, 3 meses
Puntos: 50
Respuesta: Opcion SELECTED en un LI o A

..más tarde bajaré ese jquery para intentar hacerlo y te comento..mientras tanto usas dreamweaver?
  #11 (permalink)  
Antiguo 26/09/2011, 11:15
Avatar de JuJoGuAl  
Fecha de Ingreso: julio-2009
Ubicación: Venezuela
Mensajes: 754
Antigüedad: 13 años, 4 meses
Puntos: 19
Respuesta: Opcion SELECTED en un LI o A

si para editar el html sip, ahora tengo otro problema con la galeria -.- como odio cuando esto me pasa...
  #12 (permalink)  
Antiguo 26/09/2011, 11:19
 
Fecha de Ingreso: agosto-2011
Ubicación: Viña del Mar, Chile
Mensajes: 311
Antigüedad: 11 años, 3 meses
Puntos: 50
Respuesta: Opcion SELECTED en un LI o A

no me había dado cuenta que estaba controlada por javascript la clase .active..ya encontré la solución:

quita esta linea de la clase:

Código HTML:
html ul.tabs li.active
esa linea está en una clase larga del css...luego agrégala así:

Código HTML:
html ul.tabs li.active {
background-image: url('tab_bg_selected.jpg');
}
También quita esta línea:

Código HTML:
.tabs a:active {
    background-image: url('tab_bg_selected.jpg');
    color: white;
}
  #13 (permalink)  
Antiguo 26/09/2011, 12:05
 
Fecha de Ingreso: agosto-2011
Ubicación: Viña del Mar, Chile
Mensajes: 311
Antigüedad: 11 años, 3 meses
Puntos: 50
Respuesta: Opcion SELECTED en un LI o A

Cita:
Iniciado por JuJoGuAl Ver Mensaje
si para editar el html sip, ahora tengo otro problema con la galeria -.- como odio cuando esto me pasa...
si usas dreamweaver ahórrate dolores de cabeza y usa los paneles de spry ,

probé la solución que te envié antes y funciona a la perfección,
Saludos
  #14 (permalink)  
Antiguo 26/09/2011, 12:13
Avatar de JuJoGuAl  
Fecha de Ingreso: julio-2009
Ubicación: Venezuela
Mensajes: 754
Antigüedad: 13 años, 4 meses
Puntos: 19
Respuesta: Opcion SELECTED en un LI o A

Cita:
Iniciado por snowmanchip Ver Mensaje
si usas dreamweaver ahórrate dolores de cabeza y usa los paneles de spry ,

probé la solución que te envié antes y funciona a la perfección,
Saludos
ya pruebo lo que me dijiste y donde consigo dicho panel?
  #15 (permalink)  
Antiguo 26/09/2011, 12:17
 
Fecha de Ingreso: agosto-2011
Ubicación: Viña del Mar, Chile
Mensajes: 311
Antigüedad: 11 años, 3 meses
Puntos: 50
Respuesta: Opcion SELECTED en un LI o A

prueba la solución, me cuentas y te digo lo del spry,
saludos
  #16 (permalink)  
Antiguo 26/09/2011, 12:26
Avatar de JuJoGuAl  
Fecha de Ingreso: julio-2009
Ubicación: Venezuela
Mensajes: 754
Antigüedad: 13 años, 4 meses
Puntos: 19
Respuesta: Opcion SELECTED en un LI o A

Si a la clase te referias al CSS no hace nada lo que me has dicho... no hace nada :S osea no cambian las tabs.
  #17 (permalink)  
Antiguo 26/09/2011, 12:32
 
Fecha de Ingreso: agosto-2011
Ubicación: Viña del Mar, Chile
Mensajes: 311
Antigüedad: 11 años, 3 meses
Puntos: 50
Respuesta: Opcion SELECTED en un LI o A

tienes un problema con el código que relaciona al jquery o te falta una línea en el css..pega todo tu css..completo y también el html desde el doctype en adelante..yo lo probé incluso le cambié distintos parámetros y funciona perfecto...., respecto a lo del spry , está disponible creo desde la versión cs3 en adelante...
lo puedes ver en Insertar -> Spry -> panels de ficha spry..

pero esta solución es mejor porque jquery funciona en todos los navegadores aún con js deshabilitado..
  #18 (permalink)  
Antiguo 26/09/2011, 12:48
Avatar de JuJoGuAl  
Fecha de Ingreso: julio-2009
Ubicación: Venezuela
Mensajes: 754
Antigüedad: 13 años, 4 meses
Puntos: 19
Respuesta: Opcion SELECTED en un LI o A

ah yo tengo es el macromedia dreamweaver 8 no uso las versiones de adobe y ya funciona la linea, solo hacia falta agregar la etiqueda A

tu idea era asi:

Código CSS:
Ver original
  1. html ul.tabs li.active
  2. {
  3.     background-image: url('tab_bg_selected.jpg');
  4. }

y lo puse asi:

Código CSS:
Ver original
  1. html ul.tabs li.active a
  2. {
  3.     background-image: url('tab_bg_selected.jpg');
  4. }

Etiquetas: opcion, selected, fondo
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 12:39.