28172 sujets

CSS et mise en forme, CSS3

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é :
<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">-&nbsp;<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 !
Bonjour,

tu peux éventuellement mettre un float:right sur ta classe "liste", et simplement déplacer ton "- " devant l'autre <li>..

ça fonctionne, c'est simple, est-ce que ça correspond à ce que tu recherches ?

Sinon à mon avis, le mieux serait de reconstruire ce bloc :
-ta boite de recherche dans une div,
- tes liens dans un span en dessous.

ça serait beaucoup plus simple à styler je pense!

Bonne continuation!
Bonsoir,

Merci pour ta réponse. Je tiens à conserver une liste, dans la mesure où il me semble qu'il y a une cohérence : il s'agit de 3 moyens d'effectuer une recherche sur le blog.

Ten a écrit :
tu peux éventuellement mettre un float:right sur ta classe "liste", et simplement déplacer ton "- " devant l'autre <li>..

J'ai essayé cette solution... Malheureusement, le champ de recherche continue à se décaler vers la gauche lorsque je redimensionne la taille du texte (sous Firefox 3.6.13 avec Windows 7).
Quelqu'un sait-il d'où cela pourrait provenir ?
Merci et bonne soirée à tous !