[RESOLU] Problème d'affichage concernant la position de ma boîte de..

Bonjour à tous,

Je réalise entièrement mon site à la main sans Dreamweaver (excepté pour les tableaux) ou autres. Bref, j'ai un léger soucis avec la position horizontale de ma boite de recherche (boîte orange en haut à droite). Je ne comprends pas. Il doit manquer une propriété !!! J'utilise tout le temps 'float' et ça fonctionne d'habitude. Je souhaite qu'elle reste toujours au même endroit ; c'est à dire comme sur la première image de cette page de test, même lorsque l'on réduit la fenêtre (et que cela soit identique sur tous les navigateurs) :

woolyss.com/temp/index.html (Problème résolu donc le lien n'est plus valide!)

Sur cette page de test, il y a un accès rapide au CSS, des screenshots des différents navigateurs. La page est valide W3C. Il n'y a aucun CSS intégré à la page HTML. Le CSS est externe.

Le div de la boite de recherche est situé dans le div navigation.

#navigation {
  margin : 0;
  padding : 0;
  background : #ff993d;
  height : 34px;
  list-style : none;
}

#formContentMain form {
  float : left; 
  margin-left : 285px;
  width : 260px;
  height : 30px;
  background: url('FormContentMain.png') no-repeat;
}

Modifié par jikoo (18 May 2010 - 12:06)

Salut à toi,

alors déja dans ton code HTML je rajouterais un div comme ça :

<div id="box_navigation">
    <div id="navigation">
      <ul>
        <li>

          <a href="http://woolyss.com/">Home</a>
        </li>
        <li>
          <a href="tracking.php">Tracking</a>
        </li>
        <li id='active'>
          <a href="chipmusic.php">Chipmusic</a>

        </li>
        <li>
          <a href="videos.php">Videos</a>
        </li>
        <li>
          <a href="games.php">Games</a>
        </li>
      </ul>

      <div id="formContentMain">
        <form action="search.php" method="get">
          <div>
            <input name="s" value="" title="Type one word for a better search. No simple or double quotes." type="text" /><button type="submit">Search</button>
          </div>
        </form>
      </div>
    </div>
</div>

et dans le fichier CSS :

#box_navigation {
  width:100%;
  height:34px;
  background : #ff993d; 
}

#navigation { 
  width:1024px; /* à toi de mettre la valeur que tu veux */
  height : 34px; 
  margin : 0px auto; 
  padding : 0px; 
  list-style : none; 
} 
 
#formContentMain form { 
  float : left;  
  margin-left : 285px; 
  width : 260px; 
  height : 30px; 
  background: url('FormContentMain.png') no-repeat; 
} 

J'ai fait un test sur mon pc est nikel !
Tien moi au courant si tu à besoin d'aide.

Merci Viva25,

Vous m'avez enlever une épine du pied ! Tout fonctionne très bien.
Je l'ai implémenté sur le site : http://woolyss.com/

Vraiment, merci beaucoup.

A ton service !