Problème défilement texte page d'accueil

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Problème défilement texte page d'accueil

Message par Neffa le Dim 19 Fév - 3:40

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Opera
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Depuis que j'ai changé le code
Lien du forum : http://hbsfifa.boum.tv

Description du problème

J'ai un problème avec ma page d'accueil, se que je cherche à faire c'est mettre les derniers sujets dans l'espace "Concept", j'ai réussi, mais le seul problème c'est que ça ne défile pas, et j'aimerais que ça défile de bas en haut, avec cette vitesse 7500
Merci à mes futurs aideurs bonne journée Very Happy

Code HTML page d'accueil
Code:
<div class="cssactif_pa_main">
                                                                                                                                                                                                                                                                                                                                                           
   <h1>
                                                                                                                                                                                   Bienvenue sur le forum                                                                                                                                                                            
   </h1>
                                                                                                                                                                                                                                                                                                                                                           
   <div>
                                                                                                                                                                                                                                                                                                                                                              
      <div class="cssactif_pa_colonne colgauche">
                                                                                                                                                                                                                                                                                                                                                                           
         <div class="cssactif_pa_header">
                                                                                                                                                                                                                                                                                                                                                                                
            <h2>
                                                                                                                                                                                            Concept                                                                                                  
            </h2>
                                                                                                                                                                                                                
            <div>
                                                                                                                <br />                                                                                                
            </div>
                                                                                                                    
            <div id="recent_topics">
                 
            </div><script type="text/javascript">jQuery.get('/portal',function(data){jQuery('#recent_topics').html(jQuery(data).find('.forumline td.row1').html());});</script>                                                                                                        
         </div>
                                                                                                                                                                                                             
         <p>
                                                                                                                                                                                                                    
         </p>
                                                                                                                                                                                                                                                                                                                                                                       
      </div>
                                                                                                                                                                                                                                                                                                                                                                    
      <div class="cssactif_pa_colonne colcentre">
                                                                                                                                                                                                                                                                                                                                                                               
         <div class="cssactif_pa_header">
                                                                                                                                                                                                                                                                                                                                                                                
            <h2>
                                                                                                                                                                                            Nouveautés                                                                                                                                                                            
            </h2>
                                                                                                                                                                                                                                                                                                                                                                                
            <p>
                                                                                                                                                                                                                                                                                                                                                                         
            </p>
                                                                                                                                                                                                                                                                                                                                                                            
         </div>
                                                                                                                                                                                                                                                                                                                                                                       
         <div class="new">
                                                    <span style="font-size: 13px;"><em>11/02</em> Vos stades de foot doivent avoir le mot de passe "hbsf123".</span>                
         </div>
                                                                           
         <div class="new">
                                              <span style="font-size: 13px;"><em>11/02</em> N'oubliez pas la règle du jeu en retrait.</span><span style="font-size: 13px;"><br /></span>                                  
         </div>
                                                           
         <div class="new">
                                      <span style="font-size: 13px;"><em>13/02</em> La demande de DC à des modérateurs sur l'hôtel est sanctionné d'une exclusion définitive du jeu!</span>                          
         </div>
                                                                                                                                                                                                                                                                                                                                                                       
      </div>
                                                                                                                                                                                                                                                                                                                                                                    
      <div class="cssactif_pa_colonne coldroite">
                                                                                                                                                                                                                                                                                                                                                                                 
         <div class="cssactif_pa_header">
                                                                                                                                                                                                                                                                                                                                                                                
            <h2>
                                                                                                                                                                                            Personnages                                                                                                                                                                            
            </h2>
                                                                                                                                                                                                                                                                                                                                                                                
            <p>
                                                                                                                                                                                                                                                                                                                                                                         
            </p>
                                                                                                                                                                                                                                                                                                                                                                            
         </div>
                                                                                                                                                                                                                                                                                                                                                                           
         <div class="pers">
                                                                                                                                                                                                 <span style="font-size: 13px;"><img src="http://image.noelshack.com/fichiers/2015/25/1434321094-fekir-3.png" />       Neffa<br />        Fondateur<br />        <a "="" href="/u1">Voir la fiche</a>      </span>                                                                          
         </div>
                                                                                                                                                                   
         <div class="pers">
                                                                                       <span style="font-size: 13px;"><img src="https://imgfast.net/users/3117/45/41/56/avatars/102-3.png" /> Speakers<br />Administrateur<br /><a "="" href="http://hbsfifa.boum.tv/u1">Voir la fiche</a><br />    </span>                                                                          
         </div>
                                                                                                                                                                   
         <div class="pers">
                                <img src="https://imgfast.net/users/3117/45/41/56/avatars/1890-51.jpg" /><span style="font-size: 13px;"> Stvn<br />Administrateur<br /><a "="" href="http://hbsfifa.boum.tv/u1">Voir la fiche</a></span>                  
         </div>
                                   
         <div class="pers">
                  <img src="https://imgfast.net/users/3117/45/41/56/avatars/199-32.png" /><span style="font-size: 13px;"> Moha<br />Administrateur<br /><a "="" href="http://hbsfifa.boum.tv/t5018-fiche-moha">Voir la fiche</a></span>              <br />        
         </div>
                                                                                                                                                                                                                                   
      </div>
                                                                                                                                                                                                                                                                                                                                                                        
   </div>
                                                                                                                                                                                                                                                                                                                                                                 
</div>

Code css page d'accueil
Code:
/* PAGE D'ACCUEIL PAR ORANGE DE CSSACTIF (http://css-actif.com/)
MERCI DE NE PAS RETIRER CETTE MENTION, PAR RESPECT. */
/* Mise en forme générale */
   .cssactif_pa_main {
      width: 600px;  
      margin: 0px;
   }
  
   .cssactif_pa_main h1 { /* Titre principal (Bienvenue sur...) */
      font-family: "Courier New", Courier, monospace;   /* Police de caractère */
      text-align: center; /* Alignement du texte */
      text-transform: uppercase; /* Transformation: met le texte en majuscules */
      font-weight: normal; /* Épaisseur normale */
      letter-spacing: 16px; /* Espacemement des caractères en PX */
      font-size: 11px; /* Grosseur du texte */
      color: #ccc; /* Couleur du texte */
      text-shadow: 2px 2px 0px #FFFFFF; /* Ombre du texte */
   }
  
   .cssactif_pa_main h2 { /* Titre des colonnes (Contexte, Nouveautés etc.) */
         font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;    /* Police de caractère */
      font-weight: normal; /* Épaisseur normale */
      color: #FFFFFF; /* Couleur du texte */
      text-transform: uppercase; /* Transformation: met le texte en majuscules */
      text-shadow: 1px 1px 1px #000000; /* Ombre du texte */
      font-size: 18px; /* Grosseur du texte */
      margin:0;
   }
  
   .cssactif_pa_colonne { /* Style général des colonnes */
      float: left; /* Place les colonnes un à côté de l'autre */
      width: 33%; /* Donne la grandeur des colonnes */
      background-color: #fafafa; /* Couleur de fond */
      height: 315px; /* Hauteur des colonnes: doit être fixe */
      color: #777777; /* Couleur du texte */

      opacity: 1; /* Opacité des colonnes */
      
      /* Transition */
      -webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;

/*Ombre porté */
-webkit-box-shadow: 0px 0px 1px 0px #000;
box-shadow: 0px 0px 1px 0px #000;

  
   }
  
   .cssactif_pa_colonne p { /* Paragraphe des colonnes */
   padding: 0 10px; /* Padding */
   text-indent: 10px; /* Alinéa */
   text-align: justify;   /* Alignement du texte */
   }
   .cssactif_pa_colonne:hover { /* Colonne au survol */
   /* Effet de grossissement */
      -moz-transform: scale(1.05) translate(0px, -20px) ;
-webkit-transform: scale(1.05) translate(0px, -20px) ;
-o-transform: scale(1.05) translate(0px, -20px) ;
-ms-transform: scale(1.05) translate(0px, -20px);
transform: scale(1.05) translate(0px, -20px) ;

opacity: 1; /* Opacité */

/* Nouvelle ombre portée */
-webkit-box-shadow: 0px 5px 10px 0px #CCCCCC;
box-shadow: 0px 5px 10px 0px #CCCCCC;
z-index: 999;

   }
  
.cssactif_pa_header { /* Style commun des header de couleur */
   padding: 10px;
   height: 25px;
}

.cssactif_pa_header p { /* Style du description dans les headers */
margin: 5px; /* Marge */
padding: 0; /* Padding */
color: #FFFFFF; /* Couleur du texte */
text-shadow: 1px 1px 1px #000000;   /* Ombre portée */
font-style: italic; /* Style italic */
opacity: 0.8; /* Opacity du texte */

}
.colgauche .cssactif_pa_header {background-color: #47898F;} /* Colonne de gauche, couleur du header */
.colcentre .cssactif_pa_header {background-color: #47898F;}/* Colonne du centre, couleur du header */
.coldroite .cssactif_pa_header {background-color: #47898F;   } /* Colonne de droite, couleur du header */
/* Contenu des colonnes */

.new {
   margin: 0px 10px 5px 10px; /* Marge Haut Droit Bas Gauche */
   padding: 5px; /* Padding */
   border-bottom: 1px solid #4E9C57; /* Bordure du séparateur */
  
   text-align: justify; /* Alignement du texte */
}

.new em { /* Dates */
   color: #A7D94A;  /* Couleur du texte */
   text-transform: uppercase; /* Transformation du texte en majuscule */
   font-style: normal; /* Enlève le italic par défaut de la balise em */
   font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; /* Police de caractère */
}

.new em:after {
   content: " ►";   /* Ajoute la flèche après les dates */
}

.pers { /* Cadre des personnages */
 border: 1px solid #ccc;   /* Bordure des personnages */
 margin: 10px; /* marge externe */
 
 /* Arrondissement des bordures */
 -webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;


padding: 3px; /* Marge interne */
text-align: center; /* Alignement du texte */
}

.pers img { /* Image des personnages */
 float: left; /* Place à gauche du texte */
 width: 50px; /* Grandeur de l'image */
 height: 50px;    /* Grandeur de l'image */
 border: 3px solid #47898F; /* Bordure de l'image */
 
 /* Arrondissement des bordures */
  -webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;    

/* Transformation */
 -moz-transform: rotate(-12deg) translate(0px, -5px) ;
-webkit-transform:  rotate(-12deg) translate(0px, -5px) ;
-o-transform: rotate(-12deg) translate(0px, -5px) ;
-ms-transform:  rotate(-12deg) translate(0px,-5px) ;
transform:  rotate(-12deg) translate(0px, -5px);
}

.pers:first-line { /* Première ligne:contient le nom du personnage */
 color: #A7D94A;/* Couleur du texte */
 font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; /* Police de caractère */
 text-transform: uppercase; /* Transformation du texte */
}

Code qui sert à modifier le visuel
Code:
/*Sujet récent*/
      
        #recent_topics {
          background-color: #f0f0f0;
          font-family: 'Lato', serif;
        font-size: 13px;
        }


Dernière édition par Neffa le Mer 22 Fév - 19:52, édité 1 fois

Neffa
**

Messages : 54
Inscrit(e) le : 31/03/2013

http://hbsfifa.boum.tv
Neffa a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème défilement texte page d'accueil

Message par Neffa le Dim 19 Fév - 16:12

J'ai trouvé une idée où les placés je pense que je vais réussir mais je voudrais savoir le code pour les faire défiler comme dit en haut

Neffa
**

Messages : 54
Inscrit(e) le : 31/03/2013

http://hbsfifa.boum.tv
Neffa a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème défilement texte page d'accueil

Message par tupac le Lun 20 Fév - 1:47

Bonsoir Neffa,

Je vous propose de créer une page html pour placer vos derniers sujets.

Donc direction votre panneau d'administration puis Modules / Gestion des pages html / Cliquer sur Création en mode avancé / En titre par exemple mettre: Derniers Sujets / Coché Non et Non / Placer le code ci-dessous en introduisant vos derniers sujets a l'endroit indiqué en bas de pag puis validé.

Page html.:
Code:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
<style type="text/css">
#newsbox { width: 180px; height: 255px; }
#newslist { position: absolute; padding: 5px;  }
</style>

<script language="javascript" type="text/javascript">
var pos;
var speed = 0.5;
var pos_initial;
function startAnim() {
   var e = document.getElementById('newsbox');
   pos_initial = e.clientHeight + 10;
   pos = pos_initial;
   setInterval('anim()', 20);
}
function anim() {
   var e = document.getElementById('newslist');
   e.style.visibility = 'visible';
   e.style.top = Math.floor(pos) + 'px';
   pos = pos - speed;
   if(pos < -e.clientHeight) pos = pos_initial;
}
window.onload = function() {
  var e = document.getElementById('newsbox');
  e.onmouseover = function() { speed = 0; };
  e.onmouseout = function() { speed = 1; };
  startAnim()
};
</script>
</head>
 
<body>
<div id='newsbox'>
<div id='newslist'>
Vos derniers sujets ici
</div>
</div>
</body>
</html>

Après avoir cliqué sur valider cliquez en haut sur "Cliquez ici pour revenir à l'Administration des pages HTML" puis copier l'adresse de votre page et placez la dans l'iframe , iframe que j'ai déjà placé dans votre code de la page d'accueil (ci-dessous).
Code page d'accueil.:
Code:
<div class="cssactif_pa_main">
                                                                                                                                                                                                                                                                                                                                                                                                      
   <h1>
                                                                                                                                                                                                          Bienvenue sur le forum                                                                                                                                                                                                 
   </h1>
                                                                                                                                                                                                                                                                                                                                                                                                      
   <div>
                                                                                                                                                                                                                                                                                                                                                                                                               
      <div class="cssactif_pa_colonne colgauche">
                                                                                                                                                                                                                                                                                                                                                                                                                                  
         <div class="cssactif_pa_header">
                                                                                                                                                                                                                                                                                                                                                                                                                                             
            <h2>
                                                                                                                                                                                                                             Concept                                                                                                                                 
            </h2>
                                                                                                                                                                                                                                                                           
<div style=" margin-top: 15px; height: 255px; widht: 180px;">

<iframe frameborder="0" style="height: 255px;width: 180px;" scrolling="no" src="adresse de la page html ici"></iframe>   
                                                                                                                     
</div>
                                                                                                                                                                                 
            <div id="recent_topics">
                                                                                  
            </div><script type="text/javascript">jQuery.get('/portal',function(data){jQuery('#recent_topics').html(jQuery(data).find('.forumline td.row1').html());});</script>                                                                                                                                   
         </div>
                                                                                                                                                                                                                                                                    
         <p>
                                                                                                                                                                                                                                                                               
         </p>
                                                                                                                                                                                                                                                                                                                                                                                                                            
      </div>
                                                                                                                                                                                                                                                                                                                                                                                                                     
      <div class="cssactif_pa_colonne colcentre">
                                                                                                                                                                                                                                                                                                                                                                                                                                      
         <div class="cssactif_pa_header">
                                                                                                                                                                                                                                                                                                                                                                                                                                             
            <h2>
                                                                                                                                                                                                                             Nouveautés                                                                                                                                                                                                           
            </h2>
                                                                                                                                                                                                                                                                                                                                                                                                                                             
            <p>
                                                                                                                                                                                                                                                                                                                                                                                                                                          
            </p>
                                                                                                                                                                                                                                                                                                                                                                                                                                       
         </div>
                                                                                                                                                                                                                                                                                                                                                                                                                              
         <div class="new">
                                                                                  <span style="font-size: 13px;"><em>11/02</em> Vos stades de foot doivent avoir le mot de passe "hbsf123".</span>                                           
         </div>
                                                                                                                                  
         <div class="new">
                                                                            <span style="font-size: 13px;"><em>11/02</em> N'oubliez pas la règle du jeu en retrait.</span><span style="font-size: 13px;"><br /></span>                                                             
         </div>
                                                                                                                  
         <div class="new">
                                                                    <span style="font-size: 13px;"><em>13/02</em> La demande de DC à des modérateurs sur l'hôtel est sanctionné d'une exclusion définitive du jeu!</span>                                                     
         </div>
                                                                                                                                                                                                                                                                                                                                                                                                                            
      </div>
                                                                                                                                                                                                                                                                                                                                                                                                                     
      <div class="cssactif_pa_colonne coldroite">
                                                                                                                                                                                                                                                                                                                                                                                                                                        
         <div class="cssactif_pa_header">
                                                                                                                                                                                                                                                                                                                                                                                                                                             
            <h2>
                                                                                                                                                                                                                             Personnages                                                                                                                                                                                                           
            </h2>
                                                                                                                                                                                                                                                                                                                                                                                                                                             
            <p>
                                                                                                                                                                                                                                                                                                                                                                                                                                          
            </p>
                                                                                                                                                                                                                                                                                                                                                                                                                                       
         </div>
                                                                                                                                                                                                                                                                                                                                                                                                                                  
         <div class="pers">
                                                                                                                                                                                                                              <span style="font-size: 13px;"><img src="http://image.noelshack.com/fichiers/2015/25/1434321094-fekir-3.png" />      Neffa<br />        Fondateur<br />        <a "="" href="/u1">Voir la fiche</a>      </span>                                                                                                     
         </div>
                                                                                                                                                                                                                          
         <div class="pers">
                                                                                                                    <span style="font-size: 13px;"><img src="https://imgfast.net/users/3117/45/41/56/avatars/102-3.png" /> Speakers<br />Administrateur<br /><a "="" href="http://hbsfifa.boum.tv/u1">Voir la fiche</a><br />    </span>                                                                                                     
         </div>
                                                                                                                                                                                                                          
         <div class="pers">
                                                              <img src="https://imgfast.net/users/3117/45/41/56/avatars/1890-51.jpg" /><span style="font-size: 13px;"> Stvn<br />Administrateur<br /><a "="" href="http://hbsfifa.boum.tv/u1">Voir la fiche</a></span>                                             
         </div>
                                                                                          
         <div class="pers">
                                                <img src="https://imgfast.net/users/3117/45/41/56/avatars/199-32.png" /><span style="font-size: 13px;"> Moha<br />Administrateur<br /><a "="" href="http://hbsfifa.boum.tv/t5018-fiche-moha">Voir la fiche</a></span>              <br />                                   
         </div>
                                                                                                                                                                                                                                                                                        
      </div>
                                                                                                                                                                                                                                                                                                                                                                                                                       
   </div>
                                                                                                                                                                                                                                                                                                                                                                                                          
</div>

avatar

tupac
Membre actif

Masculin
Messages : 2492
Inscrit(e) le : 13/10/2010

tupac a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème défilement texte page d'accueil

Message par Neffa le Lun 20 Fév - 16:48

Bonjour je viens d'essayer et je crois avoir mal comprit vos consignes à mettre dans la Page HTML
Voici se que j'ai mis
Code:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />  <style type="text/css">
#newsbox { width: 180px; height: 255px; }
#newslist { position: absolute; padding: 5px;  }
</style>  <script language="javascript" type="text/javascript">
var pos;
var speed = 0.5;
var pos_initial;
function startAnim() {
  var e = document.getElementById('newsbox');
  pos_initial = e.clientHeight + 10;
  pos = pos_initial;
  setInterval('anim()', 20);
}
function anim() {
  var e = document.getElementById('newslist');
  e.style.visibility = 'visible';
  e.style.top = Math.floor(pos) + 'px';
  pos = pos - speed;
  if(pos < -e.clientHeight) pos = pos_initial;
}
window.onload = function() {
  var e = document.getElementById('newsbox');
  e.onmouseover = function() { speed = 0; };
  e.onmouseout = function() { speed = 1; };
  startAnim()
};
</script> 
<div id="newsbox">
   
   <div id="newslist">
      
      <div style=" margin-top: 15px; height: 255px; widht: 180px;">
          <iframe src="http://hbsfifa.boum.tv/h2-derniers-sujets" scrolling="no" style="height: 255px;width: 180px;" frameborder="0"></iframe>                                                                                                                         
      </div>
                                                                                                                                                                                                   
      <div id="recent_topics">
                                                                                                        
      </div><script type="text/javascript">jQuery.get('/portal',function(data){jQuery('#recent_topics').html(jQuery(data).find('.forumline td.row1').html());});</script> 
   </div>
</div>

Et voilà se que ça me donne

Neffa
**

Messages : 54
Inscrit(e) le : 31/03/2013

http://hbsfifa.boum.tv
Neffa a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème défilement texte page d'accueil

Message par tupac le Lun 20 Fév - 17:50

Bonjour Neffa,

On va laisser tomber la création de page html et faire plus simple c'est a dire laisser tomber le javascript pour le défilement et prendre une balise marquee.

Code html.:
Votre css.:
Ca devrait fonctionner maintenant.
avatar

tupac
Membre actif

Masculin
Messages : 2492
Inscrit(e) le : 13/10/2010

tupac a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème défilement texte page d'accueil

Message par Neffa le Lun 20 Fév - 18:45

Toujours pas, même résultat, les derniers sujets sont trop descendus et ne défilent pas  silent


Sinon j'ai une sorte de menu défilant à gauche de mon forum qui me sert pas, peut-être que c'est plus facile de les mettre dedans plutôt que dans la page d'accueil?

Neffa
**

Messages : 54
Inscrit(e) le : 31/03/2013

http://hbsfifa.boum.tv
Neffa a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème défilement texte page d'accueil

Message par tupac le Lun 20 Fév - 21:46

Le code fonctionne pourtant très bien chez moi.


De quel tuto vous vous êtes servi pour le script des derniers sujets et pouvez-vous me donner le script svp.
avatar

tupac
Membre actif

Masculin
Messages : 2492
Inscrit(e) le : 13/10/2010

tupac a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème défilement texte page d'accueil

Message par Neffa le Lun 20 Fév - 22:37

Bonsoir j'ai du faire une erreur ::betise:: , je vais réessayer de suite
Voici de quoi je me suis servit http://forum.forumactif.com/t377690-afficher-les-derniers-sujets-du-forum-sur-la-page-d-accueil
EDIT: ça ne marche toujours pas je viens de réessayer scratch

Neffa
**

Messages : 54
Inscrit(e) le : 31/03/2013

http://hbsfifa.boum.tv
Neffa a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème défilement texte page d'accueil

Message par tupac le Mar 21 Fév - 17:23

Bonjour,

Ok je vois, dans votre code se trouve par deux fois la balise marque vous avez laissé l'ancien code lors de votre première tentative.

Donnez moi le code au complet svp.
avatar

tupac
Membre actif

Masculin
Messages : 2492
Inscrit(e) le : 13/10/2010

tupac a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème défilement texte page d'accueil

Message par Neffa le Mar 21 Fév - 18:28

J'ai créer un forum de test afin d'essayer avec les codes que vous m'avez dit ça ne marche pas  :/
Code CSS
Code:
/* PAGE D'ACCUEIL PAR ORANGE DE CSSACTIF (http://css-actif.com/)
MERCI DE NE PAS RETIRER CETTE MENTION, PAR RESPECT. */
/* Mise en forme générale */
.cssactif_pa_main {
width: 600px;
margin: 0px;
}

.cssactif_pa_main h1 { /* Titre principal (Bienvenue sur...) */
font-family: "Courier New", Courier, monospace; /* Police de caractère */
text-align: center; /* Alignement du texte */
text-transform: uppercase; /* Transformation: met le texte en majuscules */
font-weight: normal; /* Épaisseur normale */
letter-spacing: 16px; /* Espacemement des caractères en PX */
font-size: 11px; /* Grosseur du texte */
color: #ccc; /* Couleur du texte */
text-shadow: 2px 2px 0px #FFFFFF; /* Ombre du texte */
}

.cssactif_pa_main h2 { /* Titre des colonnes (Contexte, Nouveautés etc.) */
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; /* Police de caractère */
font-weight: normal; /* Épaisseur normale */
color: #FFFFFF; /* Couleur du texte */
text-transform: uppercase; /* Transformation: met le texte en majuscules */
text-shadow: 1px 1px 1px #000000; /* Ombre du texte */
font-size: 18px; /* Grosseur du texte */
margin:0;
}

.cssactif_pa_colonne { /* Style général des colonnes */
float: left; /* Place les colonnes un à côté de l'autre */
width: 33%; /* Donne la grandeur des colonnes */
background-color: #fafafa; /* Couleur de fond */
height: 315px; /* Hauteur des colonnes: doit être fixe */
color: #777777; /* Couleur du texte */

opacity: 1; /* Opacité des colonnes */

/* Transition */
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;

/*Ombre porté */
-webkit-box-shadow: 0px 0px 1px 0px #000;
box-shadow: 0px 0px 1px 0px #000;
}

.cssactif_pa_colonne p { /* Paragraphe des colonnes */
padding: 0 10px; /* Padding */
text-indent: 10px; /* Alinéa */
text-align: justify; /* Alignement du texte */
}
.cssactif_pa_colonne:hover { /* Colonne au survol */
/* Effet de grossissement */
-moz-transform: scale(1.05) translate(0px, -20px) ;
-webkit-transform: scale(1.05) translate(0px, -20px) ;
-o-transform: scale(1.05) translate(0px, -20px) ;
-ms-transform: scale(1.05) translate(0px, -20px);
transform: scale(1.05) translate(0px, -20px) ;
opacity: 1; /* Opacité */
/* Nouvelle ombre portée */
-webkit-box-shadow: 0px 5px 10px 0px #CCCCCC;
box-shadow: 0px 5px 10px 0px #CCCCCC;
z-index: 999;
}

.cssactif_pa_header { /* Style commun des header de couleur */
padding: 10px;
height: 25px;
}

.cssactif_pa_header p { /* Style du description dans les headers */
margin: 5px; /* Marge */
padding: 0; /* Padding */
color: #FFFFFF; /* Couleur du texte */
text-shadow: 1px 1px 1px #000000; /* Ombre portée */
font-style: italic; /* Style italic */
opacity: 0.8; /* Opacity du texte */
}

.colgauche .cssactif_pa_header {background-color: #47898F;} /* Colonne de gauche, couleur du header */
.colcentre .cssactif_pa_header {background-color: #47898F;}/* Colonne du centre, couleur du header */
.coldroite .cssactif_pa_header {background-color: #47898F; } /* Colonne de droite, couleur du header */
/* Contenu des colonnes */

.new {
margin: 0px 10px 5px 10px; /* Marge Haut Droit Bas Gauche */
padding: 5px; /* Padding */
border-bottom: 1px solid #4E9C57; /* Bordure du séparateur */
text-align: justify; /* Alignement du texte */
}

.new em { /* Dates */
color: #A7D94A; /* Couleur du texte */
text-transform: uppercase; /* Transformation du texte en majuscule */
font-style: normal; /* Enlève le italic par défaut de la balise em */
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; /* Police de caractère */
}

.new em:after {
content: " ►"; /* Ajoute la flèche après les dates */
}

.pers { /* Cadre des personnages */
border: 1px solid #ccc; /* Bordure des personnages */
margin: 10px; /* marge externe */

/* Arrondissement des bordures */
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding: 3px; /* Marge interne */
text-align: center; /* Alignement du texte */
}

.pers img { /* Image des personnages */
float: left; /* Place à gauche du texte */
width: 50px; /* Grandeur de l'image */
height: 50px; /* Grandeur de l'image */
border: 3px solid #47898F; /* Bordure de l'image */

/* Arrondissement des bordures */
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

/* Transformation */
-moz-transform: rotate(-12deg) translate(0px, -5px) ;
-webkit-transform: rotate(-12deg) translate(0px, -5px) ;
-o-transform: rotate(-12deg) translate(0px, -5px) ;
-ms-transform: rotate(-12deg) translate(0px,-5px) ;
transform: rotate(-12deg) translate(0px, -5px);
}

.pers:first-line { /* Première ligne:contient le nom du personnage */
color: #A7D94A;/* Couleur du texte */
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; /* Police de caractère */
text-transform: uppercase; /* Transformation du texte */
}

Code HTML
Code:
<div class="cssactif_pa_main">
   
   <h1>
      Bienvenue sur le forum  
   </h1>
   <div>
      <div class="cssactif_pa_colonne colgauche">
         <div class="cssactif_pa_header">
            
            <h2>
               Concept  
            </h2>
            <div style=" margin-top: 15px; height: 255px; widht: 180px;">
               <!-- Sujets récents ici -->
               <marquee id="recent-topics" behavior="scroll" direction="up" scrollamount="2" onmouseover="this.stop()" onmouseout="this.start()" style="height: 255px;">
               </marquee>
                <script type="text/javascript">
jQuery.get('/portal.forum?pid=1',function(data){jQuery('#recent-topics').html(jQuery(data).find('#comments_scroll_div').html());});
</script>
               <!-- Fin sujets récents ici -->
            </div>
            <div id="recent_topics">
               
            </div><script type="text/javascript">jQuery.get('/portal',function(data){jQuery('#recent_topics').html(jQuery(data).find('.forumline td.row1').html());});</script>
         </div>
         
         <p>
            
         </p>
         
      </div>
      <div class="cssactif_pa_colonne colcentre">
         <div class="cssactif_pa_header">
            
            <h2>
               Nouveautés  
            </h2>
            
            <p>
               
            </p>
            
         </div>
         <div class="new"><span style="font-size: 13px;"><em>11/02</em> Vos stades de foot doivent avoir le mot de passe "hbsf123". </span>
         </div>
         <div class="new"><span style="font-size: 13px;"><em>11/02</em> N'oubliez pas la règle du jeu en retrait.</span><span style="font-size: 13px;"><br /></span>
         </div>
         <div class="new"><span style="font-size: 13px;"><em>13/02</em> La demande de DC à des modérateurs sur l'hôtel est sanctionné d'une exclusion définitive du jeu! </span>
         </div>
         
      </div>
      <div class="cssactif_pa_colonne coldroite">
         <div class="cssactif_pa_header">
            
            <h2>
               Personnages  
            </h2>
            
            <p>
               
            </p>
            
         </div>
         <div class="pers"><span style="font-size: 13px;"><img src="http://image.noelshack.com/fichiers/2015/25/1434321094-fekir-3.png" /> Neffa<br /> Fondateur<br /> <a href="/u1" "="">Voir la fiche</a> </span>
         </div>
         <div class="pers"><span style="font-size: 13px;"><img src="https://imgfast.net/users/3117/45/41/56/avatars/102-3.png" /> Speakers<br />Administrateur<br /><a href="http://hbsfifa.boum.tv/u1" "="">Voir la fiche</a><br /> </span>
         </div>
         <div class="pers"><img src="https://imgfast.net/users/3117/45/41/56/avatars/1890-51.jpg" /><span style="font-size: 13px;"> Stvn<br />Administrateur<br /><a href="http://hbsfifa.boum.tv/u1" "="">Voir la fiche</a></span>
         </div>
         <div class="pers"><img src="https://imgfast.net/users/3117/45/41/56/avatars/199-32.png" /><span style="font-size: 13px;"> Moha<br />Administrateur<br /><a href="http://hbsfifa.boum.tv/t5018-fiche-moha" "="">Voir la fiche</a></span> <br />
         </div>
         
      </div>
      
   </div>
   
</div>


http://hbsfifa.foroactivo.com/forum
Voici le forum ou j'ai testé pour voir si ça venait pas d'une erreur dans mes templates ou autre

Neffa
**

Messages : 54
Inscrit(e) le : 31/03/2013

http://hbsfifa.boum.tv
Neffa a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème défilement texte page d'accueil

Message par Neffa le Mer 22 Fév - 0:55

C'est bon j'ai réussi à bien les mettre, mais manque juste le marquee pour faire défiler je l'ai enlevé vu qu'il marchait pas et je sais pas où il se met, voilà le code HTML de la page d'accueil actuel
Code:
<div class="cssactif_pa_main">
                        
   <h1>
                Bienvenue sur le forum           
   </h1>
                      
   <div>
                         
      <div class="cssactif_pa_colonne colgauche">
                            
         <div class="cssactif_pa_header">
                                 
            <h2>
                         Concept           
            </h2>
                               
            <div style=" margin-top: 15px; height: 255px; widht: 180px;">
                                                                          
               <div id="recent_topics">
                                       
               </div><script type="text/javascript">jQuery.get('/portal',function(data){jQuery('#recent_topics').html(jQuery(data).find('.forumline td.row1').html());});</script>           
            </div>
             
         </div>
                              
         <p>
                                 
         </p>
                              
      </div>
                         
      <div class="cssactif_pa_colonne colcentre">
                            
         <div class="cssactif_pa_header">
                                 
            <h2>
                         Nouveautés           
            </h2>
                                 
            <p>
                                    
            </p>
                                 
         </div>
                            
         <div class="new">
                      <span style="font-size: 13px;"><em>11/02</em> Vos stades de foot doivent avoir le mot de passe "hbsf123". </span>           
         </div>
                            
         <div class="new">
                      <span style="font-size: 13px;"><em>11/02</em> N'oubliez pas la règle du jeu en retrait.</span><span style="font-size: 13px;"><br /></span>           
         </div>
                            
         <div class="new">
                      <span style="font-size: 13px;"><em>13/02</em> La demande de DC à des modérateurs sur l'hôtel est sanctionné d'une exclusion définitive du jeu! </span>           
         </div>
                              
      </div>
                         
      <div class="cssactif_pa_colonne coldroite">
                            
         <div class="cssactif_pa_header">
                                 
            <h2>
                         Personnages           
            </h2>
                                 
            <p>
                                    
            </p>
                                 
         </div>
                            
         <div class="pers">
                      <span style="font-size: 13px;"><img src="http://image.noelshack.com/fichiers/2015/25/1434321094-fekir-3.png" /> Neffa<br /> Fondateur<br /> <a "="" href="/u1">Voir la fiche</a> </span>           
         </div>
                            
         <div class="pers">
                      <span style="font-size: 13px;"><img src="https://imgfast.net/users/3117/45/41/56/avatars/102-3.png" /> Speakers<br />Administrateur<br /><a "="" href="http://hbsfifa.boum.tv/u1">Voir la fiche</a><br /> </span>           
         </div>
                            
         <div class="pers">
                      <img src="https://imgfast.net/users/3117/45/41/56/avatars/1890-51.jpg" /><span style="font-size: 13px;"> Stvn<br />Administrateur<br /><a "="" href="http://hbsfifa.boum.tv/u1">Voir la fiche</a></span>           
         </div>
                            
         <div class="pers">
                      <img src="https://imgfast.net/users/3117/45/41/56/avatars/199-32.png" /><span style="font-size: 13px;"> Moha<br />Administrateur<br /><a "="" href="http://hbsfifa.boum.tv/t5018-fiche-moha">Voir la fiche</a></span> <br />           
         </div>
                              
      </div>
                           
   </div>
                        
</div>

Neffa
**

Messages : 54
Inscrit(e) le : 31/03/2013

http://hbsfifa.boum.tv
Neffa a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème défilement texte page d'accueil

Message par tupac le Mer 22 Fév - 10:55

Bonjour,

On va refaire un dernier test avec la balise marquee que j'ai légèrement modifié.
Placez le code telle qu'il est sans rien toucher dans votre page d'acueil.

Botre code.:
Code:
<div class="cssactif_pa_main">
                                        
   <h1>
                          Bienvenue sur le forum                   
   </h1>
                                      
   <div>
                                               
      <div class="cssactif_pa_colonne colgauche">
                                                        
         <div class="cssactif_pa_header">
                                                                   
            <h2>
                                             Concept                           
            </h2>
                                                                 
            <div style=" margin-top: 15px; height: 255px; widht: 180px;">
               
               <marquee style="height: 255px;" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2" direction="up" behavior="scroll">
                                                                                                                 
                  <div id="recent-topics">
                     <script type="text/javascript">
jQuery('#recent-topics').load('/portal.forum?pid=1 #comments_scroll_div')
</script>
                  </div>
                  
               </marquee>
                                            
            </div>
                                           
         </div>
                                                          
         <p>
                                                               
         </p>
                                                      
      </div>
                                               
      <div class="cssactif_pa_colonne colcentre">
                                                        
         <div class="cssactif_pa_header">
                                                                   
            <h2>
                                             Nouveautés                           
            </h2>
                                                                   
            <p>
                                                                        
            </p>
                                                               
         </div>
                                                        
         <div class="new">
                                      <span style="font-size: 13px;"><em>11/02</em> Vos stades de foot doivent avoir le mot de passe "hbsf123". </span>                       
         </div>
                                                        
         <div class="new">
                                      <span style="font-size: 13px;"><em>11/02</em> N'oubliez pas la règle du jeu en retrait.</span><span style="font-size: 13px;"><br /></span>                       
         </div>
                                                        
         <div class="new">
                                      <span style="font-size: 13px;"><em>13/02</em> La demande de DC à des modérateurs sur l'hôtel est sanctionné d'une exclusion définitive du jeu! </span>                       
         </div>
                                                      
      </div>
                                               
      <div class="cssactif_pa_colonne coldroite">
                                                        
         <div class="cssactif_pa_header">
                                                                   
            <h2>
                                             Personnages                           
            </h2>
                                                                   
            <p>
                                                                        
            </p>
                                                               
         </div>
                                                        
         <div class="pers">
                                      <span style="font-size: 13px;"><img src="http://image.noelshack.com/fichiers/2015/25/1434321094-fekir-3.png" /> Neffa<br /> Fondateur<br /> <a "="" href="/u1">Voir la fiche</a> </span>                       
         </div>
                                                        
         <div class="pers">
                                      <span style="font-size: 13px;"><img src="https://imgfast.net/users/3117/45/41/56/avatars/102-3.png" /> Speakers<br />Administrateur<br /><a "="" href="http://hbsfifa.boum.tv/u1">Voir la fiche</a><br /> </span>                       
         </div>
                                                        
         <div class="pers">
                                      <img src="https://imgfast.net/users/3117/45/41/56/avatars/1890-51.jpg" /><span style="font-size: 13px;"> Stvn<br />Administrateur<br /><a "="" href="http://hbsfifa.boum.tv/u1">Voir la fiche</a></span>                       
         </div>
                                                        
         <div class="pers">
                                      <img src="https://imgfast.net/users/3117/45/41/56/avatars/199-32.png" /><span style="font-size: 13px;"> Moha<br />Administrateur<br /><a "="" href="http://hbsfifa.boum.tv/t5018-fiche-moha">Voir la fiche</a></span> <br />                       
         </div>
                                                      
      </div>
                                             
   </div>
                                    
</div>

.

avatar

tupac
Membre actif

Masculin
Messages : 2492
Inscrit(e) le : 13/10/2010

tupac a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème défilement texte page d'accueil

Message par Neffa le Mer 22 Fév - 15:36

Bonsoir, toujours pas, cette fois ci ça n'affiche plus rien




EDIT: Est-ce possible de les intégrer dans le fond du forum? (position fixe, donc sur toutes les pages) via les templates + css même s'ils ne défilent pas, pas grave?

EDIT2: C'est bon j'ai trouvé une autre solution! merci de ton aide   victoire

résolu

Neffa
**

Messages : 54
Inscrit(e) le : 31/03/2013

http://hbsfifa.boum.tv
Neffa a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


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