Menu horizontal css usando imagen de 2 estados

Citar

Escrito el 04 Jun 2007 01:15 pm

ya intentaste, ya sabes, poniéndolo de fondo?

Por fael

BOFH

2443 de clabLevel

3 tutoriales
2 articulos

Envíale un mensaje privado Web

@faelazo

Citar

Escrito el 05 Jun 2007 08:37 am

Y si nos pones el tuyo

Saber que algo falla no es suficiente para darte la solución.

Si un día llamara al médico por teléfono y le digo:

- HOYGA, verá es que me duele el brazo, deme una solución ya.

Creo que el médico, para curarme el brazo, tendrá que mirarlo, ¿No?

Por ryuz

350 de clabLevel

2 tutoriales

Envíale un mensaje privado Web

Citar

Escrito el 05 Jun 2007 10:00 am

Depende....puede darte una opción drástica..."Amputarlo y cesará el dolor"

Por One

Claber

1488 de clabLevel

5 tutoriales

Genero:Masculino

Envíale un mensaje privado

Programador Web

@_One

Citar

Escrito el 05 Jun 2007 02:37 pm

Kilotr, cual es el problema? te funcionan los enlaces bien? o es que el over no se esta dando? porque a mi me ha pasado lo mismo, y supongo porque estan dentro de divs, debe haber una opcion que te permita que al hover: cambie a la otra imagen.

Por onnasama

325 de clabLevel

1 tutorial

Envíale un mensaje privado

Citar

Escrito el 05 Jun 2007 07:50 pm

Mira KiLotr, te recomiendo sinceramente y de todo corazon que aprendas lo que quieres usar. De que te sirve usar un codigo que no eniendes o no puedes cambiar? Puedes leer los tutoriales de css... y verás que feliz serás.

Lo que necesitas es usar la propiedad background de CSS, y cambiar la imagen por cada estado.

Que aprendas

PD: En el tutorial que enseñas arriba eso está bien explicado @.@

Por Lunatic Lycanthrop

Claber

1203 de clabLevel

7 tutoriales

1 ejemplo

Genero:Masculino

Envíale un mensaje privado

The dark places where wolves access internet with 46,6 kbps

Citar

Escrito el 05 Jun 2007 08:32 pm

Bueno aqui va una propuesta:

en el HTML:

Código :

<a class="tab" href="http://www.cristalab.com">Cristalab</a>

y en el CSS:

Código :

a.tab
{
   background-image:url(tbotonreposo.png);
   background-repeat:no-repeat;
   width:115px;
   height:27px;
   margin:0;
   padding:0;
   display:block;
   color:#666666;
   text-decoration:none;
   text-align:center;
   font-weight:bold;
}
a.tab:hover
{
   background-image:url(tbotonactivo.png);
   color:#FFFFFF;
}

Y este es el resultado:
En reposo:

y con el puntero encima:

Por Darel

725 de clabLevel

5 tutoriales

Envíale un mensaje privado Email

I'm a human

@Darel

Citar

Escrito el 06 Jun 2007 12:37 pm

En caso de no saber nada, simplemente podrías copiar el code del tutorial, y cambiar las propiedades necesarias (tamaño, links, nombre de la imagen, etc).

Hacer paginas web implica estudiar constantemente, probar, probar, corregir, probar, probar, corregir, probar, probar, estudiar, probar, prob...

Aunque claro, siempre esta el camino fácil del copy&paste

Por Ramm

BOFH

3152 de clabLevel

6 tutoriales
8 articulos

Genero:Masculino Bastard Operators From Hell REC Héroes

Envíale un mensaje privado Web

London, UK

@ramono

Citar

Escrito el 06 Jun 2007 03:48 pm

Bueno, con los cambios que le he hecho ya funciona. He dejado unos comentarios para entenderlo mejor. Y si todavía hay algo que no te queda claro, pregunta.

Código :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
#barra {
   float:left;
   width:100%;
   font-size:70%;
   border-bottom:3px solid #E1771E;
   font-family:Verdana, Arial, Helvetica, sans-serif;
}
#barra li{
   list-style:none;
   float:left;
}
#barra a{
/* 
Para que la imagen no se repita: no-repeat
Para centrar la imagen y evitar usar padding y marging: center
Para que que se muetre la parte de arriba: top (aunque siempre lo hace)
*/
   background:url(http://i98.photobucket.com/albums/l264/KiLotr/techdesktop/css/tboton.png) center top no-repeat;
   color:#333;
   text-decoration:none;
   display:block;
   width:115px; /* Anchura de la imagen */
   height:28px; /* Altura de la imagen */
   line-height:28px; /* El mismo tamaño que el height para que el texto quede centrado verticalmente */
   text-align:center;
}
#barra a:hover {
   background-position:bottom;
   color:#FFF;
}
</style>
</head>

<body>
<ul id="barra">
  <li><a href="#">Home</a></li>
  <li><a href="#">Videos</a></li>
  <li><a href="#">Galerias</a></li>
  <li><a href="#">Descargas</a></li>
  <li><a href="#">Manuales</a></li>
</ul>
</body>
</html>

Te recomiendo lo que dice Ramm, pero el camino fácil de copy&paste puede ser útil si después entiendes por que funciona y después lo comparas con el tuyo.

Por ryuz

350 de clabLevel

2 tutoriales

Envíale un mensaje privado Web

Citar

Escrito el 06 Jun 2007 07:05 pm

Te doy unos puntos para que veas cómo funcionan este tipo de botones y ve en cual puedas estar fallando.

1. Los enlaces deben tener el tamaño exacto de la imagen que quieres usar.
2. Text-align y Line-height te ayudarán a mantener el texto en el centro.
3. Usa no-repeat en todos los botones.
4. El estado inactivo debe tener la posición superior (background-position).
5. El estado activo debe tener la posición inferior.

Suerte en tu aprendizaje, y recuerda que es bueno mostrar el código y tu avance en el primer post. A menos que solo estas haciendo preguntas teoricas o de opinión.

Por NEO_JP

BOFH

5724 de clabLevel

13 tutoriales
12 articulos

Genero:Masculino Anime Bloggers Premio_Secretos Team Cristalab

Envíale un mensaje privado Web

Front-end Developer en Washington, DC

@neojp

Citar

Escrito el 07 Jun 2007 01:04 pm

Lo que debes hacer para que quede centrado, es definir el ancho del ul, el ancho, obviamente debe abarcar a todos los botones, pero no debe quedar espacio libre.

Algo asi, usando el ejemplo que te dio ryuz:

Código :

#barra {
   margin: 0 auto; //cambiar el float:left; por esto, margen de 0 arriba y abajo, y auto a los lados centra la lista
   width: 600px;  //aqui en vez de 100%, usas un ancho fijo (tiene alrededor de 600 pixeles, lo medi )
   font-size: 70%;
   border-bottom: 3px solid #E1771E;
   font-family:Verdana, Arial, Helvetica, sans-serif;
}

Muestra los cambios a ver como vas y así corregirte con los avances.

Saludos

Por Ramm

BOFH

3152 de clabLevel

6 tutoriales
8 articulos

Genero:Masculino Bastard Operators From Hell REC Héroes

Envíale un mensaje privado Web

London, UK

@ramono

Menu horizontal css usando imagen de 2 estados

Escribe una respuesta rapida