Logo GNT
Actualités Tests & Guides Bons Plans
GTA 6 iPhone 17 Copilot Switch 2 Temu ChatGPT Tesla
OVH Cloud OVH Cloud
Entraide Développement Développement Langage PHP Mettre un lien sur un div

Mettre un lien sur un div

40 réponses
Avatar
Photo
Bonjour,

Je souhaiterais pouvoir mettre un lien sur un div de façon à ce que l'on
puisse cliquer directement sur le div et non sur les liens internes
comme ici :

http://www.grenault.net/mob_index1.htm

Pouvoir cliquer sur les espaces colorés...

Merci pour votre aide.
Signaler un problème avec ce contenu

10 réponses

Supprimer
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire

Veuillez sélectionner un problème

Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
1 2 3 4
Avatar
SAM
Le 13/02/15 12:29, SAM a écrit :
Le 13/02/15 08:28, Photo a écrit :

J'ai fait ça aussi : http://www.grenault.net/mob_liens4.htm





Proposition de CSS :
Sans line-height et avec hauteurs polices réglée en relatif



avec image de flèche (ne fonctionne pas sous IE<10)

<style>
a {
display: block;
margin-top: 6px;
background:
url(data:image/gif;base64,R0lGODlhKQAaAPMAMf///+7u7t3d3czMzLu7u6qqqpmZmYiIiHd3d2ZmZlVVVURERDMzMyIiIhEREQAAACH5BAEAAAIALAAAAAApABoAAASFUJxWhL04683teU9jdGSpfSA4miyHpuDRztcLx3RLMPeNDDkTQdGD/YKlAaKYSgCRncHBwXwoCFBSgcdcYLOcYdUL5iiZjXLU0GOoO+yb+405F9N0gbj7VRcWVVd0BlRMgmpSVQ9ObwQJioxqe0xHdDY+T3mXOHkYlzKdGS+goRlsK6UZEQA7)
no-repeat right center rgb(224, 224, 224);
font-family: Helvetica,Arial,Roboto,sans-serif;
text-decoration: none;
font-weight: 100;
font-size: 1.2em;
color: #E06000;
}
.bloc {
padding: 0.2em 0px 0.3em 0.7em;
}
.bloc2 {
float: right;
margin-right: 12px;
font-size: 2.2em;
color: #000;
display: none;
}
</style>

<!--[if lt IE 10]
<style>
.bloc2 { display: block }
</style>
<![endif]-->

Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Avatar
Photo
Le 15/02/2015 15:07, SAM a écrit :
Le 13/02/15 12:29, SAM a écrit :
Le 13/02/15 08:28, Photo a écrit :

J'ai fait ça aussi : http://www.grenault.net/mob_liens4.htm





Proposition de CSS :
Sans line-height et avec hauteurs polices réglée en relatif



avec image de flèche (ne fonctionne pas sous IE<10)

<style>
a {
display: block;
margin-top: 6px;
background:
url(data:image/gif;base64,R0lGODlhKQAaAPMAMf///+7u7t3d3czMzLu7u6qqqpmZmYiIiHd3d2ZmZlVVVURERDMzMyIiIhEREQAAACH5BAEAAAIALAAAAAApABoAAASFUJxWhL04683teU9jdGSpfSA4miyHpuDRztcLx3RLMPeNDDkTQdGD/YKlAaKYSgCRncHBwXwoCFBSgcdcYLOcYdUL5iiZjXLU0GOoO+yb+405F9N0gbj7VRcWVVd0BlRMgmpSVQ9ObwQJioxqe0xHdDY+T3mXOHkYlzKdGS+goRlsK6UZEQA7)
no-repeat right center rgb(224, 224, 224);
font-family: Helvetica,Arial,Roboto,sans-serif;
text-decoration: none;
font-weight: 100;
font-size: 1.2em;
color: #E06000;
}
.bloc {
padding: 0.2em 0px 0.3em 0.7em;
}
.bloc2 {
float: right;
margin-right: 12px;
font-size: 2.2em;
color: #000;
display: none;
}
</style>

<!--[if lt IE 10]
<style>
.bloc2 { display: block }
</style>
<![endif]-->

Cordialement,



J'ai hâte d'essayer ça !

Mais avant, comment puis-je installer l'image sur mon site ? Le lien :

url(data:image/gif;base64,....

Me semble bien compliqué et où est l'image pour que je puisse
l'installer sur mon site ?

Merci Sam !!

--
http://grenault.net/accueil.htm
Avatar
SAM
Le 15/02/15 19:47, Photo a écrit :

Mais avant, comment puis-je installer l'image sur mon site ? Le lien :

url(data:image/gif;base64,....

Me semble bien compliqué et où est l'image pour que je puisse



c'EST l'image dans son entier !!!

il n'y a pas à la chercher ailleurs, elle est là, un gif transparent

ce code tarabiscoté est le fichier image mouliné en base 64

data: = fichier
image/gif; = type de fichier
base64, = code d'encodage
sqgfggvourov,oprbnoncbv-)§è blabla sur 10 m ou 15 km = l'image



Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Avatar
SAM
Le 15/02/15 20:22, SAM a écrit :

ce code tarabiscoté est le fichier image mouliné en base 64



Ha! Oui! Précision :

background: url( et tout ce qu(il y a ici ) no-repeat right center #ddd;

doit être sur *une seule ligne* !!!




Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Avatar
Photo
Le 15/02/2015 20:25, SAM a écrit :
Le 15/02/15 20:22, SAM a écrit :

ce code tarabiscoté est le fichier image mouliné en base 64



Ha! Oui! Précision :

background: url( et tout ce qu(il y a ici ) no-repeat right center #ddd;

doit être sur *une seule ligne* !!!




Cordialement,



OK, j'ai compris, c'est l'image en mode texte.

Je mettrai ton code en ligne dès demain matin.

Au fait, il y a des royalties, des copyrights ?

Merci Sam !

--
http://grenault.net/accueil.htm
Avatar
SAM
Le 15/02/15 20:55, Photo a écrit :

Je mettrai ton code en ligne dès demain matin.



faudrait tt de même l'avoir essayé ?

la flèche n'est peut-être pas celle que tu espères.

Maintenant avec ton expérience de la photo tu dois arriver à te
débrouiller pour la refaire.



Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Avatar
Photo
On 15/02/2015 21:58, SAM wrote:
Le 15/02/15 20:55, Photo a écrit :

Je mettrai ton code en ligne dès demain matin.



faudrait tt de même l'avoir essayé ?

la flèche n'est peut-être pas celle que tu espères.

Maintenant avec ton expérience de la photo tu dois arriver à te
débrouiller pour la refaire.



Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8



Je l'ai teste mais sur le web seulement.

Je te tiens au courant.

http://grenault.net/accueil.htm
Avatar
Photo
Le 15/02/2015 21:58, SAM a écrit :
Le 15/02/15 20:55, Photo a écrit :

Je mettrai ton code en ligne dès demain matin.



faudrait tt de même l'avoir essayé ?

la flèche n'est peut-être pas celle que tu espères.

Maintenant avec ton expérience de la photo tu dois arriver à te
débrouiller pour la refaire.



Cordialement,



Bonjour,

Voilà, le site est en ligne avec ton code intégral.

C'est impeccable ! Merci !!!

L'image était la meilleure solution.

Bon, tu ne m'as pas dit pour les royalties...

--
http://grenault.net/mob_liens.htm
Avatar
SAM
Le 16/02/15 11:37, Photo a écrit :

Voilà, le site est en ligne avec ton code intégral.

C'est impeccable ! Merci !!!

L'image était la meilleure solution.




Tiens, un complément pour s'amuser :

a:hover {
color: #e0a060;
background-position: 95% center;
}



Le site IE-render ne veut pas me montrer ce que ça donne avec IE6 ou 7
... :-(


Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Avatar
Photo
Le 17/02/2015 18:14, SAM a écrit :
Le 16/02/15 11:37, Photo a écrit :

Voilà, le site est en ligne avec ton code intégral.

C'est impeccable ! Merci !!!

L'image était la meilleure solution.




Tiens, un complément pour s'amuser :

a:hover {
color: #e0a060;
background-position: 95% center;
}



Le site IE-render ne veut pas me montrer ce que ça donne avec IE6 ou 7
... :-(


Cordialement,



Désolé, je n'ai plus que le 11... J'essaierai ça pour voir.

--
http://grenault.net/accueil.htm
1 2 3 4