Aller au contenu

Menu CSS


v4np13

Sujets conseillés

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é par v4np13
Lien vers le commentaire
Partager sur d’autres sites

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.

Lien vers le commentaire
Partager sur d’autres sites

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 :)

Lien vers le commentaire
Partager sur d’autres sites

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é par v4np13
Lien vers le commentaire
Partager sur d’autres sites

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 :blink:. J'utiliserai plutôt l'attribut display. Pour tes problèmes avec IE, rien de surprenant :lol:. 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é par dièse
Lien vers le commentaire
Partager sur d’autres sites

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... :wacko: 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 :D

Modifié par v4np13
Lien vers le commentaire
Partager sur d’autres sites

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 :unsure:

Lien vers le commentaire
Partager sur d’autres sites

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;
}

Lien vers le commentaire
Partager sur d’autres sites

  • 2 semaines plus tard...

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

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...