Probleme avec des liens images
lilouetfredo
Messages postés
53
Statut
Membre
-
lilouetfredo Messages postés 53 Statut Membre -
lilouetfredo Messages postés 53 Statut Membre -
Bonjour,
Voila, j'ai un petit soucis avec mes liens pour un site, ce sont des liens images que j'ai ajoutés , voici un screen :
https://www.imagup.com
en cliquant sur le lien il y a des petits pointillés absolument moches, et je voudrais les enlever, donc la partie de gauche c'est du a :
a img
{
border: none;
margin-left : 20px;
}
en enlevant margin-left : 20 px; je supprime la partie pointillé de gauche, comme ceci :
http://moe.mabul.org/up/moe/2010/06/17/img-1207045i6fd.png.html
le soucis est qu'en enlevant cela, les boutons se collent et remontent tous en haut du site, et que ca ne convient pas et que les pointillés restent encore sous le bouton.
comment enlever ces pointillés, tout en plaçant comme il faut les boutons sur le site ? pouvez vous m'aider s'il vous plait?
En vous remerciant par avance.
Voila, j'ai un petit soucis avec mes liens pour un site, ce sont des liens images que j'ai ajoutés , voici un screen :
https://www.imagup.com
en cliquant sur le lien il y a des petits pointillés absolument moches, et je voudrais les enlever, donc la partie de gauche c'est du a :
a img
{
border: none;
margin-left : 20px;
}
en enlevant margin-left : 20 px; je supprime la partie pointillé de gauche, comme ceci :
http://moe.mabul.org/up/moe/2010/06/17/img-1207045i6fd.png.html
le soucis est qu'en enlevant cela, les boutons se collent et remontent tous en haut du site, et que ca ne convient pas et que les pointillés restent encore sous le bouton.
comment enlever ces pointillés, tout en plaçant comme il faut les boutons sur le site ? pouvez vous m'aider s'il vous plait?
En vous remerciant par avance.
A voir également:
- Probleme avec des liens images
- Partager des photos avec un lien - Guide
- Des images - Guide
- Vérificateur de liens - Guide
- Telecharger liens direct - Accueil - Outils
- Extraire images pdf - Guide
17 réponses
L'affichage de ces pointillés est tout à fait normal.
Ils permettent principalement à se repérer lorsqu'on navigue au clavier.
Je te conseil de les laisser, mais si tu veux les masquer, il faudra utiliser « outline: none; »
Ils permettent principalement à se repérer lorsqu'on navigue au clavier.
Je te conseil de les laisser, mais si tu veux les masquer, il faudra utiliser « outline: none; »
d'accord merci, mais a la limite oui les masquer serait bien car honnetement je ne trouve pas cela tres professionnel. je vais essayer ce que tu as mis mais je le met ou exactement? :-)
un autre point :
pour mes liens, ce sont des images, je voudrais aussi avoir des images sur les liens au passage de la souris et une autre image sur les liens cliqué, hors je n'arrive pas a les insérer, j'ai mis a:link , a:visited, a:hover et a:active. dans a:active par exemple je mets :
mais ca ne fonctionne pas. comment dois je faire pour avoir des images différentes a chaque action du bouton, s'il vous plait?
mon html :
un autre point :
pour mes liens, ce sont des images, je voudrais aussi avoir des images sur les liens au passage de la souris et une autre image sur les liens cliqué, hors je n'arrive pas a les insérer, j'ai mis a:link , a:visited, a:hover et a:active. dans a:active par exemple je mets :
element_menu:link, element_menu:visited /*lien visité - lien non visité*/
{
text-decoration: none;
}
element_menu:hover /*lien survolé*/
{
}
element_menu:active /*lien activé*/
{
background-image: url("images/ ... .png");
}
.element_menu
{
margin-left: 20px;
margin-top: 150px;
float: left;
}
mais ca ne fonctionne pas. comment dois je faire pour avoir des images différentes a chaque action du bouton, s'il vous plait?
mon html :
<div id="menu">
<!-- Ici on mettra le menu -->
<div class="element_menu">
<a href="http://... .free.fr"><img src="images/... .png" alt="bouton" /></a>
</div>
</div>
Ce n'est pas le div qui doit changer mais le lien.
Donc c'est ".element_menu a:hover" et pas ".element_menu:hover"
Donc c'est ".element_menu a:hover" et pas ".element_menu:hover"
wouaa super ^^ tout fonctionne j'ai mis outline: none; egalement et ca fonctionne c'est top !
Merci beaucoup, je n'ai plus qu'a regler la position de l'image lien survolé, car c'est en décalage. Et dire que c'etait juste une lettre, il en faut peu c'est dingue :).
Merci beaucoup avion-f16.
Merci beaucoup, je n'ai plus qu'a regler la position de l'image lien survolé, car c'est en décalage. Et dire que c'etait juste une lettre, il en faut peu c'est dingue :).
Merci beaucoup avion-f16.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Encore un soucis avec ces boutons, voici mes boutons actuellement :
https://www.casimages.com/i/100617040036638176.png.html
ils sont donc a la vertical, mais je les voudrais a l'horizontal. Comment puis je modifier cela, s'il vous plait.
En vous remerciant par avance.
https://www.casimages.com/i/100617040036638176.png.html
ils sont donc a la vertical, mais je les voudrais a l'horizontal. Comment puis je modifier cela, s'il vous plait.
En vous remerciant par avance.
le soucis c'est que je n'ai pas de "li", mes liens sont des images :
voici mon code html :
et le CSS:
voici mon code html :
<body> <div id="en_tete"> <!-- Ici on mettra la bannière --> </div> <div id="menu"> <!-- Ici on mettra le menu --> <div class="element_menu"> <div class="element_flash"> <a href="http://... .free.fr"><img src="images/boutonflash.png" alt="bouton flash" /></a> </div> <div class="element_web"> <a href="http://... .free.fr"><img src="images/boutonweb.png" alt="bouton web" /></a> </div> <div class="element_travaux"> <a href="http://... .free.fr"><img src="images/boutontravaux.png" alt="bouton travaux" /></a> </div> <div class="element_multimedia3d"> <a href="http://... .free.fr"><img src="images/boutonmultimedia3d.png" alt="bouton multimedia3d" /></a> </div> <div class="element_refcv"> <a href="http://... .free.fr"><img src="images/boutonrefcv.png" alt="bouton refcv" /></a> </div> <div class="element_contact"> <a href="http://... .free.fr"><img src="images/boutoncontact.png" alt="bouton contact" /></a> </div> </div> </div> <div id="corps"> <!-- Ici on mettra le contenu principal de la page (tout le texte quoi) --> </div> <div id="pied_de_page"> <!-- Enfin, on mettra en bas de la page le nom de l'auteur, un copyright... --> </div> </body>
et le CSS:
body
{
width: 1000px;
height: 1000px;
margin: auto; /* Pour centrer la page */
background-color: #303030; /* Couleur de fond du site */
background-image: url("images/fond_blanc.png");
background-repeat: no-repeat;
background-position: center;
}
/* Le menu */
.element_menu
{
border: none;
margin-top: 120px;
margin-left: 30px;
}
a img
{
border: none;
}
/* Le lien bouton Flash*/
.element_flash a:link, .element_flash a:visited
{
text-decoration: none;
outline: none;
margin-left: 5px;
}
.element_flash a:hover
{
background-image: url("images/boutonweb.png");
background-repeat: no-repeat;
}
.element_flash a:active
{
}
/*Le lien bouton Web*/
.element_web a:link, .element_web a:visited
{
text-decoration: none;
outline: none;
margin-left: 5px;
}
.element_web a:hover
{
background-image: url("images/boutonweb.png");
background-repeat: no-repeat;
}
.element_web a:active
{
}
/*Le lien bouton Travaux*/
.element_travaux a:link, .element_travaux a:visited
{
text-decoration: none;
outline: none;
margin-left: 5px;
}
.element_travaux a:hover
{
background-image: url("images/boutontravaux.png");
background-repeat: no-repeat;
}
.element_travaux a:active
{
}
/*Le bouton Multimédia 3D*/
.element_multimedia3d a:link, .element_multimedia3d a:visited
{
text-decoration: none;
outline: none;
margin-left: 5px;
}
.element_multimedia3d a:hover
{
background-image: url("images/boutonmultimedia3d.png");
background-repeat: no-repeat;
}
.element_multimedia3d a:active
{
}
/*Le bouton ref cv*/
.element_refcv a:link, .element_refcv a:visited
{
text-decoration: none;
outline: none;
margin-left: 5px;
}
.element_refcv a:hover
{
background-image: url("images/boutonrefcv.png");
background-repeat: no-repeat;
}
.element_refcv a:active
{
}
/*Le bouton contact*/
.element_contact a:link, .element_contact a:visited
{
text-decoration: none;
outline: none;
margin-left: 5px;
}
.element_contact a:hover
{
background-image: url("images/boutoncontact.png");
background-repeat: no-repeat;
}
.element_contact a:active
{
}
excuse moi par mon ignorance mais je ne vois pas ce que tu veux me dire :s par les div. Dois je le mettre dans le html ou le CSS? j'ai essayer de le mettre dans le
mais ca me laisse toujours le menu a la vertical mais cette fois ci sur la droite.
.element_menu
{
float: right;
}
mais ca me laisse toujours le menu a la vertical mais cette fois ci sur la droite.
.element_flash, .element_web, .element_travaux, .element_multimedia3d, .element_refcv, .element_contact {
float:left;
}
Ton ordinateur ne fait pas ce que tu veux ... mais ce que tu lui dis de faire.
oki ^^ super ca fonctionne je te remercie beaucoup. Tu es vraiment tres doué :)
excuse moi vraiment pour t'avoir dérangé autant de fois :p .
excuse moi vraiment pour t'avoir dérangé autant de fois :p .
une derniere petite question si c'est possible :p
pour remplacer mon image lien par une autre image lien au survol de la souris, comment dois je faire? j'ai lu qu'il fallait utiliser z-index:
ou peut etre onmouseover
je souhaiterais plutot que ca se fasse dans le CSS plutot que de surcharger le html :)
le soucis actuel c'est que mon image de survol se trouve en dessous de l'image fixe et décalé :s
merci d'avance :)
pour remplacer mon image lien par une autre image lien au survol de la souris, comment dois je faire? j'ai lu qu'il fallait utiliser z-index:
ou peut etre onmouseover
je souhaiterais plutot que ca se fasse dans le CSS plutot que de surcharger le html :)
le soucis actuel c'est que mon image de survol se trouve en dessous de l'image fixe et décalé :s
merci d'avance :)
Avec la balise <img />, il faudra utiliser onmouseover et onmouseout.
Tes boutons ressemblent à du texte au-dessus d'un fond simple, pourquoi ne pas se passer des images ? Tu pourrais facilement changer la couleur de fond et celle du texte en CSS.
Tes boutons ressemblent à du texte au-dessus d'un fond simple, pourquoi ne pas se passer des images ? Tu pourrais facilement changer la couleur de fond et celle du texte en CSS.
j'ai trouver sur le net la façon "barbare" (surcharger le HTML) avec cette façon :
<img src="image1.png" name="image" onmouseover="image.src='image2.png'" onmouseout="image.src='image1.png'" onmousedown="image.src='image3.png'" />
image1 : normale
image2 : sulvolée
image3 : enfoncée
en fait ca donne ca
ca fonctionne en tout cas, mais j'aurais préféré mettre ca dans le CSS.
l'image première est simple en effet, mais la deuxième (au survol souris) commence a devenir un peu plus détaillé et pareil pour l'image cliqué.
le soucis c'est que si j'enlève l'image simple et la remplacer par un fond derrière un lien, je risque de ne pas retrouver les même position avec la deuxième image qui sera plus compliqué et ou là, il est obligé d'avoir une image. Je sais pas si tu vois ce que je veux dire :)
<img src="image1.png" name="image" onmouseover="image.src='image2.png'" onmouseout="image.src='image1.png'" onmousedown="image.src='image3.png'" />
image1 : normale
image2 : sulvolée
image3 : enfoncée
en fait ca donne ca
<div class="element_flash"> <a href="http://blabla.free.fr"><img src="images/boutonflash.png" alt="bouton flash" onmouseover="src='images/boutonflashsurvol.png'" onmouseout="src='images/boutonflash.png'" onmousedown="src='images/boutonflashappuis.png' /></a> </div>
ca fonctionne en tout cas, mais j'aurais préféré mettre ca dans le CSS.
l'image première est simple en effet, mais la deuxième (au survol souris) commence a devenir un peu plus détaillé et pareil pour l'image cliqué.
le soucis c'est que si j'enlève l'image simple et la remplacer par un fond derrière un lien, je risque de ne pas retrouver les même position avec la deuxième image qui sera plus compliqué et ou là, il est obligé d'avoir une image. Je sais pas si tu vois ce que je veux dire :)
