[Résolu] Un cadre, un texte a gauche, un texte a droite

Je commence tout doucement à comprendre 2-3 trucs de CSS, et j'ai essayé de faire sur mon blog une barre a la fin de chaque post permettant de renvoyer vers le post précédent, ainsi que le post suivant.

J'ai donc rajouté quelques trucs à ma feuille de style :

/* Suivant precedent ---------------------------------------------- */
#suivprec {
	clear: both;
	margin: 10px 0 20px 20px;
	border : 1px solid #ced300;
	background: #EFF2B2;
	padding: 5px;
}

.prec {
	margin: 1em 0 0 0;
	text-align: left;
}

.suiv {
	margin: -1.3em 0 0 0;
	text-align: right;
}

Dans ma page html j'ai rajouté comme ceci :

<div id="suivprec">
<div class="prec"><?php dcPostNext(-1,'<a href="%3$s" title="%2$s">&lt;&lt; Billet pr&eacute;c&eacute;dent</a>'); ?></div><div class="suiv"><?php dcPostNext(1,'<a href="%3$s" title="%2$s">Billet suivant &gt;&gt;</a>'); ?></div>
</div>

Au départ le problème que j'ai eu était que les deux textes étaient sur deux lignes différentes (un plus en haut que l'autre), j'ai donc rajouté dans le CSS les "margin" (en em, de façon à se que même si on augmente la taille du texte ils soient toujours a la même hauteur). !Voici ce que ça donne.

Le résultat est donc convaincant, mais il y a un problème : lorsque sur le premier post il n'y a que le "Post Précédent" dans la barre, celle-ci ne s'affiche plus bien. Voir ici.

Mon code est surement pas propre et trop lourd, donc si quelqu'un pouvait m'aider et m'expliquer comment mieux faire et réparer ce petit problème ? Merci beaucoup !
Modifié par wab (28 Nov 2005 - 19:04)

Bonjour,

Je comprends parfaitement que ta solution ne soit pas convaincante. Forcément, tu as quelques ennuis lorsque l'un des textes n'est plus présent.

Je te propose donc la solution suivante qui devrait résoudre ton problème. Plutôt que de définir deux classes de div, l'idéal serait tout simplement de définir deux classes d'éléments neutres span pour #suivpred : l'un flottant à gauche et l'autre à droite.

Voici donc le code CSS :

div.suivpred {
	clear: both;
	border : 1px solid #ced300;
	background: #EFF2B2;
	padding: 5px 5px 20px 5px;
	margin: 0px auto;
}

div.suivpred span.left {
	float: left;
	text-align: left;
}

div.suivpred span.right {
	float: right;
	text-align: right;
}

Le code HTML associé serait donc le suivant :

<div id="suivprec">
<span class="left"><?php dcPostNext(-1,'<a href="%3$s" title="%2$s">&lt;&lt; Billet pr&eacute;c&eacute;dent</a>'); ?></span>
<span class="right"><?php dcPostNext(1,'<a href="%3$s" title="%2$s">Billet suivant &gt;&gt;</a>'); ?></span>
</div>

Modifié par Romain H. (05 Nov 2005 - 19:09)

Bonjour wab.

Tu peux jeter un oeil chex maxdesign, ça peut t'inspirer

Floating next and back buttons using lists (en).
Modifié par Stephan (05 Nov 2005 - 19:07)

La technique de mise en page que j'ai donnée avait été traduite sur Pompage en 2001 : http://pompage.net/pompe/csspratique/ (fr)

Cet article propose également un certain nombre d'astuces intéressantes.

Merci beaucoup pour vos aides Ca marche a merveille maintenant !

Bien sûr la technique proposée par Romain H. s'applique directement au HTML existant, contrairement à la méthode avec liste qui exige adaptation du HTML.

Un petit [Résolu] ?
Modifié par Stephan (05 Nov 2005 - 19:20)

De rien !

J'ai édité ta page localement afin de te proposer une solution qui fonctionne bien. Si ton problème est [Résolu], n'oublie pas d'éditer le titre du sujet pour l'indiquer comme tel.
Modifié par Romain H. (05 Nov 2005 - 19:25)