Foros del Web » Creando para Internet » CSS »

Problema con Menu-Navbar CSS

Estas en el tema de Problema con Menu-Navbar CSS en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 06/08/2011, 21:17
 
Fecha de Ingreso: agosto-2011
Mensajes: 24
Antigüedad: 5 años, 11 meses
Puntos: 0
Pregunta Problema con Menu-Navbar CSS

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 (:

Última edición por lazhen; 07/08/2011 a las 01:16
  #2 (permalink)  
Antiguo 07/08/2011, 08:16
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 9 años, 1 mes
Puntos: 1010
Respuesta: Problema con Menu-Navbar CSS

lee este articulo
  #3 (permalink)  
Antiguo 07/08/2011, 12:41
 
Fecha de Ingreso: agosto-2011
Mensajes: 24
Antigüedad: 5 años, 11 meses
Puntos: 0
Respuesta: Problema con Menu-Navbar CSS

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.

Última edición por lazhen; 07/08/2011 a las 12:59
  #4 (permalink)  
Antiguo 07/08/2011, 14:55
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 9 años, 1 mes
Puntos: 1010
Respuesta: Problema con Menu-Navbar CSS

entonces, tu problema es crear un menú usando listas??
  #5 (permalink)  
Antiguo 07/08/2011, 16:01
 
Fecha de Ingreso: agosto-2011
Mensajes: 24
Antigüedad: 5 años, 11 meses
Puntos: 0
Respuesta: Problema con Menu-Navbar CSS

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 ):

Última edición por lazhen; 07/08/2011 a las 17:44
  #6 (permalink)  
Antiguo 08/08/2011, 00:51
Avatar de Batan  
Fecha de Ingreso: septiembre-2010
Ubicación: Madrid
Mensajes: 408
Antigüedad: 6 años, 10 meses
Puntos: 63
Respuesta: Problema con Menu-Navbar CSS

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

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

Saludos.
  #7 (permalink)  
Antiguo 08/08/2011, 18:48
 
Fecha de Ingreso: agosto-2011
Mensajes: 24
Antigüedad: 5 años, 11 meses
Puntos: 0
Respuesta: Problema con Menu-Navbar CSS

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

Última edición por lazhen; 08/08/2011 a las 21:32
  #8 (permalink)  
Antiguo 09/08/2011, 02:51
Avatar de Batan  
Fecha de Ingreso: septiembre-2010
Ubicación: Madrid
Mensajes: 408
Antigüedad: 6 años, 10 meses
Puntos: 63
Respuesta: Problema con Menu-Navbar CSS

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 original
  1. ul{
  2. background: url(imagen.png);
  3. }
  4.  
  5. ul li{
  6. float: left;
  7. background: url(imagen2.png);
  8. }

Saludos
  #9 (permalink)  
Antiguo 09/08/2011, 16:01
 
Fecha de Ingreso: agosto-2011
Mensajes: 24
Antigüedad: 5 años, 11 meses
Puntos: 0
Respuesta: Problema con Menu-Navbar CSS

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{
floatleft;
}

#lateral ul{list-style:none; list-style-type:none; margin:0px; padding:0px;}
#lateral li{padding:0px;}
.menua{width:125pxheight:31pxmargin:automargin-bottom:8pxoverflow:hiddentext-indent:-5000px;}
.
menua a{width:125pxheight:62pxdisplay:blockborder:0;}
.
menuf{width:95pxheight:31pxmargin:automargin-bottom:8pxoverflow:hiddentext-indent:-5000px;}
.
menuf a{width:95pxheight:62pxdisplay:blockborder: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

Etiquetas: ancho, funcionamiento, html, tamaño, fondo
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 10:33.