Imagen distinta según página activa

[vencecanguelos]

Hola mundo!

Estoy programando una web sencilla ya que soy novato en css. Tiene un menú con 6 imágenes (para seis secciones) con fondo distinto que varían cuando pasas el ratón, fondo verde o gris. Y lo que quiero es que cuando estés en una de las páginas, su botón correspondiente del menú se encuentre con fondo gris para diferenciarlo del resto con fondo verde ¿hay algo programado para que varíe según qué página esté activa?

Saludos y gracias

[willyfc]

fijate si esto te sirve ejemplo

[vencecanguelos]

Muchísimas gracias Willyfc.
El ejemplo que propone jomaruro está genial pero soy tan novato que no se cómo aplicarlo al menú de esta web: "areadeservicioloschopos.com/paprobar/" (falta mucho por hacer en ella).
Gracias y saludos

[hades87]

es como te comenta willyfc, a cada item del menú le has de poner la clase activa por ejemplo y de esa forma se verá distinto. A esa clase le pones el fondo que quieras :)

Esto quizás te ayude.

[vencecanguelos]

Gracias de nuevo¡¡

Está bien si lo hago así?

- En html lo programo así:
<div id="eservicio"><a href="#" class="entrar""current"/></a></div>

- En css lo programo así:
a.entrar {
display:block;
height: 73px;
width: 65px;
float: left;
background-image: url(images/contactov.jpg);
border:0;
}

a.entrar:hover {
display:block;
height: 73px;
width: 65px;
float: left;
background-image: url(images/contactog.jpg);
border:0;
}

#eservicio a.current{
display:block;
background-image: url(images/eserviciog.jpg);
}

[hades87]

en un principio si, pero si vas a hacer un menú, es mejor hacerlo con listas.

[vencecanguelos]

Mil gracias hades87.
Te importaría echar un vistazo aquí: "areadeservicioloschopos.com/paprobar/" y decirme algo.
Saludos

[hades87]

No entiendo muy bien por que al div le pones un id con fondo y al link una clase, cuando todo se simplifica mucho mas si lo haces de la forma en la que te pasé el link, haciendo una lista y solo cambiando el background dependiendo de si esta o no encima el raton

[vencecanguelos]

Uff, pues porque soy diseñador y estoy intentando programar algo a base de ejemplos y vuestra ayuda.

Vaya! entonces ese menú es mejor cambiarlo. Si entiendo bien, en el div tengo que crear una lista para los seis iconos del menú y también, para que se vea que es la página activa, utilizar un a.current para que el link se mantenga activo?

Gracias

[latindesign]

en realidad no hay ninguna forma unica o estricta a la que tengas que hacer, puedes hacer como mejor te paresca pero en realidad la manera que te dicen te va ayudar mucho ademas es mucho mas sencillo implementerla

<ul id="navegacion">
<li><a href="#">Enlace I</a></li>
<li><a href="#">Enlace II</a></li>
<li><a href="#">Enlace III</a></li>
<li><a href="#">Enlace IV</a></li>
</ul>

CSS

ul {
list-style:none; /* Esto les quita los bullets no se en espanol como se llama */
}

ul li {
display:inline;
}

ul li a {
display:block; /* lo converit en bloque para dar anchos y alto */
width:100px;
height:100px;
float:left; /* Lo flotamos a la izquierda */
background:url(images/logo.png) no-repeat; /* Un fondo por ejemplo el icono*/
margin:0px 3px; /* Puedes dar margen*/
}

el ul lo puedes posicionar donde sea dando margin-left o si esta dentro de un div con position :absolute

[vencecanguelos]

Hola de nuevo,
Comento lo que hice y no funciona, creo que le falta poco pero necesito vuesta ayuda:

He creado un menú con dos iconos, una clase "entrar" para que cambie de imagen de fondo cuando pases el ratón por encima y una clase "current" para que se mantenga activo cuando sea esa la página activa, la class current funciona pero la hover no, me podéis echar una mano:

- HTML:
<div id="menu">
<ul>
<li><a href="#" id="eservicio" class="entrar"><span>eservicio</span></a></li>
<li><a href="#" id="tienda" class="current2"><span>tienda</span></a></li>
</ul>
</div>

- CSS:
#menu{
width:513px;
height:73px;
border:1px solid #CCC;
background:#069;
overflow:hidden;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
#menu ul{
width:513px;
list-style:none;
height: 73px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
position: absolute;
}
#menu ul li{
float:left;
height: 73px;
width: 65px;
}
#menu a{
font-size:0.8em;
font-weight:bold;
color:#FFF;
text-decoration:none;
display:block;
height: 73px;
width: 65px;
}
#menu a.current{
display:block;
background-image: url(eserviciog.jpg);
}

a.entrar {
display:block;
height: 73px;
width: 65px;
float: left;
background-image: url(eserviciov.jpg);
border:0;
}

a.entrar:hover {
display:block;
height: 73px;
width: 65px;
float: left;
background-image: url(eserviciog.jpg);
border:0;
}

[mayid]

Si tenes la pagina online, pasala por : http://validator.w3.org/

(siempre que tu documento tenga cabecera xhtml)

Ahi te dice si la web esta bien construida. Lo digo por mis dudas sobre poner un span dentro de un <a>

[vencecanguelos]

Gracias Mayid, no conocía esa web.

El resultado es "Passed" "This document was successfully checked as XHTML 1.0 Transitional!"

Si queréis echar un vistazo a: ("tres uves dobles") areadeservicioloschopos.com/paprobar2

He colgado un menú de seis iconos, la "class current" funciona pero el "hover" no. Es lo único que tengo pendiente para, a partir de esta plantilla" programar el resto de secciones.

Gracias

[willyfc]

A ver este ejemplo, solo revisa la ruta a las imágenes y ajusta las medidas a tu diseño:

Código html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
body{font-family:Verdana, Arial, Helvetica, sans-serif;}
#menu{
    width:513px;
    height:73px;
    border:1px solid #CCC;
    background:#069;
    margin:0 auto;
}
 
#menu ul{list-style:none; margin:0; padding:0; background:#FFF; width:400px; height:73px; margin:0 0 0 20px}
#menu ul li{float:left}
#menu a{ width:80px; background:url(bola.jpg) center top no-repeat; height:73px; color:#060; text-decoration:none; font-size:0.7em; text-align:center; display:block; margin:8px 0 0 0;}
#menu a span{display:block; padding:44px 0 0 0;}
#menu a:hover{color:#666; text-decoration:none; background:url(bola2.jpg) no-repeat center top;}
#menu a.current{color:#666; text-decoration:none; background:url(bola2.jpg) no-repeat center top;}
</style>
</head>
 
<body>
<div id="menu">
    <ul>
        <li><a href="#"><span>E. de Servicio</span></a></li>
        <li><a href="#"><span>Tienda</span></a></li>
        <li><a href="#"><span>Cafeteria</span></a></li>
        <li><a href="#" class="current"><span>Restaurant</span></a></li>
        <li><a href="#"><span>Hotel</span></a></li>
    </ul>
</div>
</body>
</html>
 

Valga decir que solo estoy utilizando 2 imágenes, una verde y una gris, lo demás es texto que cambia al pasar el ratón.

[vencecanguelos]

Muchísimas gracias willyfc, por fin lo he conseguido, y también a todos!!

La única pega está en el texto del menú, lo reduje para posicionarlo dentro de un div de 390px y ahora lo muestra demasiado reducido y con Times, creo que hice algo mal.
¿Podéis decirme algo? está aquí (tres uves dobles)areadeservicioloschopos.com/paprobar/

Gracias de nuevo y saludos