Discussion :

[abc.xyz]

Bonjour,

je viens de terminer un site en local, il n'est donc pas encore en ligne. Il convient à mes clients mais pas à moi qui constate que je n'ai pas codé la partie du logo correctement, je veux dire que ça fonctionne mais ce n'est pas net, c'est pas propre.
J'ai besoin de l'avis de quelqu'un de calé en css qui saura me proposer une solution de remplacement acceptable, acceptable dans le sens où elle ne me fera pas reprendre toute la façon dont j'ai codé le site.
Voici le html:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
<!-- Le menu du haut de page -->
<div id="headerPa" class=" heightCent container-fluid hidden-xs">
  <div class="row heightCent no-pad"> 
    <div class="col-sm-2 col-md-2 heightCent hidden-xs marge"> 
        <a href="accueil.php"><div class="logo"></div></a>
    </div>
.....

Les css:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
#headerPa{
     height:19%;
}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
.logo{
  float:left;
  width:120px;
  height:92px;
  background:url(../img/logo.jpg);
  margin:0.5% 0 0 10%;
}

Je vais vous expliquer ce qui ne va pas:
le logo se trouve dans une zone "rectangulaire" sur l'écran de consultation de hauteur 19%(comme vous pouvez le voir dans le css) et de largeur col-sm-2 col-md-2 (bootstrap).
C'est bien là le problème vous comprenez que la hauteur et la largeur de cette zone "rectangulaire", comme elles sont exprimées en % et avec bootstrap,varient selon l'écran de consultation. Et que comme ces grandeurs varient je suis obligé pour chaque taille d'écran d'ajuster le margin que vous voyez dans le code css au niveau de la classe .logo, je dois faire ceci pour que le logo reste bien centré dans chaque zone rectangulaire correspondant à chaque taille d'écran. Vous imaginez bien que c'est périlleux et pas propre d'ajuster ce margin avec des media query pour chaque taille d'écran de consultation.
Quelle solution me proposez vous pour faire un code clair et propre pour positionner ce logo correctement?Je signale qu'il va être très difficile d'abandonner la hauteur de 19% car je suis obligé d'adopter une height en %.

merci

[Invité]

Bonjour,

...pour que le logo reste bien centré dans chaque zone rectangulaire correspondant à chaque taille d'écran...

Je ne vois pas ce que viens faire le float:left;...

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
background:url(../img/logo.jpg) no-repeat center center;
background-size:contain;
margin:0 auto;

Ca ne te ferait pas de mal de faire un minimum de recherche avant... et d'étudier le CSS :

• Glossaire des propriétés CSS - III-B. Image de fond

[abc.xyz]

merci de ta réponse. Ca m'aide beaucoup.
J'ai testé ta solution, il y a du mieux c'est certain mais cependant l'image n'est pas centrée verticalement.
Suite à ce constat j'ai eu l'intuition que le résultat serait le même si je supprimais center center de ton code css.
J'ai vu juste, en effet cela ne change rien.
C'est donc pour te dire que seul ton margin:0 auto centre le logo horizontalement, mais c'est tout.

Je vais te dire pourquoi ton center center ne fonctionne pas:
center center sont des valeurs pour background-position permettant de positionner une image en background lorsque l'image que l'on met en background est plus petite que la div sur laquelle on met l'image en arrière plan, mais dans mon cas logo.gif a exactement la même taille que la div sur laquelle on applique le background-image.

ps:j'ai supprimé le float:left, en effet il n'avait rien à faire là

[Invité]

Une autre solution (?) :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<div id="headerPa" class=" heightCent container-fluid hidden-xs">
  <div class="row heightCent no-pad"> 
    <a href="accueil.php">
        <div class="col-sm-2 col-md-2 heightCent hidden-xs marge logo"></div>
    </a>
.....

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
.logo {
   background:url(../img/logo.jpg) no-repeat center center; /* on centre dans la case */
   background-size:120px 92px; /* dimensions du logo */
   min-width:120px;
   min-height:92px;
}

[abc.xyz]

J'ai trouvé:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
.logo{
  width:100%;
  height:100%;
  background:url(../img/logo.jpg) no-repeat center center;
}

voilà, merci de m'avoir mis sur la voie.