Botonera que cambie cuando me situo encima

marcosgue · #1 (**permalink**) 27/08/2012, 11:59

Como están?

Bueno estoy pasando por un problema con la botonera.

me he bloqueado dentro de mi posibilidad siendo un novato...

quiero lograr esta botonera

Tengo la intención de utilizar imagenes para no tener que hacer el llamado a la fuente especifica para evitar problemas de compatibilidad con algunos navegadores.

el problema que tengo es que no se como hacer para que cuando pase por encima de la imagen esta cambie. Pero que a la vez sea un link, ya que si lo pongo como background-image en el CSS del div no logro hacer que pueda configurar el link...

Además quiero utilizar imagenes porque con esto logro que la linea roja si se fijan llega justo hasta donde empieza la que está abajo cuando hice el link con texto logre que cambiara la linea roja de abajo a arriba pero no ocupaba todo el espacio solo lo que ocupaban las letras.

Por favor si pueden darme una mano les agradecería.

Saludos!

EDIT: He conseguido hacer que las imagenes cambien de la siguiente manera pero no consigo poner más botones, necesito saber como poner más a la derecha.

Código:

/*BOTONERA*/
#botonera{
	width:65%;
	height:35px;
	margin-left:10px;
	/*font-family:BebasNeue;
	font-size:36px;*/
}

.inicio a {
 outline: none;
 text-indent: -5000px ;
 display:block;
 width:76px;
 height:39px;
 background: url("imgs/botonera/iniciodoble.jpg") 0 0 no-repeat;
 }

 .inicio a:hover {
 background-position: -76px 0;
 }

 .inicio a:active {
 background-position: -76px 0;
 }	

/*FIN BOTONERA*/

Código HTML:

<div id="botonera">
        	<div class="inicio">
            	<a href="/">INICIO</a>
            </div>
        </div>

EDIT 2: SOLUCIONADO!!!

En lugar de utilizar un DIV con la calse hice una tabla con cell padding 0 y cell spacing en 0 y la clase se la pongo en cada TD y lislto!!!

Gracias!!!

JairLizcano · #2 (**permalink**) 27/08/2012, 22:57

Tal vez te interesen los siguientes datos:

El anchor text de cada item de tu menú lo último que podría ser es una imagen, empezando por cuestiones de SEO y terminando por semántica.

A su vez no deberías aplicar el borde superior al respectivo enlace sino posiblemente a su contenedor, bien podría ser un elemento li, para que éste te dé el ancho del borde que deseas.

Jamás vas a encontrar problemas de compatibilidad por cargar una fuente, o no sé si a ello te refieras.

Y terminando... lo último que necesitas para hacer un menú, son tablas.

Espero te sirvan esos tips antes de basarte en algunas soluciones algo ligeras.

Buena suerte.

marcosgue · #3 (**permalink**) 28/08/2012, 06:02

Cita:

Iniciado por JairLizcano

Tal vez te interesen los siguientes datos:

El anchor text de cada item de tu menú lo último que podría ser es una imagen, empezando por cuestiones de SEO y terminando por semántica.

A su vez no deberías aplicar el borde superior al respectivo enlace sino posiblemente a su contenedor, bien podría ser un elemento li, para que éste te dé el ancho del borde que deseas.

Jamás vas a encontrar problemas de compatibilidad por cargar una fuente, o no sé si a ello te refieras.

Y terminando... lo último que necesitas para hacer un menú, son tablas.

Espero te sirvan esos tips antes de basarte en algunas soluciones algo ligeras.

Buena suerte.

Muchisimas gracias, la verdad soy como ya dije un novato en esto, podrías darme un ejemplo sencillo con 2 botones si no te es molestia así asimilo mejor lo que me dices???

gracias nuevamente
Marcos!

JairLizcano · #4 (**permalink**) 28/08/2012, 09:23

Me has tomado con algo de tiempo, así que hice esto para ti:

Código HTML:

<!DOCTYPE html>
<html lang = 'ES'>
<head>
	<meta charset = 'UTF-8'/>
	<style type = 'text/css' media = 'screen'>
		a:visited {

			color: #000;
		}

		#menu > li {

			display: inline;
			border-bottom: solid 5px #F00;
			padding: 0px 5px;
		}

		#menu > li a {

			color: #666;
			text-transform: uppercase;
			text-decoration: none;
		}

		#menu li:hover {

			border-top: solid 5px #F00;
			border-bottom: none;
		}

		#menu li:hover a {

			color: #111;
		}
	</style>
	<title>
	</title>
</head>
<body>
	<div id = 'bar'>
		<ul id = 'menu'>
			<li>
				<a href = '#'>
					Inicio
				</a>
			</li>
			<li>
				<a href = '#'>
					Servicios
				</a>
			</li>
		</ul>
	</div>
</body>
</html>

Espero te sirva.

Buena suerte.

marcosgue · #5 (**permalink**) 28/08/2012, 10:54

Cita:

Iniciado por JairLizcano

Me has tomado con algo de tiempo, así que hice esto para ti:

Espero te sirva.

Buena suerte.

Pues muchísimas gracias... Adios a las tablas jeje...

Saludos!!!