Creer une bar horizontale ac liste et form

clem25 -  
astuces72 Messages postés 2146 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,

J aimerais cree une bar horizontale ac de ds une liste et bar de recherche. J aimerais que cette bar soit d'une couleur (ici bleu mais je m en fiche). Le probleme c est que quand j essaye d'espacer la liste ac la bar de recherche ac margin ou padding la couleur disparait. Je pense que je n utilise pas du tout le bonne methode. De plus j aimerais que le petit espace blanc au-dessus de ma bar disparaisse. En d autre terme que la couleur commence des le haut de la page.

Merci bcp pour votre aide (je sais je suis nul).

Le code:

#bar {
background-color: blue;
}

#menu ul li{
display: inline;
float:left;
}

#form {
padding-left: 30px;

}
</style>
</head>

<body>
<div id="bar">

<div id="menu">
<ul>
<li id="current"><a href="index.html">Home</a></li>
<li><a href="index.html">Archives</a></li>
<li><a href="index.html">Profile</a></li>
<li><a href="index.html">Followers</a></li>
<li><a href="index.html">Support</a></li>
</ul>
</div>

<div id="form">
<form method="get" action="http://www.google.com/custom">
<input name="q" size="25" maxlength="255" value="" type="text" />
<input name="sa" value="search" type="submit" />
<input name="cof" value="" type="hidden" />
</form>

1 réponse

  1.
    astuces72 Messages postés 2146 Date d'inscription   Statut Membre Dernière intervention   1 669
     
    slt

    essaye ça: 

    <style type="text/css">
#bar { 
background-color:#F36; 
} 
.text_deco{
color: #FFF;
text-decoration: none;	
}
li{
display: block;
float: left;
padding: 4px;
} 
#pos_form {
padding-left:  450px;
} 
</style>
</head>
<body> 
<div id="bar">
<li id="current" ><a href="index.html" class="text_deco">Home</a></li> 
<li><a href="index.html" class="text_deco">Archives</a></li> 
<li><a href="index.html" class="text_deco">Profile</a></li> 
<li><a href="index.html" class="text_deco">Followers</a></li> 
<li><a href="index.html" class="text_deco">Support</a></li> 
<div id="pos_form">
<form method="get" action="https://www.google.com/webhp"/> 
<input name="q" size="25" maxlength="255" value="" type="text" /> 
<input name="sa" value="search" type="submit" /> 
<input name="cof" value="" type="hidden" /> 
</form> 
</div>
</div> 
</body>
    0