changer position gadgets

obtenir ces boutons

Changer la position des gadgets

La position d'un gadget sur l'écran peut se régler.

1) Il faut d'abord connaître le nom du gadget : "HTML1", HTLM2", "TEXT1", ... Si ce n'est pas le cas, il suffit d'afficher le gadget comme pour le modifier ("Tableau de bord", "Mise en page", "Modifier" sur le rectangle représentant le gadget) : le nom apparaît à la fin de l'adresse (http://...) en haut de la fenêtre.

2) On peut régler la position des gadgets par rapport à la marge et aux gadgets qui le précèdent et le suivent.

Des exemples d'instructions à placer dans le modèle (template) du blog figurent ci-dessous :
#HTML2 {
padding-left:35px;
}
#NewsBar2 {
height:459px;
}
#HTML5 {
margin-left:34px;
}
#Image1 {
text-align: center;
}
#HTML1 {
padding-left:26px;
}
#HTML3 {
padding-left:30px;
}
Ces instructions se placent de préférence après le paragraphe concernant l'élément concerné : messages, barre latérale ("sidebar ..."), bas d'écran ("footer ..."), ...

Il faut indiquer le nom du gadget et régler la position (.. px) en pixels. "margin" ajoute des espaces à l'extérieur d'un gadget. "padding" ajoute une marge à l'intérieur du gadget. "left" = à gauche. "right" = à droite. "top" = au-dessus . "bottom" = en-dessous. "height:" détermine la hauteur d'un gadget. "text-align: center;" permet de centrer un gadget. Éviter les chiffres négatifs : tous les navigateurs ne les acceptent pas.

3) La méthode peut néanmoins ne pas fonctionner si les mêmes instructions sont utilisées pour l'élément dont dépend le gadget (par exemple une barre latérale).

Dans ce cas (et aussi pour éviter que cela ne se produise), il y a trois solutions :

- quand c'est possible, supprimer les instructions correspondantes, pour l'élément principal (par exemple un espace ou une marge à gauche) ;

- utiliser des instructions différentes gauche (left) pour déplacer l'élément principal et droit (right) pour le gadget (il n'y aura donc pas de contradiction);

- placer les instructions relatives au gadget AVANT celles qui concernent l'élément principal.

4) On peut donner au gadget une position totalement indépendante de celle de l'élément dont il dépend et des autres gadgets qui s'y rattachent.

Le code à ajouter dans le modèle (template) du blog est (par exemple) le suivant :
#HTML1 {
text-align:left;
position:absolute;
top:102px;
left:40px;
}
Le nom du gadget et les coordonnées doivent être adaptées.

On utilise deux des coordonnées suivantes :
- "left" = distance par rapport au bord gauche
(ne pas utiliser "right" : avec "Internet explorer" cela ne fonctionne pas correctement) ;
- "top" = distance par rapport au bord supérieur;
- "bottom" = distance par rapport au bord inférieur.

Pour empêcher le gadget de défiler (bouger) avec le reste de la page, remplacer "absolute" ci-dessus par "fixed".

5) Pour ajouter un espace au-dessus d'un gadget, ajouter
#HTML5 {margin-top:34px;}
(par exemple) dans le modèle (template);

Pour ajouter un espace en-dessous d'un gadget, ajouter
#HTML6 {margin-top:34px;}
(par exemple) dans le modèle (template), pour le gadget SUIVANT ;

remarque : "margin-bottom" ne fonctionne pas ici.

6) On peut enfin insérer les codes qui précèdent, dans un gadget HTML/JavaScript, à la suite du code du gadget lui-même et à condition d'entourer ce code des instructions suivantes :
<style type="text/css"> (devant)
</style> (derrière).

10 commentaires:

Thierry "La cuisine c'est comme la musique, un art dont il faut d'abord apprendre le solfège » Joël Robuchon a dit…

bonjour
Dans les gadgets predefinis je ne trouve pas la section qui me permet de figer un gadget


text-align:left;
position:absolute;
top:102px;
left:40px;

mais seulement
b:section-contents id='sidebar-left-1'>
b:widget id='PageList1' locked='false' title='Livre' type='PageList'>
b:includable id='main'>

merci pour votre aide

Meiser a dit…

Ce code se place dans la feuille de style : la partie centrale en CSS où les instructions figurent entre crochets, comme par exemple :

#HTML2 {
padding-left:35px;
}


Dominique a dit…

Bonjour, voilà comment se présente le code du widget que je souhaite centrer:

A quel endroit dois-je rajouter:
{text-align:center;} comme vous le suggérez?
Merci, je ne sais pas si j'utilise les bonnes parenthèses?

Meiser a dit…

Il manque seulement devant : #HTML1

en changeant le "1" en fonction du numéro du gadget


bluechip a dit…

Bonjour,
J ai suivi vos instructions mais même si le résultat est pas mal les sous menus se chevauchent. Comment faire pour les placer autrement ?
Quand je bouge le pavé test dans mise en page et le place à la verticale, les sous menus ne s'affichent plus ?
Merci d'avance pour votre réponse

Slashy a dit…

bonjour je n'arrive pas à coller mes image titre à mes widget, j'aimerais par exemple qu'entre mon image titre "instagram et mon widget instagram il n'y est presque pas de blanc comme sur ce blog http://www.molaire-et-tentacules.fr/

même en ajoutant le code padding ou margin 0px ça ne change rien, alors que j'ai réussi à les centrer par cette méthode...

merci et bonne fêtes

Virginie FALZONE a dit…

Bonjour
Je souhaiterais vraiment pouvoir centrer ma date
Mon titre est centré mais je ne trouve pas comment centrer la date
Je ne sais pas quel est le nom du gadget a quoi elle appartient :(
Merci d'avance :(

Meiser a dit…

Bonjour.
Il suffit d'afficher le code du gadget comme pour le modifier ("Tableau de bord", "Mise en page", "Modifier" sur le rectangle représentant le gadget) : le nom apparaît à la fin de l'adresse (http://...) en haut de la fenêtre.


Unefille Dautomne a dit…

bonjour je souhaite centrer le gadget pagelist1 et malgré le fait d'avoir suivi vos instructions les onglets page restent alignés à gauche...

Théo B a dit…

Bonjour, pourriez vous m'expliquer comment centrer les textes des gadgets "textes". Merci d'avance pour vos réponses.