une css qui ne fonctionne pas sous FF et ses amis :(
6 réponses
Robert
Bonjour
je débute donc je regarde 'je copie' et j'essaie de comprendre !
je souhaite faire un truc qui affiche une image et un texte à un endroit
précis au survol d'un lien
je souhaite rester 10% CSS (faut bien y passer, hein ?)
j'ai adapté un petit truc trouvé sur un forum et c'est
'intellectuellement' sympa MAIS ça ne fonctionne (d'ailleurs très bien)
QUE sous IE :(((
sauriez vous me dire une fois, pourquoi ? ou me mettre sur la voie ?
désolé j'ai tellement peur des spams que je ne laisse pas mon adresse.
répondre sur le newsgroup. Merci.
Une piste me semble t il mais je ne la comprends pas :
dans a:hover.popup span, si on mets une couleur (on enleve le
transparent) il y a un comportement bizarre des contours d'images ...et
comme par hasard ça chevauche la zone des liens qui ne fonctionnent pas
#Conteneur /* le conteneur général */
{
position:absolute;
top:10px;
left:50%;
width:768px;
height:960px;
margin-left:-384px;
border-width: 2px;
border-style: ridge;
border-color: red;
/* là j'ai aussi un background image de fond mais pas besoin pour
l'exemple ! */
/* et puis un truc bizarre si je mets en haut le doctype et bien le
background ne s'affiche plus :(( */
}
#cadranim2 /* le cadre du menu de droite */
{float:right;
display: block; margin-top: 180px; margin-left: 120px; width: 150px;
height: 720px; border: 0px solid rgb(51, 51, 102);}
/* MERCI à Dominique Ottello (ottello.net) pour cette superbe idée
dans un forum javascript....mais ça marche pas sous FF :((*/
a.popup {font-size:1.4em;/* */
color:#AC5500; /* couleur */
text-decoration:none;
text-align:justify
}
a:active.popup {border-bottom:0px;} /* Indispensable pour IE */
a:hover.popup {border-bottom:0px; /* Indispensable pour IE */
cursor:pointer;
color: #008000;
background-color:#FFFFCC;}
a.popup span { position: relative; top:0px; left:0px; display:none; }
/* Texte entre balises SPAN invisible *//* et si on met block on voit
un sacré mer.ier !! */
a:hover.popup span {display:block; /*Texte affiche dans boite *//*
MAIS QUELLE boite ??? */
position:absolute; /* position et dimensions boite */
width:auto;height:auto;top:190px;left:250px;overflow:visible;
border:0px; /* Bordures de la boite */
background-color:transparent; /* Couleur de la boite */
/*background-color:"#66ff00"; /* essai de couleur*//* là ça devient
drole, si on met une couleur on voit 'parfois' des fonds qui dépassent
aux images...j'comprends pas */
line-height:125%;font-size:0.8em;color:#AC5500;
margin:0.5em 1%;padding:0 15% 0 0;text-align:justify;
font-weight:600;font-style:normal;
z-index:220;}
a:hover.popup span p /* j'ai mis ça pour rajouter du texte sous les
iamges ...ça le fait mais le vérificateur w3, il aime pas :( */
{color:#ac5500;font-style:italic; font-size:1.2em; position:relative;
top:30px; right:10px;text-align:justify;}
#choix /* le texte qui sera recouvert par les images */
{color:#ac5500; font-size:1.0em; position:relative;
top:280px;margin-left:290px}
</STYLE>
</head>
<body>
<div id="conteneur">
<div id="choix"> <br>Faites votre choix,
<br>dans la liste à droite.<br><i><font size=-1>Pour plus de détails,
cliquez sur votre choix.<br></font></i>Bonne visite!</div>
<div id="cadranim2">
<br>
<ul>
<li><a class="popup"
href="http://www.meteofrance.com/FR/mameteo/prevVille.jsp?LIEUID=FR04069">bleu<br><span><img
src="titi.png" alt="une image" width=341 height=231><p>texte choix bleu.
c'est ça que je ne lis pas sous Firefox ! </span></a><br></li>
<li><a class="popup"
href="http://www.meteofrance.com/FR/mameteo/prevVille.jsp?LIEUID=FR14069">vert<br><span><img
src="tata.png" alt="un autre image" width=315 height=210><p> (texte
choix vert) si vous êtes sous IE vous lisez ce texte</span></a><br></li>
<li><a class="popup"
href="http://www.meteofrance.com/FR/mameteo/prevVille.jsp?LIEUID=FR24069">jaune<br><span><img
src="toto.jpg" alt="puis une autre" width=340 height=227><p>choix jaune
> si il y avait une image elle couvrirait le texte (z-index )
</span></a><br></li>
<li><a class="popup"
href="http://www.meteofrance.com/FR/mameteo/prevVille.jsp?LIEUID=FR34069">rouge<br><span><img
src="itit.png" alt="encore une" width=400 height=266><p> choix rouge
blabla blabla blablabla et re blabla blabla blablabla et re re blabla
blabla blablabla</span></a><br></li>
<li><a class="popup"
href="http://www.meteofrance.com/FR/mameteo/prevVille.jsp?LIEUID=FR44069">noir<br><span><img
src="atat.jpg" alt="c pas fini" width=340 height=227
border=0></span></a><br></li>
<li><a class="popup"
href="http://www.meteofrance.com/FR/mameteo/prevVille.jsp?LIEUID=FR54069">blanc<br><span><img
src="otot.jpg" alt="allez une autre" width=341 height=231><p> choix
blanc blabla blabla blablabla et re blabla blabla blablabla et re re
blabla blabla blablabla</span></a><br></li>
<li><a class="popup"
href="http://www.meteofrance.com/FR/mameteo/prevVille.jsp?LIEUID=FR64069">rose<br><span><img
src="tita.png" alt="si si il en reste" width=350 height=381><p> choix
rose blabla blabla blablabla et re blabla blabla blablabla et re re
blabla blabla blablabla</span></a> <br></li>
<li><a class="popup"
href="http://www.meteofrance.com/FR/mameteo/prevVille.jsp?LIEUID=FR74069">nougat<br><span><img
src="tato.png" alt="la der" width=498 height=220><p> t'occupe pas, donne
moi du nougat ....</span></a> <br></li>
</ul>
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
Robert
a écrit :
Bonjour,
Résolu, résolu... il faut le dire vite... je ne vois toujours pas la DTD J'ai essayé de la mettre. Par contre ça ne valide toujours pas sur http://validator.w3.org
Line 101, column 109: -----------------------------
Je trouve cette idée d'interface sympa pour une gallerie... donc ça m'interesse... par contre je veux quelque chose de valide... sin vous trouvez comment arranger ça je suis preneur ;-)
Cordialement
Ben voilà. maintenant : ça fonctionne c'est valide css c'est valide html 4.01 Trans
http://psivsdsi.free.fr/test4.html
"ON" devrait être content ...et ben non ! car depuis que j'ai mis le doctype (strict ou trans ça fait pareil) j'ai perdu le centrage et le cadre de mon conteneur central.
http://psivsdsi.free.fr/test5.html
mais à chaque heure suffit sa peine !
Merci à tous ceux qui m'ont mis sur la voie pour faire ce truc d'apparition d'images ET textes et en plus valide. j'ai appris plein de choses grâce à vous.
-- Robert
noone@nowhere.com a écrit :
Bonjour,
Résolu, résolu... il faut le dire vite... je ne vois toujours pas la DTD
J'ai essayé de la mettre.
Par contre ça ne valide toujours pas sur http://validator.w3.org
Line 101, column 109: -----------------------------
Je trouve cette idée d'interface sympa pour une gallerie... donc ça
m'interesse... par contre je veux quelque chose de valide... sin vous
trouvez comment arranger ça je suis preneur ;-)
Cordialement
Ben voilà. maintenant :
ça fonctionne
c'est valide css
c'est valide html 4.01 Trans
http://psivsdsi.free.fr/test4.html
"ON" devrait être content ...et ben non !
car depuis que j'ai mis le doctype (strict ou trans ça fait pareil) j'ai
perdu le centrage et le cadre de mon conteneur central.
http://psivsdsi.free.fr/test5.html
mais à chaque heure suffit sa peine !
Merci à tous ceux qui m'ont mis sur la voie pour faire ce truc
d'apparition d'images ET textes et en plus valide.
j'ai appris plein de choses grâce à vous.
Résolu, résolu... il faut le dire vite... je ne vois toujours pas la DTD J'ai essayé de la mettre. Par contre ça ne valide toujours pas sur http://validator.w3.org
Line 101, column 109: -----------------------------
Je trouve cette idée d'interface sympa pour une gallerie... donc ça m'interesse... par contre je veux quelque chose de valide... sin vous trouvez comment arranger ça je suis preneur ;-)
Cordialement
Ben voilà. maintenant : ça fonctionne c'est valide css c'est valide html 4.01 Trans
http://psivsdsi.free.fr/test4.html
"ON" devrait être content ...et ben non ! car depuis que j'ai mis le doctype (strict ou trans ça fait pareil) j'ai perdu le centrage et le cadre de mon conteneur central.
http://psivsdsi.free.fr/test5.html
mais à chaque heure suffit sa peine !
Merci à tous ceux qui m'ont mis sur la voie pour faire ce truc d'apparition d'images ET textes et en plus valide. j'ai appris plein de choses grâce à vous.
-- Robert
Jérémie Fouché
Robert a écrit :
Jérémie Fouché a écrit :
J'ai regardé, j'ai pas tout compris, mais tu peux aller voir : http://batraciens.net/css-astuces/commentaires-survol3.htm
En esperant que ca aide.
OUI ça m'a aidé ! ça m'a fait comprendre deux choses.
1) c'est possible 2) pourquoi faire compliqué quand on peut faire si simple
donc après une rapide correction, je me retrouve dans la situation inverse c'est parfait sous FF et vraiment nul sous IE mais là je vais pouvoir gérer. Opéra 6.05 lui il n'aime pas
pour l'instant sur l'adresse de test http://psivsdsi.free.fr (+ test2 ou test3 aussi) on voit surtout que c'était vraiment un souci de débordement de boites (le b a ba des ennuis en css si j'ai bien compris) et que l'idée de départ de mettre un niveau de balise dans un autre lui même dans un autre ...ça le fait ! on peut aller loin comme ça ?
Heu, oui, masi a un petit detail pres, on ne peut (doit) pas mettre des élément de type block dans des élément de type en ligne. En fait : <a><div>...</div></a> est interdit (il me semble). Il faut donc mettre des span avec l'attribut CSS display block, de même les paragraphes (<p>) qui sont des élément de type block doivent etre remplacé par des <span class="p"> avec un CSS .p kivabien (par exemple.
-- Jérémie
Robert a écrit :
Jérémie Fouché a écrit :
J'ai regardé, j'ai pas tout compris, mais tu peux aller voir :
http://batraciens.net/css-astuces/commentaires-survol3.htm
En esperant que ca aide.
OUI ça m'a aidé !
ça m'a fait comprendre deux choses.
1) c'est possible
2) pourquoi faire compliqué quand on peut faire si simple
donc après une rapide correction, je me retrouve dans la situation inverse
c'est parfait sous FF et vraiment nul sous IE
mais là je vais pouvoir gérer.
Opéra 6.05 lui il n'aime pas
pour l'instant sur l'adresse de test
http://psivsdsi.free.fr (+ test2 ou test3 aussi) on voit surtout que
c'était vraiment un souci de débordement de boites (le b a ba des ennuis
en css si j'ai bien compris) et que l'idée de départ de mettre un niveau
de balise dans un autre lui même dans un autre ...ça le fait !
on peut aller loin comme ça ?
Heu, oui, masi a un petit detail pres, on ne peut (doit) pas mettre des
élément de type block dans des élément de type en ligne. En fait :
<a><div>...</div></a> est interdit (il me semble).
Il faut donc mettre des span avec l'attribut CSS display block, de même
les paragraphes (<p>) qui sont des élément de type block doivent etre
remplacé par des <span class="p"> avec un CSS .p kivabien (par exemple.
J'ai regardé, j'ai pas tout compris, mais tu peux aller voir : http://batraciens.net/css-astuces/commentaires-survol3.htm
En esperant que ca aide.
OUI ça m'a aidé ! ça m'a fait comprendre deux choses.
1) c'est possible 2) pourquoi faire compliqué quand on peut faire si simple
donc après une rapide correction, je me retrouve dans la situation inverse c'est parfait sous FF et vraiment nul sous IE mais là je vais pouvoir gérer. Opéra 6.05 lui il n'aime pas
pour l'instant sur l'adresse de test http://psivsdsi.free.fr (+ test2 ou test3 aussi) on voit surtout que c'était vraiment un souci de débordement de boites (le b a ba des ennuis en css si j'ai bien compris) et que l'idée de départ de mettre un niveau de balise dans un autre lui même dans un autre ...ça le fait ! on peut aller loin comme ça ?
Heu, oui, masi a un petit detail pres, on ne peut (doit) pas mettre des élément de type block dans des élément de type en ligne. En fait : <a><div>...</div></a> est interdit (il me semble). Il faut donc mettre des span avec l'attribut CSS display block, de même les paragraphes (<p>) qui sont des élément de type block doivent etre remplacé par des <span class="p"> avec un CSS .p kivabien (par exemple.
-- Jérémie
noone
"ON" devrait être content ...et ben non ! car depuis que j'ai mis le doctype (strict ou trans ça fait pareil) j'ai perdu le centrage et le cadre de mon conteneur central.
http://psivsdsi.free.fr/test5.html
C'est la première fois que je vois une DTD qui change l'aspect de la page !!!!
Mais il faut reconnaitre que c'est plus clean maintenant
Si tu trouves n'oublie pas de poster ici... (enfin dans un autre post !)
@+ et merci
"ON" devrait être content ...et ben non !
car depuis que j'ai mis le doctype (strict ou trans ça fait pareil) j'ai
perdu le centrage et le cadre de mon conteneur central.
http://psivsdsi.free.fr/test5.html
C'est la première fois que je vois une DTD qui change l'aspect de la
page !!!!
Mais il faut reconnaitre que c'est plus clean maintenant
Si tu trouves n'oublie pas de poster ici... (enfin dans un autre post !)
"ON" devrait être content ...et ben non ! car depuis que j'ai mis le doctype (strict ou trans ça fait pareil) j'ai perdu le centrage et le cadre de mon conteneur central.
http://psivsdsi.free.fr/test5.html
C'est la première fois que je vois une DTD qui change l'aspect de la page !!!!
Mais il faut reconnaitre que c'est plus clean maintenant
Si tu trouves n'oublie pas de poster ici... (enfin dans un autre post !)
@+ et merci
noone
En fait c'est ta DTD qui n'est pas bonne
voici ce que j'ai http://s.cls.free.fr/tests/css_over/index.htm
j'ai utilisé Emacs pour éditer le texte et quand je fais insert DTD
j'ai <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
ou
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> (strict)
ou
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
Tu avais mis ceci :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
je ne sais pas si c'est le saut de ligne qu'il n'aime pas ?
En fait c'est ta DTD qui n'est pas bonne
voici ce que j'ai
http://s.cls.free.fr/tests/css_over/index.htm
j'ai utilisé Emacs pour éditer le texte et quand je fais insert DTD
j'ai
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
ou
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> (strict)
ou
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
Tu avais mis ceci :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
je ne sais pas si c'est le saut de ligne qu'il n'aime pas ?
je ne sais pas si c'est le saut de ligne qu'il n'aime pas ?
Vérification faite c'est
"http://www.w3.org/TR/html4/loose.dtd"
qu'il n'aime pas (sans le saut de ligne ça merde aussi !!!)
Pierre Goiffon
wrote:
C'est la première fois que je vois une DTD qui change l'aspect de la page !!!!
La majorité des navigateurs actuels utilisent un modèle de rendu standard ou "quirks", la sélection entre l'un et l'autre se faisant sur le doctype de la page. Lire : http://hsivonen.iki.fi/doctype/
noone@nowhere.com wrote:
C'est la première fois que je vois une DTD qui change l'aspect de la
page !!!!
La majorité des navigateurs actuels utilisent un modèle de rendu
standard ou "quirks", la sélection entre l'un et l'autre se faisant sur
le doctype de la page.
Lire :
http://hsivonen.iki.fi/doctype/
C'est la première fois que je vois une DTD qui change l'aspect de la page !!!!
La majorité des navigateurs actuels utilisent un modèle de rendu standard ou "quirks", la sélection entre l'un et l'autre se faisant sur le doctype de la page. Lire : http://hsivonen.iki.fi/doctype/
