Bonjour à tous,
j'essaye de faire un menu de type onglet (en haut de page, l'ensemble centré) avec mon groupe de liens alignés à gauche et un formulaire de recherche (input texte et submit) aligné à droite... et je ne m'en sorts pas !
Voici en gros le schéma : | [liens form] |
*| = bord de page
[ ] = div
Voici mes bouts de code :
<div id="container">
<div id="header">
<ul id="onglet"><!-- // Menu Onglets //-->
<li><a href="#">Société</a></li>
<li>|</li>
<li><a href="#">Chauffage</a></li>
<li>|</li>
<li><a href="#">Plomberie</a></li>
<li>|</li>
<li><a href="#">Primes</a></li>
<li>|</li>
<li><a href="#">Contact</a></li>
<li class="spacer"> </li>
<li>
<form action="#" method="post">
<input type="text" /> <input type="submit" value="Recherche" />
</form>
</li>
</ul>
</div>
</div>
et mon css :
div#container { width:980px; margin:15px auto 20px; text-align:left; }
div#header { width:980px; text-align:center; }
ul#onglet { width:960px;height:28px; margin:0 20px 0 10px; list-style-type:none; }
ul#onglet li { float:left; height:28px; text-align:center; margin:0 10px; }
ul#onglet li a { display:block; height:28px; font:normal 18px Arial,sans-serif; color:#3287C8; text-decoration:none; }
ul#onglet li a:hover { display:block; background:url(images/bg_button.gif) no-repeat 0 0; color:white; }
ul#onglet li.spacer { width:150px; }
ul#onglet li input[type="text"] { background-color:#CBE1F0; border:1px solid #CBE1F0; }
ul#onglet li input[type="submit"] { background-color:white; font:bold 16px Arial, sans-serif; color:#3287C8; border:0; cursor:pointer; }
sous Firefox ça se passe bien mais sou IE le form retourne à la ligne... en plus de celà, la méthode que j'ai utilisé n'est pas très "adaptive" (pixel fixe, d'où problème entre navigateur...).
Une idée ?
Dans le pire des cas je pensais séparer mon menu en div avec les liens d'un coté et le form de l'autre... mais j'aimerais si possible éviter ça.
Merci de votre aide !
Monkey Monk
