Un souci de css avec petit écran type tablette
jh_kd
Messages postés
41
Statut
Membre
-
jh_kd Messages postés 41 Statut Membre -
jh_kd Messages postés 41 Statut Membre -
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:
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
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
A voir également:
- Un souci de css avec petit écran type tablette
- Double ecran - Guide
- Tablette samsung a9+ 128 go avis - Accueil - Tablettes
- Utiliser tablette comme deuxieme ecran - Guide
- Capture d'écran whatsapp - Accueil - Messagerie instantanée
- Retourner ecran pc - Guide
2 réponses
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
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;.
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):
etc.
A+, Jean
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>
etc.
A+, Jean
