Comment centrer une animation de noël...

[christaline]

Rappel du premier message :

Bonjour,
J'ai mis cette déco de noël sur mon forum,
$(function() {
$.getScript("https://sd-1.archive-host.com/membres/up/132720629421430912/FDF/Decoration/Noel/testhaut.js");
});
mais ça n'est pas centré, comment faire pour qu'elle le soit..
Merci.

[christaline]

C'est celle ci que je veux mettre au centre, car là elle est à gauche...
$(function() {
$.getScript("https://sd-1.archive-host.com/membres/up/132720629421430912/FDF/Decoration/Noel/testhaut.js");
});

[Peggy06]

Bonjour, à tous,
@ christaline
J'ai essayé le code de lmc38510 que j'ai un peu modifié et ça marche, si ce n'est pas centré il faut jouer sur les % de left et right.

Code:

$(function(){
                $("body").append('<div style="position: absolute; top: 0px; left:30%;right:40%;z-index: 999;"><a  href=""><embed style="width: 800px; height: 96px;" src="http://sd-1.archive-host.com/membres/up/132720629421430912/FDF/Decoration/Noel/banhaut.swf" wmode="transparent" quality="high" /></a></div> /');});

Bonne chance

[lmc38510]

J'ai essayé le code de lmc38510 que j'ai un peu modifié et ça marche, si ce n'est pas centré il faut jouer sur les % de left et right.

Excellent "Peggy" à priori passer les left % = right %

Code:

$(function(){
$("body").append('<div style="position: absolute; top: 0px; left:20%;right:20%;z-index: 999;"><a  href=""><embed style="width: 800px; height: 96px;" src="http://sd-1.archive-host.com/membres/up/132720629421430912/FDF/Decoration/Noel/banhaut.swf" wmode="transparent" quality="high" /></a></div> /');});

.

[Peggy06]

C'est bizarre les codes, j'ai essayé 20% de chaque côté et ça ne centrait pas chez moi.

[lmc38510]

C'est bizarre les codes, j'ai essayé 20% de chaque côté et ça ne centrait pas chez moi.

Je pense "Peggy" que le problème provient du type d'écran ( format ) que l'on possède ... les % que nous affectons ne sont valable que sur des écrans format identique à celui sur lequel tu visionnes ....

je pense pour autant qu'il faut mette les " % left = les % right " mais sans résoudre le problème ci-dessus

R-max avait écrit

avec le code d' lmc , suivant la résolution , la déco se déplace sur la gauche ,
pour placé au milieu >>>> et que cela reste au milieu >>>

Si tu passes par là R-max .... comment résoudre l'affichage au centre compte tenu que nous avons des écrans différents ....


.

[christaline]

Elle n'est pas vraiment bien centrée, mais finalement ça ne fait pas jolie, donc je ne vais pas la mettre, en tout cas, merci à vous tous, c'est vraiment super sympa!!!! Passez de bonnes fêtes!! Big biz!!
Par contre, je ne sais pas si je met "résolu" vu que d'autres discute du sujet...

[lmc38510]

.

Bon choix "christaline" ... ne passe pas le sujet en résolu, une question de fond est posée à R-max et nous attendons son commentaire ...

Bonnes fête


.

[christaline]

Ok, alors bonne soirée!!!

[Invité]

Si tu passes par là R-max .... comment résoudre l'affichage au centre compte tenu que nous avons des écrans différents ....

de la façon que j'ai donner (le %) varie suivant la taille de l'image ..

avec une div ajouter sur le body , pas facile de la placé , si ont mets une position absolue et un centrage l'image se retrouve en bas .. alors qu'avec un span elle reste en haut , les mystère de l'informatique ..
dans un sujet normal un

Code:

<center></center>

aurais suffit , mais la non .

je ne peut vous en dire plus ,avec mes maigres connaissances en informatique.
bonne soirée ,
aprés je ne suis pas expert en JS , d'autres seront plus a même de préciser .

[lmc38510]

je ne peut vous en dire plus ,avec mes maigres connaissances en informatique.
aprés je ne suis pas expert en JS , d'autres seront plus a même de préciser .

Vi .... si tu n'es pas expert ... tu as d'énormes connaissances .... et nous je t'en parle même pas

N'est -il pas possible dans le code javascript de nommer cette déco exp : noel_deco1

avec un truc du genre <span class="noel_deco1"> xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx </span>

J'ai déjà fait cela dans un Template ...

Pour ensuite passer par le CSS comme le proposait "Don Vito Corleone"

Code:

        #noel_deco1 {
          left: 0% !important;
          right: 0% !important;
          margin: auto !important;
        }


Lequel CSS fonctionne très bien mais s'il est pas nominatif, centre toutes les décos ....




.

[Invité]

si c'est possible mais une class commence par un point dans le css

Code:

.noel_deco1 {
          left: 0% !important;
          right: 0% !important;
          margin: auto !important;
        }

essaye de faire la même chose en js , l'image se retrouve en bas du forum .

tiens tente avec ces codes >>

le css>>

Code:

.noel_deco1 {
          z-index:999;
          top:0px;
          position:absolute;
          left: 0% !important;
          right: 0% !important;
          margin: auto!important;
        }

le js>>

Code:

$(function(){
$("body").append('<span class="noel_deco1"><a  href=""><embed style="width: 800px; height: 96px;" src="http://sd-1.archive-host.com/membres/up/132720629421430912/FDF/Decoration/Noel/banhaut.swf" wmode="transparent" quality="high" /></a></span> ');});

chez moi il reste a gauche.

ensuite essaye avec le meme css et ce js >>

Code:

$(function(){
$("body").append('<center><span class="noel_deco1"><a  href=""><embed style="width: 800px; height: 96px;" src="http://sd-1.archive-host.com/membres/up/132720629421430912/FDF/Decoration/Noel/banhaut.swf" wmode="transparent" quality="high" /></a></span></center> ');});

et la comme par magie

[lmc38510]

.

Tu veux que je te dise "R-max" .... t'est tout simplement Génial

Je vais tester


.

[Peggy06]

Et bien j'ai testé, bravo R-max, je vais garder ces codes cela peut servir pour autre chose, j'aimerais être aussi capable, peut-être que ça viendra avec le temps
merci beaucoup R-max,
Bonne soirée à vous tous

[lmc38510]

Et bien j'ai testé, bravo R-max, je vais garder ces codes cela peut servir pour autre chose, j'aimerais être aussi capable, peut-être que ça viendra avec le temps
merci beaucoup R-max,
Bonne soirée à vous tous

t'as pu testé !.... et ça fonctionne ! .... alors

Edit 0H 50

Je Confirme testé et Fonctionnel à 100%
Avec CSS ->

Code:

.noel_deco1 {    /* <- Appellation de la déco dans le JS */
z-index:999;   
top:0px;            /* <- position en hauteur (moi je l'ai mise */
                    /*      en -96px CàD au-dessus du Forum */
position:absolute;
left: 0% !important;
right: 0% !important;
margin: auto!important;
}

Avec JS ->

Code:

$(function(){
$("body").append('<center><span class="noel_deco1"><a  href=""><embed style="width: 800px; height: 96px;" src="http://sd-1.archive-host.com/membres/up/132720629421430912/FDF/Decoration/Noel/banhaut.swf" wmode="transparent" quality="high" /></a></span></center> ');});

[pan european]

Bsr
Le CSS, vous le mettez où ?

[lmc38510]

.

Dans Affichage :: Images et Couleurs :: Couleur :: Feuille de style CSS

ou il te faut recopier le code CSS donné :

Code:

        /* Affichage Déco de Noel 1 */
        .noel_deco1 {    /* <- Appellation de la déco dans le JS */
        z-index:999; 
        top:0px;    /* <- position en hauteur (moi je l'ai mise */
                        /*      en -96px CàD au-dessus du Forum */
        position:absolute;
        left: 0% !important;
        right: 0% !important;
        margin: auto!important;
        }

.

[pan european]

OK. J'ai déjà un code CSS sur cette page:
.postbody a{color: blue;font-weight: bold;}
.topic-title a{color: darkred;}
.author a{color: black;font-weight: lighter;}

Comment faire pour garder ce dernier et avoir le second ?

[lmc38510]

.

Tu copies simplement le nouveau code à la suite du tient

Sur la 1ère ligne en dessous

Code:

.postbody a{color: blue;font-weight: bold;}
.topic-title a{color: darkred;}
.author a{color: black;font-weight: lighter;}

/* Affichage Déco de Noel 1 */
.noel_deco1 {    /* <- Appellation de la déco dans le JS */
z-index:999;
top:0px;    /* <- position en hauteur (moi je l'ai mise */
          /*      en -96px CàD au-dessus du Forum */
position:absolute;
left: 0% !important;
right: 0% !important;
margin: auto!important;
}

Dans l'exemple ci-dessus je me suis mis sur la ligne -> 5


.

[pan european]

OK merci ça fonctionne mais la guirlande semble plus petite ?

[lmc38510]

.

Oui Normal .... Dans le code JS que tu as du mettre ci-dessous

Code:

$(function(){
$("body").append('<center><span class="noel_deco1"><a  href=""><embed style="width: 800px; height: 96px;" src="http://sd-1.archive-host.com/membres/up/132720629421430912/FDF/Decoration/Noel/banhaut.swf" wmode="transparent" quality="high" /></a></span></center> ');});

La dimension d'affichage du "swf" à été modifiée pour les besoin de "christaline "

Modifie -> width: 800px; height: 96px; en -> width: 1000px; height: 120px;

Tu retrouveras les dimension initiales

L'avantage du "swf" c'est qu'il est possible de changer ces dimensions d'affichage avec le code

Tu peux très bien l'augmenté également ... mais il faut garder les mêmes proportions

Exp si width: 1000px; height: 120px; ( * 1,1 = ) --> width: 1100px; height: 132px;

Voilà ... tu sais tout maintenant ... le "swf" n'a plus de secret pour toi


.

[pan european]

OK merci pour les précisions.

[lmc38510]

.

Visiblement ton problème est solutionné




.

[pan european]

C'est solutionné et merci à tous pour l'entraide.