Mettre un lien sur un div

Le
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.
Vos réponses Page 2 / 4
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
Photo
Le #26338422
Le 10/02/2015 13:25, yamo' a écrit :
Salut,

Photo a écrit le 10/02/2015 13:06 :
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.





Dans .texte mettre :

display: block;


C'est la seule solution que je vois.




Merci. C'est la solution que j'ai utilisée pour l'instant. Cela ne
couvre pas toute la surface du <div> mais c'est déjà mieux !

--
http://mobile.grenault.net
Photo
Le #26338429
Le 10/02/2015 14:06, SAM a écrit :
Le 10/02/15 13:25, yamo' a écrit :
Salut,

Photo a écrit le 10/02/2015 13:06 :
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.





Dans .texte mettre :

display: block;


C'est la seule solution que je vois.



en effet il faut transformer le A en block pour que toute la surface
soit réactive (pour les (vieux ?) IE il faut qu'ils y trouvent le layout
et probablement pour cela indiquer une/deux dimension ou/et un fond)

non, pas seulement pour .texte

vaut mieux :
.bloc-texte a { display: block; width: 100%; }


Pour IE vieux, le haslayout :
voir ce que les css doivent comporter, à minima une des propriétés
référencées

souvent on met :
zoom: 1;
comme ya que les IE qui savent ce que c'est ça ne gène pas les autres


Cordialement,



Non, ".bloc-texte a { display: block; width: 100%; }" ne fonctionne pas.

Je me demande s'il ne faudrait pas utiliser line-height pour couvrir une
plus grande hauteur ?

--
http://mobile.grenault.net
SAM
Le #26338492
Le 10/02/15 18:54, Photo a écrit :

Non, ".bloc-texte a { display: block; width: 100%; }" ne fonctionne pas.

Je me demande s'il ne faudrait pas utiliser line-height pour couvrir une
plus grande hauteur ?



faudrait surtout être moins compliqué alambiqué torturé
tant dans le code html que dans les css qui s'évertuent à le régler !

Ne pas s'étonner qu'on n'arrive pas au bord alors qu'on en est éloigné
par le padding du contenant :-(

corriger .bloc-texte à la ligne 55

.bloc-texte { padding: 0px 0px 0px 0px; text-align: center; }

Puis rajouter à la ligne 62 :

.bloc-texte a { display: block; padding: 4px 0; }

et là on commence à pas mal s'approcher de ce que demandé



Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Pierre Maurette
Le #26338522
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...



(fonctionne, je ne sais pas si c'est conforme, mais mon IDE PhpStorm ne
beugle pas):
Modifier chaque bloc ainsi:

<div class="bloc-liste">
<div class="bloc-texte">
<div class="texte">
rapide et simple à la photo</a>
</div>
</div>
</div>

Ajouter au css (pas sûr que le premier soit nécessaire):

.bloc-liste {
position: relative;
}
.groslien {
position:absolute;
width:100%;
height:100%;
top:0;
left: 0;
z-index: 1;
opacity:0;
/*Il peut être judicieux de couvrir les versions récentes mais pas trop
de IE (7 à 9 ?) par le hack classique sur opacity.*/
}
.petitlien {
position: relative;
z-index: 100;
}

Ceci dit, l'ergonomie risque d'être crispante, l'utilisateur
n'appréciant pas du tout d'ouvrir autre chose que le lien auquel il
s'attend.

--
Pierre Maurette
SAM
Le #26338561
Le 11/02/15 06:17, Pierre Maurette a écrit :
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...



(fonctionne, je ne sais pas si c'est conforme, mais mon IDE PhpStorm ne
beugle pas):
Modifier chaque bloc ainsi:


(snip)
Ceci dit, l'ergonomie risque d'être crispante, l'utilisateur
n'appréciant pas du tout d'ouvrir autre chose que le lien auquel il
s'attend.



En l’occurrence et en l'état actuel il n'y a pas de problème ...
les 2 liens mènent à la même page !
On se demande bien pourquoi il n'y a pas alors qu'un seul lien ? !


Je n'ai pas compris l’intérêt des trucs en absolute et z:100 ...

Même s'il y a un lien enfant de bloc-liste
et un autre qui est petit-enfant (inclus dans un sous div)
il n'y a aucune raison pour qu'ils ne puissent pas se positionner
physiquement à l'écran l'un au dessus de l'autre
(au lieu de l'un par dessus l'autre)

Maintenant si on en est à donner du code html épaulé de css, pour ce
menu, comme pour tout menu, on aurait pu utiliser ce qui est
traditionnel (et assez conforme "accessibilité") le coup des listes
- liste non ordonnée pour les items
(les cadres bleuâtres à coins arrondis)
- liste "définition" pour les A (le principal et les secondaires)

Soit :

<ul id="menu">
<li>
<dl>
</dl>
</li>
<li>
<dl>
</dl>
</li>
<li>
<dl>
</dl>
</li>
</ul><!-- fin 'menu' -->

et ainsi plus besoin de noms de class tarabiscotés

#menu { list-style:none; width: 60%; margin:0 20%; padding: 0;
position: relative; }
#menu li { width:100%; margin: 10px 0; padding:0;
border-radius:10px; background:lightblue; }
#menu dl,
#menu dt,
#menu dd { display: block; margin: 0; padding: 0; }
#menu a { display: block; text-align: center; text-decoration: none;
color: blue; margin: 0; padding: 5px; width: 100%; }
#menu a:hover { text-decoration: underline; color: inherit; }
#menu dd a { color: black }


on remarquera que c'est essentiellement le A qui règle la hauteur
le conteneur principal (menu) réglant largeur et position centrée
les LI réglent leurs espacement les uns des autres (marge basse/haute)
_______________________________________________________________________
À voir en démo ici :


Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Photo
Le #26338601
Bonjour,

Je vous remercie tous pour votre aide.

Le problème est résolu car, en fait, un lien sur un Div est accepté en
HTML5, une excellente initiative !

J'ai donc converti la page en HTML5 et le code se réduit à ceci :

<div class="bloc-liste">
Cours Photo
<div class="texte">Initiation rapide et simple à la photo
</div>
</div>
</a>

Sur le Galaxy S4, cela me semble acceptable mais je ne sais pas sur un
I-phone ?

Bonne journée.

--
http://mobile.grenault.net
SAM
Le #26338625
Le 11/02/15 13:35, Photo a écrit :
Bonjour,

Je vous remercie tous pour votre aide.

Le problème est résolu car, en fait, un lien sur un Div est accepté en
HTML5, une excellente initiative !

J'ai donc converti la page en HTML5 et le code se réduit à ceci :



Je continue à dire :
et pourquoi 2 textes pour un même lien ?

<div class="bloc-liste">
Cours Photo
<div class="texte">Initiation rapide et simple à la photo
</div>
</div>
</a>



Comme ça ne réagit pas du tout comme ce que tu avais précédemment,
si tu aurais dit que c'est ça que tu voulais, j'aurais proposé plus
simplement encore :

<div id="hop">
Cours Photo
<span>Initiation rapide et simple à la photo</span>
</a>
Cours Vidéo
<span>Initiation rapide et simple à la vidéo</span>
</a>
</div>


sans tralala ni de div ni de class

#hop a { display: block; padding: 4px; margin-top: 9px;
text-decoration:none; text-align: center; color: white; background:
gold; width: 60%; margin-left: 20%}
#hop a span { display: block; color: black; }
#hop a:hover { text-decoration: underline }


Sur le Galaxy S4, cela me semble acceptable mais je ne sais pas sur un
I-phone ?



Quel iPhone ? (le 3 en 320/480 ?)
pourquoi ça n'irait pas ?
si ça n'a pas été fixé en largeurs excessives ni hauteurs inutiles



Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
SAM
Le #26338624
Le 11/02/15 15:35, SAM a écrit :

si tu aurais dit que c'est ça que tu voulais, j'aurais proposé plus
simplement encore :



d'autant que ça passait aussi en html.2 !
Bon! avec présentation correcte html.4



Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Photo
Le #26338664
On 11/02/2015 15:37, SAM wrote:
Le 11/02/15 15:35, SAM a écrit :

si tu aurais dit que c'est ça que tu voulais, j'aurais proposé plus
simplement encore :



d'autant que ça passait aussi en html.2 !
Bon! avec présentation correcte html.4



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



Je me suis sans doute mal exprimé.

http://grenault.net/accueil.htm
SAM
Le #26338830
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

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,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Publicité
Poster une réponse
Anonyme