En poursuivant votre visite de ce site, vous acceptez l'utilisation de cookies pour permettre ses différents services. Voir les Mentions légales.
 
 
 
Vous êtes ici :   Accueil » Forum » Camera » centrage de camera
 
 
 
    Imprimer la page...
    Imprimer la section...

Forum - Camera - centrage de camera


clos par JeanDenis le 09/09/2016 @ 09:03  Sujet n° 10

le 11/05/2016 @ 08:30
par walimoha

walimoha

1 message

Bonjour JeanDenis, bonjour à tous,J'ai essayé de centrer quelques photos de camera pour m'habituer à son usage en suivant les tutos mais j'ai du mal à trouver comment centrer le contenu de la boite camera sur la page d'accueil. Sur quelle partie du code je peux faire la modif? Je vous remercie d'avance.mon site est ahvl.com.fr et j'ai la skin skn5_saxbar02Si vous avez une piste pour moi et merci pour tout le travail que vous faitesCordialement
Site web walimoha
sujet clos Haut  
Réponse n° 1
--------
le 11/05/2016 @ 13:44
par JeanDenis

JeanDenis

Administrateur
13 messages

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...k

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

Site web JeanDenis
clos par JeanDenis le 09/09/2016 @ 09:03 Haut  
Réponse n° 2
--------
le 11/05/2016 @ 19:32
par walimoha

walimoha

2 messages

Bonsoir, merci pour ton aide JeanDenis, j'ai un début de résultat mais je ne suis pas encore au début. le résultat que je veux obtenir c'est un peu comme celui sur le site de notre ami Saxbar: https://demo.lbdev.net/index.php?lng=fr&tconfig=0 sur la démo skn5_Saxbar2.
J'ai joué sur les %, par contre je ne comprends pas quand tu dis : je te proposais dans config boite de placer dans la ligne de ta FB881 un espace à 25%, ta FB881 à 50% et un espace à 25% (un espace à quel endroit?)Merci à toi et à tous
Site web walimoha
clos par JeanDenis le 09/09/2016 @ 09:03 Haut  
Réponse n° 3
--------
le 11/05/2016 @ 23:01
par JeanDenis

JeanDenis

Administrateur
15 messages

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?

Merci à toi

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 :
 

Citation :

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...

 
Par ailleurs, je t'écris :
 

Citation :

tes images font 460x265 soit H/L = 265/460 = environ 57,61%
mets donc dans le script height: '57,61%'

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

Je te le redis...
 

Citation :

je te proposais dans config boite de placer dans la ligne de ta FB881 un espace à 25%, ta FB881 à 50% et un espace à 25% ou peut-être plus simplement, de jouer sur les trois % actuels : type 33% 40% (FB881) 27% pour décaler la FB881 à droite...

 Dans config boite, à la ligne ou tu as placé ta FB881 -qui contient Camera s-
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,

Site web JeanDenis
clos par JeanDenis le 09/09/2016 @ 09:03 Haut  
Réponse n° 4
--------
le 12/05/2016 @ 07:59
par walimoha

walimoha

3 messages

Bonjour et désolé encore pour mon obstination mais j'aimerai aller au bout sans laisser tomber même si je comprends en changeant le navigateur cela peut bouger. En fait quand je mets le ratio à 57,..%les textes se séparent des images beaucoup plus bas.Ensuite sur la de camera, j'ai une boite à gauche vide et une autre aussi vide à droite. Cela dit, j'ai rentré toutes les possibilités 33.40.27;;;;;;;30%,36%.32% et encore et toujours un décalage......
merci encore de tes efforts JD
Site web walimoha
clos par JeanDenis le 09/09/2016 @ 09:03 Haut  
Réponse n° 5
--------
le 12/05/2016 @ 11:21
par JeanDenis

JeanDenis

Administrateur
16 messages

Bonjour,

Le problème majeur... vient du fait que tu as bidouillé dans le fichier camera.css...n
et notamment
.camera_fakehover {
    height: 150%;
    ....
}
et peut-être ailleurs...

Avant de tenter d'autres expériences, il vaut mieux s'en tenir aux tutos et de ne modifier ailleurs que lorsqu'on maitrise un peu mieux, et cela petit à petit...

Cordialement,

Site web JeanDenis
clos par JeanDenis le 09/09/2016 @ 09:03 Haut  
Réponse n° 6
--------
le 12/05/2016 @ 13:03
par walimoha

walimoha

4 messages

Merci beaucoup pour ton aide JD, j'ai mis du 28,36 et 32% mais j'ai remis le le height:90% et surtout j'ai triché en changeant la dimension de l'image de fond......et je continueMerci encore et à bientôt
Site web walimoha
clos par JeanDenis le 09/09/2016 @ 09:03 Haut  
Réponse n° 7
--------
le 12/05/2016 @ 13:30
par JeanDenis

JeanDenis

Administrateur
17 messages

Re,
Mets (transforme) dans ton styleplus.css
#header { /* augmentation de la hauteur du header */
    height:140px;
}
.tblbox.FB881 {
    padding-top:0px;
}


et remets
.camera_fakehover {
    height: 100%;


comme c'est à l'origine...
et il ne te restera plus qu'à ajuster en latéral...

Cordialement,

Site web JeanDenis
clos par JeanDenis le 09/09/2016 @ 09:03 Haut  
Réponse n° 8
--------
le 12/05/2016 @ 13:41
par walimoha

walimoha

5 messages

Re, j'ai changé, merci encore pour ce détail JD. Bonne aprèm.
Cordialement
Site web walimoha
clos par JeanDenis le 09/09/2016 @ 09:03 Haut  
actif sujet actif   clos sujet clos   Important! Important!   Nouveau Nouveau message
Rectifier Rectifier message   Clôturer Clôturer sujet   Remonter Remonter