Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: ccrunch en 30 Junio 2014, 21:23 pm



Título: Resaltar enlace al estar dentro de él
Publicado por: ccrunch en 30 Junio 2014, 21:23 pm
Buenas a todos, tengo una pequeña duda con php.
Tengo esto:
Código
  1. <header id="header">
  2. <h1><a href="#" id="logo">Menú principal</a></h1>
  3. <nav id="nav">
  4.  <a href="index.html" class="current-page-item">Inicio</a>
  5.  <a href="acerca_de_mi.html">Acerca de mí</a>
  6.  <a href="curriculum_vitae.html">currículum vitae</a>
  7.  <a href="proyectos_personales.html">proyectos personales</a>
  8.  <a href="contacto.html">contacto</a>                                
  9. </nav>
  10. </header>

Quiero que cuando esté dentro de por ejemplo Inicio, ese enlace (que en realidad parece un botón) se sombree, por ejemplo, que se note en qué parte de la web estoy. O que haga cualquier cosa pero que se note que estoy ahí, y por supuesto cuando cambie de sección por ejemplo a Contacto, deje de estar sobreado inicio y se sombree contacto.

Salu2!


Título: Re: Resaltar enlace al estar dentro de él
Publicado por: MinusFour en 30 Junio 2014, 21:52 pm
Pues, como estoy viendo tus links puedes simplemente modificar el CSS de tus archivos para que en cada html se vean diferentes.


Título: Re: Resaltar enlace al estar dentro de él
Publicado por: ccrunch en 30 Junio 2014, 22:09 pm
Pues, como estoy viendo tus links puedes simplemente modificar el CSS de tus archivos para que en cada html se vean diferentes.
Sí, pero la pregunta es qué propiedades del CSS es y cómo se hace, en el css estoy un poco verde.

Salu2!


Título: Re: Resaltar enlace al estar dentro de él
Publicado por: #!drvy en 30 Junio 2014, 22:22 pm
Citar
Buenas a todos, tengo una pequeña duda con php.
emmmm ¿ php ?

Simplemente a cada pagina ve cambiando el class a current-page-item y listo...
http://www.w3schools.com/cssref/css3_pr_text-shadow.asp

No tiene ninguna complicación -_-

Saludos


Título: Re: Resaltar enlace al estar dentro de él
Publicado por: MinusFour en 30 Junio 2014, 22:25 pm
Pues depende de que efecto quieras lograr. Se me ocurre negritas y cambiar de color:

Código
  1. .current-page-item {
  2. font-weight: bold;
  3. color: #FF0000;
  4. }


Título: Re: Resaltar enlace al estar dentro de él
Publicado por: ccrunch en 30 Junio 2014, 22:36 pm
Me he equivocado no es php es css jajaja.

Y bueno, en cuanto pruebo pruebo lo vuestro.

La duda que tenía yo era si ".current-page-item" era algo predefinido de html que se va cambiando en función del lugar donde te encuentras o hay que ponerlo a mano (que no tiene sentido).

Pruebo eso y os digo.


Título: Re: Resaltar enlace al estar dentro de él
Publicado por: #!drvy en 30 Junio 2014, 22:39 pm
Citar
La duda que tenía yo era si ".current-page-item" era algo predefinido de html que se va cambiando en función del lugar donde te encuentras o hay que ponerlo a mano (que no tiene sentido).

Hay que ponerlo a mano. No hay ningún método automático que te resalte eso. Lo puedes hacer con javascript...

Saludos


Título: Re: Resaltar enlace al estar dentro de él
Publicado por: MinusFour en 1 Julio 2014, 01:36 am
Me he equivocado no es php es css jajaja.

Y bueno, en cuanto pruebo pruebo lo vuestro.

La duda que tenía yo era si ".current-page-item" era algo predefinido de html que se va cambiando en función del lugar donde te encuentras o hay que ponerlo a mano (que no tiene sentido).

Pruebo eso y os digo.

.current-page-item es una clase de CSS. Básicamente le dice al navegador como se deben ver las etiquetas pertinentes a esa clase.

Lo que necesitas hacer es modificar los menus de cada una de tus paginas así:

index.html
Código
  1. <nav id="nav">
  2.  <a href="index.html" class="current-page-item">Inicio</a>
  3.  <a href="acerca_de_mi.html">Acerca de mí</a>
  4.  <a href="curriculum_vitae.html">currículum vitae</a>
  5.  <a href="proyectos_personales.html">proyectos personales</a>
  6.  <a href="contacto.html">contacto</a>                                
  7. </nav>

acerca_de_mi.html
Código
  1. <nav id="nav">
  2.  <a href="index.html">Inicio</a>
  3.  <a href="acerca_de_mi.html" class="current-page-item">Acerca de mí</a>
  4.  <a href="curriculum_vitae.html">currículum vitae</a>
  5.  <a href="proyectos_personales.html">proyectos personales</a>
  6.  <a href="contacto.html">contacto</a>                                
  7. </nav>

curriculum_vitae.html
Código
  1. <nav id="nav">
  2.  <a href="index.html">Inicio</a>
  3.  <a href="acerca_de_mi.html">Acerca de mí</a>
  4.  <a href="curriculum_vitae.html" class="current-page-item">currículum vitae</a>
  5.  <a href="proyectos_personales.html">proyectos personales</a>
  6.  <a href="contacto.html">contacto</a>                                
  7. </nav>

Y así te vas...


Título: Re: Resaltar enlace al estar dentro de él
Publicado por: ccrunch en 1 Julio 2014, 17:56 pm
Gracias MinusFour, era justamente eso lo que quería pero no se me ocurría como hacerlo porque en html no soy gran experto y hay cosas que por muy fáciles que sean no se me ocurren cómo hacerlas.

Salu2 y gracias!.