Foros del Web » Creando para Internet » CSS »

Imagen distinta según página activa

Estas en el tema de Imagen distinta según página activa en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 31/08/2009, 16:15
 
Fecha de Ingreso: febrero-2008
Mensajes: 124
Antigüedad: 9 años, 9 meses
Puntos: 0
Imagen distinta según página activa

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
  #2 (permalink)  
Antiguo 31/08/2009, 18:13
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: Imagen distinta según página activa

fijate si esto te sirve ejemplo
__________________
WFC
codigo82
  #3 (permalink)  
Antiguo 01/09/2009, 04:19
 
Fecha de Ingreso: febrero-2008
Mensajes: 124
Antigüedad: 9 años, 9 meses
Puntos: 0
Respuesta: Imagen distinta según página activa

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
  #4 (permalink)  
Antiguo 01/09/2009, 04:36
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: Imagen distinta según página activa

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.
__________________
No diseñes usando tablas.
  #5 (permalink)  
Antiguo 01/09/2009, 13:10
 
Fecha de Ingreso: febrero-2008
Mensajes: 124
Antigüedad: 9 años, 9 meses
Puntos: 0
Respuesta: Imagen distinta según página activa

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);
}
  #6 (permalink)  
Antiguo 02/09/2009, 03:11
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: Imagen distinta según página activa

en un principio si, pero si vas a hacer un menú, es mejor hacerlo con listas.
__________________
No diseñes usando tablas.
  #7 (permalink)  
Antiguo 02/09/2009, 03:25
 
Fecha de Ingreso: febrero-2008
Mensajes: 124
Antigüedad: 9 años, 9 meses
Puntos: 0
Respuesta: Imagen distinta según página activa

Mil gracias hades87.
Te importaría echar un vistazo aquí: "areadeservicioloschopos.com/paprobar/" y decirme algo.
Saludos
  #8 (permalink)  
Antiguo 02/09/2009, 05:11
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: Imagen distinta según página activa

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
__________________
No diseñes usando tablas.
  #9 (permalink)  
Antiguo 02/09/2009, 05:39
 
Fecha de Ingreso: febrero-2008
Mensajes: 124
Antigüedad: 9 años, 9 meses
Puntos: 0
Respuesta: Imagen distinta según página activa

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
  #10 (permalink)  
Antiguo 02/09/2009, 15:35
Avatar de latindesign  
Fecha de Ingreso: agosto-2009
Ubicación: Lima
Mensajes: 11
Antigüedad: 8 años, 3 meses
Puntos: 0
Respuesta: Imagen distinta según página activa

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
  #11 (permalink)  
Antiguo 07/09/2009, 13:13
 
Fecha de Ingreso: febrero-2008
Mensajes: 124
Antigüedad: 9 años, 9 meses
Puntos: 0
Respuesta: Imagen distinta según página activa

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;
}
  #12 (permalink)  
Antiguo 07/09/2009, 17:19
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 8 años, 8 meses
Puntos: 101
Respuesta: Imagen distinta según página activa

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>
  #13 (permalink)  
Antiguo 08/09/2009, 05:42
 
Fecha de Ingreso: febrero-2008
Mensajes: 124
Antigüedad: 9 años, 9 meses
Puntos: 0
Respuesta: Imagen distinta según página activa

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
  #14 (permalink)  
Antiguo 08/09/2009, 08:57
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: Imagen distinta según página activa

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

Código html:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  4. <title>Documento sin t&iacute;tulo</title>
  5. <style type="text/css">
  6. body{font-family:Verdana, Arial, Helvetica, sans-serif;}
  7. #menu{
  8.     width:513px;
  9.     height:73px;
  10.     border:1px solid #CCC;
  11.     background:#069;
  12.     margin:0 auto;
  13. }
  14.  
  15. #menu ul{list-style:none; margin:0; padding:0; background:#FFF; width:400px; height:73px; margin:0 0 0 20px}
  16. #menu ul li{float:left}
  17. #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;}
  18. #menu a span{display:block; padding:44px 0 0 0;}
  19. #menu a:hover{color:#666; text-decoration:none; background:url(bola2.jpg) no-repeat center top;}
  20. #menu a.current{color:#666; text-decoration:none; background:url(bola2.jpg) no-repeat center top;}
  21. </head>
  22.  
  23. <div id="menu">
  24.     <ul>
  25.         <li><a href="#"><span>E. de Servicio</span></a></li>
  26.         <li><a href="#"><span>Tienda</span></a></li>
  27.         <li><a href="#"><span>Cafeteria</span></a></li>
  28.         <li><a href="#" class="current"><span>Restaurant</span></a></li>
  29.         <li><a href="#"><span>Hotel</span></a></li>
  30.     </ul>
  31. </div>
  32. </body>
  33. </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.
__________________
WFC
codigo82
  #15 (permalink)  
Antiguo 09/09/2009, 02:29
 
Fecha de Ingreso: febrero-2008
Mensajes: 124
Antigüedad: 9 años, 9 meses
Puntos: 0
Respuesta: Imagen distinta según página activa

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
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 12:44.