28173 sujets

CSS et mise en forme, CSS3

[Résolu] Problème d'integration avec du "overflow:hidden" s

Bonjour,

Bon, alors j'ai un problème qui est plus de l'ordre de l'intégration que de la conception !
En effet, je me suis fait une petite boîte de défilement en Javascript qui fonctionne parfaitement bien (Voir ce lien là pour vous en rendre compte.

Cependant, depuis que je l'ai ajouté à mon site, le "overflow:hidden" ne fonctionne plus sous IE et pire, c'est toute la fonction défilement qui ne marche pas sous FF (Voir ce lien là)

Je ne vous cache pas que j'y perd complètement mon latin ...

Voici des extraits de code pour que vous puissiez y voir plus clair :
index.php (du premier lien, là ou ça fonctionne)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
   <head>
      <title>Texte Defilant</title>        
      <meta name="robots" content="all">    
      <meta name="description" content="Texte Défilant">
      <meta name="keywords" content="voir,défiler,slide">                
      <meta http-equiv="Content-Type" content="text/html;charset=windows-1252;">
      <meta http-equiv="Content-Language" content="fr">  
      <script language="javascript" type="text/javascript" src="textDef.js"></script>
   </head>
	
   <body style="background-color:white;" onload="transfert()">
      <div style="border:solid #000000 1px; background-image:url(../images/tb_main.png); height:150px; width:150px; overflow:hidden; border:solid #000000 1px;">
         <div id="texteDefil" style="position:relative;">
            <?php
               define('DB_SERVER', 'localhost');
               define('DB_SERVER_USERNAME', 'root');
               define('DB_SERVER_PASSWORD', '******');
               define('DB_DATABASE', '******');				
               $connect = mysql_connect(DB_SERVER, DB_SERVER_USERNAME, DB_SERVER_PASSWORD) or die('Impossible de se connecter : ' . mysql_error());
               mysql_select_db(DB_DATABASE, $connect);		
               $sql = 'SELECT pseudo_guestbook,message_guestbook,date_guestbook FROM '.DB_DATABASE.'.guestbook;'; 					
               $req = mysql_query($sql) or die('Erreur SQL !<br>'.$sql.'<br>'.mysql_error());
               mysql_close();
               while($data = mysql_fetch_assoc($req))
               {
            ?>
            <p style="font-size:12px; font-weight:bold; margin:0px; padding-left:5px; padding-right:5px;">
               <?php echo $data['pseudo_guestbook']; ?>
            </p>
            <p style="font-size:10px;font-style:italic; margin:0px; padding-left:5px; padding-right:5px;">
               <?php echo $data['date_guestbook']; ?>
            </p>
            <p style="font-size:12px; margin:0px; padding-left:5px; padding-right:5px;">
               <?php echo $data['message_guestbook']; ?>
            </p>
            <hr/>								
            <?php
               }
            ?>
         </div>
      </div>
   </body>
</html>


Concernant maintenant l'intégration dans le site :
index.php (2eme lien - fonctionnement partiel)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
   <head>
      <title>MUSE on  http://muscle-museum.net</title>	 
      <meta name="verify-v1" content="ySvvWgFlXjbqAgh5ouFZcQLbIeFfCfR1DjKQM4/CJgI=" />
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      <meta http-equiv="Content-Language" content="fr" />
      <meta name="Description" content="Muscle-Museum.net : le nouveau fansite sur MUSE" />
      <meta name="Keywords" content="MUSE, muse, tablatures muse, paroles muse, wallpapers muse, forum muse" />	
      <script language="javascript" type="text/javascript" src="./textDef.js"></script>	
      <link rel="stylesheet" type="text/css" href="./MyCss.css" title="" />
      <!--[if lte IE 6]><link rel="stylesheet" type="text/css" href="./MyCssIE.css" title="" /><![endif]-->
   </head>
 
   <body onload="transfert()">
      <div id="conteneur">	
         <div style="clear: both; height: 10px"></div>
         <div id="haut"></div>
         <ul id="menu">
             ... UN MENU ON NE PEUT PLUS CLASSIQUE AVEC <li>..</li>
         </ul>
         <div id="centre">
         </div>				
         <div class="droite">
            <div style="">
               <div id="tribune_libre_main">
                  <div style="height:150px; width:150px; overflow:hidden;">
                     <div id="texteDefil" style="position:relative;">
                        <?php
                           define('DB_SERVER', 'localhost');
                           define('DB_SERVER_USERNAME', 'root');
                           define('DB_SERVER_PASSWORD', '******');
                           define('DB_DATABASE', '******');				
                           $connect = mysql_connect(DB_SERVER, DB_SERVER_USERNAME, DB_SERVER_PASSWORD) or die('Impossible de se connecter : ' . mysql_error());
                           mysql_select_db(DB_DATABASE, $connect);		
                           $sql = 'SELECT pseudo_guestbook,message_guestbook,date_guestbook FROM '.DB_DATABASE.'.guestbook;'; 					
                           $req = mysql_query($sql) or die('Erreur SQL !<br>'.$sql.'<br>'.mysql_error());
                           mysql_close();
                           while($data = mysql_fetch_assoc($req))
                           {
                        ?>
                        <p style="font-size:12px; font-weight:bold; margin:0px; padding-left:5px; padding-right:5px;">
                           <?php echo $data['pseudo_guestbook']; ?>
                        </p>
                        <p style="font-size:10px;font-style:italic; margin:0px; padding-left:5px; padding-right:5px;">
                           <?php echo $data['date_guestbook']; ?>
                        </p>
                        <p style="font-size:12px; margin:0px; padding-left:5px; padding-right:5px;">
                           <?php echo $data['message_guestbook']; ?>
                        </p>
                        <hr/>								
                        <?php
                           }
                        ?>
                     </div>
                  </div>					
               </div>
               <div id="tribune_libre_form">					
                  <form method="post" action="http://www.muscle-museum.net/index.php?page=form2" style="margin-left:10px; font-size:10px;">
                     <p class="p_trib_form">Pseudo :
                        <input type="text" name="pseudo" value="" style="width:100px; height:15px;" alt="" />
                     </p>
                     <p class="p_trib_form">Message :
                        <input type="text" name="message" value="" maxlength="150" style="height:15px; width:100px;" alt="" />
                     </p>
                     <div style="clear: both; height: 3px"></div>
                     <p class="p_trib_form">
                        <input type="submit" name="exe" value="Envoyer"	style="width:103px;" alt="" />
                     </p>
                  </form>
               </div>				
            </div>
            <!--[if lte IE 7]>
               <div id="div_favoris">			
                  <p class="p_favoris">						
                     <a href="javascript:window.external.addfavorite('http://www.muscle-museum.net','MUSE on Muscle-Museum.net')">Ajouter aux Favoris</a>
                  </p>
               </div>
            <![endif]-->
         </div>		
         <div style="clear: both; height: 40px"></div>
         <div class="bas">
            <p class="p_bas">
               &copy; 2007 - Muscle-Museum.net
               <br/>
               Ce site s&acute;efforce de respecter les <a href="http://validator.w3.org/check?uri=referer" target="_blank">standarts web</a>, nous vous invitons a utiliser un navigateur compatible  :  
<a href="http://www.spreadfirefox.com/?q=affiliates&amp;id=0&amp;t=219" target="_blank"><img alt="Firefox 2" title="Firefox 2" src="http://sfx-images.mozilla.org/affiliates/Buttons/firefox2/ff2b80x15.gif" style="border:0px;"/></a>
            </p>	
         </div>
         <div style="clear: both; height: 20px"></div>		
      </div>
   </body>
</html>


Et le fichier CSS auquel je fait référence dans le <head> :

html, body {
height: 100%
}
body {
margin: 0;
padding: 0;
background-image:url(images/bg.jpg);
text-align :left;
font-family:"Times New Roman", Times, serif;
font-size : 12px;
color : #000000;
}

/*  DEFINITION DIV PRINCIPALES  */
#conteneur {
text-align : left;
width : 717px ;
margin : 0 auto 0 auto; 
min-height:100%;
}
#haut {
margin:0px;
width : 717px ; 
height : 231px ;
background-image:url(images/top.jpg);
border:1px solid #000000;
} 
#centre {
float : left ;
width : 550px ;
height: 500px;
text-align : left;
}
#droite {
width: 150px;
float : right ;
}
#bas {
background-color:transparent;
float : left;
}
/* FIN DIV PRINCIPALES */

/* DIV IN "DROITE"  */
#tribune_libre_main {
width:150px;
height:150px;
margin:0px;
padding:0px;
border:#000000 solid 1px;
background-image:url('./images/tb_main.png');
float:right;
}
#tribune_libre_form {
width:130px;
height:100px;
margin-right:10px;
background-image:url('./images/tb_form.png');
float:right;
border-bottom:#000000 solid 1px;
border-left:#000000 solid 1px;
border-right:#000000 solid 1px;
}
.p_trib_form{
font-size:10px;
margin:0px;
padding:0px;
}
/* FIN DIV IN "DROITE"  */

/* DIV IN "DROITE"  */
.p_bas {
font-size:12px;
font-style:italic;
text-align:center;
}
#div_favoris {
float:right;
margin-top:20px;
margin-right:10px;
}
.p_favoris {
text-align:center;
font-size:15px;
font-weight:bold;
}
/* FIN DIV IN "DROITE"  */


Voilà, je crois que tout y est ....
Donc je sais pas, quelque chose me dit qu'en fait le overflow:hidden fonctionne mais que comme mon <div> est en couleur "transparent", et bien il agit à demi-mots !? mais je me trompe certainement Smiley ohwell

S'il vous prend l'idée de copier mon code pour le tester chez vous ... rempalcez le code PHP par du texte normal et si vous arrivez à le faire marcher, j'me prosterne Smiley decu


Merci beaucoup d'avance Smiley smile
Modifié par tcyrill2 (17 Oct 2007 - 13:35)
Salut,

un début de piste : si, comme dans ton exemple qui "marche", tu mets un doctype invalide (ou pas de doctype du tout Smiley biggol ), ton deuxième exemple fonctionne !!!

De là à penser que ton code n'est pas complètement valide (notamment le onload="transfert()"...) il n'y a qu'un pas !

A+
OKii, j'hallucine ... ça marche ...

Mais je vais pas prendre cette solution, parceque si c'est pour avoir un tas d'erreur au niveau de la validation, autant que j'utilise la balise <marquee> ^^ elle me génère qu'une erreur Smiley biggrin Smiley lol
En fait, ce que je fais, c'est justement une tentative de contournement de <marquee> pour être valide W3C

Merci quand même ^^

D'autres idées !? Smiley biggrin
Modifié par tcyrill2 (16 Oct 2007 - 21:01)
Ben comme je te dis, en gardant un doctype valide il faut revoir ton javascript !

Par exemple il me semble que :
<body onload="transfert()">
est incorrect... mais bon, comme ce n'est pas trop mon rayon je vais passer la main Smiley biggol
Modérateur
bonsoir,

Pour IE , il faut passer le conteneur en overflow aussi en position:relative; , c'est un effet secondaire de IE qui force l'affichage des element en position:relative (donc celui qui defile est passé en avant plan ) en mettant son parent aussi en position relative , alors il n'est plus visible que dans la zone de celui-ci.

Pour valider le code pour ff et les autre.

La valeur top doit etre exprimé avec une unitée . , on reprend don le px:
la ligne js a modifié :
    document.getElementById('texteDefil').style.top = y-- +'px';


2 pieges en passant sur un doctype valide Smiley smile .
Le position relative et ses effets secondaires dans IE.

Valeur css non valide si aucune unité n'est indiquée ( logique non , car pourquoi devrait t-il choisir px et pas em ou une autre unité de valeurs ?).

Pour passer ton :
   <body onload="transfert()">

dans le fichier js , l'ajot de cette ligne a la fin du fichier devrait suffire :
window.onload= transfert;


Plusieurs de tes style dans la page peuvent-etre repassé dans la feuilles de style.

GC
Hii Haa ...

Gcyrillus, je te kiffe Smiley lol

Bordel, mais tu déroule au max toi Smiley smile je fais exactement ce que tu me dis et ça marche niquel Smiley smile Smiley smile Smiley smile


Merciiiii encore
Sujet clos
Aller à