Hacer que un link se quede de un color mientras se visita
Hola a todos!
Estoy haciendo mi proyecto de primer módulo de HTML/CSS y tengo algunos problemillas.
Espero que alguien me pueda echar un cable. La entrega es el viernes y estoy que me subo por las paredes!!!
Muchas gracias de anticipado por vuestra atención.
1. Los estados de los links. ¿Cómo puedo hacer para que se queden de otro color mientras los estas visitando?
Lo he podido hacer con los botones, pero no me sale cuando no es un botón. Simplemente un link.
Adjunto el trozo de html/css:
<div id="submenu">
<div><a href="mas.html">presentación</a> <a href="mas_imagenes.html">imagenes</a> <a href="mas_carac.html">características</a> <a href="mas_acti.html">actividades</a> <a href="mas_tarifas.html">tarifas</a> </div>
#submenu a {
color: #660000;
padding-right: 15px;
text-decoration: none;
border-right-width: thin;
border-right-style: solid;
border-right-color: #660000;
padding-left: 10px;
}
#submenu a:hover {
color: #666666;
text-decoration: none;
}
2. Cuando hago que el logotipo, que es una imagen, actue como link a la "home" me desborda todos los demás divs que estan por debajo y además me sale un borde morado. Le pongo border=0px;" y nada, ni caso.
Adjunto el trozo de html/css:
<div id="logo"><a href="presentacion.html" style="border:0px;"><img src="imagenes/logo-planella.png"/></a></div>
#logo {
float: left;
width: 300px;
height:112px;
border:0px;
text-decoration: none;
}
Muchas gracias a todos...
demssite
Habría que ver que reseteo de CSS tienes aplicado y todo para aclararse un poco, es decir, si enlazases a todo lo que explicas sería más cómodo, pero bueno intentaremos aclarar algo:
Krang
Prueba a poner:
#logo a{border: 0px
}
Krang
Para esta parte yo utilizaría una clase, por ejemplo actual, a la que le dise los estilos que quisiera y que utilizases para la página dónde estés en ese momento. Por ejemplo:
<a href="mas.html" class="actual">presentación</a>tutututt Profesor Plus
No bastaría con cambiar a:hover por a:visited?
demssite
Stereoplastika
Pero eso lo que haría sería marcarte los enlaces visitados, no marcarte el sitio donde estás actualmente si no me equivoco, es decir si el color de los links de tu site es verde y el estado visited lo pones rojo una vez q los visites todos estarán todos en rojo, y yo por lo que he entendido lo que quiere es que dependiendo en la sección que estés esa sección sea la que se marque de una amnera especial (igual me equivoco).
Un saludo.
Krang
Muchas gracias demmssite!
He seguido tus instrucciones y lo del logotipo/imagen no le podido solucionar, se ve la linea y además se mueven un poco los divs por debajo.
#logo a{border: 0px
}
Lo del submenú ha cambiado de color sustituyendo "a:hover por a:visited", como comenta Stereoplastika. MUchisimas gracias a ti también.
Lo único es que ahora se me quedan del color visitado. Para que vuelva al color normal? He probado con a:link y nada.
#submenu a:visited {
color: #666666;
text-decoration: none;
}
#submenu a:link{
color: #666666;
text-decoration: none;
}
MUCHISIMAS GRACIAS por las respuestas!!!!!
demssite
Krang, usando el a:visited como bien indiqué antes no te va a volver nunca al color inicial, esto es, cuando clicas un enlace lo que hace el a:visited marca como que ya has clickado(visitado ese enlace y lo deja así marcado a no ser que borres el historial del browser) es decir si lo que quieres es hacer que te marque la seccion del menú en la que estás en cada momento y luego vuelva a otro estado deberás seguir un método como el que te indiqué o algo parecido.
Usuario desconocido
Krang, por favor, utiliza la etiqueta CODE cuando insertes código en los posts. Gracias.
Krang
MUCHAS GRACIAS demssite!!! tienes razón con el a:visited
Lo de la "clase" no me funciona, pero voy a intentarlo de nuevo con la calma.
Y lo del logo también voy a repetirlo. No sé por dónde tiene el fallo.
Siento lo de la etiqueta CODE Wences, es la primera vez que introduzco código.
ponchi
Yo para estos casos utilizo una clase y me funciona. Revisa el código porque seguro que tienes algo mal
andrewman
Se suele recomendar para anular los estilos que se aplican por defecto por el navegador establecer unas reglas de reset, que eliminan los margenes, padding, bordes, colores y otros propiedades. De esta forma partes de una base más neutra, sobre la que vas definiendo los tuyos.
Por ejemplo, si prefieres que en un principio todas tus imagenes no tengan borde, lo estableces en el reset.css y luego si una imagen en particular deseas que sí lo tenga, defines un estilo para ello. Por ejemplo:
img {border:none;
}
#logo img{
border:1px solid #ccc;
}
En el caso de la imagen del logo, estás definiendo que el div logo no tenga borde, no que la imagen dentro de #logo no la tenga.
Sobre los estilos de los links, es muy importante que los establezcas en un orden determinado ya que el último estilo definido, es el que predominará. Para definirlos, hazlo en el orden link, visited, hover y active. (LoVe;HAte). Dado que no estás aplicando un reset, es necesario que definas todos los estados, sino tomarán los que vienen por defecto en el navegador.
#submenu a:link, #submenu a:visited{color: #660000;
}
#submenu a:hover, #submenu a:active{
color: #666666;
}
tutututt Profesor Plus
Llevas razón demsite. Me adelanté yo con lo del
a:visiteddemssite
KRANG si no te sale, pon un ejemplo colgado, que será más sencilo que podamos echarte un cable.
Un saludo.
Krang
Hola a todos!!!
Al final lo he podido solucionar.
Gracias Andrewman! entre toda la información he mirado y remirado mi HTML/CSS y efectivamente tenía cosas mal.
1.En los submenús, que son los links que no me cambiavan de color, tenía tal lío montado que no me aclaraba. Al final he seguido intruccuiones de Adrewman, poner los estados en orden y al final poner una clase:"current".
2. En el logo, bueno, espero que no me mateis, pero también ha sido una barbaridad. Tenías razón, pero mi aplcación era incorrecta. Ponía "border=0px", en la imagen i no en el DIV...
Quería agradeceros a todos la ayuda. Hace poquito que programo y además me cuesta, pero encontrar este foro ha sido lo mejor!
GRACIAS!!!!
segoviamiranda
Krang, ¿Me podrías enseñar el código html y css que empleaste en el menú? Tengo el mismo problema.
mrwiimo
Llegué tarde, solo espero que sea mejor tarde que nunca, pero acá tienes como hacerlo.
https://www.youtube.com/watch?v=wRdhqa4hfGA