[long] Float right
Le
François Battail
Bonjour,
J'étais très mal, avec un problème qui - tenez-vous bien - ne
survenait qu'avec FF 0.93 (Linux et Win), Konqueror 3.3.0 (Debian), Opera
7.50 (Linux), Opera 7.60 PR 1 (Win). Dans l'exemple ci-dessous le lien
dans l'encadré de droite n'est pas cliquable sauf sous IE 6.0 SP1, c'est
un comble !
Code xhtml strict valide et tout ça. Voici ce code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xht...">
<html xmlns="http://www.w3.org/1999/xhtml" lang='fr' xml:lang='fr'>
<head>
<meta http-equiv='content-type' content='text/html; charset=iso-8859-15' />
<title>Test float right</title>
<!-- un peu de visuel et des floats -->
<style type='text/css' media='screen'>
/*
Propriétés par défaut
*/
img, p, blockquote, div, ul, ol, dl, a
{
padding: 0 ;
margin: 0 ;
border: none ;
text-decoration: none ;
}
/*
Hack sur bug de liste IE
*/
ul, ol, dl
{
position: relative ;
}
/*
Hack IE pour l'auto clear sauf pour IE Mac et les autres
Thanks a lot to Holly Bergevin for tracking down this one!
positioniseverything.net
\*/
* html .holly
{
height: 1% ;
}
/* fin hack */
/*
Encadrés en float
*/
.left
{
float: left ;
}
.right
{
float: right ;
}
/* auto clear pour les navigateurs normaux */
.block:after
{
content: "." ;
display: block ;
height: 0 ;
clear: both ;
visibility: hidden ;
}
/* destiné à faire un encadré */
.note
{
margin: 4px ;
padding: 4px ;
background-color: yellow ;
}
</style>
</head>
<body id='site-id'>
<h1>Le document</h1>
<div class='block holly'> <!-- premier bloc du document -->
<h2>Float à droite</h2>
<p class='note right' style='width: 30%;'>
N'hésitez pas à utiliser le <a class='out' href="http://validator.w3c.org/">validateur du W3C</a>, cela économise des heures de debug !
</p>
<ul class='faq-index'> <!-- composite faq -->
<li><a href='#faq-1'>Première entrée</a></li>
<li><a href='#faq-2'>Deuxième entrée</a></li>
</ul>
<dl class='faq'>
<dt id='faq-1'>Première entrée</dt>
<dd>
C'est la première entrée de la faq.
</dd>
<dt id='faq-2'>Deuxième entrée</dt>
<dd>
C'est la deuxième entrée de la faq.
</dd>
</dl>
</div> <!-- doc -->
</body>
</html>
Pour que le lien situé dans le float right devienne cliquable il faut
supprimer le position: relative de la deuxième série de déclarations
CSS.
Les navigateurs standards ont visiblement tous le même comportement mais
j'avoue que cela m'intrigue.
De plus
ol, ul, dl
{
position: relative ;
}
sert à éviter un bug IE
(http://www.positioniseverything.net...stbug.html) donc le fin
mot de l'histoire m'intéresse grandement.
Si quelqu'un en sait un peu plus sur ce sujet car des recherches google
comme : "link float right clickable" m'ont rien donné et j'avoue que
c'est la première fois que je tombe dessus.
Merci,
@+
fb
J'étais très mal, avec un problème qui - tenez-vous bien - ne
survenait qu'avec FF 0.93 (Linux et Win), Konqueror 3.3.0 (Debian), Opera
7.50 (Linux), Opera 7.60 PR 1 (Win). Dans l'exemple ci-dessous le lien
dans l'encadré de droite n'est pas cliquable sauf sous IE 6.0 SP1, c'est
un comble !
Code xhtml strict valide et tout ça. Voici ce code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xht...">
<html xmlns="http://www.w3.org/1999/xhtml" lang='fr' xml:lang='fr'>
<head>
<meta http-equiv='content-type' content='text/html; charset=iso-8859-15' />
<title>Test float right</title>
<!-- un peu de visuel et des floats -->
<style type='text/css' media='screen'>
/*
Propriétés par défaut
*/
img, p, blockquote, div, ul, ol, dl, a
{
padding: 0 ;
margin: 0 ;
border: none ;
text-decoration: none ;
}
/*
Hack sur bug de liste IE
*/
ul, ol, dl
{
position: relative ;
}
/*
Hack IE pour l'auto clear sauf pour IE Mac et les autres
Thanks a lot to Holly Bergevin for tracking down this one!
positioniseverything.net
\*/
* html .holly
{
height: 1% ;
}
/* fin hack */
/*
Encadrés en float
*/
.left
{
float: left ;
}
.right
{
float: right ;
}
/* auto clear pour les navigateurs normaux */
.block:after
{
content: "." ;
display: block ;
height: 0 ;
clear: both ;
visibility: hidden ;
}
/* destiné à faire un encadré */
.note
{
margin: 4px ;
padding: 4px ;
background-color: yellow ;
}
</style>
</head>
<body id='site-id'>
<h1>Le document</h1>
<div class='block holly'> <!-- premier bloc du document -->
<h2>Float à droite</h2>
<p class='note right' style='width: 30%;'>
N'hésitez pas à utiliser le <a class='out' href="http://validator.w3c.org/">validateur du W3C</a>, cela économise des heures de debug !
</p>
<ul class='faq-index'> <!-- composite faq -->
<li><a href='#faq-1'>Première entrée</a></li>
<li><a href='#faq-2'>Deuxième entrée</a></li>
</ul>
<dl class='faq'>
<dt id='faq-1'>Première entrée</dt>
<dd>
C'est la première entrée de la faq.
</dd>
<dt id='faq-2'>Deuxième entrée</dt>
<dd>
C'est la deuxième entrée de la faq.
</dd>
</dl>
</div> <!-- doc -->
</body>
</html>
Pour que le lien situé dans le float right devienne cliquable il faut
supprimer le position: relative de la deuxième série de déclarations
CSS.
Les navigateurs standards ont visiblement tous le même comportement mais
j'avoue que cela m'intrigue.
De plus
ol, ul, dl
{
position: relative ;
}
sert à éviter un bug IE
(http://www.positioniseverything.net...stbug.html) donc le fin
mot de l'histoire m'intéresse grandement.
Si quelqu'un en sait un peu plus sur ce sujet car des recherches google
comme : "link float right clickable" m'ont rien donné et j'avoue que
c'est la première fois que je tombe dessus.
Merci,
@+
fb
Poser une question
À priori je dirais que c'est un probleme de blocs qui se recouvrent. Et
bien que transparentes, les couches superieures peuvent ne pas donner
accès à celles du dessous.
Ca devrait être résolu en jouant sur les z-index, avec la propriété
position qui va bien.
cela dit on verrait mieux avec un lien.
--
Raphaël
http://www.r-wils.com/perso
« Don't mean a thing if you ain't got that swing ! »
<snip />
<snip />
J'ai joué avec le z-index sur le ul, ol, dl et sur le p qui est en
float right sans résultats :(, j'avais aussi limité à 50% la taille du
ul et du dl sans résultat probant.
Désolé, je n'ai pas de serveur http ouvert sous la main c'est pourquoi
j'ai attaché du code monolithique.
@+
fb
Et en mettant en plus un z-index de valeur inférieur sur les autres
éléments ?
Attention le z-index ne s'applique que si l'élément est positionné
(absolute, ou relative)
--
Raphaël
http://www.r-wils.com/perso
« Don't mean a thing if you ain't got that swing ! »
<snip bug/effet de bord partout sauf IE avec des float right et des
éléments en position: relative />
Pour faire simple un truc comme
html
{
z-index: -1 ;
}
Ooppss, très juste donc il faut jouer sur les autres éléments que le
float mais avec le css ci-dessus le problème se manifeste toujours.
@+
fb