28172 sujets

CSS et mise en forme, CSS3

[Résolu] Construire un menu dont le layout résiste à l'agrandissement

Bonsoir,

Je tente de positionner précisément un menu de navigation (ul > n*li) en CSS de telle sorte que premièrement son rendu soit le même quel que soit le navigateur et que deuxièmement (et surtout), il résiste à l'agrandissement (quelle que soit la méthode, quel que soit le navigateur).

Voici quelques screenshots (sans zoom) sous les principaux browers.
Un screencast détaillé du problème (1'12") est disponible en bas de ce post Smiley cligne

MFF 3.5.6

http://omicronlab.net/upic/4b381e81-16fa.png
Jusqu'à 4 agrandissement de texte, l'affichage reste idéal. Au delà, l'affichage est biaisé.
Idem zoom global.

IE8

http://omicronlab.net/upic/4b381e99-1b1b.png
Quelle que soit la taille d'agrandissement de texte sélectionnée, l'affichage reste idéal.
En zoom global, l'affichage est biaisé.

Opera 10.10

http://omicronlab.net/upic/4b381eb4-111f.png
Dès le départ l'affichage est biaisé, le problème persiste avec l'agrandissement.

Safari 4

http://omicronlab.net/upic/4b381ed8-1102.png
Dès le départ l'affichage est biaisé, le problème persiste avec l'agrandissement.

Chromium 4

http://omicronlab.net/upic/4b381ef6-1857.png
Dès le départ l'affichage est biaisé, le problème persiste avec l'agrandissement.

CSS + Source : labs
Screencast du problème à travers les différents navigateurs (1'12") [MP4, 5.6 Mo]

Auriez-vous une idée quant à l'origine du problème ?

Un grand merci d'avance.
Modifié par Akhilleus (29 Dec 2009 - 06:05)
Le problème est résolu, plutôt que de positionner mon menu à coup de "float", j'ai utilisé le positionnement absolu.

Mon :
html, body {
  margin: 0;
  padding: 0;
}
body {
  font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;
  font-size: 100%;
}
div#header {
  height: 2.5em;
  margin: 0;
  padding: 0;
  background: #000;
}
h1 {
  float: left;
  margin: 0;
  padding: .2em 0 0 .25em;
  width: 4em;
  line-height: 1em;
  font-size: 2em;
  text-transform: uppercase;
  color: #fff;
}
ul#nav {
  margin: 0;
  padding: .5em 0 0 0;
  list-style-type: none;
}
ul#nav li {	float: left; margin: 0; padding: 0; }
ul#nav li a {
  display: block;
  width: 8em;
  margin-left: .2em;
  font-size: .9em;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 2.2em;
  color: #fff;
  background: #000;
}
ul#nav li a:hover,
ul#nav li a:focus,
ul#nav li a:active {
  font-weight: bold;
  outline: 0;
  background: #de1010;
}
ul#nav li a#current {
  color: #000;
  background: #fff;
}
est devenu :
html, body { margin: 0;	padding: 0; }
body {
  font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;
  font-size: 100%;
}
div#header {
  position: absolute;
  width: 100%;
  margin: 0;
  padding: 0;
  background: #000;
}
h1 {
  position: absolute;
  top: .6em;
  left: .25em;
  margin: 0;
  padding: 0;
  font-size: 2em;
  line-height: 0;
  text-transform: uppercase;
  color: #fff;
}
ul#nav {
  margin: .5em 0 0 10em;
  padding: 0;
  list-style-type: none;
}
ul#nav li {	float: left; margin: 0; padding: 0; }
ul#nav li a {
 display: block;
 width: 8em;
 margin-left: .2em;
 font-size: .9em;
 text-align: center;
 text-transform: uppercase;
 text-decoration: none;
 line-height: 2.2em;
 color: #fff;
 background: #000;
}
ul#nav li a:hover,
ul#nav li a:focus,
ul#nav li a:active {
 font-weight: bold;
 outline: 0;
 background: #de1010;
}
ul#nav li a#current {
 color: #000;
 background: #fff;
}
@darkstar2023 : les marges n'avaient pas d'incidence dans ce cas ci Smiley cligne
Modifié par Akhilleus (29 Dec 2009 - 12:55)
Sujet clos
Aller à