Un module de recherche dans un bandeau

Bonjour à tous!

J'ai un souçi, non pas de code, car je n'en suis pas là, mais de démarche.

J'ai réalisé une présentation de page avec un bandeau intégrant une image. Sur ce bandeau, je souhaite placer des icônes renvoyant des liens: pour cela, je pense créer une div pour chaque icône.

Mon problème est que je souhaite intégrer une barre de recherche (se servant de php et mySql) pour que les internautes effectuent des recherches sur le site, un peu à la manière de voila.fr.

Avez-vous déjà réalisé ce genre de présentation? Vous auriez une idée de comment intégrer ça à ma div bandeau?? Une div avec un z-index pour la placer devant. Ma question porte bien sur la présentation et pas sur le code php à intégrer.

Pour info, voici mon code:

div#bandeau {
	position: absolute;
	left:6px;
	right: 6px;
	top:0;
	width:990px;
	height:85px;
	background: url(Images/fonds/8.jpg);
	}

Merci par avance à toutes les âmes charitables qui vous voudront bien m'aiguiller!!

Salut.

A priori, tu pars déjà sur une fausse piste en positionnant ton bandeau en absolu. Il nous faudrait un exemple précis de la mise en page que tu as en tête pour être certains, mais je ne vois pas pourquoi ce serait nécessaire

Le positionnement absolu ne devrait être utilisé que dans des cas particuliers. Ici, si tu veux placer ton bandeau en tête de page, il suffit de le laisser dans le flux, sans préciser de positionnement, il se placera très bien tout seul. Et tu éviteras tout un tas de problèmes par la suite.

Pour ce qui est des icônes-liens, pourquoi voudrais-tu les placer dans des div séparés ? ce sont des éléments en-ligne, tu peux très bien les placer simplement dans un paragraphe, ou l'une à côté de l'autre dans un div si tu préfères.

Pour l'intégration dans le bandeau, il suffit d'imbriquer les balises. Tu peux éventuellement positionner la barre de recherche à l'intérieur du bandeau. Je ne peux pas t'en dire plus sans un schéma.

Par exemple :

[b]HTML[/b]
<div id="bandeau">
   <h1>Titre de la page</h1>
   <div id="liens">
      <!-- Formulaire de recherche -->
      <form action="search.php" method="post">
          <label for="q">Rechercher : </label><input type="text" name="q" id="q" />
          <input type="submit" value="OK" />
      </form>
      <!-- Icônes -->
      <a href="..." title="..."><img src="icone1.png" alt="..." /></a> 
      ...
   </div>
</div>

Merci!

Effectivement, j'ai enlevé le "position:absolute" et après deux ou trois réglages, cela fonctionne.

Voici ce que je souhaite faire schématiquement:



La barre menu en css est faite et est intégrée: les icônes seront placées dans une div: ok!
Mais, comment faire pour intégrer le formulaire de recherche et, je pense que le problème sera le même pour intégrer la liste déroulante des villes pour la météo: je dois mettre des tables?

Salut Thomas et bonjour à tous!

Effectivement, le code que tu m'as écris fonctionne. Cependant la barre de recherche se place en dessous des icônes. Comment faire pour le caler à côté des icônes (à l'horizontal) et déterminer l'espacement?

Voici la page sur laquelle tu peux voir le résultat:

http://develop.web.free.fr/template_generic2.php?num_camping=3

Merci d'avance!
Modifié par Neomcdn (02 Feb 2007 - 16:02)