Discussion :

[abc.xyz]

Bonjour,

j'ai 2 pages html (celle avec le code header1 et celle avec le code header2), les codes passés sont des bandeaux de haut de page avec un logo sur la gauche, censés être les mêmes lorsque l'on passe de l'une à l'autre de ces pages, or justement ces 2 bandeaux ne sont pas les mêmes car sur la page avec header2 le logo est décalé lorsqu'on arrive sur cette page par rapport au logo lorsqu'on est sur la page avec header1.Ceci est dû au fait que les deux codes fournis sont différents car #header1et #header2 sont différents. Je n'ai pas mis tout le code des pages, seulement celui qui concerne le problème. Comment faire pour que le logo soit à la même place sur les bandeaux de haut de page des deux pages?

Merci de votre aide

Code HTML :

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

1
2
3
4
5
6
7
<div id="header1" class="height container-fluid">
  <div class="row height"> 
    <div class="col-sm-2 col-md-2 height"> 
        <a href="accueil.php"><div class="logo"></div></a>
    </div>
    <div class="height col-sm-10 col-md-10"> 
                       ....

Code HTML :

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

1
2
3
4
5
6
7
<div id="header2" class="height container-fluid">
  <div class="row height "> 
    <div class="col-sm-2 col-md-2 height"> 
        <a href="accueil.php"><div class="logo"></div></a>
    </div>
    <div class="height col-sm-10 col-md-10"> 
                      ....

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#header1{
 height:250px;
 background:white;
}
#header2{
 display:table-row;
 height:250px;
 background:white;
}
.height{
 height:100%;
}
.logo{
  width:100%;
  height:100%;
  background:url(logo.gif) no-repeat center center;
}

[Sodium]

Eh bien déjà tu en as un en display: table-row et pas l'autre, il se passe quoi si tu retires cette règle ?

[abc.xyz]

il se passe que le problème du bandeau est résolu mais que le reste de la page qui est un quadrillage d'images est en vrac

[Sodium]

Si tu fais ta mise en page avec des display table c'est qu'il y a un soucis dans la conception CSS du site. Ce type de display est à bannir dans 99.999% des cas.

Si tu veux de l'aide, poste de préférence un lien vers ta page online.

[abc.xyz]

je n'ai pas de page online, je travaille sous MAMP.
Le modèle tabulaire n'est selon moi et selon beaucoup d'autres développeurs web aussi pas à laisser de côté car il résoud certains problèmes insolubles avec d'autres technologies, par contre ce à quoi tu fais allusion sans doute est que le modèle tabulaire est laissé pour compte en raison des anciens <table> html

[Sodium]

J'aimerais bien rencontrer les développeurs en question

Jusqu'à il y a 5/6, les display table avaient encore deux utilités : afficher des tableaux de données et centrer un élément verticalement par rapport à son contenu.
Maintenant que l'immense majorité des browsers supportent l'inline-block ou même les flex-box, cette deuxième utilité est passée à la trappe.

Utiliser des tableaux pour faire de la mise est page est universellement reconnu comme l'une des pires pratiques depuis... pfiuuu... 2001 ?