Foros del Web » Creando para Internet » CSS »

Necesito un empujoncito conm unas pestañas

Estas en el tema de Necesito un empujoncito conm unas pestañas en el foro de CSS en Foros del Web. Hola a todos/das: Estoy confeccionando un menú de pestañas y hasta ahora con lo que he investigado por ahí más lo que yo se (poco) ...
  #1 (permalink)  
Antiguo 30/04/2011, 17:42
Avatar de Rankxerox1984  
Fecha de Ingreso: septiembre-2010
Mensajes: 253
Antigüedad: 7 años, 2 meses
Puntos: 4
Necesito un empujoncito conm unas pestañas

Hola a todos/das:

Estoy confeccionando un menú de pestañas y hasta ahora con lo que he investigado por ahí más lo que yo se (poco) me voy defendiendo. Ya lo tengo prácticamente terminado, pero me falla un detalle que no se como resolver (será la hora).
Cuando pincho una pestaña cualquiera me selecciona el contenido que corresponde, sin embargo, no se mantiene "pulsada" mientras dura la selección.
Mi idea sería que al pinchar la opción desapareciera el background-color y cogiera el mismo que el contenido además de que desapareciera la línea inferior del botón, pero manteniendo el resto del borde, creando el efecto de que la pestaña pertenece a una ficha.

Aquí el código para vuestro examen (se admiten críticas constructivas acompañadas de alternativas funcionales).

El menú

Código HTML:
<div id="Pestanas">
	<ul>
		<li style="margin-left: 1px"><a href="#" rel="1" class="button"><span>Perfil</span></a></li>
		<li><a href="#" rel="2" class="button"><span>Referencias</span></a></li>
		<li><a href="#" rel="3" class="button"><span>Documentos</span></a></li>
		
	</ul>
</div>
<div id="Pestanasline">&nbsp;</div> 

El estilo del menú:

Código HTML:
/*Menus de pestaña*/ 

			#Pestanas{margin-left: 4px;padding: 0px;width: 100%;background: transparent;voice-family: "\"}\"";voice-family: inherit;padding-left: 5px;}
			#Pestanas ul{font: bold 11px Arial, Verdana, sans-serif;margin:0;padding:0;list-style:none;border-radius:4px 4px 0px 0px;-moz-border-radius: 4px 4px 0px 0px;-webkit-border-radius:4px 4px 0px 0px;}
			#Pestanas li{display:inline;margin:0 2px 0 0;padding:0;text-transform:uppercase;line-height: 1.5em;border-radius:4px 4px 0px 0px;-moz-border-radius: 4px 4px 0px 0px;-webkit-border-radius:4px 4px 0px 0px;}
			#Pestanas a{float:left;color: white;background-color: FireBrick;margin:0 2px 0 0;padding:0 0 0 3px;text-decoration:none;letter-spacing: 1px;border-radius:4px 4px 0px 0px;-moz-border-radius: 4px 4px 0px 0px;-webkit-border-radius:4px 4px 0px 0px;}
			#Pestanas a span{float:left;display:block;background-color: FireBrick;padding:3px 9px 3px 6px;border-radius:4px 4px 0px 0px;-moz-border-radius: 4px 4px 0px 0px;-webkit-border-radius:4px 4px 0px 0px;}
			#Pestanas a span{float:none;}
			#Pestanas a:hover{background-color: #d50509;}
			#Pestanas a:hover span{background-color: #d50509;}
			#Pestanas #current a #Pestanas #current span{ /*boton selecionado*/background-color:#f0f8ff;}
			#Pestanasline{clear: both;padding: 0;width: 100%;height: 1px;line-height: 1px;background: #8b0000;}
A ver si alguien me puede iluminar. Cuando lo tenga resuelto lo publicaré.

Gracias por adelantado,
__________________
J.
¿Dónde está la tecla ‘ANY’?
(H. Simpson)
  #2 (permalink)  
Antiguo 30/04/2011, 17:51
 
Fecha de Ingreso: febrero-2010
Ubicación: Republica Dominicana
Mensajes: 53
Antigüedad: 7 años, 10 meses
Puntos: 4
Respuesta: Necesito un empujoncito conm unas pestañas

No te comprendo del todo men, necesitare que de un poquito mas de detalles para darte una mano..
  #3 (permalink)  
Antiguo 30/04/2011, 18:15
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Necesito un empujoncito conm unas pestañas

Hola:

Deberás usar la pseudoclase :active.

Saludos.

  #4 (permalink)  
Antiguo 30/04/2011, 18:25
Avatar de ZoroRoronoa  
Fecha de Ingreso: marzo-2011
Ubicación: California, USA
Mensajes: 823
Antigüedad: 6 años, 8 meses
Puntos: 116
Respuesta: Necesito un empujoncito conm unas pestañas

Cita:
Iniciado por jomaruro Ver Mensaje
Hola:

Deberás usar la pseudoclase :active.

Saludos.

y con dicho pseudoclass, en los estilos, le quitas el bordr inferior y le das un color de background, que sea igual al color del contenido que sale.

Saludos
__________________
Programador jQuery & PHP
  #5 (permalink)  
Antiguo 01/05/2011, 04:22
Avatar de Rankxerox1984  
Fecha de Ingreso: septiembre-2010
Mensajes: 253
Antigüedad: 7 años, 2 meses
Puntos: 4
Respuesta: Necesito un empujoncito conm unas pestañas

Hola a todos/das:

Muchas gracias por los consejos (sabios) recibidos.
Los he seguido y ya estoy más cerca de conseguir lo que deseo. He hecho algunos cambios en el CSS (el HTML sigue igual) pero todavia no sale lo que deseo.
La pestaña cambia de color cuando la pincho, sin embargo no mantiene el color durante la selección. Por ejemplo cuando estoy en la pestaña 1 el contenido dcorrespondiente a esa pestaña aparece debajo, sin embargo la pestaña no mantiene el color del background ni cambia el color de los bordes, de manera que no parece que sea una ficha. Seguramente no uso bien la seudo clase active o la pestaña no se mantiene activa cuando se pincha.
Vuelvo a poner el CSS con los cambios a ver si alguien me puede indicar los fallos


Código HTML:
	/*Menus de pestaña*/ 

			#Pestanas{margin-left: 4px;padding: 0px;width: 100%;background: transparent;voice-family: "\"}\"";voice-family: inherit;padding-left: 5px;}
			#Pestanas ul{font: bold 11px Arial, Verdana, sans-serif;margin:0;padding:5px;list-style:none;border-radius:4px 4px 0px 0px;-moz-border-radius: 4px 4px 0px 0px;-webkit-border-radius:4px 4px 0px 0px;}
			#Pestanas li{display:inline;margin:0 2px 0 0;padding:5px;border:1px; border-color:FireBrick;line-height: 1.5em;border-radius:4px 4px 0px 0px;-moz-border-radius: 4px 4px 0px 0px;-webkit-border-radius:4px 4px 0px 0px;}
			#Pestanas a{float:left;color: white;background-color: FireBrick;border:1px; border-color:FireBrick;margin:0 2px 0 0;padding:5px;text-decoration:none;letter-spacing: 1px;border-radius:4px 4px 0px 0px;-moz-border-radius: 4px 4px 0px 0px;-webkit-border-radius:4px 4px 0px 0px;}
			#Pestanas a:hover{background-color: #d50509;}
			#Pestanas a:active{background:#e9e9e9;border-color:FireBrick FireBrick #e9e9e9 FireBrick;color:#666 }
			#Pestanas #current a #Pestanas #current span{ /*boton selecionado*/background-color:#f0f8ff;border-color:FireBrick FireBrick #e9e9e9 FireBrick;z-index:1;}
			#Pestanasline{clear: both;padding: 0;width: 100%;height: 1px;line-height: 1px;background: #8b0000;z-index:2;}
Como siempre muchas gracias por la ayuda
__________________
J.
¿Dónde está la tecla ‘ANY’?
(H. Simpson)
  #6 (permalink)  
Antiguo 01/05/2011, 11:50
Avatar de Rankxerox1984  
Fecha de Ingreso: septiembre-2010
Mensajes: 253
Antigüedad: 7 años, 2 meses
Puntos: 4
Respuesta: Necesito un empujoncito con unas pestañas

Hola a todos/as:

Por si alguien estaba pensando en esto. Acabo de reducir el código a lo mínimo sin perder nada de lo que había conseguido, pero sigo sin dar con el truco para mantener la pestaña "pulsada" con el borde integrado en el elemento de debajo como si fuera una ficha. No me hace caso con los border-color ni con nada.

¿Alguien tiene alguna idea?
El código reducido:

HTML
Código HTML:
<div id="Pestanas">
	<ul>
		<li><a href="#" rel="1" class="button">Perfil</a></li>
		<li><a href="#" rel="2" class="button">Referencias</a></li>
		<li><a href="#" rel="3" class="button">Documentos</a></li>
		
	</ul>
</div> 
el CSS

Código HTML:
/*Menus de pestaña*/ 
			#Pestanas{margin-left: 4px;padding: 0px;width: 100%;padding-left: 5px;}
			#Pestanas ul{font: bold 11px Arial, Verdana, sans-serif;margin:0;padding:5px;list-style:none;border-radius:4px 4px 0px 0px;-moz-border-radius: 4px 4px 0px 0px;-webkit-border-radius:4px 4px 0px 0px;}
			#Pestanas li{display:inline;margin:0 2px 0 0;padding:5px;border:1px; border-color:FireBrick;line-height: 1.5em;border-radius:4px 4px 0px 0px;-moz-border-radius: 4px 4px 0px 0px;-webkit-border-radius:4px 4px 0px 0px;}
			#Pestanas a{float:left;color: white;background-color: FireBrick;border:1px; border-color:FireBrick;margin:0 2px 0 0;padding:5px;text-decoration:none;letter-spacing: 1px;border-radius:4px 4px 0px 0px;-moz-border-radius: 4px 4px 0px 0px;-webkit-border-radius:4px 4px 0px 0px;}
			#Pestanas a:hover{background-color: #d50509;border-color:FireBrick;}
			#Pestanas a:active{background:#e9e9e9;border-color:FireBrick ;color:#666 }
	
	/*Contenido página formularios página central*/
	
	#contenido { float:left;padding:0; margin:0; border:1px Solid #8b0000;}
El DIV Contenido esta pegado a los botones dando la apariencia de que estos son las pestañas de las fichas lo que contiene es lo que cambia cuando se pincha la pestaña.
No se lo que falta por añadir para conseguir el efecto. Conceptualmente lo que quiero es que la pestaña cambie de color eliminando cambiando el color de la linea que coincide con el DIV contenido y lo mantenga mientras el usuario esté en esa pestaña creando el "efecto ficha" como en las pestañas de los exploradores, por ejemplo.

Muchas gracias a todos por la paciencia
__________________
J.
¿Dónde está la tecla ‘ANY’?
(H. Simpson)

Última edición por Rankxerox1984; 02/05/2011 a las 00:37 Razón: He quitado el span también
  #7 (permalink)  
Antiguo 02/05/2011, 10:32
Avatar de Rankxerox1984  
Fecha de Ingreso: septiembre-2010
Mensajes: 253
Antigüedad: 7 años, 2 meses
Puntos: 4
Respuesta: Necesito un empujoncito conm unas pestañas

Veo que esto de las pestañas según están en el explorador es un tema que nadie, aparentemente, conoce.
A lo mejor no pertenece a este foro.

Gracias de todos modos
__________________
J.
¿Dónde está la tecla ‘ANY’?
(H. Simpson)
  #8 (permalink)  
Antiguo 03/05/2011, 03:34
Avatar de Rankxerox1984  
Fecha de Ingreso: septiembre-2010
Mensajes: 253
Antigüedad: 7 años, 2 meses
Puntos: 4
Respuesta: Necesito un empujoncito conm unas pestañas

Hola a todos/todas los que estais siguiendo con interés mi aventura en solitario por el proceloso mar del CSS:

Ya encontré (¡Eureka!) la manera de mantener la pestaña "pulsada" es, como todos sabeis, con la pseudo clase Focus.

Paso el CSS modificado por si le sirve a alguien.

Por cierto, no consigo que se vea el color del border ni que funcione el z-index. Como siempre se agradecen ideas, críticas y soluciones alternativas.

Código HTML:
#Pestanas{margin-left: 4px;padding: 0px;width: 100%;padding-left: 5px;z-index:5}
			#Pestanas ul{font: bold 11px Arial, Verdana, sans-serif;margin:0;padding:5px;border:1px; border-color:FireBrick;list-style:none;border-radius:4px 4px 0px 0px;-moz-border-radius: 4px 4px 0px 0px;-webkit-border-radius:4px 4px 0px 0px;}
			#Pestanas li{display:inline;line-height: 1.5em;margin:0 2px 0 0;padding:5px;border:1px; border-color:FireBrick;border-radius:4px 4px 0px 0px;-moz-border-radius: 4px 4px 0px 0px;-webkit-border-radius:4px 4px 0px 0px;}
			#Pestanas a{float:left;color: white;background-color: FireBrick;border:1px; border-color:FireBrick;margin:0 2px 0 0;padding:5px;text-decoration:none;letter-spacing: 1px;border-radius:4px 4px 0px 0px;-moz-border-radius: 4px 4px 0px 0px;-webkit-border-radius:4px 4px 0px 0px;}
			#Pestanas a:hover{background-color: #d50509;border:1px;border-color:FireBrick;}
			#Pestanas a:focus {background:#e9e9e9;z-index:1;}
			#Pestanas a:active{background:#e9e9e9;border-style:solid;border:1px;border-color:FireBrick ;color:#666 }
Muchas gracias de nuevo por vuestra valiosa ayuda
__________________
J.
¿Dónde está la tecla ‘ANY’?
(H. Simpson)
  #9 (permalink)  
Antiguo 03/05/2011, 04:15
Avatar de Rankxerox1984  
Fecha de Ingreso: septiembre-2010
Mensajes: 253
Antigüedad: 7 años, 2 meses
Puntos: 4
Respuesta: Necesito un empujoncito conm unas pestañas

Hola a todos todas:

No hace falta que os esforceis. Lo acabo de solucionar por mis medios.
Como cosa interesante (para mi) no utiliza imagenes para dar forma a la esquina de la pestaña.

Dejo el código por si le sirve a alguien:

HTML:

Código HTML:
<div id="Pestanas">
	<ul>
		<li ><a href="#" rel="1" class="button">Perfil</a></li>
		<li ><a href="#" rel="2" class="button">Referencias</a></li>
		<li ><a href="#" rel="3" class="button">Documentos</a></li>
		
	</ul>
</div>
<div id="Pestanasline">&nbsp;</div> 
CSS:
Código:
			#Pestanas{margin-left: 4px;padding: 0px;width: 100%;padding-left: 5px;z-index:5}
			#Pestanas ul{font: bold 11px Arial, Verdana, sans-serif;margin:0;padding:5px;list-style:none;border-radius:4px 4px 0px 0px;-moz-border-radius: 4px 4px 0px 0px;-webkit-border-radius:4px 4px 0px 0px;}
			#Pestanas li{display:inline;line-height: 1.5em;margin:0 2px 0 0;padding:5px; border-radius:4px 4px 0px 0px;-moz-border-radius: 4px 4px 0px 0px;-webkit-border-radius:4px 4px 0px 0px;}
			#Pestanas a{float:left;color: white;background-color: FireBrick;border:1px Solid #8b0000;margin:0 2px 0 0;padding:5px;text-decoration:none;letter-spacing: 1px;border-radius:4px 4px 0px 0px;-moz-border-radius: 4px 4px 0px 0px;-webkit-border-radius:4px 4px 0px 0px;}
			#Pestanas a:hover{background-color: #d50509;border:1px Solid #8b0000;}
			#Pestanas a:focus {z-index:1;background:#e9e9e9;border:1px Solid #8b0000;text-decoration: none; color:FireBrick; border-bottom:1px Solid#e9e9e9;}
			#Pestanas a:active{background:#e9e9e9;border:1px Solid #8b0000; }
			#Pestanasline{margin-top:6px;padding: 0;width: 100%;height: 1px;line-height: 1px;background: #8b0000;}
Doy el tema por cerrado
Gracias por la ayuda recibida
__________________
J.
¿Dónde está la tecla ‘ANY’?
(H. Simpson)
  #10 (permalink)  
Antiguo 03/05/2011, 15:25
Avatar de Tecna  
Fecha de Ingreso: enero-2010
Mensajes: 291
Antigüedad: 7 años, 11 meses
Puntos: 45
Respuesta: Necesito un empujoncito conm unas pestañas

Buenas,

siento llegar tarde y encima con malas noticias. Lamentablemente chrome y creo que safari también no se comportan de la misma manera que el resto de navegadores con la pseudoclase focus. Sólo funcionan con eventos de teclado y en elementos de formulario y no creo que esto sea por error sino mas bien porque piensan que es el comportamiento correcto ya que es conocido hace tiempo y no lo han cambiado todavía. Y en cierto modo tiene sentido que no funcione con un enlace porque al dar el foco a un elemento lo que se espera es una acción por parte del usuario y si esta acción es un click en él, además de darle el foco, el comportamiento predeterminado del enlace sería seguir el enlace, es decir llevarnos a otra página con lo que el enlace ya no tendría el foco. Pero si que se tiene que poder dar el foco con el teclado para que la página sea accesible en dispositivos sin ratón y en elementos de formularios en los que se espera que el usuario introduzca datos y son los únicos que se nombran en la especificación 2.1. La única solución que se me ocurre para que funcione en todos igual sería usar javascript.

Por otro lado, aunque supongo que ya lo has averiguado, para poder aplicar la propiedad z-index a un elemento tiene que estar posicionado. Y el borde si que se ve pero al ser de un pixel casi no se aprecia. Aprovecho para decirte que en lugar de repetir la misma propiedad varias veces puedes agrupar los selectores separándolos por comas y así el código será más corto. También puedes eliminar el div con id Pestanas y aplicar los estilos de éste al ul directamente y la class button que no la estás usando para nada. El div Pestanasline supongo que no lo usarás solo para dibujar la línea de separación porque no se deben usar elementos vacios sólo para efectos estéticos, podrías poner en él el contenido.
Sería mejor usar display block para los elementos <li> y así podrías dar a todas las pestañas el mismo tamaño. Los elementos inline tienen el tamaño de lo que tienen dentro y en este caso como los enlaces están flotados se salen del flujo del documento y los <li> se quedan vacios y sin tamaño, unicamente el padding y el line-height, puedes comprobarlo con firebug poniendo un color de fondo al li. Además al flotar los enlaces se transforman en elementos en bloque y no es correcto poner elementos en bloque dentro de elementos en línea. Lo he probado en varios navegadores y en cada uno se veía diferente. Te he hecho un ejemplo que se ve igual en todos excepto el focus con el ratón en chrome:

Código HTML:
Ver original
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="es">
  2. <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  3. <meta name="Language" content="Spanish">
  4. <link rel="stylesheet" href="fichero.css" type="text/css">
  5. <title>menu de pesta&ntilde;as con :focus</title>
  6. </head>
  7.     <ul>
  8.         <li ><a href="#" rel="1">Perfil</a></li>
  9.         <li ><a href="#" rel="2">Referencias</a></li>
  10.         <li ><a href="#" rel="3">Documentos</a></li>
  11.        
  12.     </ul>
  13.     <div id="contenido"><p>el contenido</p></div>
  14. </body>
  15. </html>

Código CSS:
Ver original
  1. /******** menu de pestañas con :focus *******/
  2. * {
  3.     margin: 0;
  4.     padding: 0;
  5.     outline: none;
  6. }
  7.  
  8. ul, li, a { display: block; }
  9.  
  10. a, #contenido {
  11.     border: 1px solid #000;
  12.     text-align: center;
  13.     height: 40px;  
  14.     line-height: 40px;
  15. }
  16.  
  17. ul {
  18.     list-style-type: none;
  19.     height: 42px;
  20.     z-index: 2;
  21.     position: relative;
  22.     top: 10px; 
  23. }
  24.  
  25. li {
  26.     float: left;
  27.     margin-left: 10px;
  28. }
  29.  
  30. a {
  31.     width: 125px;
  32.     background: #ff0;
  33.     text-decoration: none;
  34. }
  35.  
  36. li a:focus {
  37.     background: #0ff;
  38.     border-bottom: none;
  39.     height: 52px;
  40. }
  41.  
  42. #contenido
  43. {
  44.     background: #0ff;
  45.     margin-top: 20px;
  46.     height: 300px;
  47. }
  48. /** fin **/
  #11 (permalink)  
Antiguo 04/05/2011, 01:43
Avatar de Rankxerox1984  
Fecha de Ingreso: septiembre-2010
Mensajes: 253
Antigüedad: 7 años, 2 meses
Puntos: 4
Respuesta: Necesito un empujoncito conm unas pestañas

Muchas gracias por tu aporte,

Entiendo que lo apropiado sería utilizar "current" el problema que tiene eso par mi caso es que la lsita hace referencia a un AJAX que, al fina lde todo trae la información de los menús dentro de un DIV de la página sin regargar TODA la página.
Y yo no se como utilizar "current" de un modo dinámico. Por otra parte muchas gracias por las ideas relativas a la utilización de los elementos (...es el problema de no tener estudios)

Muchas gracias de nuevo
__________________
J.
¿Dónde está la tecla ‘ANY’?
(H. Simpson)

Etiquetas: pestañas
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 18:05.