Logo GNT
Actualités Tests & Guides Bons Plans
Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11
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
Photo
Le 12/02/2015 20:01, SAM a écrit :
Le 11/02/15 22:53, Photo a écrit :

Je me suis sans doute mal exprimé.

http://grenault.net/accueil.htm



voilà ce que ça donne sur un iPhone 3G
<http://cjoint.com/?EBmuheASIZs>

Adieu les effets de dégradés !

Je suppose que c'est le bandeau du haut qui empêche les boutons de
s'étaler sur toute la largeur ?


un bon point (?) l'arrivée sur l'accueil du site propose immédiatement
de passer à la version "mobile"



Cordialement,



Merci pour l'image écran.

Non, c'est moi qui ai limité la largeur, mais peut être ai-je tort ?

J'ai bien les dégradés sur le Galaxy S4 sous Android. C'est peut être un
problème de mise à jour ?

Merci pour ton aide.

--
http://grenault.net/accueil.htm
Avatar
SAM
Le 12/02/15 22:10, Photo a écrit :
Le 12/02/2015 20:01, SAM a écrit :
Le 11/02/15 22:53, Photo a écrit :

http://grenault.net/accueil.htm



voilà ce que ça donne sur un iPhone 3G
<http://cjoint.com/?EBmuheASIZs>

Adieu les effets de dégradés !



J'ai bien les dégradés sur le Galaxy S4 sous Android. C'est peut être un
problème de mise à jour ?



L'iPhone en question a la plus récente mise à jour qui lui est possible.
Ce n'est pas un phone "très" récent.
Mais comme il semble increvable ...

Penser à mettre une couleur de fond un poil moins pâle ?

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

http://grenault.net/accueil.htm



voilà ce que ça donne sur un iPhone 3G
<http://cjoint.com/?EBmuheASIZs>

Adieu les effets de dégradés !



J'ai bien les dégradés sur le Galaxy S4 sous Android. C'est peut être un
problème de mise à jour ?



L'iPhone en question a la plus récente mise à jour qui lui est possible.
Ce n'est pas un phone "très" récent.
Mais comme il semble increvable ...

Penser à mettre une couleur de fond un poil moins pâle ?

Cordialement,



Le fond de toute la page ou assombrir le fond des rubriques colorées ?

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

Mais j'ai du mal à centrer les flèches de droite... Là, c'est à peu près
bon avec le Galaxy S4 mais pas sur le Web et avec un I-phone ?

Je vais essayer avec vertical-align mais j'ai toujours du mal avec...

Merci pour tes conseils.

--
http://grenault.net/accueil.htm
Avatar
SAM
Le 13/02/15 08:28, Photo a écrit :
Le 13/02/2015 01:22, SAM a écrit :

Penser à mettre une couleur de fond un poil moins pâle ?



Le fond de toute la page ou assombrir le fond des rubriques colorées ?



Oui, le A

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



C'est encore un peu alambiqué et pas organisé trop logiquement, mébon
(pourquoi un bord blanc à une partie du contenu du A ?)
(au lieu d'une simple marge pour ce A)

.texte
est défini à la ligne 75 (rien de tout ça ou presque ne sert)
puis redéfini/corrigé à la ligne 83

il suffit de :
.texte { color: #000; font-size: 28px; }
le reste est déjà dit pour tout le A à la ligne 37

Mais j'ai du mal à centrer les flèches de droite... Là, c'est à peu près
bon avec le Galaxy S4 mais pas sur le Web et avec un I-phone ?



si c'est à peu prés c'est que ce n'est pas bon, c'est du bricolage qui
ne respecte pas la méthode "au plus simple" (genre, tiens pour coller au
"design" hop! ajout de marges inutiles)

.bloc2 {
float: right;
color: #000;
font-size: 50px;
margin: 0px; /* facultatif, n'est là que parce qu'il y était */
margin-right: 12px;
line-height: 90px; /* ligne de même hauteur que bloc contenant */
}

Ça reste du bricolage car la line-height est fixée relativement à une
hauteur de bloc qui peut fluctuer (suivant la police qui sera affichée).
Ça marche chez moi et avec mon Fx mais ... marchera-ce ailleurs ? (tant
ordi que navigateur)

Je vais essayer avec vertical-align mais j'ai toujours du mal avec...



vertical-align c'est pour les images en HTML et sinon pour éléments de
type "en ligne" en CSS (c a d : img, A, span, ...)
Là le truc est flottant et perd son mode en ligne (sorte de bloc)
Même en passant les blocs contenus dans le A en inline-bloc ça n'agit pas.

Je doute que ce soit une bonne idée de fixer les font en px.

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

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



C'est encore un peu alambiqué et pas organisé trop logiquement,



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

a {
display: block;
margin-top: 6px;
background: none repeat scroll 0% 0% rgb(224, 224, 224);
font-family: "Trebuchet MS",Arial,Helvetica,Verdana,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;
}


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

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



C'est encore un peu alambiqué et pas organisé trop logiquement,



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

a {
display: block;
margin-top: 6px;
background: none repeat scroll 0% 0% rgb(224, 224, 224);
font-family: "Trebuchet MS",Arial,Helvetica,Verdana,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;
}


Cordialement,



Bonjour,

Merci SAM pour ton aide. Je garde précieusement ce code.

J'avais essayé autre chose juste avant ton post en utilisant les EM au
lieu des PX. Curieusement, là, l'alignement est parfait aussi bien pour
le WEB que pour le Galaxy S4.

Le seul problème c'est que la taille d'affichage est diminuée en
vertical sur le Galaxy alors que c'est tout bon en horizontal et pour le
WEB ?

Je me demande ce qui cause ce problème : la largeur des lignes, peut
être ? Cela me prend la tête les versions pour mobile...

Bonne soirée.

--
http://grenault.net/mob_liens2.htm
Avatar
Photo
Le 13/02/2015 12:29, SAM a écrit :
Le 13/02/15 11:48, SAM a écrit :
Le 13/02/15 08:28, Photo a écrit :

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



C'est encore un peu alambiqué et pas organisé trop logiquement,



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

a {
display: block;
margin-top: 6px;
background: none repeat scroll 0% 0% rgb(224, 224, 224);
font-family: "Trebuchet MS",Arial,Helvetica,Verdana,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;
}


Cordialement,



Merci SAM.

Je viens pirater tes CSS, telles qu'elles sont et je les mises ici :

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

On constate tout de suite que les > de droite ne sont pas centrés mais
en haut en affichage vertical et plus bas en affichage horizontal, sur
le S4...

Là je ne sais plus quoi faire ?
Avatar
SAM
Le 14/02/15 12:28, Photo a écrit :

Je viens pirater tes CSS, telles qu'elles sont et je les mises ici :

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

On constate tout de suite que les > de droite ne sont pas centrés mais
en haut en affichage vertical et plus bas en affichage horizontal, sur
le S4...



c'est impec sur mon vieil iPhone !!

je ne sais ce qu'a ton S4 (je regarderai sur celui de ma fille un de ces 4)

Là je ne sais plus quoi faire ?



L'idéal est de faire une image de cette fleche et de la mettre en background

background: url(fleche.png) no-repeat right center #ddd;

et là, même si elle est une peu trop grande ou petite elle restera bien
au milieu de la verticale (rognée en hauteur si trop grande)



Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Avatar
SAM
Le 14/02/15 20:00, SAM a écrit :
Le 14/02/15 12:28, Photo a écrit :
http://www.grenault.net/mob_liens4.htm



je ne sais ce qu'a ton S4 (je regarderai sur celui de ma fille un de ces 4)



Ha! oui, tiens ?? curious

Voici capture pour iPhone 3G : <http://cjoint.com/?EBouDFyq2Bl>




Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Avatar
Photo
Le 14/02/2015 20:21, SAM a écrit :
Le 14/02/15 20:00, SAM a écrit :
Le 14/02/15 12:28, Photo a écrit :
http://www.grenault.net/mob_liens4.htm



je ne sais ce qu'a ton S4 (je regarderai sur celui de ma fille un de
ces 4)



Ha! oui, tiens ?? curious

Voici capture pour iPhone 3G : <http://cjoint.com/?EBouDFyq2Bl>




Cordialement,



Cela semble à peu près correct ? Léger décalage...

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