Bonjour,

Le centrage de Camera dans l'article est dû à cette partie du code (le style mis au début du code source) margin: 0 auto;

.fluid_container { /* reglage max en largeur et % d'occupation */
    margin: 0 auto;
    max-width: 800px;
    width: 96%;
}

Ainsi, la classe fluid_container sera centrée dans la boite où Camera est présente...

Pour ton cas personnel, si tu veux l'afficher juste devant l'image d'une tablette qui elle-même n'est pas centrée dans la page... C'est une autre paire de manche !
D'autant que Camera est responsive, alors que l'image affichée... non...

Pour jouer, tu peux essayer d'élargir l'espace de ta FB881 à 50% par exemple avec 25% de chaque côté, et de "jouer sur le width de Camera et les margin...
Mais d'ici, je ne peux pas faire grand chose.
Mets aussi des images ayant le bon ratio (50% à ce que je vois).

Pour te débarrasser de la petite bande blanche au dessus de Camera place ceci dans styleplus.css
.FB881 { /* boite camera */
color: inherit;
background: transparent;
}

Cordialement,

Rectifié par JeanDenis le 11/05/2016 @ 13:50

Pour la bonne compréhension de ce qui suit, voici deux messages échangés par mail à intercaler entre les réponses n°1 et n°2

Walimoha : Merci Jean Denis pour tes réponses mais j'ai beau essayé, le contnair ne bouge pas d'un mm... et pour la FB881 à 50% 25 de chaque côté, je n'ai pas compris et faut il modifier le code de la FB881 ou ou celui de camera.css?

Jean-Denis : Re,

Il serait plus judicieux de répondre sur le forum... ainsi tout le monde en profiterait...

1) tes images font 460x265 soit H/L = 265/460 = environ 57,61%

mets donc dans le script height: '57,61%'

2) Pour placer ta ligne Camera dans le Topboxes au niveau de ta tablette (puisque je suppose que c'est ce que tu veux obtenir), essaie de mettre ceci dans styleplus.css et cherche le nombre qui convient :
#header { /* augmentation de la hauteur du header */
    height:125px;
}
3) Camera est centré horizontalement chez toi dans sa boite, il n'y a pas de problème la-dessus.
mais ton image de fond avec une tablette n'a pas la tablette au centre !

¤ je te proposais dans config boite de placer dans la ligne de ta FB881 un espace à 25%, ta FB881 à 50% et un espace à 25%
ensuite de régler la position de Camera en changeant la valeur de width en % et de jouer sur les margin pour l'amener en face de la tablette :
par exemple
margin: 0 0 0  10px;  /* H D B G */

¤ ou peut-être plus simplement, de jouer sur les trois %  actuels : type 33% 40% (FB881) 27% pour décaler la FB881 à droite...

Mais, ceci, je le répète ne fonctionnera pas vraiment car si tu modifies la taille du navigateur tu verras que Camera change de taille (elle est responsive et respecte les pourcentages attribués) alors que ton fond d'écran, lui conserve sa taille...

Il y aurait peut-être d'autres solutions mais comme je ne sais pas exactement ce que tu veux obtenir...

Cordialement,
Jean-Denis

Re,

Cela devient un peu compliqué...

Puisque tu cites le modèle qu'a proposé Saxbar, tu aurais dû en bonne logique d'adresser à lui... D'ailleurs, si tu vérifies sur son demo-skin, tu verras la véracité de mes dires :
 

 
Par ailleurs, je t'écris :
 

 
mais tu ne le fais pas... et je lis encore height: '45%' Camera n'est donc pas au bon ratio !

Je te le redis...
 

 Dans config boite, à la ligne ou tu as placé ta FB881 -qui contient Camera -
tu mets à la première place une valeur de 33%, puis, pour ta FB881, tu mets 40% et à la dernière place 27%.
Et tu vérifies si Camera est à sa "place"... Sinon tu joues avec les % de gauche (33%) et de droite (27%)
(Dans ce que je vois de la skin de Saxbar, il a mis 30% 36% 32% ... on n'est pas très loin...)

Cordialement,

© 2004-2020