[RÉGLÉ] Centrer la bannière sur protostar affichage fluide

[jujub]

Bonjour à tous !

Malgré quelques recherches sur internet et sur ce forum je n'arrive pas à résoudre mon problème et je me permets de me tourner vers vous.

Suite au passage en affichage Fluide sur le template Protostar, la nouvelle bannière ne se centre pas correctement selon les utilisateurs.
Chez moi pas de soucis mais si je zoome ou que je vais sur le site via un autre ordinateur, il y a un espace à gauche de la bannière mais pas droite.



Sur le fichier CSS j'ai tenté cette modification à la ligne 50:
img {
max-width: 100%;
width: auto \9;
height: auto;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;

changement en :

img {
max-width: 100%;
width: auto;
height: auto;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;

Ce qui n'a strictement rien changé.

Pouvez vous m'indique la bonne ligne css et le changement à effectuer ou peut être une opération plus simple.

Merci pour votre écoute.

[marie-louise]

Re : Centrer la bannière sur protostar affichage fluide

Bonsoir,

Sur mon écran carré j'ai ce soucis de décalage sur Firefox, et si je change le zoom, j'ai décalé dans l'autre sens. Avec Google Chrome c'est bien centré, donc ce serait plus une compatibilité Navigateur.

[manu93fr]

Re : Centrer la bannière sur protostar affichage fluide

Bonsoir,
tu ne résoudras rien en modifiant le css de l'image

essaie plutot ça :

dans le php

<a class="brand pull" href="/">
<img src="http://vertboismj.fr/images/banners/CC.png" alt="VertBois Maison et Jardin"> </a>

-> ici j'ai volontairement supprimer le "left" dans la class

dans le css

.header {
margin-bottom: 10px;
text-align: center;

ici, j'ai rajouter "text-align" pour centrer le contenu du header
}

Par la même occasion, pourquoi ne fais tu pas les mises a jour de Joomla ? Ton site est en 3.4.5 non ?

[jujub]

Re : Centrer la bannière sur protostar affichage fluide

* Mare Louise: en effet je pense que c'est un problème de compatibilité selon les navigateur et la résolution des écrans. L'affichage fluide de Protostar n'adapte pas la bannière convenablement selon tel ou tel navigateur ou écran.

*Manu93fr: Merci pour ta réponse Manu. J'ai supprimé le "left" sur php et en effet la bannière se recadre celon le centre. Je conserve cependant toujours un espace plus grand a droite de la bannière que à gauche sur certaines configuration.

Je n'ai pas appliqué la deuxieme solution, peut être cela résoudrait il le problème. Pourrais tu me donnais un indice sur comment trouver la ligne dans le css car je ne la trouve pas:
.header {
margin-bottom: 10px;
text-align: center;

Encore merci.

[jujub]

Re : Centrer la bannière sur protostar affichage fluide

Apres m'être renseigné auprès d'amis plus compétent que moi, j'ai fait la deuxième manip et je viens l'expliquer pour les gens qui débutent et qui tomberait sur le même problème.

Où mettre ?
.header {
margin-bottom: 10px;
text-align: center;

Je l'ai mis au debut de la page mais pas dans les premières lignes .Surtout pas en plein dans une ligne de code du CSS séparées par { }.
Le point de .header signifie qu'il s'agit d'une fonction, d'une action que vous exécuter sur le header ( ici la bannière) et son ordre importe peu dans le css. (attention en rouge c'est faux. Les explications par Lomart un peu plus bas )

Je laisse les utilisateurs avancés me contredire ou donner des informations supllémentaires à ce sujet.


Problème résolu. Merci à Manu et Marie Louise

[marie-louise]

Re : Centrer la bannière sur protostar affichage fluide

Oui à la fin c'est ce que je fais, mais sur une copie de mon template, pas sur l'original qui sera remis à neuf à chaque mise à jour et donc toutes les améliorations disparues.

[lomart]

Re : Centrer la bannière sur protostar affichage fluide

Bonjour,

Le point de .header signifie qu'il s'agit d'une fonction, d'une action que vous exécuter sur le header ( ici la bannière)

Non, le point indique qu'il s'agit d'une classe qui sera appelée par un code HTML du type <div class="header">

et son ordre importe peu dans le css.

Non, en CSS, comme souvent dans la vie courante, c'est le dernier qui a parlé qui a raison.
On peut modifier ce comportement en augmentant le poids du sélecteur (chemin plus précis) ou en ajoutant !important à la fin de la proprété