[SOLUCIONADO] Menu en lista con imagenes de sustitucion

[jakijem]

Estoy intentando hacer un menu en linea, mediante una lista desordenada, pero cono iconos que cambien con hover, pero algo hago mal, porque no sale este el el codigo HTML:

Código:

HTML:
 <div id="iconos">
 <ul>
            <li><a id="icono1" href=""></a></li>
            <li><a id="icono2" href=""></a></li>
            <li><a id="icono32" href=""></a></li>
          </ul>
</div>

y este el CSS:

Código:

CSS:

#iconos ul li {
	display: inline;
	list-style: none;
}
#icono1 {
	background-image: url(../img/casita_L.png);
	background-repeat: no-repeat;
}
#icono1:hover {
	background-image: url(../img/casita_on_L.png);
	background-repeat: no-repeat;
}
#icono2 {
	background-image: url(../img/sobre_L.png);
	background-repeat: no-repeat;
}
#icono2:hover {
	background-image: url(../img/sobre_on_L.png);
	background-repeat: no-repeat;
}

Que es lo que esta mal?

[webosiris]

el elemento A es un elemento INLINE, por lo que tiene el tamaño de su contenido... en este caso al no tener contenido su tamaño es 0 y pro eso no ves la img que le pones de fondo.
Prueba agregando esto:

Código CSS:

#iconos a{
display:block;
width:45px;
height:45px}
 

por otra parte, 2 observaciones:
- no es una buena práctica cambiar toda la img en el hover, las img se cargan solo al momento de ser llamadas por lo que si cambias toda al img va a demorar unos segundos en aparecer... en vez de eso usa sprites, osea unifica tus 4 img en 1 sola más grande y luego las vas cambiando con background-position.

- intenta en la medida de lo posible evitar usar IDs, en este caso para los items de la lista lo mejor es usar CLASES

[jakijem]

Iniciado por webosiris

el elemento A es un elemento INLINE, por lo que tiene el tamaño de su contenido... en este caso al no tener contenido su tamaño es 0 y pro eso no ves la img que le pones de fondo.
Prueba agregando esto:

Código CSS:

#iconos a{
display:block;
width:45px;
height:45px}
 

Si hago esto, el menu me sale en vertical

Iniciado por webosiris

por otra parte, 2 observaciones:
- no es una buena práctica cambiar toda la img en el hover, las img se cargan solo al momento de ser llamadas por lo que si cambias toda al img va a demorar unos segundos en aparecer... en vez de eso [URL="http://librosweb.es/css_avanzado/capitulo_1/rollovers_y_sprites.html"]usa sprites[/URL], osea unifica tus 4 img en 1 sola más grande y luego las vas cambiando con background-position.

- intenta en la medida de lo posible evitar usar IDs, en este caso para los items de la lista lo mejor es usar CLASES

Lo de los sprites no sabria como hacerlo, pues lo que quiero es que cada uno de los iconos cambie de color, por separado, obviamente,

Ya he cambiado los id´s por clases,
A ver, ahora mismo tengo esto:

Código:

HTML

<footer>
        <div id="iconos">
          <ul>
            <li><a class="icono1" href=""></a></li>
            <li><a class="icono2" href=""></a></li>
            <li><a class="icono3" href=""></a></li>
            <li><a class="icono4" href=""></a></li>
            <li><a class="icono5" href=""></a></li>
          </ul>
        </div>

CSS: 

#iconos ul li {

	display: inline;
	list-style: none;

}
#iconos a{
    display:block;
    width:45px;
    height:20px;
}
.icono1 {
	background-image: url(../img/casita_L.png); width:21px; height:18px;
	background-repeat: no-repeat;

}
.icono1:hover {
	background-image: url(../img/casita_on_L.png);
	background-repeat: no-repeat;
}
.
.
.

Si que se ven los iconos, pero me aparecen en vertical, y el hover no funciona

[jakijem]

voy de mal en peor, como solo con css no lo conseguia, he probado a poner el js que produce dreamweaver de "MM_swapImgRestore, MM_preloadImages, etc..."

pero no me gusta, además de meter una cantidad de codigo excesiva, me hace cosas muy extrañas: por ejemplo, si lo pongo solo en una web en blanco, funciona perfectamente, pero dentro de mi web, el mouseover no funciona.

No se como enfocar esto, preferiria volver al css puro, pero tampoco consigo que funcione

[webosiris]

Si hago esto, el menu me sale en vertical

perdón, fue un gazapo al escribir mi mensaje, en vez de display:block, usa display:inline-block

y sobre la sustitución de img, ya te dije, usa sprites (hasta te enlacé un artículo que lo explica muy bien). Básicamente:
- une todas tus img en 1 sola, así en vez de casita.png sobre.png sobre_on.png, etc tienes 1 sola, iconos.png. Eso lo haces con un editor de img, copiando las img una debajo de la otra. Si tus img originales median 45px de alto y 45px de ancho y unes 6 img, la img nueva te va a quedar de 45px de ancho y 270px de alto.

- deja el css de la siguiente manera:

Código CSS:

#iconos a{
    display:inline-block;
    height:45px;
    width:45px;
    background:url(img/iconos.png);
}
 
#iconos a.icono1{
    background-position:0 0;}
#iconos a.icono1:hover{
     background-position:0 -45px;}
 
#iconos a.icono2{
    background-position:0 -90px;}
#iconos a.icono2:hover{
    background-position:0 -135px;}
 
#iconos a.icono3{
    background-position:0 -180px;}
#iconos a.icono3:hover{
    background-position:0 -225px;}
 

eso es claro considerando iconos de 45px de alto, cambia los tamaños a los que quieras usar.
PD: la posición del icono1 en realidad es innecesaria porque esa es la posición por defecto, la puse igual para que se entendiera mejor

[jakijem]

A ver, es que no se si los sprites sirven para esto, perdoname por mi ignorancia, pero se trata de un menu de iconos sociales, que estan en negro, los cuales deben cambiar solo el icono en el que se haga mouseover,





es decir, que cambie solo el icono sobre el que se hace mouseover, algo como esto:

[webosiris]

si, y? probaste lo que te dije? los sprites son EXACTAMENTE para eso.

por favor, lee el material que te pasé, sino la impresión que me das es que no lees lo que te digo y entonces no loe veo el sentido a seguir ayudándote.

PD: para esos iconos podrías usar también una fuente como Font Awersome y te simplificas la vida, ni imágenes necesitas.

[jakijem]

ok, entiendo los beneficios de cargar solo una imagen y hacer una sola llamada al servidor, entiendo que se hace una sola imagen como esta:



que tiene 150 x 28 px (cada tira), en total 150 x 56px

pero no me aclaro con el posicionamiento, cada icono viene a medir 28x28px (lo he hecho sin guias), el codigo que tengo es asi:

Código:

HTML:

<ul id="sprites">
            <li id="panel1b"><a href="#"></a></li>
            <li id="panel2b"><a href="#"></a></li>
            <li id="panel3b"><a href="#"></a></li>
            <li id="panel4b"><a href="#"></a></li>
          </ul>

y el CSS:

Código:

CSS:

#sprites {
	width: 150px;
	height: 28px;
	background: url(img/sprite_iconos.png);
	margin: 10px auto; padding: 0;
	position: relative;
}

#sprites li {margin: 0; padding: 0; list-style: none; position: absolute; top: 0;}

#sprites li, #sprites a {height: 28px; display: block;}
#panel1b {left: 0; width: 28px;}
#panel2b {left: 29px; width: 28px;}
#panel3b {left: 58px; width: 28px;}
#panel4b {left: 86px; width: 28px;}

#panel1b a:hover {background: transparent url(img/sprite_iconos.png) 0 -28px no-repeat;}
#panel2b a:hover {background: transparent url(img/sprite_iconos.png) -29px -28px no-repeat;}
#panel3b a:hover {background: transparent url(img/sprite_iconos.png) -58px -28px no-repeat;}
#panel4b a:hover {background: transparent url(img/sprite_iconos.png) -86px -28px no-repeat;}

pero nada, no veo ni siquiera la imagen de fondo

[webosiris]

jakijem, te puse el código correcto en mi anterior mensaje (#5)...tu código no se parece EN NADA al mio. De nuevo, moléstate EN LEER lo que escribo.

Lo siento, hasta acá llegué.

[jakijem]

mira, webosiris, entiendo tu cansanci y hasta tu enfado, pero llevo desde ayer con esto, ¿de verdad crees que no me he leido cada mensaje tuyo varias veces?

He leido el artículo [URL="http://librosweb.es/css_avanzado/capitulo_1/rollovers_y_sprites.html"]1.10 de libros web[/URL] y el de [URL="http://alistapart.com/article/sprites"]A List Apart [/URL] y lo que estaba haciendo era coger el ejemplo de este ultimo e intentar entender como funciona, ya que en el articulo de libros web no aparece ningun link a un ejemplo funcionando.

Ahora he vuelto (otra vez) a tu mensaje #5, y me dices que ponga cada icono encima de otro, en vertical, cuando el menu debe aparecer en horizontal. ¿El icono que he creado de 150x56 no es correcto?



o debo cambiarlo a esto?



o a esto?



He probado con tu codigo, cambiando las posiciones, de varias formas y no me aparece nada.

Por otra parte, el atributo display: inline-block me sigue sacando la lista en vertical.

Por cierto, también he intentado instalar la fuente de Font-Awesome, pero leyendo la documentación no encuentro ninguna lista con los iconos disponibles para saber cual nombrar.

Como ves estoy explorando todas las alternativas, te aseguro que por falta de lectura no va a ser.

[webosiris]

Sobre los iconos, las 3 opciones que muestras son válidas, pero con todos los iconos uno debajo del otro es lo más fácil porque solo hay que calcular una coordenada (la vertical), la horizontal siempre es la misma (0)
Y sobre la fuente de iconos, en el menu hay un bonito item que dice "icons"...

si sigues mi código y no te funciona, algo estás haciendo mal... la verdad no tiene tanta ciencia.
Mira, te lo muestro ya funcionando.

[jakijem]

ok, eso es justo lo que necesitaba, ahora lo entiendo perfectamente, y si lo ejecuto en un html nuevo vacio funciona muy bien. Te agradezco mucho la ayuda que me estas prestando,

Sin embargo, cuando lo inserto en la web que debe ir, los iconos aparecen pero no cambian. Asi que si, algo estoy haciendo mal.

[URL="http://jsfiddle.net/jakijem/kdbaqorz/"]http://jsfiddle.net/jakijem/kdbaqorz/[/URL]

de todas formas, en jsfiddle si que funciona... ¿?

además, ¿porque la palabra CONTACTS y los iconos aparecen en dos lineas distintas, si los he metido en el mismo <p> ?

[webosiris]

ok, eso es justo lo que necesitaba, ahora lo entiendo perfectamente

menos mal

Sin embargo, cuando lo inserto en la web que debe ir, los iconos aparecen pero no cambian. Asi que si, algo estoy haciendo mal.

habría que ver la web, quizás te esté heredando estilos de otros lados.

además, ¿porque la palabra CONTACTS y los iconos aparecen en dos lineas distintas, si los he metido en el mismo <p> ?

no se puede meter un UL dentro de un P, eso es mal html. Te actualicé el jsfiddle para que quedara bien.

[jakijem]

Iniciado por webosiris

habría que ver la web, quizás te esté heredando estilos de otros lados.

Pues lo he repasado a conciencia, pero no encuentro nada. Sin embargo, me hace una cosa curiosa, al verlo en pantalla completa en firefox (F11) si que funciona bien el rollover, e identifica los iconos como enlaces. Sin embargo al verlo en vista "normal" de navegador, ni los iconos aparecen como enlaces, ni cambian...

cosa más rara, no?

Iniciado por webosiris

no se puede meter un UL dentro de un P, eso es mal html. Te actualicé el jsfiddle para que quedara bien.

¿como puedo ver los cambios que has hecho en el jsfiddle? (en el mio no aparecen)

[webosiris]

Pues lo he repasado a conciencia, pero no encuentro nada. Sin embargo, me hace una cosa curiosa, al verlo en pantalla completa en firefox (F11) si que funciona bien el rollover, e identifica los iconos como enlaces. Sin embargo al verlo en vista "normal" de navegador, ni los iconos aparecen como enlaces, ni cambian...

eso me suena a que tenés algún problema con los z-index, alguna capa se te esta posicionando encima de los botones . Prueba sacando el position aboslute que tienes puesto o usando un z-index alto.

¿como puedo ver los cambios que has hecho en el jsfiddle? (en el mio no aparecen)

http://jsfiddle.net/kdbaqorz/2/

[jakijem]

Iniciado por webosiris

eso me suena a que tenés algún problema con los z-index, alguna capa se te esta posicionando encima de los botones . Prueba sacando el position aboslute que tienes puesto o usando un z-index alto.

Efectivamente, debia de ser eso, porque ayer probe a ponerle un z-index:30 y se ha solucionado,

Iniciado por webosiris

[url]http://jsfiddle.net/kdbaqorz/2/[/url]

Muchas gracias, ahora ha quedado perfecto, no sabia que se podia dar propiedades a una <ul>, independientemente de las <li> y tampoco todavia no entiendo muy bien como funciona y cuando utilizar inline o inline-block.