28172 sujets

CSS et mise en forme, CSS3

Maudit soit mon menu ..

Hi there !

Je suis à la limite de la crise de nerfs, je viens de réaliser que j'étais incapable de concevoir un simple menu en CSS Smiley bawling
Comme toujours, le résultat est impeccable sous MFF (2.0.12) mais sous IE (6.0.2) et sous Safari (3.0.4) c'est un vrai carnage (je n'ai pas testé d'autres navigateurs). J'ai essayé des optimisation dans tous les sens, je bloque .. en sachant pertinemment que la réponse est devant mon nez mais que je la vois pas.

Voici le lieu du crime : http://andreloconte.com

ps : le "design" actuel est juste en place en attendant que je termine de concevoir le vrai design donc no-comment Smiley cligne

edit : j'oubliais ..

le bout de code incriminé :

<ul id="menu">
   <li><a href="http://andreloconte.com/" class="current">Accueil / Home</a></li>
   <li><a href="http://andreloconte.com/portfolio/" >Portfolio</a></li>
   <li><a href="http://andreloconte.com/" >Blog</a></li>
</ul>

et le css qui l'accompagne :

ul#menu {
   width: 100%;
   height: 40px;
	
   list-style-type: none;
	
   margin: 0px;
   padding: 0px 0px 0px 0px;
	
   text-align: center;
	
   border-bottom: 1px solid #e5e5e5;
   background: #F0EFE9;	
}
   ul#menu li {
      float: left;
		
      margin: 0px;
      padding: 0px;
   }
   ul#menu a {
      float: left;
			
      margin: 15px 3px 0px 3px;
      padding: 3px 8px 3px 8px;
			
      color: #a8a8a8;			
      font-size: 12px;
			
      border: 1px solid #e5e5e5;
      background: #F0EFE9;
   }
         ul#menu a:hover {
            background: #f5f5f5 url('../images/menu-arrow.png') no-repeat center bottom;
         }
         ul#menu a.current {
            border-bottom: 1px solid #ffffff;
            background: #ffffff;
         }
         ul#menu a.current:hover {
            background: #ffffff;
         }

Modifié par Akhilleus (13 Mar 2008 - 12:11)
Bonjour,

Je ne sais pas si c'est résolu, mais de mon côté j'obtiens le même rendu (avec un jeu d'un ou deux pixels à l'occasion, dans tel ou tel navigateur, mais rien de flagrant), avec tous les navigateurs testés:
- FF 2;
- Opera 9;
- Konqueror 3.5;
- Safari 3b;
- IE 6.

Où est le problème?
Non non, le sujet n'est pas résolu Smiley cligne
Même si la différence est de quelques pixels, c'est ce qui fait que mon menu ressemble à quelque chose ou pas.

Voilà le rendu sous firefox (auquel je souhaiterais arriver partout) :

http://www.omicronlab.net/upload/upic-0646690001205729250.png

mais sous safari ..

http://www.omicronlab.net/upload/upic-0615880001205729529.png

.. et sous IE6, ..

http://www.omicronlab.net/upload/upic-0829386001205729409.png

.. c'est pas ça Smiley decu
Modifié par Akhilleus (17 Mar 2008 - 05:53)
Salut,

Si ton problème provient de la bordure bottom de tes li (Si j'y vois bien Smiley cligne ) Ça proviendrait du positionnement différent des borders (interne ou externe) entre les différents navigateurs notamment IE6.
Pour corriger cela essaye 

ul#menu {
	margin: 0px 0 -1px 0;
}


Si la modification n'interfère pas trop pour les autres navigateurs sinon (mieux?) en commentaire conditionnel pour ie6 et <.

Si ce n'est pas ton problème, je dois changer de lunette Smiley biggol
ghost a écrit :
Ça proviendrait du positionnement différent des borders (interne ou externe) entre les différents navigateurs notamment IE6.

Bon, c'est fini de colporter cette bêtise partout sur le Web? Je pense ghost que tu devrais savoir qu'IE6 applique le mode de boite CSS du moment qu'il est en mode Standard et pas en mode Quirks. Dans ce cas précis, et sauf erreur de ma part, la page est bien en mode standard. Donc rien à signaler de ce côté là.

Le problème ici vient uniquement du fait que ul#menu a une hauteur fixe... tandis que son contenu (les items du menu) a une position verticale et une hauteur qui dépendra de la taille du texte, ou même plus finement du calcul du rendu du texte par un navigateur ou une libraire du système d'exploitation.

Solution:
1. ne pas figer la hauteur de ul#menu;
2. utiliser un overflow: hidden par exemple pour empêcher le dépassement des flottants;
3. si besoin, travailler avec le positionnement relatif pour faire mordre les items du menu de 1px vers le bas.
Modérateur
bonjour,

Apparemment il y a des interprétation différentes sur les marges par rapport a la dimension donné a ul.

peut-etre vaut t-il mieux joué sur un padding-top pour ul (et un overflow:hidden; pour englober les flottant ) , et eliminé la bordure basse des liens , ainsi que pour .current

comme ceci par exemple:
ul#menu {
	width: 100%;
	
	
	list-style-type: none;
	
	margin: 0px;
	padding: 0.3em 0px 0px 0px;
	
	text-align: center;
	overflow:hidden;
	border-bottom: 1px solid #e5e5e5;
	background: #F0EFE9;	
}
	ul#menu li {
		float: left;
		margin: 0px;
		padding: 0px;
	}
		ul#menu a {
			float: left;
			
			margin: 15px 3px 0px 3px;
			padding: 3px 8px 3px 8px;
			
			color: #a8a8a8;			
			font-size: 12px;
			
			border: 1px solid #e5e5e5;
			border-bottom:0;
			background: #F0EFE9;
		}
		ul#menu a:hover {
			background: #f5f5f5 url('../images/menu-arrow.png') no-repeat center bottom;
			text-decoration: none;
		}
		ul#menu a.current , ul#menu a.current:hover{
			background: #ffffff;
		}


Cette mise en forme est un peu moins rigide que la tienne et devrait passer un peu mieux dans les différents navigateurs.

GC


<edit> GRILLEE ! en substance , le height : 40px ; est responsable des différents rendu .... laissé donc au maximum faire les navigateurs </>
Modifié par gcyrillus (17 Mar 2008 - 15:56)
Oups !!!

M'a crié dessus boss Florent...
Oki, je vais réciter 10 fois les recommandations du w3c et copier 100 fois Alsacréations avec un S et même un accent...

Ca ira ? Smiley cligne
Sujet clos
Aller à