Bonjour,
J'ai un problème de positionnement CSS des éléments d'une liste.
Sur cette page, on voit, dans l'en-tête, une liste contenant trois éléments :
1. un champ de recherche ;
2. un lien "recherche par tag" ;
3. un lien "recherche par date".
L'ensemble de cette liste se trouve à l'intérieur d'une <div> placée en positionnement absolu.
Je souhaiterais que les deux liens se placent l'un à côté de l'autre sous le champ de recherche, et que l'ensemble (le champ de recherche ET les liens) soit aligné à droite (mais que le texte à l'intérieur du champ de recherche reste, lui, aligné à gauche).
Actuellement, mes liens ne sont pas alignés à droite et, dès que l'on zoom/redimensionne la taille du texte, le champ de recherche se décale vers la gauche (sous Firefox 3.6.13).
Voici le code HTML utilisé :
Et voici mon code CSS :
Quelqu'un aurait-il une piste ? Merci d'avance, et bonne journée à tous !
J'ai un problème de positionnement CSS des éléments d'une liste.
Sur cette page, on voit, dans l'en-tête, une liste contenant trois éléments :
1. un champ de recherche ;
2. un lien "recherche par tag" ;
3. un lien "recherche par date".
L'ensemble de cette liste se trouve à l'intérieur d'une <div> placée en positionnement absolu.
Je souhaiterais que les deux liens se placent l'un à côté de l'autre sous le champ de recherche, et que l'ensemble (le champ de recherche ET les liens) soit aligné à droite (mais que le texte à l'intérieur du champ de recherche reste, lui, aligné à gauche).
Actuellement, mes liens ne sont pas alignés à droite et, dès que l'on zoom/redimensionne la taille du texte, le champ de recherche se décale vers la gauche (sous Firefox 3.6.13).
Voici le code HTML utilisé :
<div id="searchbox">
<ul>
<li><form id="recherche" action="http://sxjpl.free.fr/biblio/" method="get"><fieldset>
<input id="q" name="q" value="recherche" title="recherche" size="10" maxlength="255" onfocus="if(value=='recherche') this.value='';" onblur="if(this.value=='')this.value='recherche';" type="text">
</fieldset></form></li>
<li class="liste"><a href="http://sxjpl.free.fr/biblio/tags">recherche par tag</a></li>
<li class="liste">- <a href="http://sxjpl.free.fr/biblio/archives">recherche par date</a></li>
</ul>
</div>
Et voici mon code CSS :
#searchbox { position: absolute; top: 195px; right: 25px; }
#searchbox input { width: 190px; padding: 2px 5px; margin: 0; border: 1px solid #000; }
#searchbox ul, #searchbox li { list-style: none; }
#searchbox li.liste { display: inline; padding: 0; margin: 0; text-align : right; }
Quelqu'un aurait-il une piste ? Merci d'avance, et bonne journée à tous !