Salut,
Ton code HTML est du grand n’importe quoi, je ne comprends pas ce que tu veux faire (il n’y a que des inlines vides). En plus, la balise <font> n’est plus censée exister depuis l’invention du CSS. En parlant du CSS, pourquoi avoir un fichier externe alors que la <div> est déjà stylée avec l’attribut style="" ? D’où vient ce code ??
D’ailleurs je pense que ton problème vient de là : l’attribut style="" a la priorité sur n’importe quelle règle CSS externe, ton background ne va donc jamais changer. Essaye de supprimer cet attribut.
Modifié par Duchampignon (16 Jun 2019 - 22:36)
Bonjour,

Il s'agit probablement d'un mail ou issu d'un mail. Nécessaire pour être compatible avec ces cochonneries d'Outlook, Gmail, etc Enfin table dans p, c'est crade même pour un mail je suppose.
Sinon oui ce serait du très vieux code (indice les majuscules).

On parle de styles en ligne (pas de fichier CSS ni d'élément style mais tout dans l'attribut style="" des éléments à styler.
C'est à nouveau utilisé par des devs front end (CSS-in-JS, React, Vue, etc) pour répondre parfois à un réel besoin et souvent à un besoin inventé/créé ou un manque de formation ou de considération pour CSS (j'ai pas de souci avec le manque de formation s'il est assumé et pour le reste trooooll). C'est à éviter très très fort sauf pour les mails, pour des raisons de maintenance et d'arrachage de cheveux ou de tête...
nadsud a écrit :
Merci Olivier, en effet j'avais consulté Codepen Codepen mais j'avais pas vu cet exemple ! Choupinet, ça peut faire l'affaire en le bidouillant [biggthumNavrée, ça n'avait pas marché la 1ère fois. Image rajoutée ! Merci à vous Bacasable.
pup].


Navrée, ça n'avait pas marché la 1ère fois. Image rajoutée ! Merci à vous Bacasable. https://www.pornjk.com/tags/spankbang/ https://www.redtube.social https://www.porn600.me/tags/beeg/
Modifié par mopa8900 (16 Jun 2019 - 23:10)
Bonjour,
Je crois que le placement du bouton est résolu, en revanche, si je mets 33%, les 3 divs apparaissent minuscules.
Et as-tu une solution pour le dernier problème?

upload/1560612133-73977-ouhla.png

#products
{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.single_product
{
  flex: 0 ;
}
.products_image
{
  width: 100%;
  border:5px solid black;
  cursor:pointer;
  margin: 5%;
  margin-bottom: 10%;
  padding-top:20%;
  border-radius: 10px;
}

Modifié par Paullrn (16 Jun 2019 - 15:57)
salut voici ma préoccupation:
j'ai fait un menu dont je veux changer le background au survol de la souris et j'aimerais que vous m'aidiez en fait j'ai deja insere deja des glyphicon a partir de la bibliotheque font-awesome pourriez vous m' aider j'ai deja essayé la methode
.lien_milieu:hover a
{
color:#fff;
background-color:#32CD32;
height:200px;
}
et voici le menu :
<div id="lien_document" class="lien_milieu" style="background-color:white;height:110px;width:27%;float:left;margin-left:20px;margin-top:12px;box-shadow:5px;">
<a href="" class="" style="text-decoration:none">
<i class="fa fa-book" style="font-size:45px;margin-left:140px;color:#32CD32;"></i>
<br><br><font style="font-family:Aharoni:font-size:18px;font-weight:bold;margin-left:120px;color:#32CD32"> Documents</font>
</a>
</div>
Tout d’abord, ce code date probablement d’une dizaine d’années d’après son style.
Pour les couleurs : si tu écris #123456 c’est pareil que rgb(18, 52, 86)
Le premier est exprimé en hexadécimal, le deuxième est exprimé en décimal
12 hexa = 18
34 hexa = 52
56 hexa = 86
(si je me suis pas trompé dans la conversion)
Ce sont deux façons d’écrire la même chose, tu choisis celle qui te convient au moment où tu l’écris.
Modifié par PapyJP (15 Jun 2019 - 14:37)
Bonjour,

c'est surtout des problèmes de connaissances en css que tu as. Et il faudrait prendre le temps d'apprendre Smiley cligne

Pour ton bouton en absolute, il suffit de positionner l'élément parent en relative pour qu'il soit positionné relativement à ce bloc et non a la fenêtre.

Pour faire des colonnes qui s'adaptent il faut préciser des tailles en %
width: 33%;
merci pour votre reponse mais moi je veux dire que ce code c pas comme les autres code HTML " COLOR: rgb(68,68,68) " coleur par exemple c pas avec # je veux savoir comment converter des code HTML simple a des codes comme ca et merci bcp pour la reponse
j'ai rien compris à ta question vu que tu l'as formulée bizarrement. Ce code est du html, mais avec des style comme le css. Eh bien pour apprendre, bah il faut acheter un livre du type "html et css pour les nuls". Je te conseille Oh my code
bonjour pour tout les développeurs web et ingénieurs j'ai une petite question concernant un code HTML celui la

<HTML>
<BODY><P>
<TABLE style="FONT-SIZE: 12px; BORDER-TOP: 0px; HEIGHT: 637px; FONT-FAMILY: arial, sans-serif; BORDER-RIGHT: 0px; WIDTH: 634px; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: 0px; TEXT-TRANSFORM: none; FONT-WEIGHT: 400; COLOR: rgb(68,68,68); PADDING-BOTTOM: 0px; FONT-STYLE: normal; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-SPACING: 0px; BORDER-LEFT: 0px; ORPHANS: 2; WIDOWS: 2; DISPLAY: table; LETTER-SPACING: normal; LINE-HEIGHT: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; font-variant-ligatures: normal; font-variant-caps: normal; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial" cellSpacing=0 cellPadding=0 width=634 align=center border=0>
<TBODY style="BORDER-TOP: 0px; BORDER-RIGHT: 0px; BORDER-BOTTOM: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-LEFT: 0px; DISPLAY: table-row-group; LINE-HEIGHT: normal; PADDING-RIGHT: 0px">
<TR style="BORDER-TOP: 0px; BORDER-RIGHT: 0px; BORDER-BOTTOM: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-LEFT: 0px; DISPLAY: table-row; LINE-HEIGHT: normal; PADDING-RIGHT: 0px">
<TD style="BORDER-TOP: 0px; BORDER-RIGHT: 0px; VERTICAL-ALIGN: top; BORDER-BOTTOM: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-LEFT: 0px; DISPLAY: table-cell; LINE-HEIGHT: normal; PADDING-RIGHT: 0px" height=25 colSpan=2>
<P><SPAN style="FONT-SIZE: 24px; BORDER-TOP: 0px; FONT-FAMILY: helvetica, arial, sans-serif; BORDER-RIGHT: 0px; WHITE-SPACE: normal; WORD-SPACING: 0px; BORDER-BOTTOM: 0px; TEXT-TRANSFORM: none; FLOAT: none; FONT-WEIGHT: 400; COLOR: rgb(255,102,0); PADDING-BOTTOM: 0px; FONT-STYLE: normal; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-LEFT: 0px; ORPHANS: 2; WIDOWS: 2; DISPLAY: inline !important; LETTER-SPACING: normal; LINE-HEIGHT: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; font-variant-ligatures: normal; font-variant-caps: normal; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial"></SPAN>&nbsp;</P></TD></TR>
<TR style="BORDER-TOP: 0px; BORDER-RIGHT: 0px; BORDER-BOTTOM: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-LEFT: 0px; DISPLAY: table-row; LINE-HEIGHT: normal; PADDING-RIGHT: 0px">
<TD style="BORDER-TOP: 0px; BORDER-RIGHT: 0px; VERTICAL-ALIGN: top; BORDER-BOTTOM: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-LEFT: 0px; DISPLAY: table-cell; LINE-HEIGHT: normal; PADDING-RIGHT: 0px" vAlign=top colSpan=2 align=left><FONT style="FONT-SIZE: 11px; LINE-HEIGHT: 14px" color=#5a5a5a size=1 face="helvetica, arial, sans-serif">&nbsp;</FONT> 
<TABLE style="BORDER-TOP: 0px; BORDER-RIGHT: 0px; BORDER-BOTTOM: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-SPACING: 0px; BORDER-LEFT: 0px; DISPLAY: table; LINE-HEIGHT: normal; PADDING-RIGHT: 0px" cellSpacing=0 cellPadding=0 width=632 border=0>
<TBODY style="BORDER-TOP: 0px; BORDER-RIGHT: 0px; BORDER-BOTTOM: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-LEFT: 0px; DISPLAY: table-row-group; LINE-HEIGHT: normal; PADDING-RIGHT: 0px">
<TR style="BORDER-TOP: 0px; BORDER-RIGHT: 0px; BORDER-BOTTOM: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-LEFT: 0px; DISPLAY: table-row; LINE-HEIGHT: normal; PADDING-RIGHT: 0px">
<TD style="BORDER-TOP: 0px; BORDER-RIGHT: 0px; VERTICAL-ALIGN: top; BORDER-BOTTOM: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-LEFT: 0px; DISPLAY: table-cell; LINE-HEIGHT: normal; PADDING-RIGHT: 0px">
<TABLE style="BORDER-TOP: 0px; BORDER-RIGHT: 0px; BORDER-BOTTOM: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-SPACING: 0px; BORDER-LEFT: 0px; DISPLAY: table; LINE-HEIGHT: normal; PADDING-RIGHT: 0px" cellSpacing=0 cellPadding=0 width=632 border=0>
<TBODY style="BORDER-TOP: 0px; BORDER-RIGHT: 0px; BORDER-BOTTOM: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-LEFT: 0px; DISPLAY: table-row-group; LINE-HEIGHT: normal; PADDING-RIGHT: 0px">
<TR style="BORDER-TOP: 0px; BORDER-RIGHT: 0px; BORDER-BOTTOM: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-LEFT: 0px; DISPLAY: table-row; LINE-HEIGHT: normal; PADDING-RIGHT: 0px" vAlign=top>
<TD style="BORDER-TOP: 0px; BORDER-RIGHT: 0px; VERTICAL-ALIGN: top; BORDER-BOTTOM: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-LEFT: 0px; DISPLAY: table-cell; LINE-HEIGHT: normal; PADDING-RIGHT: 0px" width=432>
<TABLE style="BORDER-TOP: 0px; HEIGHT: 214px; BORDER-RIGHT: 0px; WIDTH: 433px; BORDER-BOTTOM: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-SPACING: 0px; BORDER-LEFT: 0px; DISPLAY: table; LINE-HEIGHT: normal; PADDING-RIGHT: 0px" cellSpacing=0 cellPadding=0 align=left border=0>
<TBODY style="BORDER-TOP: 0px; BORDER-RIGHT: 0px; BORDER-BOTTOM: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-LEFT: 0px; DISPLAY: table-row-group; LINE-HEIGHT: normal; PADDING-RIGHT: 0px">
<TR style="BORDER-TOP: 0px; BORDER-RIGHT: 0px; BORDER-BOTTOM: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-LEFT: 0px; DISPLAY: table-row; LINE-HEIGHT: normal; PADDING-RIGHT: 0px">
<TD style="BORDER-TOP: 0px; BORDER-RIGHT: 0px; VERTICAL-ALIGN: top; BORDER-BOTTOM: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-LEFT: 0px; DISPLAY: table-cell; LINE-HEIGHT: normal; PADDING-RIGHT: 0px" width=432><FONT style="FONT-SIZE: 11px; LINE-HEIGHT: 14px" color=#5a5a5a size=1 face="helvetica, arial, sans-serif">
<P style="BORDER-TOP: 0px; HEIGHT: auto; BORDER-RIGHT: 0px; WIDTH: auto; BORDER-BOTTOM: 0px; FLOAT: none; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-LEFT: 0px; DISPLAY: block; LINE-HEIGHT: normal; PADDING-RIGHT: 0px">&nbsp;</P>
<P style="BORDER-TOP: 0px; HEIGHT: auto; BORDER-RIGHT: 0px; WIDTH: auto; BORDER-BOTTOM: 0px; FLOAT: none; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-LEFT: 0px; DISPLAY: block; LINE-HEIGHT: normal; PADDING-RIGHT: 0px"><FONT color=#b4b3b3></FONT><FONT color=#b4b3b3></FONT><BR style="LINE-HEIGHT: normal">&nbsp;</P>
<P style="BORDER-TOP: 0px; HEIGHT: auto; BORDER-RIGHT: 0px; WIDTH: auto; BORDER-BOTTOM: 0px; FLOAT: none; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-LEFT: 0px; DISPLAY: block; LINE-HEIGHT: normal; PADDING-RIGHT: 0px"><BR style="LINE-HEIGHT: normal">&nbsp;</P>
<P style="BORDER-TOP: 0px; HEIGHT: auto; BORDER-RIGHT: 0px; WIDTH: auto; BORDER-BOTTOM: 0px; FLOAT: none; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-LEFT: 0px; DISPLAY: block; LINE-HEIGHT: normal; PADDING-RIGHT: 0px">&nbsp;</P>
<P style="BORDER-TOP: 0px; HEIGHT: auto; BORDER-RIGHT: 0px; WIDTH: auto; BORDER-BOTTOM: 0px; FLOAT: none; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-LEFT: 0px; DISPLAY: block; LINE-HEIGHT: normal; PADDING-RIGHT: 0px">&nbsp;</P>
<P style="BORDER-TOP: 0px; HEIGHT: auto; BORDER-RIGHT: 0px; WIDTH: auto; BORDER-BOTTOM: 0px; FLOAT: none; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-LEFT: 0px; DISPLAY: block; LINE-HEIGHT: normal; PADDING-RIGHT: 0px">&nbsp;</P>
<P style="BORDER-TOP: 0px; HEIGHT: auto; BORDER-RIGHT: 0px; WIDTH: auto; BORDER-BOTTOM: 0px; FLOAT: none; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-LEFT: 0px; DISPLAY: block; LINE-HEIGHT: normal; PADDING-RIGHT: 0px">&nbsp;</P>
<P style="BORDER-TOP: 0px; HEIGHT: auto; BORDER-RIGHT: 0px; WIDTH: auto; BORDER-BOTTOM: 0px; FLOAT: none; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-LEFT: 0px; DISPLAY: block; LINE-HEIGHT: normal; PADDING-RIGHT: 0px">&nbsp;</P>
<P style="BORDER-TOP: 0px; HEIGHT: auto; BORDER-RIGHT: 0px; WIDTH: auto; BORDER-BOTTOM: 0px; FLOAT: none; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-LEFT: 0px; DISPLAY: block; LINE-HEIGHT: normal; PADDING-RIGHT: 0px">Merci de votre confiance<BR style="LINE-HEIGHT: normal"></P>
<P style="BORDER-TOP: 0px; HEIGHT: auto; BORDER-RIGHT: 0px; WIDTH: auto; BORDER-BOTTOM: 0px; FLOAT: none; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-LEFT: 0px; DISPLAY: block; LINE-HEIGHT: normal; PADDING-RIGHT: 0px">&nbsp;</P></FONT></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></P></BODY></HTML>

je veux savoir comment faire des codes HTML comme ca et en appel comment les codes HTML comme ca et il y a tell un site ou bien un logiciel pour créer des codes HTML comme cette façon et merci d'avance .
Bonjour, je suis en train de coder un site de vêtements en ligne. Mais j'ai beaucoup de problèmes, tous reliés au fait des résolutions d'écran impactant sur la disposition des div de mon site. J'en ai réglé beaucoup, utilisant flex, mais il en reste un:
-j'ai 3 divs correspondant aux trois catégories de produits, et je veux qu'elles soient alignées sur la même ligne sans déborder. Mais avec d'autres tailles d'écran, la dernière passe à la ligne, et avec un nowrap, elle sort du champ
upload/1560551084-73977-troisdivs.png

Dernier problème que je n'ai pas parvenu à résoudre et qui n'a aucun rapport, j'aimerais que quand on passe sur une div catégorie, il t ait comme un header et un footer apparaissant au dessus de l'image. Je n'explique pas bien je pense, tenez un montage:
upload/1560551400-73977-catngoriehover.png
Merci d'avance, en espérant recevoir une réponse sous peu
Paul
PS: voici le code


		<section id="products">
			<div class="single_product">
				<img src="https://zupimages.net/up/19/23/9c02.png" alt="bannier" class="products_image"/>			
			</div>

			<div class="single_product">
				<img src="https://zupimages.net/up/19/24/v26k.png" alt="bannier" class="products_image"/>				
			</div>

			<div class="single_product">
				<img src="https://zupimages.net/up/19/23/hena.png" alt="bannier" class="products_image"/>
								
			</div>			
		</section>
	</body>



#products
{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}


.single_product
{
  flex: 0 ;
}



.products_image
{
  width: 45em;
  border:5px solid black;
  cursor:pointer;
  margin: 50px;
  margin-bottom: 70px;
  padding-top:100px;
  border-radius: 10px;
}

Modifié par Paullrn (16 Jun 2019 - 15:58)
Bonjour à tous,

Je coince méchant sur un calcul du nombre de note dans un ficher musicale.

Dans la function compteNotes(), la console me retourne toujours ce erreur: TypeError: notesValidee.push is not a function.

function compteNotes(output,chaine) {
	var notes = Array('a','ais','aes','b','bis','bes','c','cis','ces','d','dis','des','e','eis','ees','f','fis','fes','g','gis','ges');
	var str = chaine.toString();
	var exp = new RegExp('[abcdefgis]+','g');	
	var tabNom=str.match(exp);
	var notesValidee=Array();
	for(var i=0;i<tabNom.length;i++){
		if (notes.includes(tabNom[i]) == true){ 			
			notesValidee.push(tabNom[i]); 
			}else{
			notesValidee = "Rien";
			}			
		}	
	
	console.log("notesValidee: "+notesValidee+' tabNom[0]: '+tabNom[1]+' tabNom.length: '+tabNom.length+' type: '+typeof tabNom);
	var nbcara=str.length;
	if ( tabNom.length >  1 ) {	
		tabNom = notesValidee;
		var affichage='' + tabNom.length + '';
		document.getElementById(output).innerHTML = "Cette partition compte "+affichage+" notes. ";
		tabNom = tabNom.toString();
		var res=tabNom.match(/(.{1,100})/g);		
		document.getElementById(output+"0").innerHTML = "Notes sélectionnée: "+ res.join("</br>"); //.match(/.{0,20}/g);
		}else {	
		document.getElementById(output).innerHTML = "La chaine n'est pas valide. Il ne contient aucune note. Voyez ci-dessous:	</br>"+tabNom+"<hr>";
		
		}
	}


Il doit certainement y avoir une erreur mais je ne vois pas ou!!!

Voici le code entier sur https://jsfiddle.net/Larix/h4tjx1gv/5/

Je me réjouis de voir ce que j'ai loupé.

Cordiales salutations à tous.

Stéphane
Bonjour,

réaliser deux menus très différents, l'un horizontal pour les grandes résolutions, l'autre par exemple handburger pour les résolutions "smartphone" est une chose très courante, et même universelle sur les sites. Cependant, chaque fois, je me suis trouvé face à l'obligation de réaliser deux html (tout du moins la partie ul, li) différents pour chaque menu.

Exemple, sur un site, j'ai mis un menu horizontal déroulant pour le grandes résolutions et un menu "glissant" (en Anglais scrolling menu) pour les résolutions smartphones. Je n'ai cependant pas pu utiliser le même html pour les deux. Le poids des lignes supplémentaires est ridicule, mais je ne trouve pas ça très élégant. Surtout, ça m'oblige à ajouter un display:none; pour cacher l'un ou l'autre.

Voici, par exemple, le html du menu principal horizontal :

<div class="nav">
	<div id="menu">
	<li><a href="#">Menu1.html</a>
		<ul>
			<li><a href="SousMenu1.html">SousMenu1</a>
			<li><a href="SousMenu2.html">SousMenu2</a>	
		</ul>
	<li><a href="#">Menu2.html</a>
		<ul>
........... et plus

le html du "scrolling menu" :

<div class="topBar">
    <!-- Logo -->
</div>
<nav class="navBar">
    <div class="container">
        <ul class="nav">
        <li><a href="index.html" class="active">Accueil</a></li>
            <li><a href="Menu1.html">Menu1</a></li>
            <li><a href="Menu2.html">Menu2</a></li>
.......... et plus

le css de ce menu "scrolling" :

.topBar {
    background: white;
    color: rgba(255, 255, 255, 0.3);
    font-size: 22px;
    font-weight: bold;
    text-transform: uppercase;
    padding: 20px 0;
    text-align: center;
}
.container {
    margin: 0 auto;
    padding: 0 10px;
    max-width: 800px;
}
.navBar {
    background: blue;
}
.nav {
    margin: 0 -10px;
    padding: 0 10px;
    list-style: none;
    display: flex;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
}
.nav > li > a {
    padding: 14px 16px;
    display: block;
    color: lightblue /* Couleur des liens */
    text-decoration: none;
    text-transform: uppercase;
    font-size: .8em;
}
.nav > li > a.active {
    border-bottom: 2px solid #E64A19;
}

La question est : Y-a-t-il une solution pour que le html d'un menu horizontal grandes résolutions puisse aussi servir pour les petites résolutions (handburger ou autres) ?
Merci pour les avis.
25 Dernières réponses