Annonce

Écrire une réponse

Veuillez écrire votre message et l'envoyer

Cliquez dans la zone sombre de l'image pour envoyer votre message.

Retour

Résumé de la discussion (messages les plus récents en premier)

AkaiKen
2008-05-28 10:41:47

Bon. Histoire de poursuivre le test j'ai ajouté une tooltip sur chaque carte. Et là, le drame. Les deux précédentes étaient sur la même colonne, et j'aurais dû me douter que ce n'était pas pertinent. Parce que du coup, la quatrième tooltip (sur la quatrième carte, la bleue) se superpose à la troisième (verte), et pareil entre la deuxième et la première... Sous Firefox uniquement, d'ailleurs (pour une fois), car sous IE c'est nickel.

AkaiKen
2008-05-25 19:12:39

Oh pardon, j'avais commencé à tester mais sans donner les résultats encore. Donc ok, je vois avec les données que tu me proposes et j'affinerai.

Mais le point positif c'est que ça marche =) ! (oui, IE7 est illogique...)

VDigital
2008-05-25 14:55:53

Avant c'était en haut à droite, et tu as mis pour l'instant :

<!--[if gt IE 6]>
<style type="text/css">
a.tooltip:hover em {
  margin-top: 0px;
  margin-left: -340px;
}
</style>

Et je ne comprends plus le fonctionnement de IE 7, c'est relativement illogique.
J'essaierai volontiers:
  margin-top: 12px;
  margin-left: -318px;

8-)

VDigital
2008-05-24 21:48:27

Cela fait du bien de prendre un peu de recul... On retrouve plus rapidement ses bêtises.

Code donc ton thème ainsi

$themeconf = array(
  'template' => 'yoga',
  'theme' => 'griffon',
  'template_dir' => 'template/yoga',
  'icon_dir' => PHPWG_ROOT_PATH.'template/yoga/theme/griffon/icon',
  'admin_icon_dir' => PHPWG_ROOT_PATH.'template/yoga/theme/griffon/icon/admin',
  'mime_icon_dir' => PHPWG_ROOT_PATH.'template/yoga/icon/mimetypes/',
  'local_head' => '<!--[if lt IE 7]>
  <link rel="stylesheet" type="text/css" href="'.PHPWG_ROOT_PATH.'template/yoga/theme/griffon/fix-ie5-ie6.css">
<![endif]-->
<!--[if gt IE 6]>
<style type="text/css">
a.tooltip:hover em {
    margin-top: 472px;
    margin-left: -350px;
}
</style>
<![endif]-->'
);

Si cela ne marche pas, tu essaieras top et left.
8-)

AkaiKen
2008-05-24 19:35:59

Je me permets de remonter le sujet =) les pauvres utilisateurs de IE vont criser (si tant est qu'il y en ait qui regardent mes cartes)

AkaiKen
2008-05-20 21:23:15

Hélas... pas de changement... (juste comme ça, pour rigoler, j'ai testé avec top: -472px; et left: 350px; rien de changé non plus, le fichier s'applique-t-il bien ?)(et, oui, je fais Ctrl+F5 ^^)

VDigital
2008-05-20 21:18:27

Au lieu de:

  margin-top: 472px;
  margin-left: -350px;

tu codes

  top: 472px;
  left: -350px;

8-)

AkaiKen
2008-05-20 20:28:49

J'ai IE7 moi aussi, et je crois bien que ça ne marche pas =( les infobulles sont toujours en vrille en haut à droite.
Qu'as-tu fait exactement ? Tu précises au site que sous IE il doit donner une certaine position aux infobulles, de façon prioritaire à la CSS ? D'où vient que [if gt IE 6] soit reconnu, et comment ? (est-ce que j'ai encore beaucoup de questions =D ?)

VDigital
2008-05-18 15:21:10

J'imagine que le Hack sera ainsi:

Code:

<!--[if gt IE 6]>
<style type="text/css">
  margin-top: 472px;
  margin-left: -350px;
</style>
<![endif]-->

if gt IE 6  : peut-être même 5, je n'ai que de l'IE 7 sous la main. Donc, je ne sais pas quelles sont les versions de IE qui présentent ce défaut.

Je ne sais pas si cela va fonctionner, je ne peux tester.
Alors comment le placer... Ton thème griffon est inspiré de montblanc.
Dans ton themeconf.inc.php tu devrais avoir quelque chose comme:

Code:

$themeconf = array(
  'template' => 'yoga',
  'theme' => 'griffon',
  'template_dir' => 'template/yoga',
  'icon_dir' => PHPWG_ROOT_PATH.'template/yoga/theme/griffon/icon',
  'admin_icon_dir' => PHPWG_ROOT_PATH.'template/yoga/theme/griffon/icon/admin',
  'mime_icon_dir' => PHPWG_ROOT_PATH.'template/yoga/icon/mimetypes/',
  'local_head' => '<!--[if lt IE 7]>
  <link rel="stylesheet" type="text/css" href="'.PHPWG_ROOT_PATH.'template/yoga/theme/griffon/fix-ie5-ie6.css">
<![endif]-->'
);

Et nous allons le remplacer par:

Code:

$themeconf = array(
  'template' => 'yoga',
  'theme' => 'griffon',
  'template_dir' => 'template/yoga',
  'icon_dir' => PHPWG_ROOT_PATH.'template/yoga/theme/griffon/icon',
  'admin_icon_dir' => PHPWG_ROOT_PATH.'template/yoga/theme/griffon/icon/admin',
  'mime_icon_dir' => PHPWG_ROOT_PATH.'template/yoga/icon/mimetypes/',
  'local_head' => '<!--[if lt IE 7]>
  <link rel="stylesheet" type="text/css" href="'.PHPWG_ROOT_PATH.'template/yoga/theme/griffon/fix-ie5-ie6.css">
<![endif]-->
<!--[if gt IE 6]>
<style type="text/css">
  margin-top: 472px;
  margin-left: -350px;
</style>
<![endif]-->'
);

Pour info, les anciennes techniques de Hack de css à base de "* html" sont à éviter.

8-)

VDigital
2008-05-18 12:34:05

AkaiKen a écrit:

Pour la parse error... la ligne 205 en question :

Code:

/* ----Menu----- */

Je ne comprends pas en quoi c'est une erreur =( ; il peut y avoir des espaces ou non entre /* et */ alors je ne vois pas...

Sinon, IE part de plus en plus fou avec ce code =D l'infobulle file en haut à droite.

Je suis désolée de te laisser tout faire, VDigital, parce que là je suis larguée...

Moi, tout va bien, je ne suis pas largué.

http://jigsaw.w3.org/css-validator/vali … mp;lang=fr

Et ça:

Code:

.nb-comments { color: #f92; }
}

C'est un rêve... 8-)


Tu dis "l'infobulle file en haut à droite." Je m'attendais à en haut à gauche...
Mais c'est vu. Et je suis ravi de la chose car maintenant je peux hacker.
Je regarde cet aprèm.
8-)

AkaiKen
2008-05-18 11:50:32

Pour la parse error... la ligne 205 en question :

Code:

/* ----Menu----- */

Je ne comprends pas en quoi c'est une erreur =( ; il peut y avoir des espaces ou non entre /* et */ alors je ne vois pas...

Sinon, IE part de plus en plus fou avec ce code =D l'infobulle file en haut à droite.

Je suis désolée de te laisser tout faire, VDigital, parce que là je suis larguée...

VDigital
2008-05-18 08:22:24

URI : http://akaiken.free.fr/site/template/yo … /theme.css
205         Parse error - Unrecognized }



Et... (Je ne sais pas comment IE va se comporter):

Code:

/*tooltips pour funcards*/

 a.tooltip em {
    display:none;
}
/*a.tooltip:hover {
    border: 0;
    position: relative;
    z-index: 500;
    text-decoration:none;
}*/
a.tooltip:hover em {
    font-style: normal;
    display: block;
    position: absolute;
    margin-top: -460px;
    margin-left: 30px;
    /* top: 135px; left: 16px; */
    padding: 5px;
    color: #000;
    border: 1px solid #bbb;
    background: #fffcd4;
    width:292px;
    height:427px;
}
a.tooltip:hover em span {
    position: absolute;
    top: -7px;
    left: 15px;
    height: 7px;
    width: 11px;
    background: transparent url(image-infobulle.gif);
    margin:0;
    padding: 0;
    border: 0;
}

/* fin tooltips pour funcards*/
VDigital
2008-05-17 18:38:59

Normal... Attends que je trouve la suite.
8-)

AkaiKen
2008-05-17 18:29:36

Ca marche bien, en ce sens que l'infobulle se positionne au même endroit pour FF et IE... mais aussi quelle que soit la carte ! Je compte mettre une infobulle descriptive sur chaque carte. Pour l'instant il y a en a deux, une sur Ginko (première carte) et une sur Récolte douloureuse ; et en supprimant la partie a.tooltip:hover la bulle se fixe sur Ginko...

VDigital
2008-05-17 17:44:01

En dernier ressort, on te donnera le "Hack" pour IE qui ira bien...
Mais si je peux éviter.
8-)



Essaie pour voir de modifier ton theme.css

Remplace ceci:

Code:

a.tooltip:hover {
border:0pt none;
position:relative;
text-decoration:none;
z-index:500;
}
a.tooltip:hover em {
background:#FFFFCC none repeat scroll 0%;
border:1px solid #BBBBBB;
color:#000000;
display:block;
font-style:normal;
left:-10px;
padding:5px;
position:absolute;
top:20px;
width:170px;
}

par

Code:

a.tooltip:hover em {
background:#FFFFCC none repeat scroll 0%;
border:1px solid #BBBBBB;
color:#000000;
display:block;
font-style:normal;
left:0px;
padding:5px;
position:absolute;
top:10px;
width:170px;
}

Je supprime a.tooltip:hover

Pied de page des forums

Propulsé par FluxBB

github twitter newsletter Faire un don Piwigo.org © 2002-2024 · Contact