Resaltar enlace al estar dentro de él

Iniciado por ccrunch, 30 Junio 2014, 21:23 PM

0 Miembros y 1 Visitante están viendo este tema.

ccrunch

Buenas a todos, tengo una pequeña duda con php.
Tengo esto:
Código (html4strict) [Seleccionar]
<header id="header">
<h1><a href="#" id="logo">Menú principal</a></h1>
<nav id="nav">
  <a href="index.html" class="current-page-item">Inicio</a>
  <a href="acerca_de_mi.html">Acerca de mí</a>
  <a href="curriculum_vitae.html">currículum vitae</a>
  <a href="proyectos_personales.html">proyectos personales</a>
  <a href="contacto.html">contacto</a>                               
</nav>
</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!

MinusFour

Pues, como estoy viendo tus links puedes simplemente modificar el CSS de tus archivos para que en cada html se vean diferentes.

ccrunch

Cita de: 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.
Sí, pero la pregunta es qué propiedades del CSS es y cómo se hace, en el css estoy un poco verde.

Salu2!

#!drvy

CitarBuenas 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

MinusFour

Pues depende de que efecto quieras lograr. Se me ocurre negritas y cambiar de color:

Código (css) [Seleccionar]

.current-page-item {
font-weight: bold;
color: #FF0000;
}

ccrunch

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.

#!drvy

CitarLa 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

MinusFour

Cita de: 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.

.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 (html4strict) [Seleccionar]
<nav id="nav">
  <a href="index.html" class="current-page-item">Inicio</a>
  <a href="acerca_de_mi.html">Acerca de mí</a>
  <a href="curriculum_vitae.html">currículum vitae</a>
  <a href="proyectos_personales.html">proyectos personales</a>
  <a href="contacto.html">contacto</a>                               
</nav>


acerca_de_mi.html
Código (html4strict) [Seleccionar]
<nav id="nav">
  <a href="index.html">Inicio</a>
  <a href="acerca_de_mi.html" class="current-page-item">Acerca de mí</a>
  <a href="curriculum_vitae.html">currículum vitae</a>
  <a href="proyectos_personales.html">proyectos personales</a>
  <a href="contacto.html">contacto</a>                               
</nav>


curriculum_vitae.html
Código (html4strict) [Seleccionar]
<nav id="nav">
  <a href="index.html">Inicio</a>
  <a href="acerca_de_mi.html">Acerca de mí</a>
  <a href="curriculum_vitae.html" class="current-page-item">currículum vitae</a>
  <a href="proyectos_personales.html">proyectos personales</a>
  <a href="contacto.html">contacto</a>                               
</nav>


Y así te vas...

ccrunch

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!.