SOS-FORUM
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
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 Yoda 5/3/2017, 20:12

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

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

Le Deal du moment :
Nike : Jusqu’à 50% sur les articles de ...
Voir le deal

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]

Final-Blonde
Final-Blonde
Staff du forum
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

Final-Blonde
Final-Blonde
Staff du forum
http://sansfil.forumactif.com/
Salut à tous !


UP.

Very Happy

Shad
Shad
(Membre)
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 ^^

++

Final-Blonde
Final-Blonde
Staff du forum
http://sansfil.forumactif.com/
Wouah, merci Spiro !

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

Shad
Shad
(Membre)
http://computelectro.org/
grr !

Final-Blonde
Final-Blonde
Staff du forum
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...

ProgVal
ProgVal
Staff du forum
http://www.adminforum.fr.cr
On a droit à une démonstration?

Final-Blonde
Final-Blonde
Staff du forum
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)

Shad
Shad
(Membre)
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

Final-Blonde
Final-Blonde
Staff du forum
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 ?



Balise dans une page HTML qui n'apparait que sous Opera 104420


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 | ©phpBB | Forum gratuit d'entraide | Signaler un abus | Forum gratuit

Ne ratez plus aucun deal !
Abonnez-vous pour recevoir par notification une sélection des meilleurs deals chaque jour.
IgnorerAutoriser