Webmaster Hub > Menu CSS

Version complète: sur le forum Webmaster Hub : Menu CSS

Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS

v4np13

mercredi 11 janvier 2006 à 20:18

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:

CODE

#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

Dudu

mercredi 11 janvier 2006 à 21:38

Salut

CITATION(v4np13 @ mercredi 11 janvier 2006, 20h18)

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

mercredi 11 janvier 2006 à 21:40

CITATION(Dudu @ mercredi 11 janvier 2006, 21h38)

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.

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

mercredi 11 janvier 2006 à 21:54

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

dièse

mercredi 11 janvier 2006 à 22:22

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

v4np13

mercredi 11 janvier 2006 à 22:31

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

dièse

mercredi 11 janvier 2006 à 22:34

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

mercredi 11 janvier 2006 à 22:37

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

CODE

#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

samedi 21 janvier 2006 à 14:39

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

Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.