Clignotement news.

[Oz-Chan]

Bonsoir,
Je viens vous demander un peu d'aide car du jour au lendemain, un petit truc à cesser de fonctionner sur mon forum. Il s'agit de cet endroit.

La partie rouge est censée clignoter pour y montrer les news important et cela à cessé sur mes deux forums ( ayant le même codage ) d'un seul coup ! Est-ce que vous pouvez m'aider à le remettre s'il vous plait?
Voici mon CSS et la petite partie de HTML.

CSS

Code:

       }
/* PA */
/* Les propriétés étranges de Lyloox, DEBUT */

.staff {
 display: inline-block;
}
.staff ul { font:.75em "lucida grande", arial, sans-serif; overflow:auto; background:#eee; list-style:none; }  
.staff li { width:100px; height:100px; position:relative;z-index:5; vertical-align:middle; -moz-border-radius:5px; padding:0px; overflow:hidden; float:left; }  
.staff li:hover { position:relative; z-index:10; box-shadow: 0px 0px 2px #000; -htm-transform:all;-htm-transition:1s;-moz-transform:all;-moz-transition:1s;-o-transform:all;}
.staff li:hover p { margin-top:-85px; }  
.staff strong { display:block; letter:spacing:2px; color:#EE6E6E; }
.staff a {color:#EE6E6E; font-weight:500; }

.staff div {
  display: inline-block;
}


/* Onglet 3 */

#onglet3 .admins img { border-radius:5%; border: 2px solid orange; margin:3px; }
#onglet3 h1, #onglet3 h2{ font-size:15px;font-family:Time News Roman,serif; font-style:italic; color:white; text-shadow: 0px 0px 3px #A40000;
-htm-transform:all;-htm-transition:1s;-o-transform:all;
 -o-transition:1s;-webkit-transform:all;-webkit-transition:1s; }
#onglet3 h1:hover, #onglet3 h2:hover { color:#A40000; text-shadow: -5px -3px 2px #870000, 16px 8px #FFA6A6;
-htm-transform:all;-htm-transition:1s;-o-transform:all;
 -o-transition:1s;-webkit-transform:all;-webkit-transition:1s;}
#onglet3 { margin:auto;}
#onglet3 .admins {display:block; text-align:center; }

#onglet3 .admins img {margin-top: 0px; margin-left: 0px;}

#onglet3 .coupsdecoeur
{ margin-left:170px; text-align:center; width:220px; padding:15px; border: 2px dotted #00003B; border-radius:30px;  
  border-top: 3px solid #FFEF9C; border-right: 1px solid #00003B; border-bottom: 3px solid #00003B;
 border-left: 1px solid #FFEF9C;}
#onglet3 .credits {
clear: none;
margin: -292px 0 0 430px;
text-align: center;
width: 300px;
height: 256px;
background-color: whiteSmoke;
padding: 15px;
border: 3px solid #FFEF9C;
font-size: 11px;
}
#onglet3 .modos {text-align:center; display:block;}


/* Autres machins */

.onglet3 img { padding:2px; border: 1px solid; border-radius:7px; text-align:center; background-color:#EEEEEE; opacity:0.8; }
.onglet3 img {margin:6px; border: 1px solid; border-radius:7px; }
.onglet3:hover {opacity:1;}

.infobulle {position:relative;text-decoration:none; display:inline;}
.infobulle span {display:none; text-align:justify}
.infobulle:hover{background:none;cursor:help;z-index:999}
.infobulle:hover span{border-radius:5px;background-color:#EEEEEE; border-left: 3px solid #EC5E61; border-right: 3px solid #EC5E61;
  display:inline;left:50px;margin-right:5px;padding:8px;position:absolute;top:5px;white-space:normal;width:200px}

.onglets { text-align:center; margin:auto; display:block;cursor:pointer;}

.onglet { display:inline-block; height: 34px; width: 150px; }

.onglet_0 { padding:8px; margin:3px; font-size:16px; }
        .onglet_1 { padding:8px; margin:3px; font-size:16px; }
        
       #onglet_abc.onglet_1{
        background: url(' http://img854.imageshack.us/img854/9097/c09e.png');}
        #onglet_ledeuxieme.onglet_1{
        background: url(' http://img29.imageshack.us/img29/5127/dod0.png');}
        #onglet_ghi.onglet_1 {
        background: url(' http://img834.imageshack.us/img834/6325/jqqf.png');}
        
       #onglet_abc.onglet_0{
        background: url(' http://img9.imageshack.us/img9/6856/hg8.png');}
        #onglet_ledeuxieme.onglet_0{
        background: url('  http://img32.imageshack.us/img32/7674/shxz.png');}
        #onglet_ghi.onglet_0 {
        background: url('  http://img838.imageshack.us/img838/2079/5dh.png');}

.contenu_onglet { padding:5px; display:none; height:434px}

.imageetcontexte { text-align:justify; border-left: 3px solid #FFEF9C; border-right: 3px solid #FFEF9C; padding: 10px; }

.blabladesnews { text-align:justify; margin:20px; width:530px; max-width:550px; overflow:auto; padding:15px; border: 2px dotted #FFEF9C; border-radius:30px;  
  border-top: 3px solid #FFEF9C; border-right: 1px solid #FFEF9C; border-bottom: 3px solid #FFEF9C;
 border-left: 1px solid #FFEF9C;border-radius: 10px 10px 0px 0px;  }
.blabladesnews span { float:right;font-size:23px; margin-top:-30px; font-family:Verdana,Arial,Helvetica,sans-serif; color:#FFDF40; text-shadow: 0px 0px 5px #FFDF40;
-htm-transform:all;-htm-transition:1s;-moz-transform:all;-moz-transition:1s;-o-transform:all;
 -o-transition:1s;-webkit-transform:all;-webkit-transition:1s; }
.blabladesnews span:hover {  margin-right:90px; color:FFEF9C; text-shadow: -16px -9px #a6feff, 2px 3px 1px #000000;
-htm-transform:all;-htm-transition:1s;-moz-transform:all;-moz-transition:1s;-o-transform:all;
 -o-transition:1s;-webkit-transform:all;-webkit-transition:1s;}
.blabladesnews h1 { color:#ff4440; text-decoration:blink; display:inline; }
.blabladesnews h2 { color:#FFDF40; display:inline; }

/* Animations des prédéfinis, onglet 1 de la PA */
#predef {margin-left:21px; }
#predef ul { font:.75em "lucida grande", arial, sans-serif; overflow:auto; width:495px; background:#96734c; list-style:none; }  
#predef li {  border-radius: 16px; width:163px; height:85px; position:relative;z-index:5; margin:5px 0px 5px -60px; vertical-align:middle; -moz-border-radius:5px; padding:0px; border: 3px solid #00003B; overflow:hidden; float:left; }  
#predef li:hover { position:relative; z-index:10; margin-left:-40px; border-color:#FFDF40; box-shadow: 2px 2px 4px #000; -htm-transform:all;-htm-transition:1s;-moz-transform:all;-moz-transition:1s;-o-transform:all;}
#predef p { font-size:10px; height:85px; padding:0 10px; opacity:.8; background:#002164; -webkit-transition: margin-top 1.5s ease-out; -moz-transition: margin-top 1.5s ease-out; transition: margin-top 1.5s ease-out; }  
#predef li:hover p { margin-top:-88px; }  
#predef strong { padding-top:3px; display:block; }
#predef a {color:#FFDF40; font-weight:500; }

/* Mise en page des liens de navigation, onglet 1 de la PA */
#navi {float:left; display:block;}
#navi .entete { width:450px; position:relative; margin-top:-20px; -htm-transform:all;-htm-transition:1s;-o-transform:all;
 -o-transition:1s;-webkit-transform:all;-webkit-transition:1s;-moz-transform:all;-moz-transition:1s; text-align:center; color:#FFEF9C; text-shadow: 0px 0px 5px yellow; font-family:Time News Roman, serif; margin:auto; display:block; z-index:150; font-size:18px; font-style:italic;}
#navi .entete:hover { -htm-transform:all;-htm-transition:1s;-moz-transform:all;-moz-transition:1s;-o-transform:all;
 -o-transition:1s;-webkit-transform:all;-webkit-transition:1s; color:#E0BAFF; letter-spacing:3px; text-shadow: 0px 0px 5px #FFFFFF; }
#liens { background-image: url(http://img29.imageshack.us/img29/6016/qim.png); background-repeat: no-repeat; background-position : center ;  border-radius: 30px; display:table-cell; vertical-align:middle; height:120px; width:500px; max-width:540px; margin:auto; border: 2px solid #00003B; border-radius:30px; font-family:Verdana,Arial,Helvetica,sans-serif; font-size: 12px; text-align:center; background-color: #0C1342; }
.colonne1 { float:left;width:255px; }
.colonne2 { margin-left:260px; display:block;}
.colonne1 a, .colonne2 a {-htm-transform:all;-htm-transition:1s;-moz-transform:all;-moz-transition:1s;-o-transform:all;
 -o-transition:1s;-webkit-transform:all;-webkit-transition:1s; padding-left:10px;padding-left:}
.colonne2 .pique a:before { content: "♠"; padding-right:5px; }
.colonne2 .carreau a:before { content: "♦"; padding-right:5px; }
.colonne2 .coeur a:before { content: "♥"; padding-right:5px; }
.colonne2 .trefle a:before { content: "♣"; padding-right:5px; }

.colonne1 .pique a:before { content: "♠"; padding-right:5px; }
.colonne1 .carreau a:before { content: "♦"; padding-right:5px; }
.colonne1 .coeur a:before { content: "♥"; padding-right:5px; }
.colonne1 .trefle a:before{ content: "♣"; padding-right:5px; }

.colonne1 a:hover {-htm-transform:all;-htm-transition:1s;-moz-transform:all;-moz-transition:1s;-o-transform:all;
 -o-transition:1s;-webkit-transform:all;-webkit-transition:1s; text-transform:none; text-decoration:none !important; color:#e0baff; letter-spacing:3px;padding-left:60px !important;}
.colonne2 a:hover {-htm-transform:all;-htm-transition:1s;-moz-transform:all;-moz-transition:1s;-o-transform:all;
 -o-transition:1s;-webkit-transform:all;-webkit-transition:1s; text-transform:none; text-decoration:none !important; color:#e0baff; letter-spacing:3px;padding-right:60px !important;}


/* Les propriétés étranges de Lyloox, FIN */

/* Le bazar ajouté de Foocha' */

.onglets span {
margin-right: 75px;
}

#onglet_abc {
margin-left: 72px;
}

#onglet3 {
  border-spacing:0px;
}

/* contexte onglet 1 */

.contexte {
height: 180px;
overflow: auto;
max-width: 355px;
display: block;
margin: auto;
margin-top: 3px;
background-color: #0C1342;
padding: 15px;
border: 3px solid #00003B;
font-size: 11px;
border-radius: 16px;
overflow: auto;
}

/* navigation predefs onglet 1 */

#lienspredef {
display: table-cell;
vertical-align: middle;
height: 55px;
width: 500px;
max-width: 540px;
margin: auto;
border: 2px solid #00003B;
border-radius: 30px;
  font-size: 12px;
font-family: Verdana,Arial,Helvetica,sans-serif;
text-align: center;
background-color: #0C1342;
}

#lienspredef a {
-htm-transform: all;
-htm-transition: 1s;
-moz-transform: all;
-moz-transition: 1s;
-o-transform: all;
-o-transition: 1s;
-webkit-transform: all;
-webkit-transition: 1s;
padding-left: 10px;
}

#lienspredef .pique a:before { content: "♠"; padding-right:5px; }
#lienspredef .carreau a:before { content: "♦"; padding-right:5px; }
#lienspredef .trefle a:before { content: "♣"; padding-right:5px; }

#lienspredef a:hover {-htm-transform:all;-htm-transition:1s;-moz-transform:all;-moz-transition:1s;-o-transform:all;
 -o-transition:1s;-webkit-transform:all;-webkit-transition:1s; text-transform:none;
text-decoration:none !important; color:#e0baff; letter-spacing:3px;}
/* staff */

.fonda {
       height:62px;
  display: inline-block;
}
.fonda ul {
 font:.75em "lucida grande", arial, sans-serif;
 overflow:auto;
 background:#eee;
 list-style:none; }  

.fonda li {
 width:230px;
 height:80px;
 position:relative;
  z-index:5;
 vertical-align:middle;
 border-radius:5px;
 adding:0px;
 overflow:hidden;
 float:left;
  margin-right: 8px;
  border: 2px solid #FFDF40;
  padding:2px;
  margin-bottom: -8px;
}  

.fonda p {
font-size: 20px;
height: 82px;
opacity: .8;
background: #002164;
-webkit-transition: margin-top 1.5s ease-out;
-moz-transition: margin-top 1.5s ease-out;
transition: margin-top 1.5s ease-out;
  padding:6px;
}

.fonda li:hover {
 position:relative;
 z-index:10;
 -htm-transform:all;
  -htm-transition:1s;
  -moz-transform:all;
  -moz-transition:1s;
  -o-transform:all;
  border: 2px solid #DE0000;
  padding:2px;
}
.fonda li:hover p { margin-top:-85px; }  

.admin {
     height:89px;
  display: inline-block;
}
.admin ul {
 font:.75em "lucida grande", arial, sans-serif;
 overflow:auto;
 background:#96734c;
 list-style:none; }  

.admin li {
 width:145px;
 height:100px;
 position:relative;
  z-index:5;
 vertical-align:middle;
 border-radius:5px;
 adding:0px;
 overflow:hidden;
 float:left;
  margin-right: 8px;
  border: 2px solid #FFDF40;
  padding:2px;
  margin-bottom: -8px;
}  

.admin p {
font-size: 14px;
height: 97px;
opacity: .8;
background: #002164;
-webkit-transition: margin-top 1.5s ease-out;
-moz-transition: margin-top 1.5s ease-out;
transition: margin-top 1.5s ease-out;
  padding:6px;
}

.admin li:hover {
 position:relative;
 z-index:10;
 -htm-transform:all;
  -htm-transition:1s;
  -moz-transform:all;
  -moz-transition:1s;
  -o-transform:all;
  border: 2px solid #FF7B47;
  padding:2px;
}
.admin li:hover p { margin-top:-105px; }

.modo {
       height:65px;
  display: inline-block;
}
.modo ul {
 font:.75em "lucida grande", arial, sans-serif;
 overflow:auto;
 background:#002164;
 list-style:none; }  

.modo li {
 width:85px;
 height:65px;
 position:relative;
  z-index:5;
 vertical-align:middle;
 border-radius:5px;
 adding:0px;
 overflow:hidden;
 float:left;
  margin-right: 8px;
  border: 2px solid #FFDF40;
  padding:2px;
}  

.modo p {
font-size: 10px;
height: 63px;
opacity: .8;
background: #002164;
-webkit-transition: margin-top 1.5s ease-out;
-moz-transition: margin-top 1.5s ease-out;
transition: margin-top 1.5s ease-out;
  padding:6px;
  padding-top: 5px;
}

.modo li:hover {
 position:relative;
 z-index:10;
 -htm-transform:all;
  -htm-transition:1s;
  -moz-transform:all;
  -moz-transition:1s;
  -o-transform:all;
  border: 2px solid #cba78f;
  padding:2px;
}
.modo li:hover p { margin-top:-68px; }

/* Credits */

.creditstd {
  height:115px;
background-repeat: no-repeat;
padding-left: 43px;
background-position-x: 38px;
}

#blacredits {
width: 480px;
  background-color: #0C1342;
text-align: justify;
height: 77px;
overflow: auto;
margin-bottom: 8px;
  border: 1px solid #000000;
border-radius: 5px;
padding: 2px;
}
  
/* coup de coeur */

.coupcoeur img {
margin-right: 6px;
margin-bottom: 8px;
    -htm-transform:all;
  -htm-transition:1s;
  -moz-transform:all;
  -moz-transition:1s;
  -o-transform:all;
  border: 2px solid #FFEF9C;
   border-radius: 5px;
  padding:2px;
}

.coupcoeur img:hover {
border: 2px solid #F07F05;
    -htm-transform:all;
  -htm-transition:1s;
  -moz-transform:all;
  -moz-transition:1s;
  -o-transform:all;
  padding:2px;
}


.coupcoeur div {
 color:#FFEF9C;
 height:19px;
font-size: 23px;
margin-top: 2px;
font-family: Verdana,Arial,Helvetica,sans-serif;
text-shadow: 0px 0px 5px #FFEF9C;
-htm-transform: all;
-htm-transition: 1s;
-moz-transform: all;
-moz-transition: 1s;
-o-transform: all;
-o-transition: 1s;
-webkit-transform: all;
-webkit-transition: 1s;
margin-bottom: -6px;
}

.coupcoeur div:hover {  
  color:#FFDF40;
 text-shadow: -16px -9px #a6feff, 2px 3px 1px #000000;
-htm-transform:all;
  -htm-transition:1s;
  -moz-transform:all;
  -moz-transition:1s;
  -o-transform:all;
 -o-transition:1s;
  -webkit-transform:all;
  -webkit-transition:1s;
}

HTML

Code:


    <!-- News -->
    <td class="blabladesnews">
    <span> Wazzup on PHA ?</span><br><div style="height:250px; overflow:auto;">
<p><h2> 28.09.2013 -</h2>Le chapitre 85 a été terminé et posté. Bonne lecture !</p>
<p><h2> 25.09.2013 -</h2>Un nouveau petit sondage a été mis sur le forum. Donnez nous votre avis ici <a href="http://pandora-hearts-abyss.forumactif.com/t3035-sondage-une-peau-neuve-pour-les-fanclubs#35238" class="postlink"> Cliquez moi dessus !</a></p>
<p><h2> 21.08.2013 -</h2>Le 7ème concours du forum a été mis en place ! ♥</p>
<p><h1> 17.08.2013-</h1> Le rôle de Vincent Nightray a été mis en libre.</p>
<p><h1> 27.07.2013-</h1>Un tout nouveau design a été posté sur le forum ! Venez nous donner votre avis dans ce sujet là<a href="http://pandora-hearts-abyss.forumactif.com/t2959-version-no12#34410" class="postlink"> Cliquez moi dessus !</a></p></p>
<p><h1> 27.07.2013 -</h1> Le forum fête aujourd'hui même ses 4ans de vie ! Pour cela, beaucoup de news ont été postée Pour commencer, une nouvelle intrigue, un nouveau groupe ainsi que 5 petit prédéfini ! ( Un Chain, Un Famille Ducale et 3 Wonderland ) </p>
<p><h2> 18.06.2013 -</h2> Les journaux ont été installé sur le forum à votre demande ! Libérez-vous bien~ </p>
<p><h2> 13.06.2013 -</h2> Le chapitre 84 a été traduit et posté sur le forum ! Bonne lecture. </p>
<p><h2> 03.06.2013 -</h2> Un sondage a été mis sur le forum concernant les journaux.<a href="http://pandora-hearts-abyss.forumactif.com/t2899-sondage-rp-le-retour-des-journaux#33683" class="postlink"> Venez nous donner votre avis ici.</a></p></p>
   <p><h2> 16.05.2013 -</h2> Le chapitre 83 a été traduit et posté sur le forum ! Bonne lecture. </p>
   <p><h2> 17.04.2013 -</h2> Le chapitre 82 a été traduit et posté sur le forum ! Bonne lecture. </p>
 <p><h1> 08.04.2013 -</h1>Après discussion avec le reste du staff ( qui a changé depuis la dernière discussion ), les RPs en JE sont à nouveau permis ! La règle de la troisème personne reste valable que pour les évent's ( pour que cela soit plus simple. ) </p>
 <p><h2> 05.04.2013 -</h2> Merci de mettre en avant les autres groupes que les Baskervilles. Nous en avons trop. ( Bien sur, les prédéfinis de PH et du forum ne compte pas. ) Nous sommes juste un peu surpeuplé et les autres groupes mis à la traine. \0</p>
 <p><h1> 19.03.2013 -</h1>Un topic pour nous proposer vos suggestions pour PHA a été posté. Nous attendons vos idées ou vos envies.<a href="http://pandora-hearts-abyss.forumactif.com/t2752-suggestions-pour-le-forum" class="postlink"> Cliquez ici !</a></p></p>
 <p><h1> 19.03.2013 -</h1> Une nouvelle intrigue a été postée sur le forum ! Nous avançons dans le manga cette fois-ci.</p>
 <p><h2> 18.03.2013 -</h2>Les prédéfinis d'Alice Baskerville et Jack Bezarius ont été édité pour coller avec la nouvelle intrigue du forum ! </p>
<p><h2> 09.03.2013 -</h2> Le prédéfini de Will Of The Abyss a été remis en libre. </p></td>
    </tr>
    <tr>
    <td>


Merci ♥

[phinolex1]

Bonjour,

Normalement, la balise " <blink> ( votre contenue) </blink> permet de faire clignoter un texte.

Vous pouvez voir quel navigateur internet supporte les balises "<blink>" ici : https://developer.mozilla.org/fr/docs/Web/HTML/Element/blink#Compatibilit.C3.A9_des_navigateurs

[Oz-Chan]

Bonsoir,
J'ai bien essayé de mettre la balise blinkg, mon navigateur marche, mais rien ne change du tout... Rien ne clignote. Un lien directement dans le CSS serait bien plus utile à mon avis. Comme le précédent qui ne fonctionne plus !
Merci de votre aide.

[-Tancrède-]

Essaye ça :

Code:

function clignotement(){
if (document.getElementById("L_ID_DE_TON_ELEMENT").style.visibility=="visible")
document.getElementById("L_ID_DE_TON_ELEMENT").style.visibility="hidden";
else
document.getElementById("L_ID_DE_TON_ELEMENT").style.visibility="visible";
}
// mise en place de l'appel régulier de la fonction toutes les 0.5 secondes
setInterval("clignotement()", 500);

essaye, chez moi ça marche

[Oz-Chan]

Bonjour et merci de votre aide !
Je dois simplement le c/c dans mon CSS c'est ça? ^^

[-Tancrède-]

non, il faut que tu remplace L_ID_DE_TON_ELEMENT par l'id de l'élément que tu veux faire clignoter, puis tu place ce code dans les javascripts, sur toutes les pages : https://forum.forumactif.com/t301116-javascript-sur-forumactif

[Oz-Chan]

Je me disais bien que ce n'était pas un css !
Par contre, que voulez-vous dire par ID de l'élément...?
Sachant que c'est juste un texte et pas une image..

C'est bien ça non :

Code:

function clignotement(){
        if (document.getElementById("blabladesnews_h1").style.visibility=="visible")
        document.getElementById("blabladesnews_h1").style.visibility="hidden";
        else
        document.getElementById("blabladesnews_h1").style.visibility="visible";
        }
        // mise en place de l'appel régulier de la fonction toutes les 0.5 secondes
        setInterval("clignotement()", 500);

[-Tancrède-]

si j'ai bien compris, vous voulez faire clignoter ce qui est entre <h2> et </h2> ?
Si c'est le cas, remplacez les par <h2 id="ID_DE_TON_ELEMENT"> et </h2>
en fait pour donner un ID à du texte, il suffit de rajouter id="ID_DE_TON_ELEMENT" dans les propriétés des balises qui l'entourent ....

[-Tancrède-]

Un retour ?

[Oz-Chan]

Bonsoir,
excusez moi du retard. Mon modem a lâché. J'ai récupéré une connexion potable qu'en début d'après-midi TT.

Je ne pensais pas qu'une ID passait dans le Java !( je n'ai jamais appris ça.. ) mais tout fonctionne maintenant. Je vous remercie grandement pour votre aide ♥.