28172 sujets

CSS et mise en forme, CSS3

Menu horizontal fluide avec images arrondies png

Bonjour,

je viens de lire l'article sur IE6 et ses 20% d'utilisateur... hum hum... pas d'impasse possible donc Smiley fache sur cette version.

voici mon souci :
je dois réaliser un menu horizontal dans le header (un peu comme Alsacréation)
j'ai un background qui n'est pas uniforme et mes boutons ont des coins arrondis : une images pour mon coin gauche et une grande image qui glisse suivant le texte (je suis donc obligé d'utiliser un format png (ou gif... mais transparent).

en jouant avec les padding et margin (négatives Smiley rolleyes j'arrive à caler tout ça sauf sur IE6 l'images )

pour être + clair, voici mon code css (le code html étant une simple liste ul li) :

.menu-h a {
display:block;
background:url(images/nav-h-gauche.png) left top no-repeat;
color:#fff;
text-decoration:none;
text-align:center;
float:none;
padding:7px 0px 15px 10px;
margin: 0 0 0 -10px < pas terrible je sais...
}

.menu-h li {
float:left;
background:url(images/nav-h-droit.png) right top no-repeat;
padding-right:9px;
margin:0 6px 0 25px;
list-style-image: none
}

merci d'avance pour vos réponses
oups j'avais pas fini ma phrases à cette endroit :

...en jouant avec les padding et margin (négatives... j'arrive à caler tout ça sauf sur IE6 l'image qui fait le bord gauche ne s'affiche pas certainement à cause de cette marge négative)

re encore merci d'avance pour vos réponses
Bonjour,

Premièrement, en tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

Ensuite, concernant ton problème, une page en ligne contenant l'intégralité de ton code HTML serait plus qu'utile, notamment pour pouvoir constater le problème. Il nous faudrait plus également savoir quel doctype tu utilise ?
C'est vrai j'ai manqué aux bonnes règles du forum voici don mon code css : 


.menu-h a {
display:block;
background:url(images/nav-h-gauche.png) left top no-repeat;
color:#fff;
text-decoration:none;
text-align:center;
float:none;
padding:7px 0px 15px 10px;
margin: 0 0 0 -10px;
}

.menu-h li {
float:left;
background:url(images/nav-h-droit.png) right top no-repeat;
padding-right:9px;
margin:0 6px 0 25px;
list-style-image: none;
}


le code html reste un simple ul li

Je n'ai pas encore de serveur pour ce site mais s'il faut vraiment je peux me débrouiller.


merci
Editer...

'fin bref... Le code complet d'une page HTML peut permettre de déceler des problème auquel l'auteur du code ne pense pas. Notamment le DOCTYPE.
j'avais pas mentionner le doc type ... oups

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Sujet clos
Aller à