1485 sujets

Web Mobile et responsive web design

[Résolu] Pb Menu avec Portable

Bonjour,

Je viens de refaire l'intégralité de mon site afin qu'il soit compatible W3c & Responsive Design.

Malheureusement, le menu du haut ne s'affiche pas sur portable. J'ai trouvé du code qui pourrait marcher mais j'aimerai l'intégrer le plus simplement possible et je galère car je n'obtiens pas le resultat escompté.

Sur cette page par exemple qui n'est pas fini, ca marche plutot bien.

https://www.volubilis.net/concerts/corneille_2010/concert_corneille_07012010.php

avec le code suivant :

<body>

<div class="topnav" id="myTopnav">
<a href="#news">Home</a>
<a href="#news">Concert</a>
<a href="#contact">Festival</a>
<a href="#about">Night Club</a>
<a href="#about">Bar Pub</a>
<a href="#about">Interview</a>
<a href="#about">Chronique</a>
<a href="#about">Les Groupes</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>

<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>

</body>
</html>



Si quelqu'un pouvait me dire comment intégrer ce code efficacement sur une page existante (j'en ai plus de 5000 a modifier) car je galère a faire quelque chose de correct. Exemple de page



https://www.volubilis.net/concerts/clarika_2010/concert_clarika_07122010.php



Merci
Modifié par gcyrillus (03 Dec 2021 - 00:45)
Salut!

Est-ce que tu pourrais nous montrer le code CSS?

En te servant des balises proposées par le forum, qu'on puisse y voir plus clair Smiley cligne

5000 pages à refaire?
Tu as tout codé en dur?
C'est pas le bon CSS, mais j'ai trouvé celui que je voulais sur ton site.

Tu as quelques "display: none" qui se trimballent.

Par exemple ligne 1596:


/* Mobile */

	#navPanel, #titleBar {
		display: none;
	}

	@media screen and (max-width: 736px) {


Et la valeur de ce display n'est pas changée ensuite.
Soit tu enlèves ce "display: none", soit tu changes sa valeur où bon te semble dans les lignes suivantes.

J'ai essayé et ça fonctionne, il faut juste réadapter le style ensuite.
Stoneteckel, j'ai du louper un truc car j'ai supprimé de mon CSS display: none;

/* Mobile */

#navPanel, #titleBar {

}

@media screen and (max-width: 736px) {

/* Basic */

html, body {
overflow-x: hidden;
}

body, input, textarea, select {
font-size: 13pt;
line-height: 1.4em;
}

/* Multi-use */

.link-list li {
padding: 0.75em 0 0.75em 0;
}

.quote-list li p {
margin-bottom: 0.5em;
}

et j'ai toujours pas le menu adapté au mobile.
C'est beaucoup mieux, il faut que je change les couleurs etc...

upload/1624457602-2845-menuportable.jpg

J'aurais préféré ce que j'ai sur la page ou je faisais mes essais (si t'as une idée) mais bon c'est déjà beaucoup mieux.
Modifié par volubilis (23 Jun 2021 - 16:17)
Aucune règle CSS n'est définie sur ton header, d'après les devtools, que ce soit les div ou les liens, c'est normal que ce ne soit pas stylisé.
Il doit y avoir quelque part un problème, puisque ça devrait s'afficher de la même façon que sur un écran plus large.

Ne le prends pas mal, mais ton code est pas évident à lire et en creusant un peu je m'aperçois que plusieurs choses peuvent être conflictuelles, par exemple, tu définis des règles pour "Body" à au moins quatre endroits différents, idem pour les media-queries, et d'autres j'imagine.

À mon avis, un bon nettoyage de ton code devrait te permettre d'y voir plus clair et sûrement t'aider à trouver la solution Smiley cligne
Merci Stoneteckel, ça ne me surprends pas, j'ai empilé les bouts de code avec l'objectif d'un résultat sans orga ni méthode, je vais essayer de faire du ménage car j'en chie meme pour trouver ou je peux modifier le violet du titre en blanc. Ce qui aurait déjà meilleur allure.

Merci Encore.
Sujet clos
Aller à