Problème alignement horizontal liste + form [Résolu/Fermé]

Signaler
Messages postés
641
Date d'inscription
mercredi 1 juillet 2009
Statut
Membre
Dernière intervention
10 août 2012
-
Messages postés
641
Date d'inscription
mercredi 1 juillet 2009
Statut
Membre
Dernière intervention
10 août 2012
-
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>&#124;</li>
                    <li><a href="#">Chauffage</a></li>
                    <li>&#124;</li>
                    <li><a href="#">Plomberie</a></li>
                    <li>&#124;</li>
                    <li><a href="#">Primes</a></li>
                    <li>&#124;</li>
                    <li><a href="#">Contact</a></li>
                    <li class="spacer">&#160;</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

1 réponse

Messages postés
641
Date d'inscription
mercredi 1 juillet 2009
Statut
Membre
Dernière intervention
10 août 2012
118
Bien, personne ne semble avoir de solution pour ça... alors pour clore le sujet, j'ai utilisé 2 div dans un div container. ^^

Le div container centre l'ensemble, il y a un div contenant le menu sous forme de liste aligné à droite et enfin un autre div aligné à gauche avec mon formulaire.

C'est pas plus compliqué... mais je voulais y arriver autrement... tant pis !