28173 sujets

CSS et mise en forme, CSS3

Bonjour.

J'ai encore un petit problème avec mon site.

J'explique :

J'ai un menu composé de cette façon :

<ul>
<li>Lien1</li>
<li>Lien2</li>
<li>Lien2</li>
</ul>


Ce menu prend 760 pixels de largeur.

Le problème est que le titre de ma page (balise <h1>...) apparait avec un espace au-dessus sous IE (c'est ce que je veux obtenir), mais il n'y a pas cet espace sous FireFox.

Captures d'écran :
Sous FireFox :
http://img114.imageshack.us/img114/152/firefox2mu.gif

Sous IE :
http://img114.imageshack.us/img114/908/ie6me.gif

Pourtant, mes attributs margin et padding sont à zéro pour les deux balises concernées...

Si je mets un margin-bottom à ma balise <ul> qui a une longueur de 760px pour que l'espace apparaisse sous FireFox, cet espace devient trop grand sous IE. Ei si je mets une margin-top à ma balise <h1>, mème problème.

Quelqu'un peut m'aider?

Merci d'avance.
Modifié par j-s (07 Mar 2006 - 19:37)
Bonsoir,

Le code fourni est trop succint pour pouvoir t'aider efficacement, désolé...
Peut-être un petit lien ?
Ou bien un peu plus de code, en particulier le CSS correspondant à ta balise H1 et à ton UL.

(remarque: j'ai eu exactement le même problème à régler cet après-midi, je pense que ça ne doit pas être très difficile, mais là, je ne peux pas corriger "en aveugle")
Oui j'ai trouvé c'est simple finalement...

Solution (si ça peut en aider d'autres) :

C'est hyper simple, il faut mettre le menu dans un div, (donc ne pas mettre les balises <ul> entre 2 divs sans qu'elles soient elles-mêmes dans un div....)


<div id="header">bla bla</div>

<div id="menu">  <!-- balise div à rajouter [smile] -->
<ul>
<li>Lien1</li>
<li>Lien2</li>
<li>Lien3</li>
</ul>
</div>

<div id="footer">bla bla</div>


Ensuite, il faut appliquer des marges et un padding de zéro à ce div et en adapter les mesures à ses besoins (dans mon cas j'ai mis un width de 760 pixels).

Et là on applique un margin-top à la balise <h1> et normallement ça fonctionne...

(Corrigez-moi si je me tropme Smiley rolleyes )
Modifié par j-s (07 Mar 2006 - 02:05)
Bien, alors si "ça fonctionne", il ne te reste plus qu'à éditer le sujet de ton premier message pour y rajouter un "[Résolu]" (conformément aux règles du forum, voir la Faq)...

PS: ici, ce serait même un "Auto-Résolu" Smiley smile

PS2: je pense quand même qu'il devrait être possible de se passer de ce div englobant le ul (les paramètres width, padding et margin ne peuvent-ils être appliqués directement au ul lui-même, éventuellement en lui donnant un id pour qu'ils ne s'appliquent qu'à celui-là ?). Si c'est possible (je n'affirme rien dans ce cas en particulier), ce serait (encore) plus propre...