Foros del Web » Creando para Internet » Diseño Gráfico »

Navegador con pestañas

Estas en el tema de Navegador con pestañas en el foro de Diseño Gráfico en Foros del Web. Hola amigos, vereis necesito saber como hacer un menu de pestañas tipo a este http://www.fotocasa.es/ Gracias...
  #1 (permalink)  
Antiguo 16/02/2005, 03:33
 
Fecha de Ingreso: octubre-2004
Mensajes: 230
Antigüedad: 13 años, 1 mes
Puntos: 0
Navegador con pestañas

Hola amigos, vereis necesito saber como hacer un menu de pestañas tipo a este http://www.fotocasa.es/
Gracias
  #2 (permalink)  
Antiguo 16/02/2005, 05:53
 
Fecha de Ingreso: enero-2005
Mensajes: 265
Antigüedad: 12 años, 11 meses
Puntos: 1
En la Búsqueda en Google: css menu tabs, el primer resultado te puede servir: CSS and round corners: Making accessible menu tabs. Otros resultados interesantes de la misma búsqueda pueden ser http://css.maxdesign.com.au/listamatic/ y http://css.maxdesign.com.au/listamatic2/
  #3 (permalink)  
Antiguo 16/02/2005, 05:54
 
Fecha de Ingreso: enero-2005
Mensajes: 188
Antigüedad: 12 años, 10 meses
Puntos: 0
A ver si te explico

Ese menú en concreto está hecho con una tabla con imágenes.

Lo primero tienes que crear los botones, que deben tener la misma altura y juntándolos tener el mismo ancho que la tabla general o menor, ya que si no se te van a salir de madre.

Para cada opción debes crear dos botones, uno para cuando no estás en la sección a la que corresponde el botón y otro para cuando sí lo estés.

Te pongo unos ejemplos. En ellos las imágenes llevan el sufijo -act para botón "activado" y -desac para el botón "desactivado".
Para la sección primera:

Código HTML:
<table width="400" cellspacing="0" cellpadding="0">
 <tr>
  <td width="100"><img src="btn1-act.png" width="100" height="20"></td>
  <td width="100"><img src="btn1-desac.png" width="100" height="20"></td>
  <td width="100"><img src="btn1-desac.png" width="100" height="20"></td>
  <td width="100"><img src="btn1-desac.png" width="100" height="20"></td>
 </tr>
</table> 
Para la sección segunda:

Código HTML:
<table width="400" cellspacing="0" cellpadding="0">
 <tr>
  <td width="100"><img src="btn1-desac.png" width="100" height="20"></td>
  <td width="100"><img src="btn1-act.png" width="100" height="20"></td>
  <td width="100"><img src="btn1-desac.png" width="100" height="20"></td>
  <td width="100"><img src="btn1-desac.png" width="100" height="20"></td>
 </tr>
</table> 
Y así...
¿Se entiende?. Espero que sí. Saludos.
  #4 (permalink)  
Antiguo 16/02/2005, 22:04
 
Fecha de Ingreso: enero-2005
Mensajes: 31
Antigüedad: 12 años, 11 meses
Puntos: 0
eso es muy facil, son solo imagenes, en una tabla, super bien explicado, te recomiendo com un dato, que tengas cuidado con el uso de solapas solo se usan en secciones bien diferentes, no es lo mismo una botonera, que un menu de solapas, cada solapa responde a un tema distinto que la otra, y no deve saltarse de solapa en solapa con otro enlace que no sean ellas mismas, nunca hacer mas de seis, saludos
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 02:34.