Mettre un lien sur un div

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

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 :
<https://msdn.microsoft.com/en-us/library/ie/ms530764%28v=vs.85%29.aspx>
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

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

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">
<a class='groslien' href="http://www.google.com"></a>
<div class="bloc-texte">
<a class="pages petitlien" href="mob_tech.htm">Cours Photo</a>
<div class="texte">
<a class="texte petitlien" href="mob_tech.htm">Initiation
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

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>
<dt><a href="01/index.htm">menu principal 1</a></dt>
<dd><a href="01/01.htm">sous-menu 1-1</a></dd>
<dd><a href="01/02.htm">sous-menu 1-2</a></dd>
</dl>
</li>
<li>
<dl>
<dt><a href="02/index.htm">menu principal 2</a></dt>
<dd><a href="02/01.htm">sous-menu 2-1</a></dd>
<dd><a href="02/02.htm">sous-menu 2-2</a></dd>
</dl>
</li>
<li>
<dl>
<dt><a href="03/index.htm">menu principal 3</a></dt>
<dd><a href="03/01.htm">sous-menu 3-1</a></dd>
<dd><a href="03/02.htm">sous-menu 3-2</a></dd>
<dd><a href="03/03.htm">sous-menu 3-3</a></dd>
</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 :
<http://stephane.moriaux.pagesperso-orange.fr/truc/menu_tradi>


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

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 :

<a href="mob_tech.htm">
<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

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 ?

<a href="mob_tech.htm">
<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">
<a href="mob_tech.htm">
Cours Photo
<span>Initiation rapide et simple à la photo</span>
</a>
<a href="mob_tech.htm">
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

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

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

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