Menu CSS

[v4np13]

Bonjour à tous,

ça fait déjà un petit temps que je me casse la tête à faire le menu de ce site.

Sur firefox, j'obtiens à peu près le résultat recherché, j'aimerai juste que le input de la recherche soit de la même hauteur que les autres éléments du menu.

Sur IE, c'est le carnage total, j'aimerai obtenir le même résultat que sur firefox.

Voici le code CSS de la partie concernée:

#hnav {
margin:0px;
height: 25px;
background-color: #2A187C;
border-top: solid 2px #2A187C;
border-bottom: solid 2px #2A187C;
}

#hnav ul{
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: white;
text-align: center;
margin: 0;
padding-bottom: 5px;
padding-top: 5px;
}

#hnav ul li{
float:left;
list-style-type: none;
}
#hnav ul li form input{
background: white;
color: #A3A3A3;
margin: 0px;
padding: 0px;
}

#hnav ul li a{
border-right: solid 1px #2A187C;
border-left: solid 1px #2A187C;
padding: 5px 10px 5px 10px;
color: white;
text-decoration: none;
}

#hnav ul li a:hover {
background-color: White;
color: #2A187C;
}

#active a:link, #active a:visited, #active a:hover
{
background-color: #CDE0FE;
color: #2A187C;
}

Comment puis-je faire?

Merci d'avance pour votre aide

Modifié 11 Janvier 2006 par v4np13

[Dudu]

Salut

j'aimerai juste que le input de la recherche soit de la même hauteur que les autres éléments du menu.

de la même hauteur ou à la même hauteur ? (ou les deux)

Quoiqu'il en soit, ce genre de problème d'alignement se règle avec la propriété CSS line-height.

[v4np13]

Salut

de la même hauteur ou à la même hauteur ? (ou les deux)

Quoiqu'il en soit, ce genre de problème d'alignement se règle avec la propriété CSS line-height.

<{POST_SNAPBACK}>

Les deux, je pense que celà sera plus beau esthétiquement. Je vais jeter un oeil à cette propriété que je ne connaissais pas.

Merci Dudu pour ta réponse

[v4np13]

Je viens de faire des tests:

- line-height ne correspond pas vraiment à ce que j'avais besoin, ça agrandi la zone de texte sans écarter les bords de l'input,

-j'ai utilisé height, ça règle la hauteur mais le input est décalé vers le bas...

-j'ai essayé de régler ce problème avec des margin, padding, vertical-align, rien ne bouge...

Comment dois-je procéder?

Encore merci pour votre aide

Modifié 11 Janvier 2006 par v4np13

[dièse]

line-height n'est pas à appliquer sur ton input mais sur la ligne sur laquelle il est placé ensuite tu peux gérer l'alignement vertical avec vertical-align.

Pour le reste je trouve bizarre d'utiliser le mode flotant sur des <li> mais peut-être que cela se fait . J'utiliserai plutôt l'attribut display. Pour tes problèmes avec IE, rien de surprenant . La propriété :hover ne peut être appliquée que sur les balises <a> avec IE, tu devrais supprimer les marges et les padding de ta liste, et ne les gérer que sur l'élément <a>.

Bon courage

Modifié 11 Janvier 2006 par dièse

[v4np13]

Merci pour ta réponse dièse, je suis arrivé au résultat que je voulais sur firefox, mais sur internet explorer, c'est une autre histoire... Je ne sais pas comment je dois m'y prendre, ca fonctionnait bien avant... mais j'ai beaucoup chipoté pour mettre le moteur de recherche.

Edit: j'avais mis display: inline; avant, j'ai changé parce que le input revenait à la ligne... j'ai peut-être fait une bétise

Modifié 11 Janvier 2006 par v4np13

[dièse]

A première vue avec IE il ne te reste plus qu'un problème certainement du aux marges de ton formulaire, en les mettant à 0 ça devrait passer

[v4np13]

Elles sont déjà à zéro, si j'ai bien compris de quoi tu parlais.

#hnav ul li form input{
vertical-align:middle;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
background: white;
color: #A3A3A3;
margin: 0px;
padding: 0px; 
}

[ryuran]

il parlait des marge du fomulaire donc form.

le margin:0; dans ce code s'applique à l'input.

et un truc il ne faaut pas mettre d'unité a la valeur 0

0em=0px=0ex=0pt=0

donc met 0 sans unité même si c'est pas ça qui va régler ton probleme