Problema con Menu-Navbar CSS

lazhen · #1 (**permalink**) 06/08/2011, 21:17

Bueno gente seguí un comentario de este foro que mostraba un menu en CSS con efecto rollover sin serlo, es decir que nunca se reemplaza la imagen, simplemente por medio de coordenadas se alinea el hover.. etc.

El problema es que a la hora de agregarlo a la navbar de mi foro se ve así :

creo que ahí que agregar un estilo css acerca de las propiedades UL y LI pero no sea cual sea y tampoco estoy seguro de que sea eso..

Yo en mi for lo agregué así :

Plantilla de estilos :

Código HTML:

#foro{left:129px;width:95px;}
#foro{background:url('http://www.imagengratis.org/images/forocss.png') -95px 0;}
#foro a:hover{background: url('http://www.imagengratis.org/images/forocss.png') -95px -93px;}

Y en la plantilla navbar así :

<ul id="navlist">
<li id="foro"><a href="default.asp"></a></li>

</ul>

si me pueden ayudar se los agradecería mucho.

Este es el codigo completo de donde lo saque

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:44px;display:block;}

#home{left:0px;width:46px;}
#home{background:url('img_navsprites_hover.gif') 0 0;}
#home a:hover{background: url('img_navsprites_hover.gif') 0 -45px;}

#prev{left:63px;width:43px;}
#prev{background:url('img_navsprites_hover.gif') -47px 0;}
#prev a:hover{background: url('img_navsprites_hover.gif') -47px -45px;}

#next{left:129px;width:43px;}
#next{background:url('img_navsprites_hover.gif') -91px 0;}
#next a:hover{background: url('img_navsprites_hover.gif') -91px -45px;}
</style>
</head>

<body>
<ul id="navlist">
<li id="home"><a href="default.asp"></a></li>
<li id="prev"><a href="css_intro.asp"></a></li>
<li id="next"><a href="css_syntax.asp"></a></li>
</ul>
</body>
</html>

Desde ya, muchas gracias por su ayuda (:

IsaBelM · #2 (**permalink**) 07/08/2011, 08:16

lee este articulo

lazhen · #3 (**permalink**) 07/08/2011, 12:41

En ese articulo explica como dinamizar la carga de imágenes en el sitio web por medio de CSS y 1 sola imagen, lo que yo quiero es un navbar con botones como dije en el post pero mi problema es que no se como sacar la propiedad de lista para que queden en forma consecutiva uno arlado del otro, no se si me explico

es decir, yo quiero poner no se.. 5 botones con 1 fondo y que al pasar el mouse por arriba de cada 1 la imagen cambie por otro, un hover, un menu simple.

IsaBelM · #4 (**permalink**) 07/08/2011, 14:55

entonces, tu problema es crear un menú usando listas??

lazhen · #5 (**permalink**) 07/08/2011, 16:01

Si básicamente lo que necesito es crear un Navbar utilizando listas.. y asi lograr el intercambio de imagenes sin carga, oseo como una especie de rollover.

lo que si, en esa página que me pasaste dice el css y el html a agregar pero no entiendo como aplicar un boton off y 1 con hover a cada boton en particular, me explico ?

EDIT :

Algo asi :

Yo quiero que estos botones :

, etc.

Con este fondo :

Y al pasar por arriba de cada uno se esos botones cambie con un sprite,rollover lo que sea que no tenga delay o tiempo de carga y si es posible que este centrado..

nada mas que eso, no es muy avanzando es bastante simple pero es un tema que lo tengo aca en la cabeza hace tiempo y nunca lo logre hacer ):

Batan · #6 (**permalink**) 08/08/2011, 00:51

Esto es mucho más facil.
Slider
http://www.kabytes.com/programacion/...re-css-sprite/

Rollover
http://www.emezeta.com/articulos/cre...#axzz1UPwR2hqr

Saludos.

lazhen · #7 (**permalink**) 08/08/2011, 18:48

Grácias por contestar a los 2 pero lamentablemente no pude solucionarlo, quise crear un menu usando listas pero no logro acomodarlo para que quede con fondo..

Osea yo quiero hacer el menu usando listas como ya saben pero tambien quiero que se establesca un fondo y no se como hacerlo y no me sale.., siempre queda la lista asi normal en ves de alinearse uno arlado del otro

Batan · #8 (**permalink**) 09/08/2011, 02:51

No te entiendo yo creo que tu problema como dices esta en la alineacion de las listas

Pues puedes alinear los LI a la izquierda con float: left,

Código CSS:

Ver originalul{
background: url(imagen.png);
}
 
ul li{
float: left;
background: url(imagen2.png);
}

Saludos

lazhen · #9 (**permalink**) 09/08/2011, 16:01

conseguí en este mismo foro un código parecido y gracias a esa propiedad ul li que comentaste batan pude hacer que se alineen en forma de menú, muchas gracias, encerio gracias, este tema lo tenia en la cabeza hace bastante jaja y se agilizo la carga de imágenes en mi web (:

resultado :)

Una ves mas gracias! y acá les dejo el código por si a alguien le interesa..

CSS :

Código PHP:

  #menu ul li{
float: left;
}

#lateral ul{list-style:none; list-style-type:none; margin:0px; padding:0px;}
#lateral li{padding:0px;}
.menua{width:125px; height:31px; margin:auto; margin-bottom:8px; overflow:hidden; text-indent:-5000px;}
.menua a{width:125px; height:62px; display:block; border:0;}
.menuf{width:95px; height:31px; margin:auto; margin-bottom:8px; overflow:hidden; text-indent:-5000px;}
.menuf a{width:95px; height:62px; display:block; border:0;}

/*Botones*/

#menu-foro{background:url(IMAGEN ON);}
#menu-foro a{background:url(IMAGEN OFF);}
#menu-foro a:hover{background:none;}
#menu-panel{background:url(IMAGEN ON);}
#menu-panel a{background:url(IMAGEN OFF);}
#menu-panel a:hover{background:none;}

agregar mas para mas opciones de boton :)

Html :

Código PHP:

  <div id="menu">
<div id="lateral">
<ul>
<li class="menuf" id="menu-foro" ><a href="nosotros.php" title="Foro" accesskey="2">Reglas</a></li>
<li class="menup" id="menu-panel" ><a href="nosotros.php" title="Panel" accesskey="2">Reglas</a></li>
</ul>
 </div>
</div>