<a> et ce qu'il y a dedans
Sergio
Bon, "�a marche chez moi" (FF 3.5 et Chrome), mais est-ce l�gal dans un lien de mettre entre le <a> et le </a> tout une <div> avec
des div inbriqu�s dedans ? :
<a href="toto.html"><div>toute une construction...</div></a>
Ma page � question :
http://touchalon.free.fr
--
Serge http://leserged.online.fr/
Mon blog: http://cahierdesergio.free.fr/
Soutenez le libre: http://www.framasoft.org
Olivier Miakinen
>
>> Bon, "ï¿œa marche chez moi" (FF 3.5 et Chrome), mais est-ce lï¿œgal dans un
>> lien de mettre entre le <a> et le </a> tout une <div> avec des div
>>
>> <a href="toto.html"><div>toute une construction...</div></a>
>
> ligne.
En effet.
> http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Ftouchalon.free.fr%2F
>
> par contre tu peux utiliser des balises <span> (en-ligne) dans un ï¿œlï¿œment
> <a> et des rï¿œgles de style display:block;
Une autre possibilitￜ, puisque le but semble ￜtre d'interdire toute
autre action sur une page que le clic pour aller ￜ la page suivante,
ce serait de rajouter par dessus une page complï¿œte un <a>...</a>
remplissant tout l'espace, mais de couleur transparente. Je ne sais
pas exactement comment le dï¿œclarer mais ï¿œa devrait pouvoir se faire,
peut-ï¿œtre en position absolue...
--
Olivier Miakinen
docanski
Sergio ecrit ce qui suit en ce 19/12/2009 11:52 :
> Question :
> Bon, "ï¿œa marche chez moi" (FF 3.5 et Chrome), mais est-ce lï¿œgal dans un
> <a href="toto.html"><div>toute une construction...</div></a>
Non, comme te l'ont dit bruno et Olivier.
Par contre, ceci est possible :
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>lien occupant 100 % d'une page</title>
</head>
<body>
<div id="centre"><h1>ton titre</h1>
<a href="#"
style="width:100%;height:100%;position:absolute;top:0;left:0"> </a>
Tu ï¿œcris ce que tu veux et tu mets ce que tu veux dans le conteneur ...
s'il y en a un.
</div>
</body></html>
Cordialement,
--
docanski
Portail et annuaire du nord-Bretagne : http://armorance.free.fr/
Guide des champignons d'Europe : http://mycorance.free.fr/
La vallï¿œe de la Rance maritime : http://valderance.free.fr/
Les cï¿œtes du nord de la Bretagne : http://docarmor.free.fr/
SAM
la difficultￜ est d'arriver ￜ recouvrir tout le body
La soluce de Dokanski ne recouvrira que le 1er ï¿œcran
(au scroll plus bas ... hop! plus de lien)
--
sm
Olivier Miakinen
>
> la difficultￜ est d'arriver ￜ recouvrir tout le body
Oui, mais voir plus loin...
> La soluce de Dokanski ne recouvrira que le 1er ï¿œcran
> (au scroll plus bas ... hop! plus de lien)
En l'occurrence, l'exemple donnￜ par Sergio n'a pas de gros risques de
dￜpasser un seul ￜcran, et ￜ la limite ce n'est pas trￜs grave : la
personne qui ￜ la fois aurait un ￜcran trop petit, scrollerait jusqu'ￜ
ne voir que ￜ ￜditions Touchalon ￜ, essaierait de cliquer sans succￜs
dessus, et ne penserait pas ￜ revenir en arriￜre pour cliquer sur le
titre ￜ Tirage de tￜte ￜ, aurait ￜtￜ problablement perdue sur la page
suivante... ;-)
Cela dit, je ne vois pas non plus pourquoi ne pas tout remplacer par une
image (sans oublier bien sï¿œr le texte alternatif) :
<a href="site" title="Cliquez pour rentrer"><img
src="img/tirage-de-tete.png" alt="..." /></a>
Tout simplement.
--
Olivier Miakinen
docanski
> la difficultￜ est d'arriver ￜ recouvrir tout le body
> La soluce de Dokanski ne recouvrira que le 1er ï¿œcran
> (au scroll plus bas ... hop! plus de lien)
Il est vrai que les 100 % correspondent ￜ la hauteur de la fenￜtre
affichï¿œe au dï¿œpart par le navigateur.
Une solution empirique consisterait ￜ prￜvoir une page dont le contenu
ne dï¿œpasserait pas une hauteur de 500 pixels, par exemple, moyenne
(empirique, je le rï¿œpï¿œte : 800px x 500 px) des fenï¿œtres affichï¿œes par
les utilisateurs. Seconde solution, tout aussi empirique : styler une
hauteur de 150 ou 200 % p.e., voire davantage, si le contenu est plus
volumineux et en se basant toujours sur cette moyenne. Le plus gros
risque serait d'avoir un espace vide plus ou moins important si le
visiteur affiche des fenï¿œtres de plus grande hauteur. Je ne vois pas
vraiment d'autre solution pouvant respecter la sï¿œmantique des FdS. S'il
y a une solution plus ￜlￜgante, ce petit problￜme excite ma curiositￜ.
docanski
> Cela dit, je ne vois pas non plus pourquoi ne pas tout remplacer par une
> image (sans oublier bien sï¿œr le texte alternatif) :
>
> <a href="site" title="Cliquez pour rentrer"><img
> src="img/tirage-de-tete.png" alt="..." /></a>
>
> Tout simplement.
Au dï¿œpart, je n'avais pas suivi le lien de Sergio, je viens seulement de
le faire et, en effet, vu le contenu de cette page, la solution d'une
image serait la plus simple.
SAM
> Alors que les eleveurs et agriculteurs polluent toujours la Bretagne,
> SAM ecrit ce qui suit en ce 19/12/2009 20:10 :
>
>> la difficultￜ est d'arriver ￜ recouvrir tout le body
>> La soluce de Dokanski ne recouvrira que le 1er ï¿œcran
>> (au scroll plus bas ... hop! plus de lien)
>
> Il est vrai que les 100 % correspondent ￜ la hauteur de la fenￜtre
> affichï¿œe au dï¿œpart par le navigateur.
> S'il
> y a une solution plus ￜlￜgante, ce petit problￜme excite ma curiositￜ.
Moi itou, c'est bien pourquoi le doigt de ma main y a mis le pied.
--
sm
Antoine Polatouche
>> S'il y a une solution plus ï¿œlï¿œgante, ce petit problï¿œme excite ma
>> curiositￜ.
>
> Moi itou, c'est bien pourquoi le doigt de ma main y a mis le pied.
>
<head>
<style type="text/css">
.partout {
display: block;
position:fixed !important;
position:absolute;
bottom:0;
right:0;
top:0;
left:0;
}
</style>
</head>
<body>
<div id="centre"><h1>ton titre</h1></div>
<div>
<a class="partout" href="#"> </a>
Tu ï¿œcris ce que tu veux et tu mets ce que tu veux dans le conteneur ...
s'il y en a un.
<a href="http://painbio.com">PUB</a>
</div>
</body>
Sergio
> Cela dit, je ne vois pas non plus pourquoi ne pas tout remplacer par une
> image (sans oublier bien sï¿œr le texte alternatif) :
>
> <a href="site" title="Cliquez pour rentrer"><img
> src="img/tirage-de-tete.png" alt="..." /></a>
>
> Tout simplement.
C'est la solution de facilitￜ, ￜa :-)
Pour l'instant, je laisse un peu tomber. ￜ terme il y aura un accueil un peu plus chiadￜ, avec une image de fond rigolote et un lien
vers les principaux articles directement dedans...
Sergio
> Par contre, ceci est possible :
>
> <?xml version="1.0" encoding="iso-8859-1"?>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
> <html xmlns="http://www.w3.org/1999/xhtml">
> <head>
> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
> <title>lien occupant 100 % d'une page</title>
> </head>
> <body>
> <div id="centre"><h1>ton titre</h1>
> <a href="#"
> style="width:100%;height:100%;position:absolute;top:0;left:0"> </a>
> Tu ï¿œcris ce que tu veux et tu mets ce que tu veux dans le conteneur ...
> s'il y en a un.
> </div>
> </body></html>
Rajouter un z-index:2 pour le lien et un z-index:1 pour la div globale.
Nï¿œanmoins, avec Opera, le z-index n'a pas l'air de se propager dans les "sous-div". (ï¿œa marche avec FF et Chrome).
Sergio
> Rajouter un z-index:2 pour le lien et un z-index:1 pour la div globale.
> Nï¿œanmoins, avec Opera, le z-index n'a pas l'air de se propager dans les
> "sous-div". (ï¿œa marche avec FF et Chrome).
Par contre, je m'aperï¿œois que IE (7 et 8) se vautre complï¿œtement dans la prï¿œsentation... grrrr... Le coup de l'image n'est pas si
bï¿œte que ï¿œa...
SAM
> docanski a ï¿œcrit :
>
>> Par contre, ceci est possible :
>>
>> <?xml version="1.0" encoding="iso-8859-1"?>
>> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
>> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
>> <html xmlns="http://www.w3.org/1999/xhtml">
>> <head>
>> <meta http-equiv="Content-Type" content="text/html;
>> charset=ISO-8859-1" />
>> <title>lien occupant 100 % d'une page</title>
>> </head>
>> <body>
>> <div id="centre"><h1>ton titre</h1>
>> <a href="#"
>> style="width:100%;height:100%;position:absolute;top:0;left:0"> </a>
>> Tu ï¿œcris ce que tu veux et tu mets ce que tu veux dans le conteneur
>> ... s'il y en a un.
>> </div>
>> </body></html>
>
> Rajouter un z-index:2 pour le lien et un z-index:1 pour la div globale.
Les z-index c'est du blabla
(les navigateurs en font un peu ce qu'ils veulent)
> Nï¿œanmoins, avec Opera, le z-index n'a pas l'air de se propager dans les
> "sous-div". (ï¿œa marche avec FF et Chrome).
Le truc est de mettre le A juste avant la fermeture du body
(il a ainsi naturellement le z-index le + ￜlevￜ)
--
sm
docanski
> Rajouter un z-index:2 pour le lien et un z-index:1 pour la div globale.
> Nï¿œanmoins, avec Opera, le z-index n'a pas l'air de se propager dans les
> "sous-div". (ï¿œa marche avec FF et Chrome).
En utilisant un position:fixed au lieu de position:absolute, il n'y a
plus de problï¿œme de hauteur de page.
C'est toujours ï¿œa de pris.
L'indexation des ï¿œlï¿œments est inutile : elle ne fonctionne ni avec Opera
ni avec IE (je n'ai que le 6 pour essayer)
Par contre, ï¿œa roule sans problï¿œme avec la famille Mozilla.
Reste ￜ trouver des bￜquilles (une fois de plus pour le premier !) pour
MSIE et Opera qui, chose rare, se vautre aussi lamentablement que le
machin ￜditￜ ￜ Redmond.
SAM
> Alors que les eleveurs et agriculteurs polluent toujours la Bretagne,
> Sergio ecrit ce qui suit en ce 20/12/2009 09:57 :
>
>> Rajouter un z-index:2 pour le lien et un z-index:1 pour la div globale.
>> Nï¿œanmoins, avec Opera, le z-index n'a pas l'air de se propager dans
>> les "sous-div". (ï¿œa marche avec FF et Chrome).
>
> En utilisant un position:fixed au lieu de position:absolute, il n'y a
> plus de problï¿œme de hauteur de page.
ￜ mon idￜe, IE a besoin du layout (et il semblerait que Opera aussi)
<http://msdn.microsoft.com/en-us/library/ms533776(VS.85).aspx>
C'est donc mieux en fixant les dimensions
width: 100%; height: 100%;
ou peut-ï¿œtre en mettant : display: inline-block; ?
(pas essayￜ)
Il faut aussi ajouter le background pour Opera
background: url(inconnu.jpg) repeat top left;
l'image n'existe pas pour de vrai mais ￜa suffit ￜ tromper Opera.9.6
Par contre si on met 'transparent' pour le fond ... ￜa continue ￜ
merdouiller (le H1 n'est pas rï¿œactif)
Bon, et en plus, tout ï¿œa doit rï¿œagir diffï¿œremment suivant le doctype ?
(testￜ avec html4.1.0 strict)
> L'indexation des ï¿œlï¿œments est inutile : elle ne fonctionne ni avec Opera
> ni avec IE (je n'ai que le 6 pour essayer)
il faut utiliser l'indexation de couche obtenue naturellement par le
flux html.
(le A doit ￜtre tout ￜ la fin du fichier)
> Par contre, ï¿œa roule sans problï¿œme avec la famille Mozilla.
Finalement, c'est ch..t ces navigateurs qui fonctionnent ;-)
--
sm
rm
Le dimanche 20 d�cembre 2009 � 12:32, docanski a �crit :
> Alors que les eleveurs et agriculteurs polluent toujours la Bretagne,
> Sergio ecrit ce qui suit en ce 20/12/2009 09:57 :
>
>> Rajouter un z-index:2 pour le lien et un z-index:1 pour la div globale.
>> N�anmoins, avec Opera, le z-index n'a pas l'air de se propager dans les
>> "sous-div". (�a marche avec FF et Chrome).
Est-ce que � �a marche avec FF et Chrome � signifie-t-il, ici, que FF et
Chrome respectent le Standard ?
> En utilisant un position:fixed au lieu de position:absolute, il n'y a
> plus de probl�me de hauteur de page.
> C'est toujours �a de pris.
> L'indexation des �l�ments est inutile : elle ne fonctionne ni avec Opera
> ni avec IE (je n'ai que le 6 pour essayer)
> Par contre, �a roule sans probl�me avec la famille Mozilla.
Opera documente son impl�mentation de z-index sur
http://dev.opera.com/articles/view/37-css-absolute-and-fixed-positioning/#zindex
mais ne dit pas implicitement faire � tout comme Gecko ou Webkit � :-D
> Reste � trouver des b�quilles (une fois de plus pour le premier !) pour
> MSIE et Opera qui, chose rare, se vautre aussi lamentablement que le
> machin �dit� � Redmond.
Je ne m'y connais pas trop mais en essayant de d�chiffrer
http://www.w3.org/TR/CSS2/visuren.html#z-index je ne vois pas o� Opera
violerait la sp�cification...
Vous autres sp�cialistes des Standards sauront sans doute m'�clairer ;)
@+
--
rm - http://opera-fr.com
SAM
> Salut,
>
> Opera documente son impl�mentation de z-index sur
> http://dev.opera.com/articles/view/37-css-absolute-and-fixed-positioning/#zindex
> mais ne dit pas implicitement faire � tout comme Gecko ou Webkit � :-D
Moi ce que je retiens c'est :
� When two elements in the same stacking context have the same stack
level, the one that occurs later in the source code will appear on top
of its preceding siblings. �
Maintenant, avec :
<h1>blabla</h1>
<div style="height:300px">remplissage</div>
<p><a href="1.htm"
style="position:absolute;width:100%;height:100%;top:0">test</a></p>
vu dans Opera 9.6
les textes sont comme s'ils avaient un z-index bien sup�rieur � leur
conteneurs
(ils �chappent au lien recouvrant)
Ph�nom�ne n'apparaissant pas avec Firefox.
Pour Opera il semble qu'il lui faille en plus un background
(un vrai faux fond lui suffisant) :
<h1>blabla</h1>
<div style="height:300px">remplissage</div>
<p><a href="1.htm"
style="position:absolute;width:100%;height:100%;top:0;background:url()">test</a></p>
--
sm
Olivier Miakinen
>
> Moi ce que je retiens c'est :
>
> Maintenant, avec :
>
> <h1>blabla</h1>
> <div style="height:300px">remplissage</div>
> <p><a href="1.htm"
> style="position:absolute;width:100%;height:100%;top:0">test</a></p>
>
> vu dans Opera 9.6
> conteneurs
> (ils ï¿œchappent au lien recouvrant)
Je dirais plutï¿œt que la portï¿œe du <a> dans le cas d'un ï¿œlï¿œment inline
est ￜtendue diffￜremment ￜ sa boￜte de bloc gￜnￜrￜe dans Opera et dans
Firefox, avec un background transparent...
Voir par exemple ici :
<h1>blabla</h1>
<div style="height:300px">remplissage</div>
<p><a href="1.htm"
style="position:absolute;width:100%;height:100%;top:0;">test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test</a></p>
Le texte dans le lien recouvre bien tout texte placￜ avant, et il est
cliquable. Mais il se trouve que dans Opera un background transparent
laisse passer non seulement les pixels mais aussi l'ï¿œtat cliquable ou
non de ce qui est derriï¿œre. Cela dit, ce comportement est (au moins
partiellement) indï¿œpendant du z-index.
> Phï¿œnomï¿œne n'apparaissant pas avec Firefox.
>
> Pour Opera il semble qu'il lui faille en plus un background
> (un vrai faux fond lui suffisant) :
>
> <h1>blabla</h1>
> <div style="height:300px">remplissage</div>
> <p><a href="1.htm"
> style="position:absolute;width:100%;height:100%;top:0;background:url()">test</a></p>
C'est effectivement troublant de voir un comportement diffï¿œrent avec
ￜ background-color:transparent ￜ d'avec un background ne s'ￜtendant
pas sur la totalitￜ de l'ￜlￜment, mais bon, si c'est un bug, je ne crois
pas qu'on puisse l'imputer au z-index.