28172 sujets

CSS et mise en forme, CSS3

Problème CSS d'un menu entre PC et Mac

Bonjour à tous,
Je travaille sur ce projet : Compagnie Garin Trousseboeuf
Mon souci se situe au niveau du menu. Sur mon PC avec Firefox 2 et IE6 j'ai le résultat souhaité : copie d'écran)
Par contre sur MAC avec Firefox 2 et Safari voilà ce que cela donne : copie d'écran)
Je ne pensais pas avoir de si grande différence entre PC et Mac avec le même navigateur.

Voici les codes XHTML et CSS du menu :

<div id="menu">
			<ul>
				<li id="accueil"><a href="#"><img src="images/retour.gif" width="12" height="20" /></a></li>
				<li><a href="pages/spectacle.php" title="Les spectacles">spectacles</a><span><img src="images/rouge.gif" width="7" height="8" /></span></li>
				<li><a href="pages/calendrier.php" title="Les calendriers">calendrier</a><span><img src="images/rouge.gif" width="7" height="8" /></span></li>
				<li><a href="pages/castelet.php" title="Castelet des oiseaux">castelet des oiseaux</a><span><img src="images/rouge.gif" width="7" height="8" /></span></li>
				<li><a href="pages/stage.php" title="Formations">formations</a><span><img src="images/rouge.gif" width="7" height="8" /></span></li>
				<li><a href="pages/liens.php" title="Les liens">liens</a></li>
				<li id="contact"><a href="#" title="Contact pro"><img src="images/mailto_pro.gif" width="107" height="20" /></a></li>
			</ul>
		</div>

/* STYLE MENU */
#menu {
	background:url(images/menu.gif) repeat-y;
	height:20px;
	width:730px;
	position:absolute;
	left:270px;
	top:136px;
	}

#menu ul {
	position:relative;
	top:-16px;
	left:-40px;
	}
	
#menu li {
	list-style:none;
	display:inline;
	}

#menu a {
	color: #FFC855;
	font-size:1.5em;
	font-weight:bold;
	font-variant:small-caps;
	text-align: center;
	text-decoration: none;
	}

#menu a:hover {
	color: #FFE664;
	font-size:1.5em;
	font-weight:bold;
	font-variant:small-caps;
	text-align: center;
	text-decoration: none;
	}
	
#menu img {
	margin-left:10px;
	margin-right:10px;
	}

#menu #in {
	color:#FFFFBB;
	font-size:1.5em;
	font-weight:bold;
	font-variant:small-caps;
	text-align: center;
	text-decoration: none;
	}
	
#menu #accueil {
	position:relative;
	top:6px;
	left:0px;
	}
	
#menu #contact {
	position:relative;
	top:6px;
	left:6px;
	}
	
/* FIN STYLE MENU */


Auparavant, j'ai fais le menu sans liste <li>, je me retrouvais avec le même problème (à peu de chose près) d'affichage différent entre PC et Mac.
Une idée ?
Bonjour,

Ne pas miser sur le rendu au pixel près du texte. Les fontes installées peuvent varier d'un système à l'autre, leur support peut varier d'un navigateur à l'autre, le mode de rendu du texte (notamment le lissage) peut varier suivant le système ou le navigateur, l'utilisateur peut réduire ou agrandir le texte, etc.

Si chacun de tes éléments li du menu doit avoir une largeur précise, donne-lui cette largeur en pixels. Dans ce cas, on fera flotter les li à gauche (plutôt que de les passer en display: inline, car les éléments en affichage de type en-ligne ne peuvent pas avoir de largeur).
Modifié par Florent V. (26 Feb 2008 - 11:15)
Merci Florent V.

J'ai donc fixé les tailles de typo en pixels.
Les li en float:left... Si je me réfère au tutoriel sur les menus, cette méthode ne sera donc utile que lorsqu'on désire obtenir des éléments de menu de mêmes dimensions.
Or les éléments de mon menu ne sont pas tous de même dimension... Au final, sur IE les item du menu ne sont pas correctement alignées horizontalement...

Voir http://www.web-map.fr/CGT/ avec IE
Modifié par Isobel (26 Feb 2008 - 12:27)
Isobel a écrit :
J'ai donc fixé les tailles de typo en pixels.

Perdu. Tu n'as aucune assurance d'obtenir le rendu souhaité de la sorte, pour les raisons que j'ai évoqué tout à l'heure:
- modification de la taille du texte par l'utilisateur (donner des tailles de texte en pixels ne fige pas le texte pour autant);
- utilisation d'une police de substitution différente de la police (fonte) prévue;
- même avec la même fonte sur tous les systèmes, les mécanismes de calcul du rendu exact du texte (avec ou sans lissage) font que le texte n'occupera jamais exactement le même espace d'un système à l'autre, d'un ordinateur à l'autre, etc.
Le seul moyen d'être à peu près sûr du rendu des fontes c'est de faire des images.

Isobel a écrit :
Les li en float:left... Si je me réfère au tutoriel sur les menus, cette méthode ne sera donc utile que lorsqu'on désire obtenir des éléments de menu de mêmes dimensions.

Ou si on souhaite pouvoir donner une largeur en pixels à l'un ou l'autre élément li, ou bien une largeur spécifique à chaque li. C'est rare qu'on souhaite le faire, mais bon...
Modifié par Florent V. (26 Feb 2008 - 14:04)
je suis en mac et je suis allée voir ton site, pour moi ça passe bien.
Il faut aussi penser qu'IE n'existe plus sur mac
je suis d'accord avec florent, il m'arrive aussi de fixer le li
d'un autre côté tu auras toujours des différences suivant le navigateur et de la résolution de l'ordi

bon courage
Merci à vous !
epmale a écrit :
je suis en mac et je suis allée voir ton site, pour moi ça passe bien.
Il faut aussi penser qu'IE n'existe plus sur mac

Oui, je sais ça, mais mon souci ici était la différence avec Firefox entre PC et Mac. Avec quel navigateur as-tu regardé le site ?

Florent a écrit :
Perdu. Tu n'as aucune assurance d'obtenir le rendu souhaité de la sorte (...) Le seul moyen d'être à peu près sûr du rendu des fontes c'est de faire des images.

Je m'en doutais bien, mettre les tailles en pixels n'y changerait rien... Mais vu le graphisme figé du projet, je vais devoir effectivement passer par un menu avec des images...

Par contre, qu'est-ce qui explique ce problème d'alignement horizontal des intitulés avec IE6 ?

Autre question : vous connaissez sûrement le site http://www.scapture.com/ qui propose d'effectuer en quelques secondes des captures d'écran de pages Web consultées sous Linux avec Firefox, Konqueror, Opera ou Dillo
Existe-t-il d'autres sites similaires en particulier pour IE7 et tout autre navigateur sur PC et sur Mac ?

Encore une fois Merci !
Modifié par Isobel (26 Feb 2008 - 15:27)
Administrateur
Bonjour,

Isobel a écrit :
Autre question : vous connaissez sûrement le site http://www.scapture.com/ qui propose d'effectuer en quelques secondes des captures d'écran de pages Web consultées sous Linux avec Firefox, Konqueror, Opera ou Dillo
Existe-t-il d'autres sites similaires en particulier pour IE7 et tout autre navigateur sur PC et sur Mac ?

http://browsershots.org pour pas mal de navigateurs EDIT: et sous Mac aussi, c'est reviendu Smiley murf
Modifié par Felipe (26 Feb 2008 - 15:36)
Sujet clos
Aller à