Un souci de css avec petit écran type tablette

jh_kd Messages postés 41 Date d'inscription Statut Membre Dernière intervention -
jh_kd Messages postés 41 Date d'inscription Statut Membre Dernière intervention - 24 févr. 2022 à 15:49

Bonjour,

J'ai un css dont le menu (pas codé, seulement adapté par moi) s'affiche bien depuis 2005 (et toujours bien sur ordi).
Mais avec les tout petits écrans le menu est décalé (déborde) à droite (même en affichage horizontal).
J'ai essayé de supprimer les 3 occurrences de width:1070px; mais cela fiche tout par terre (tout mélangé).
J'ai cherché sur le web et il pourrait y avoir une solution avec les media queries (requêtes média) en CSS3 (je suis en css2).
Après des recherches sur le web j'ai abouti à ajouter le code suivant après mon code .container ci-dessous mais aucun impact:

@media only screen and (max-device-width:980px) {.container {width:80%; padding-top:10px;}}

Un expert pour m'aider avec les media queries (une erreur dans mon code?) ou toute autre solution compatible W3C?

Merci d'avance.

Voici le bout de code css initial

.container {width:100%; padding-top:10px;}
.sep, .sep ul {padding:0; margin:0; list-style:none;}

.sep {margin:0 auto; position:relative; overflow:hidden; width:1070px; height:62px; border:1px solid #FF860D;}
.sep div div {position:absolute; left:0; height:0; width:1070px;}
.sep ul {position:absolute; left:0; bottom:0;}

.sep li {float:left; margin-top:0;}
.sep li.right {float:right;}
.sep li.right ul {left:auto; right:0;}
.sep li.right ul li {float:right;}

.sep a {position:relative; line-height:31px; display:block; font-weight:bold; font-family: verdana, sans-serif; font-size:12px; padding:0 4px; text-decoration:none; outline:0;}
.sep a.top-a {z-index:10; min-width:1px; margin-bottom:100px; color:#000066;}
* html .sep a.top-a {width:1px;}

.sep ul a {height:31px;top:31px;float:left; color:#000066;}

.sep ul a.pad {padding:0 1px;}

.sep ul a.pad b {position:absolute; left:0; height:31px; display:block; width:1070px; cursor:default;}
.sep li.right ul a.pad b {left:auto; right:0;}

.sep li:hover > a {color:#c00;}

.sep a.top-a:hover, 
.sep a.top-a:active, 
.sep a.top-a:focus {margin-bottom:0; color:#c00;}

.sep ul a:hover,
.sep ul a:active,
.sep ul a:focus {padding-bottom:100px; color:#c00;}

Configuration: Windows / Opera 83.0.4254.62

Afficher la suite

A voir également:

Un souci de css avec petit écran type tablette
Double ecran - Guide
Utiliser tablette comme deuxieme ecran - Guide
Tablette samsung a9+ 128 go avis - Accueil - Tablettes
Capture d'écran whatsapp - Accueil - Messagerie instantanée
Retourner ecran pc - Guide

2 réponses

Réponse 1 / 2

Pitet Messages postés 2826 Date d'inscription Statut Membre Dernière intervention 527

Bonjour,

Il faudrait partager le code html correspondant au code css initial pour analyser le problème.

Une première idée à tester : au lieu de supprimer les occurrences de

width: 1070px;

, essaye de les remplacer par un

max-width: 1070px;

Réponse 2 / 2

jh_kd Messages postés 41 Date d'inscription Statut Membre Dernière intervention

Bonjour Pitet,

Merci!

La piste avec

max-width: 1070px;

ne marche déjà pas sur l'ordi (14 pouces).

cela fiche tout par terre (tout mélangé et agrégé)

voici le code du header (dans un include pour toutes les pages):

<div class="container">

<ul class="sep">
	<li><a class="top-a" href="index.php" onMouseOver="this.title='principes, contexte'" onMouseOut="this.title=''"><img src="index-musique.gif" alt="" title="accueil, attention ergonomie décalée à droite sur tout petit écran" width="60"></a></li>
	<li><a class="top-a" onMouseOver="this.title='actualités, généralités, pistes-enregistrements'" onMouseOut="this.title=''">INFO</a>
		<div><div>
		<ul>
			<li><a class="pad"><b></b></a></li>

			<li><a class="sub" href="debut-edito.php" onMouseOver="this.title='éditoriaux, buzz et billets d\'humeur'" onMouseOut="this.title=''">ÉDITORIAUX-ÉCHOS</a></li>
			<li><a class="sub" href="debut-actus.php" onMouseOver="this.title='actualités, créations-reprises, tous compositeurs'" onMouseOut="this.title=''">ACTUS-CONCERTS</a></li>
			<li><a class="sub" href="debut-histoire.php" onMouseOver="this.title='prémices et grandes dates'" onMouseOut="this.title=''">HISTOIRE</a></li>
			<li><a class="sub" href="debut-pays.php" onMouseOver="this.title='généralités par pays'" onMouseOut="this.title=''">PAYS-TENDANCES</a></li>
			<li><a class="sub" href="debut-styles.php" onMouseOver="this.title='styles majeurs sans parti pris'" onMouseOut="this.title=''">STYLES-ÉCOLES</a></li>
			<li><a class="sub" href="debut-20emeParallele.php" onMouseOver="this.title='initiation 20ème siècle et discographie'" onMouseOut="this.title=''">20ÈME PARALLÈLE</a></li>
			<li><a class="sub" href="debut-Cd-1001.php" onMouseOver="this.title='meilleurs CD du 20ème siècle'" onMouseOut="this.title=''">1001 CD</a></li>
			<li><a class="sub" href="debut-enregistrements-selection.php" onMouseOver="this.title='meilleurs CD-DVD selon presse et internautes'" onMouseOut="this.title=''">TOP-REC</a></li>
			<li><a class="sub" href="debut-contact.php" onMouseOver="this.title='formulaire courriel et bonus'" onMouseOut="this.title=''">CONTACT</a></li>


		</ul>
		</div></div>
	</li>
	<li><a class="top-a" onMouseOver="this.title='liens, glossaire, vidéos, auteur, FAQs, plan'" onMouseOut="this.title=''">SERVICES</a>
		<div><div>
		<ul>

Un souci de css avec petit écran type tablette

2 réponses

Votre réponse

Discussions similaires