J'ai une question aux cadors HTML/CSS du forum. J'ai un problème d'affichage de mon site internet perso sur les mobiles depuis plusieurs mois/années.
Le site est nickel sur les PC fixe mais il y a un léger bug d'affichage sur les mobiles.
Donc je précise que sur PC fixe, le site s'affiche correctement sur tous les navigateurs que j'ai testé (Internet Explorer, Edge, Chrome, Firefox, Falkon).
Sur mobile en revanche, il n'a jamais été clean l'affichage, et ce déjà sur mon ancien Windows Phone avec Edge, ou sur mon actuel Androïd que ce soit avec Chrome, Edge ou Firefox.
Ci-dessous les captures du site, à gauche sur PC fixe, à droite sur un mobile :
Vous noterez l'espace blanc dégueulasse sur la partie en haut à droite. Cet espace blanc est visible en mode portrait ou paysage. J'ai cherché dans mon code mais je vois pas ce qui pourrait causer cela.
Mes pages sont valides en HTML et CSS et là je sèche sur ce qui ne va pas.
Ci-dessous le code HTML de mon index :
Code : Tout sélectionner
<body>
<!-- Le bandeau, les liens et le champs de recherche. -->
<header>
<div id="headerDelimitations">
<div id="headerBandeau"><a href="index.php" title="Accueil"><img alt="Logo" src="design/logo.png" title="Logo" /></a></div>
<div id="headerLiens"><a href="index.php?liens=1" title="Liens"><img alt="Liens" src="design/liens.png" title="Liens" /></a></div>
<div id="headerRecherche"><form action="index.php" method="post"><p><input autocomplete="off" id="headerChampDeRecherche" name="headerChampDeRecherche" onFocus="if(this.value=='Recherche...')this.value='';" type="search" value="Recherche..." /><input id="headerBoutonDeRecherche" type="submit" value="OK" /></p></form></div>
</div>
</header>
<!-- Le menu général et le sous-menu. -->
<nav>
<div id="navDelimitations1">
<div id="navMenu1">
<ul>
<li><a href="index.php?collection=videotheque" title="Vidéothèque">VIDEOTHEQUE <img Alt="Puce" src="design/puce1.png" title="Puce" /></a></li>
<li><a href="index.php?collection=ludotheque" title="Ludothèque">LUDOTHEQUE <img Alt="Puce" src="design/puce1.png" title="Puce" /></a></li>
<li><a href="index.php?collection=bibliotheque" title="Bibliothèque">BIBLIOTHEQUE <img Alt="Puce" src="design/puce1.png" title="Puce" /></a></li>
</div>
</div>
<div id="navDelimitations2">
<div id="navMenu2">
<ul>
<li><a href="index.php?collection=videotheque&typedesupport=animation" title="Animation">ANIA</a></li>
<li><a href="index.php?collection=videotheque&typedesupport=animes" title="Animes">ANI</a></li>
<li><a href="index.php?collection=videotheque&typedesupport=dessinsanimes" title="Dessins animés">DA</a></li>
<li><a href="index.php?collection=videotheque&typedesupport=documentaires" title="Documentaires">DOC</a></li>
<li><a href="index.php?collection=videotheque&typedesupport=films" title="Films">FIL</a></li>
<li><a href="index.php?collection=videotheque&typedesupport=series" title="Séries">SER</a></li>
<li><a href="index.php?collection=ludotheque&typedesupport=emulation" title="Emulation">EMU</a></li>
<li><a href="index.php?collection=ludotheque&typedesupport=pc" title="PC">PC</a></li>
<li><a href="index.php?collection=bibliotheque&typedesupport=bandesdessinees" title="Bandes dessinées">BD</a></li>
<li><a href="index.php?collection=bibliotheque&typedesupport=comics" title="Comics">COM</a></li>
<li><a href="index.php?collection=bibliotheque&typedesupport=mangas" title="Mangas">MAN</a></li>
<li><a href="index.php?collection=bibliotheque&typedesupport=romans" title="Romans">ROM</a></li>
</ul>
</div>
</div>
</nav>
<!-- Le contenu des pages. -->
<section><div id="sectionSite"><?php include ('pages/appels.php'); ?></div></section>
<!-- La validation des pages. -->
<div id="validation"><p><a href="http://validator.w3.org/check?uri=referer" title="The W3C Markup Validation Service"><img alt="The W3C Markup Validation Service" src="../design/html.jpg" title="The W3C Markup Validation Service" /></a> <a href="http://jigsaw.w3.org/css-validator/check/referer" title="The W3C Markup Validation Service"><img alt="The W3C Markup Validation Service" src="../design/css.jpg" title="The W3C Markup Validation Service" /></a></p></div>
</body>
Code : Tout sélectionner
@font-face {
font-family : 'Carlito';
font-weight : bold;
src : url('design/Carlito-Bold.ttf') format('truetype'), local('Carlito Bold'), local('Calibri Bold');
}
/* ------------------------------ */
/* Le corps de la page. */
body {
background-attachment : fixed;
background-image : url('design/fond.jpg');
font-family : 'Carlito';
margin : 0px;
}
/* ------------------------------ */
/* Le header */
header {
background-color : #20272d;
height : 64px;
}
#headerDelimitations {
display : flex;
align-items : center;
flex-direction : row;
justify-content : space-between;
margin : auto;
width : 1080px;
}
#headerBandeau {
flex : 1;
width : 600px;
}
#headerLiens {
flex: 2;
padding-right : 5px;
padding-top : 8px;
text-align : right;
width : 280px;
}
#headerLiens a {
text-decoration : none;
}
#headerChampDeRecherche {
background-image : url('design/loupe.png');
background-position : 7px 7px;
background-repeat : no-repeat;
border : none;
color : #b2b2b2;
flex : 3;
height : 30px;
padding-left : 38px;
width : 200px;
}
#headerBoutonDeRecherche {
background-color : #0082e2;
border : none;
color : #ffffff;
font-weight : bold;
height : 30px;
}
/* ------------------------------ */
/* Le nav */
nav {
background-color : #323844;
height : 64px;
}
#navDelimitations1 {
height : 32px;
margin : auto;
width : 1080px;
}
#navMenu1 ul {
display : flex;
height : 32px;
line-height : 32px;
list-style-type : none;
margin-left : -40px;
margin-top : 0px;
}
#navMenu1 a {
color : #ffffff;
display : block;
height : 32px;
width : 360px;
font-size : 14px;
font-weight : bold;
text-align : center;
text-decoration : none;
vertical-align : middle;
}
#navDelimitations2 {
height : 32px;
margin : auto;
width : 1080px;
}
#navMenu2 ul {
display : flex;
line-height : 32px;
list-style-type : none;
margin-left : -40px;
margin-top : 0px;
}
#navMenu2 a {
color : #afafaf;
display : block;
height : 32px;
width : 90px;
font-size : 14px;
font-weight : bold;
text-align : center;
text-decoration : none;
vertical-align : middle;
}
/* ------------------------------ */
/* Le section */
section {
background-color : #f5f5f5;
margin : 20px auto;
width : 1080px;
}
#sectionSite {
padding : 20px;
}
/* ------------------------------ */
/* La validation des pages */
#validation {
text-align : center;
}
/* ------------------------------ */
/* Le reste. */
Donc même si on trouve pas la solution il y a pas mort d'homme, loin de là. En plus c'est exclusivement perso donc...
Peut-être que le problème vient des flexbox dans mon header, je sais pas.
N'y aurait-il pas un problème aussi avec la taille des écrans de mobiles (même si les résolutions sont là).
Au cas où, j'ai remarqué sur sur les mobiles, je ne pouvais pas dézoomer au maximum pour avoir toute la largeur de ma page. Au maximum j'ai jusqu'au mot "MAN" dans le menu mais pas plus loin, après je dois défiler vers la droite pour aller voir.
Bizarre car mon site fait 1080px de large et mon ancien Windows Phone et mon actuel Android font à minima 1080px de large).
En tout cas merci à veux qui auront le courage de regarder le problème ^
