Forum ThiWeb.com

Bonsoir à tous,

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&nbsp;&nbsp;&nbsp;<img Alt="Puce" src="design/puce1.png" title="Puce" /></a></li>
					<li><a href="index.php?collection=ludotheque" title="Ludothèque">LUDOTHEQUE&nbsp;&nbsp;&nbsp;<img Alt="Puce" src="design/puce1.png" title="Puce" /></a></li>
					<li><a href="index.php?collection=bibliotheque" title="Bibliothèque">BIBLIOTHEQUE&nbsp;&nbsp;&nbsp;<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&amp;typedesupport=animation" title="Animation">ANIA</a></li>
					<li><a href="index.php?collection=videotheque&amp;typedesupport=animes" title="Animes">ANI</a></li>
					<li><a href="index.php?collection=videotheque&amp;typedesupport=dessinsanimes" title="Dessins animés">DA</a></li>
					<li><a href="index.php?collection=videotheque&amp;typedesupport=documentaires" title="Documentaires">DOC</a></li>
					<li><a href="index.php?collection=videotheque&amp;typedesupport=films" title="Films">FIL</a></li>
					<li><a href="index.php?collection=videotheque&amp;typedesupport=series" title="Séries">SER</a></li>
					<li><a href="index.php?collection=ludotheque&amp;typedesupport=emulation" title="Emulation">EMU</a></li>
					<li><a href="index.php?collection=ludotheque&amp;typedesupport=pc" title="PC">PC</a></li>
					<li><a href="index.php?collection=bibliotheque&amp;typedesupport=bandesdessinees" title="Bandes dessinées">BD</a></li>
					<li><a href="index.php?collection=bibliotheque&amp;typedesupport=comics" title="Comics">COM</a></li>
					<li><a href="index.php?collection=bibliotheque&amp;typedesupport=mangas" title="Mangas">MAN</a></li>
					<li><a href="index.php?collection=bibliotheque&amp;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>&nbsp;&nbsp;<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>

Et ci-dessous le code CSS :

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

Bon sachez que ça n'handicape en rien l'utilisation de mon site, c'est un problème que je tente de temps en temps de résoudre histoire d'être clean de chez clean.
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 ^

Salut!
Le problème vient que tu as des éléments dimensionnés à 1080 de large, sur un Pc ta largeur de 1080 se positionne au milieu de ta page.
Sur un smartphone de largeur 700 (par exemple) tu as 380 px qui dépassent de l'écran ce qui provoque un scroll latéral. le blanc qui te reste à droite est du au fait que tu n'a pas dimensionné le body à 1080.
Un conseil:
pour la version portable tu dois créer un css spécial qui met le body à 100% grâce aux media-queries
@media (max-width:1080px){body{width:100%;} }
il faudra jouer avec les éléments des menus bien sur pour qu'ils restent lisibles principalement le navMenu2 qui a trop d'éléments tous dimensionnés à 90px de large. Sur la version portable, généralement on fait disparaitre le menu (toujours grâce aux media queries) et on l'affiche à la demande avec un bouton" burger".
Tu en as un exemple ici: https://codepen.io/eva_trostlos/pen/YqwVdZ (redimensionne ton navigateur pour voir apparaitre le bouton.

J'ai lu en diagonale et vous en remercie (tous les deux).
J'aide un collègue une grosse partie de la semaine je n'aurai pas le temps de tester en détail ce que vous m'avez mis mais je m'en occupe dès que possible.
J'aime aussi les exemples.

De toute façon, j'ai remodelé mon site plusieurs fois et repris plusieurs fois le code source pour qu'il sit le plus lisible possible.
J'aime bien de temps à autre y farfouiller, ça n'évolue que très peu mon site mais àa me permet d'avoir toujours un (petit) pied dedans.

Quoiqu'il en soit merci encore et je reviens vers vous d'ici une semaine je pense.
;)

PS : gros boulot Ghost, je n'en attendais pas tant. A voir si je décide pas carrément de reprendre tout mon code avant de revenir poster sur le post, je verrai. Merci encore.

Bon on a fini le béton un peu plus tôt que prévu milieu d'après-midi avec le collègue

J'en ai profité pour modifier mon site.

Je posterai une capture dans la semaine mais j'ai réglé le problème sur le smartphone.

Je n'ai plus une seule abréviation "px", tout est en "em" (sauf pour la ligne de sépration "hr").
J'ai changé le logo W3C (ça sert peut-être à rien mais je trouve que ça habille le pied de page).
J'ai repris des lignes de codes que tu avais repris (mais j'ai gardé des noms cohérents pour moi, car j'y vais pas souvent voir mon code donc j'ai gardé la quasi totalité des désignations).
J'ai modifié la gueule de mon accueil.
J'ai modifié des parties de codes pour aérer un peu sur les autres pages pour que ça soit plus en vertical que horizontal le très peu de texte qu'il y avait.

En gros il me reste :
- La parie du haut à revoir niveau agencement (logo, champ de recherche).
- Et la page de résultat de recherche.

Le reste c'est OK pour un premier temps.
Le second temps sera le test des menus hamburgers pour smartphone.

Je préfère y aller par étape, je fini de régler le design standard, et je ferai l'adaptation mobile après, c'est plus simple pour moi.

Je reviens vers vous dans la semaine :wink:

J'aime beaucoup le résultat d'origine. Je pense jeter un oeil au menu burger, faire quelques essais mais à mon avis je resterai comme ça :

Version desktop :

Version mobile mode portrait :

Version mobile mode paysage :

Je passe le sujet en résolu car la question de départ était la version mobile.
Je reviendrai quand même sur ce sujet pour mes avis sur le menu burger.

Encore une fois merci à vous deux.

Forum ThiWeb.com

[RESOLU] Affichage site internet perso sur mobile

[RESOLU] Affichage site internet perso sur mobile

Re: [PROBLEME] Affichage site internet perso sur mobile

Re: [PROBLEME] Affichage site internet perso sur mobile

Re: [PROBLEME] Affichage site internet perso sur mobile

Re: [PROBLEME] Affichage site internet perso sur mobile