28173 sujets

CSS et mise en forme, CSS3

[Résolu] Gauche et droite sur la même ligne

Bonjour,
je voudrai avoir un bouton "Précédent" en bas à gauche et un bouton "Suivant" en bas à droite, sur la même ligne.
Avec un tableau ça fonctionne nickel :
<table width="100%"  border="0">
  <tr>
    <td>&larr;Pr&eacute;c&eacute;dent</td>
    <td><div align="right">Suivant&rarr;</a></div></td>
  </tr>
</table>


Bon, il parait que les tableaux c'est mal, alors j'ai essayé de faire en css.
<span style="text-align:left; display:inline-block;padding-right:40%">
&larr;Pr&eacute;c&eacute;dent</span>
<span style="text-align:right; display:inline-block;padding-left:40%">
Suivant&rarr;</span>


Le résultat est approximatif : le mot "Suivant" n'est pas tout à fait à droite et si jamais je réduit un peu la fenêtre il passe à la fenêtre du dessous.

Des idées ?
Modifié par ociteau (01 Feb 2006 - 13:35)
a écrit :

<span style="text-align:left; display:inline-block;padding-right:40%">
&larr;Pr&eacute;c&eacute;dent</span>
<span style="text-align:right; display:inline-block;padding-left:40%">
Suivant&rarr;</span>


Pourquoi ajouter display: inline-block (une proriété CSS2.1 qui n'est d'ailleurs pas encore interprété par Mozilla et Firefox)?
Modifié par Hermann (31 Jan 2006 - 18:05)
Merci à tous les deux pour vos réponses.

Cygnus, le lien de recherche que tu m'as fourni m'est précieux et j'ai bon espoir d'y trouver la réponse à ma question.
D'ailleurs le lien que tu m'as fourni m'a fait tomber sur ça.

Hermann, au début je n'avais pas mis "display" et c'était comme si je n'avais pas du tout de balise Span : les mots "Précédent" et "suivant" étaient collés ensemble.
Alors j'ai fait une recherche et ai trouvé la réponse sur alsacreations.com : utiliser display:block.
Le seul problème c'est qu'il m'affiche "Suivant" sur la ligne du dessous !
Bref ça m'a transformé le SPAN en DIV : très mauvais.

Donc j'ai fait une recherche sur les différentes valeurs possibles de "display" et "inline-block" m'a paru la seule solution.

Mais si ça ne fonctionne ni avec firefox ni avec mozilla, pourquoi ne pas rester avec le tableau invisible ?
Modifié par ociteau (01 Feb 2006 - 10:00)
Salut,

Les tableaux c'est merveilleux, c'est juste leur utilisation qui est parfois regrettable.
Pour tes deux "boutons", tu vas là utiliser sept balises (une <table>, une <tr> deux, <td> et deux <a>)

Or, avec le HTML suivant : 
<p class="navig">
	<a href="#" class="precedent">&#8592;Précédent</a>
	<a href="#" class="suivant">Suivant&#8594;</a>
</p>

tu peux avoir ce résultat avec en css
.precedent {
	float: left;
}
.suivant {
	float: right;
}

Et styler de manière bien plus complexe..
Modifié par Alan (01 Feb 2006 - 12:38)
Merci beaucoup !

En relisant Comprendre le positionnement des balises en CSS, j'avais eu l'intuition qu'il fallait utiliser "float"

Alan, tu as raison je n'ai pas besoin de SPAN et mettre une classe au paragraphe me permettra de modifier le style des deux boutons en même temps.
En plus j'ai testé ton code avec IE, FireFox et Opera : nickel.
TOP ! Smiley biggrin
Modifié par ociteau (01 Feb 2006 - 13:34)
Sujet clos
Aller à