SOS-FORUM

Derniers sujets

» Silence Inside Me - Ouverture
par Solitude 3/3/2018, 12:36

» ATLANTIC CITY - rpg city
par Solitude 15/3/2017, 10:41

» Bonne Année 2015
par Chantra Chantrapa 5/3/2017, 20:31

» Rio de Janeiro
par Solitude 14/9/2015, 15:34

» Bon Anniversaire Zeco
par Laurent 29/5/2015, 06:29


Vous n'êtes pas connecté. Connectez-vous ou enregistrez-vous

Voir le sujet précédent Voir le sujet suivant Aller en bas  Message [Page 1 sur 1]

avatar
Final-Blonde
Staff du forum
Voir le profil de l'utilisateur http://sansfil.forumactif.com/
Bonjour,

Après des heures de prise de tête, je n'arrive à afficher dans une page HTML qu'avec Opera cet effet (over sur le bouton "Partenaires") "Pop up" qui s'affiche là bien sous FF, IE et Opera, ainsi que ici (over sur le profil),
mais dans une page HTML ça ne fonctionne pas avec IE7 et FF comme on peut le voir ici et ça le fait bien avec Opera ou ailleurs que dans la page HTML... Grrr...

Pourtant le CSS est le même que dans la feuille de style CSS et dans le widget :
Code:
<style type="text/css">
<!--
.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: #transparent;
background-image: url('http://img4.hostingpics.net/pics/81473gradient3.png');
padding: 3px;
left: -1000px;
border: 2px solid #ffffff;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0px;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 34px;
left: 0px; /*position where enlarged image should offset horizontally */
width: 100%;
}
-->
</style>
Repris en html exactement comme dans le widget et le template pour l'effet sur le profil des posts :
Code:
<div class="thumbnail"><img src="http://img524.imageshack.us/img524/5458/buttonpartenaires.png"><span>
<a href="http://www.sos-forum.com/" target="_blank"><img src="http://i44.servimg.com/u/f44/11/44/03/73/sf-0110.gif" width="88" height="31"></a><br/><br/><a href="http://www.annuaire-forum.fr/" target="_blank"><img src="http://www.annuaire-forum.fr/img/logo.gif" width="88" height="31"></a>  <a href="http://www.patmax.info" target="_blanck"><img src="http://www.patmax.info/images/bannieres/patmaxscripts.gif" width="88" height="31"></a>  <a href="http://calipso.exprimetoi.net/" target="_blank"><img src="http://i62.servimg.com/u/f62/11/72/76/79/cali310.gif"  width="88" height="31"></a><br/><br/> <a href="http://www.java.scripts-fr.com/" target="_top"><img src="http://www.java.scripts-fr.com/images/scripts-fr-bouton.gif" border="0" width="88" height="31" alt="scripts-Fr.com : Annuaire du CGI & Javascript" title="scripts-Fr.com : Annuaire du CGI & Javascript"></a>  <a href="http://fun.codes-sources.com/"  target="_blank"><img src="http://img2.hostingpics.net/pics/526221cs.gif"  height="31" width="88"></a>  <a href="http://astuforum.free.fr/" target="_blank"><img src="http://astuforum.free.fr/images/pub-astu.gif" height="31" width="88"></a>
</span></div>

Quelqu'un peut-il m'aider à comprendre et me dire ce que je peux faire pour avoir mon effet dans une page HTML avec les autres navigateurs que Opera, siyouplé ?

Merci de votre aide.



Dernière édition par final-blond le 31/10/2009, 12:48, édité 4 fois

avatar
Final-Blonde
Staff du forum
Voir le profil de l'utilisateur http://sansfil.forumactif.com/
Salut à tous !


UP.

Very Happy

avatar
Shad
(Membre)
Voir le profil de l'utilisateur http://computelectro.org/
Vlà le new CSS :

Code:

 <style type="text/css">
<!--

div#menu a {
  color:#000000
}

div#menu ul {
  list-style-image:none;
  list-style-position:outside;
  list-style-type:none;left:0;
  margin-bottom:0;margin-top:0;
  padding-left:0;top:0;
}

div#menu li.sousmenu:hover {
  background: #ffb200;
}

div#menu ul li {
  float:left;margin-right:20px;
}

div#menu ul ul {
  display:none
}

div#menu li a {
  display:block;width:100%
}

div#menu ul.niveau1 li.sousmenu:hover ul.niveau2,
div#menu ul.niveau2 li.sousmenu:hover ul.niveau3 {
  display:block;
}

div#menu li a:hover {
  border-left-color: red;
}

div#menu ul ul li a:hover {
  border-left-color: #00FF00;
}

div#menu ul ul ul li a:hover {
  border-left-color: #0000FF;
}

-->
</style>
<style type="text/css">
<!--
a imguser {
border: none;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
background-color: transparent;
}

a:hover imguser {
border: none;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
background-color: transparent;
}

imguser {
border: none;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
background-color: transparent;
}

imguser:hover{
border: none;
filter:alpha(opacity=100);
-moz-opacity:1;
-khtml-opacity: 1;
opacity: 1;
background-color: transparent;
}
imguserborder:hover{
color: white; /* Dummy definition to overcome IE bug */
}

.p13 {color:#52050e; font-family: Georgia; font-size: 08pt;}
-->
</style>

Et le code html :

Code:

<div id="menu">
  <ul class="niveau1">
    <li class="sousmenu" style="">
      <imguser><img src="http://img524.imageshack.us/img524/5458/buttonpartenaires.png"/></imguser>
      <ul class="niveau2">
    <a href="http://www.sos-forum.com/" target="_blank"><img width="88" height="31" src="http://i44.servimg.com/u/f44/11/44/03/73/sf-0110.gif"/></a><br/><br/>
    <a href="http://www.annuaire-forum.fr/" target="_blank"><img width="88" height="31" src="http://www.annuaire-forum.fr/img/logo.gif"/></a>
    <a href="http://www.patmax.info" target="_blanck"><img width="88" height="31" src="http://www.patmax.info/images/bannieres/patmaxscripts.gif"/></a>
    <a href="http://calipso.exprimetoi.net/" target="_blank"><img width="88" height="31" src="http://i62.servimg.com/u/f62/11/72/76/79/cali310.gif"/></a><br/><br/>
    <a href="http://www.java.scripts-fr.com/" target="_top"><img width="88" height="31" border="0" src="http://www.java.scripts-fr.com/images/scripts-fr-bouton.gif" alt="Scripts-Fr.com : Annuaire du CGI &amp; JavaScript" title="Scripts-Fr.com : Annuaire du CGI &amp; JavaScript"/></a>
    <a href="http://fun.codes-sources.com/" target="_blank"><img width="88" height="31" src="http://img2.hostingpics.net/pics/526221cs.gif"/></a>  <a href="http://astuforum.free.fr/" target="_blank"><img width="88" height="31" src="http://astuforum.free.fr/images/pub-astu.gif"/></a>
      </ul>
    </li>
    <li class="sousmenu">
      <imguser>
    <img height="70" src="http://img37.imageshack.us/img37/6079/finalblond.gif" witdh="52"/>
      </imguser>
      <ul class="niveau2">
    <img height="70" src="http://img37.imageshack.us/img37/276/finalblond1.jpg" witdh="52"/><br/>
    <div class="p13">final-blond<br/><a href="http://www.sos-forum.com/profile.forum?mode=viewprofile&amp;u=128" target="_blank">voir profil</a><br/>
      <a href="http://www.sos-forum.com/msg.forum?mode=post&amp;u=128" target="_blank">envoyer mp</a>
    </div>
      </ul>
    </li>
    <li class="sousmenu">
      <imguser><img height="70" src="http://img3.imageshack.us/img3/2299/9841s.jpg" witdh="52"/></imguser>
      <ul class="niveau2">
    <img height="70" src="http://chezminette87.c.h.pic.centerblog.net/zx0wz68s.jpg" witdh="52"/><br/>
    <div class="p13">ProgVal<br/><a href="http://www.sos-forum.com/profile.forum?mode=viewprofile&amp;u=98" _blank="">voir profil</a><br/>
      <a href="http://www.sos-forum.com/msg.forum?mode=post&amp;u=98" target="_blank">envoyer mp</a>
    </div>
      </ul>
    </li>
  </ul>
</div>

Que du html et du Css... pas de JS... j'en ai pas eu besoin ^^

++

avatar
Final-Blonde
Staff du forum
Voir le profil de l'utilisateur http://sansfil.forumactif.com/
Wouah, merci Spiro !

Effetcivement ça marche avec FF...
Mais pas avec IE :-(

avatar
Shad
(Membre)
Voir le profil de l'utilisateur http://computelectro.org/
grr !

avatar
Final-Blonde
Staff du forum
Voir le profil de l'utilisateur http://sansfil.forumactif.com/
Déjà je prends pour FF et Opera...

IE est à la masse, on le sait...
C'est bizarre anyway alors que ça va très bien en widget et en template...

avatar
ProgVal
Staff du forum
Voir le profil de l'utilisateur http://www.adminforum.fr.cr
On a droit à une démonstration?

avatar
Final-Blonde
Staff du forum
Voir le profil de l'utilisateur http://sansfil.forumactif.com/
Hum...

La démonstration ?
Ben le problème c'est que ça ne fonctionne pas avec IE7 et ça tonque le scripte de la barre de menus... afro

Mais sinon c'est ici, le bouton "Partenaires"

Mais je ne comprends toujours pas pourquoi le CSS donne très bien avec les trois navigateurs pour les profils et le widget, mais dans la page HTML ça ne fonctionne qu'avec Opera...



Dernière édition par ProgVal le 30/6/2009, 09:49, édité 1 fois (Raison : correction de la balise du lien)

avatar
Shad
(Membre)
Voir le profil de l'utilisateur http://computelectro.org/
Salut !

Dans le fichier tuto-zc-h5.htm à la ligne 51 :

Code:
div#menu li a {
        display:block;
        width:100%;
}

Remplace "width:100%;" par "width:127px;".

Bye Wink

avatar
Final-Blonde
Staff du forum
Voir le profil de l'utilisateur http://sansfil.forumactif.com/
Oh joli !



Merci Spiro. c'est parfait (sauf avec IE où le bouton en question "Partenaires" ne s'ouvre pas du tout... :-/)

EDIT : Je "dérésous" le sujet.

La question subsiste, pourquoi le script fontionne-t-il très bien avec les 3 navigateurs dans les widgets et dans les profils des posts ???

Y a-t-il quelque chose a ajouter dans les paramètres de la page HTLM même ?




Contenu sponsorisé

Voir le sujet précédent Voir le sujet suivant Revenir en haut  Message [Page 1 sur 1]

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum

 
  •  

Créer un forum | © PunBB | Forum gratuit d'entraide | Signaler un abus | Forum gratuit