28173 sujets

CSS et mise en forme, CSS3

Onglets multi-lignes

J'utilise un formatage CSS très simple pour des onglets (non dynamiques), mais lorsque les onglets sont nombreux ou que l'utilisateur redimensionne le texte/le navigateur, le passage en multiligne est très moche...

Le CSS:

.menu_onglet { /* boite qui contient le menu (les onglets) */
  border-bottom:solid 1px black ; /* crée le trait noir en-dessous des onglets */
  padding-top:12px ; /* marge intérieure haute */
  padding-bottom:3px;
  clear:right;} /* marge intérieure basse */
.onglet { /* style des onglets inactifs */
  border:solid 1px black ; /* encadrement */
  margin:5px 0px 0px 1px ; /* marge extérieure */
  padding:3px 5px 3px 5px} /* marge intérieure */
a.onglet { /* style des liens se trouvant dans un onglet inactif */
  background-color:#bbcbe5 ; /* le fond de l'onglet est gris */
  text-decoration:none; /* les liens ne sont pas soulignés */
  white-space:nowrap;}
.onglet-actif { /* style de l'onglet de la page active */
   border:solid 1px black ; /* l'encadrement est porté à 2 pixels */
   border-bottom:solid 1px white ; /* le trait inférieur est effacé */
   margin:5px 1px 0px 2px ; /* marges extérieures */ 
   padding:3px 7px 3px 7px ; /* marges intérieures */ 
   background-color: white; /* le fond de l'onglet actif est blanc*/
   font-weight: bold;
   white-space:nowrap;}

et en pratique:
http://www.unesco.org/culture/ich/index.php?pg=00015

Quelqu'un aurait-il une idée pour remédier à çà?
Ton code est presque illisible avec tous ces commentaires, les "/* marge extérieure */" et autres sont inutiles (margin = marge extérieure, pas besoin de l'indiquer à mon avis).

a écrit :
border-bottom:solid 1px white ; /* le trait inférieur est effacé */


J'aurai plus vu un 
border-bottom : none
car tu veux effacer et non mettre en blanc.

Sinon, je n'ai pas d'idée pour tes onglets Smiley confus
Bonjour!
Smiley biggrin
Merci de vos réponses et désolé pour mes mauvaises manières et mon code de cochon. Je vais simplifier çà rapidement.
Hugues
Pour ma part je trouve que le passage sur plusieurs lignes est correct. Pas optimal bien sûr, mais ça reste lisible, ce qui est l'essentiel pour un agrandissement de deux ou trois niveaux.

On ne peut pas en dire autant du menu de gauche qui se décale complètement dès le troisième niveau d'agrandissement.
Tes onglets se chevauchent un petit peu quand l'agrandissement est énorme. Par contre ton breadcrumb et ton toplinks ont des problèmes plus sérieux. Peut être envisager des tailles/marges en em?
Pwapwal a écrit :
Tes onglets se chevauchent un petit peu quand l'agrandissement est énorme.

À noter que le RGAA (référentiel général d'accessibilité pour les associations) ne demande qu'un rendu accessible avec deux niveaux d'agrandissement (taille « la plus grande » sous IE et deux Ctrl+ sous Firefox).
Cf. RGAA > Point de contrôle 3.4 > http://rgaa.referentiels.modernisation.gouv.fr/index.php/front/web/points_de_controle/tous_les_tests_web/3_4/3_4_3Test 3.4.3[/url
Ce point de contrôle a d'ailleurs le statut « Recommandé ».

Pwapwal a écrit :
Par contre ton breadcrumb et ton toplinks ont des problèmes plus sérieux. Peut être envisager des tailles/marges en em?

Le constat est bon, mais la solution proposée mauvaise.
Marges verticales : en EM si on veut, c'est pas bien important.
Marges horizontales : en pixels ou pourcentages. Surtout pas en EM (réduction de l'espace disponible pour le contenu lors de l'agrandissement du texte).
Hauteur des éléments : pas de hauteur en pixels. Les hauteurs en EM limitent la casse, mais c'est pas terrible. Solution : pas de hauteurs du tout. Penser à utiliser les padding, le line-height, et si besoin la couleur de fond d'un conteneur commun ou la technique des colonnes factices (utile pour la cohérence visuelle de deux éléments n'ayant pas de hauteur définie).

Ensuite, le menu de gauche aurait sérieusement besoin d'un clear: left.

Pour revenir aux onglets : même avec trois niveaux d'agrandissement du texte, ils restent tout à fait compréhensibles et utilisables. Je n'y toucherais pas. Le léger recouvrement de la première ligne par la deuxième ne masque pas l'information, et à la rigueur aide même à comprendre que ces différents liens vont bien ensemble, ce qui est plutôt utile.

À partir de deux ou trois niveaux d'agrandissement, tes problèmes sont plutôt :
- le menu qui a besoin d'un clear: left ;
- les éléments en hauteur fixe (même si fixée en EM) ;
- les mots longs censés tenir dans un espace réduit, comme par exemple «Intergovernmental» dans ton menu de gauche.
Modifié par Florent V. (22 Jun 2007 - 18:28)
Merci beaucoup de vos contributions
- effectivement le problème d'onglet n'est pas rédibitoire. Je me pencherai dessus quand j'aurai plus d'éléments à gérer
- merci de m'avoir mis le nez sur un truc évident (clear:left)
- je vais étudier en détail les différentes techniques mentionnées avant de corriger ce qui reste problématique (breadcrumb)
Sujet clos
Aller à