barra de navegacion elegante

[pabje]

Hola a todos

Requiero su ayuda para crear una barra de navegacion en css elegante.
Estas barras se crean con imagenes o graficos en png que son partes de la barra.
Lo que no sé es que partes de la barra debo crear con un editor de graficos, y el codigo que debo utilizar en CSS para crearlo.
Un vez encontré un tutorial pero muy superficial fue la explicación.
Me pueden ayudar como crear estas barras o un tutorial que explique bien como hacerlo.

Gracias.

[babri]

yo el que he hecho, lo tengo en HTML5 y está englobado dentro de esta etiqueta:

Código HTML:

<nav>
        <!-- Listado de Navegación -->
        <ul class="menu">  
            <li><a href="#">Home</a></li>  
            <li><a href="#">Quienes Somos</a></li>  
            <li><a href="#">Que Hacemos</a></li>
            <li><a href="#">Clientes</a></li>
            <li><a href="#">Club Coolaboro</a></li> 
        </ul>    
</nav>
 

La etiqueta nav indica que es la barra de navegación y luego en un archivo CSS le tengo puesto esto:

Código CSS:

nav {
position : absolute;
left : 0;
width : 100%;
background : url(../imagenes/nav_background.png);
}
nav ul {
margin : 0 auto;
width : 940px;
list-style : none;
}
nav ul li {
float : left;
}
nav ul li a {
display : block;
margin-right : 20px;
width : 140px;
font-size : 14px;
line-height : 44px;
text-align : center;
text-decoration : none;
color : #ccc;
}
nav ul li a:hover {
color : #fff;
}
nav ul li.selected a {
color : #fff;
}
 

Y este es el resultado:



La imagen que he usado para la nav (nav_background) es esta:




PD: la barra ocupa el 100% de la página siempre y le da un estilo muy chulo =P

[pabje]

Hola

Gracias por la respuesta , pero me podias mostrar el codigo para la clase menú que tu colocas en la lista ul.

Gracias.

[babri]

Iniciado por pabje

Hola

Gracias por la respuesta , pero me podias mostrar el codigo para la clase menú que tu colocas en la lista ul.

Gracias.

le he puesto clase pero en realidad no la uso, tiro de la etiqueta nav que es HTML5 :D

[ArturoGallegos]

has probado ese menú en versiones viejas de IE como la 7 y 8?

dado que es una etiqueta html 5 dentro de IE7 y 8 no funcionan tus estilos

no deberías colgarte aun de las etiquetas HTML 5 para crear los estilos o conoces algún truco para que funcione el css para dichas etiquetas en ie?

[babri]

Iniciado por Ag666

has probado ese menú en versiones viejas de IE como la 7 y 8?

dado que es una etiqueta html 5 dentro de IE7 y 8 no funcionan tus estilos

no deberías colgarte aun de las etiquetas HTML 5 para crear los estilos o conoces algún truco para que funcione el css para dichas etiquetas en ie?

lo conozco :DDD

en concreto esto:

Código Javascript:

<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
 

lo ha hecho un hombre para todas las versiones de IE :D

[artenfusta]

ummmm, interesante.

[ArturoGallegos]

Iniciado por babri

lo conozco :DDD

en concreto esto:

Código Javascript:

<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
 

lo ha hecho un hombre para todas las versiones de IE :D

muy buen punto por un momento me olvide de estos scripts, aunque ciertamente no son muy de mi agrado y trato de no utilizarlos...

pero igual gracias estoy seguro que al compañero @pabje le sera de mucha utilidad

[pabje]

Hola

Gracias por las respuestas. Y como dice Ag666, a mi tampoco no me funciono el código de css ni con Internet explorer 8 ni con firefox 4.
Voy a probar con el codigo en Java script. Gracias a Todos.

[babri]

Iniciado por pabje

Hola

Gracias por las respuestas. Y como dice Ag666, a mi tampoco no me funciono el código de css ni con Internet explorer 8 ni con firefox 4.
Voy a probar con el codigo en Java script. Gracias a Todos.

a mi en firefox4 si me tira :D en IE con el script si me funciona ^^

[pabje]

Hola

He probado con el codigo en java sript , igual no me salen los estilos ni en firefox 4 ni en internet exporer 8.
No se cual pueda ser el problema. Tal vez si se hace en una version anterior a HTML5.
Nuevamente pido su ayuda.

[babri]

Código HTML:

<div class="nav">
<!-- Listado de Navegación -->
        <ul class="menu">  
            <li><a href="#">Home</a></li>  
            <li><a href="#">Quienes Somos</a></li>  
            <li><a href="#">Que Hacemos</a></li>
            <li><a href="#">Clientes</a></li>
            <li><a href="#">Club Coolaboro</a></li> 
        </ul></div>
 

Código CSS:

body .nav {
position : absolute;
left : 0;
width : 100%;
background : url(../imagenes/nav_background.png);
}
body .nav ul {
margin : 0 auto;
width : 940px;
list-style : none;
}
body .nav ul li {
float : left;
}
body .nav ul li a {
display : block;
margin-right : 20px;
width : 140px;
font-size : 14px;
line-height : 44px;
text-align : center;
text-decoration : none;
color : #ccc;
}
body .nav ul li a:hover {
color : #fff;
}
body .nav ul li.selected a {
color : #fff;
}