Texte aligné gauche ET droite (je n'ai pas dit justifié)

Bonjour à tous,

Un petit problème qui commence à me les briser menu menu ...
J'en appelle à vos lumières :
Je souhaite, sur une même ligne, avoir un intitulé de liste à gauche et, par exemple, un lien cadré à droite :
Résultat souhaité :

B: Votre notice                                           exemple en pdf
Suite du texte qui passe pile poil sous les deux éléments ci-dessus.

Bien sur, cela serait très simple s'il ne s'agissait pas d'un élément de liste.
Cela donnerait, en html :

<ol>
<li>
-
-
<li>Votre notice</li><a href="bidule">exemple en pdf</a>
<p>Suite du texte ...</p>
-
-
</ol>

et en CSS

ol{list-style-type:upper-latin;...}
ol li {display:block;float:left;...}
ol a {display:block;float:right;...}
ol p {clear:both; ...}

et vogue la galère ...
Super, ça fonctionne ... mais où est passé mon "B" ???
Dommage, le "display:block;" interdit tout ce qui concerne les listes (list-image/position/type) qui ne s'appliquent qu'à des éléments de type "list-item"!!!

Donc, ma question à 10 balles est la suivante :
Existe-t-il une solution pour avoir deux éléments :
tous les deux sur la même ligne,
dont le premier est un élément de liste,
dont le premier est cadré à gauche,
dont le deuxième est cadré à droite ???

et là, je sèche.
Donc, merci par avance à la bonne âme qui m'apportera la lumière.
Modifié par Florent V. (14 Jan 2008 - 02:52)

Heu... et pourquoi ne pas faire plus simple?

<ol>
	<li>...</li>
	<li>
		<h2>Votre notice</h2>
		<p class="lien"><a href="...">Exemple en PDF</a></p>
		<p class="info">Lorem ipsum dolor sit amet.</p>
	</li>
	<li>...</li>
</ol>

(Le h2 n'est pas forcément pertinent... à voir s'il faut structure avec un titre ou pas. Niveau structure HTML, on pourrait aussi se débrouiller avec des span si le contenu est court...)

Salut,
les Li sont de base des element de type block donc pas besoin de le specifier^^

ceci dit tu peux toujours attribuer des (differentes)class a tes li en mettant au premier li

float:right

, le second tu le met en

float:right

et le troisieme tu lui met

clear:left

pour qu'il puisssent revenir a la ligne.
Modifié par hakkou (14 Jan 2008 - 08:35)

hakkou a écrit :
les Li sont de base des element de type block donc pas besoin de le specifier^^

Erreur: la valeur par défaut de la propriété display pour les éléments li n'est pas "block" mais "list-item".

Pour voir la différence:
http://web.covertprestige.info/test/38-display-list-item.html

ah d'accord, desolé j'i toujours cru qu'il etait de base en display block

Merci Flroent V

a écrit :
hakkou a dit :
les Li sont de base des element de type block donc pas besoin de le specifier

Cela m'a moi aussi surpris. Comme Florent, je les pensait "list-item".

Mais une plongée dans la référence de poche (Eric Mayer/ CSS précis et concis / O'Reilly) m'a prouvé mon erreur :

"Les éléments de liste sont un cas particulier des éléments de type bloc. En plus d'un comportement cohérent avec les autres éléments de type bloc, ils génèrent un marqueur, généralement une puce pour les listes non ordonnées ou un nombre pour les listes ordonnées, qui est "attachée" à la boite d'élément. En dehors de la présence de ce marqueur, les éléments de liste sont en tout point identiques aux autres éléments de bloc." (page 10, §4)

Donc, si j'ai bien compris, les "li" sont des blocs qui affichent une puce ou un nombre par défaut. En d'autre termes, si je force un li à display:block;, je lui fait perdre sa capacité à afficher une puce ou un nombre puisqu'il perd alors sa propriété "list-item".

Aussitot dit, aussitôt fait :

en html :

<ol>
-
<li>Enveloppe Kraft : le Contenant</li>
<a class="oli" href="../pdf/C4Kraft.pdf" target="ressource window">exemple en pdf <img src="../images/pdf17.gif"></a>
<p>En kraft milleraies résistant, format C4 et ...

en CSS :

ol {
  list-style-type : upper-latin ;
	list-style-position : inside ;
}
ol li {  /* pas de display:block; puisqu'il y est par défaut*/
  float : left ;
	color:#567;
	font-size:120%; 
  font-variant : small-caps ;
	font-weight : bold ; 
	margin: 15px 0 5px 0px; 
}
.oli {
  display : block ;
  float : right ;
	margin: 12px 0 5px 0px; 
  color : #567 ;
	font-weight : bold ; 
  font-size : 90% ;
}
ol p { clear : both ; }

Le résultat est exactement ce que je cherchais :


C'est simple, élégant, beau ... Merci CSS !

Et merci aussi à vous trois qui avez eu la gentillesse de me répondre.
Je m'endormirai moins gnou ce soir. Objectif atteint.

Modérateur : je fais comment pour éditer le titre (ajout de [résolu])?

Pour éditer le titre du sujet, il faut éditer le premier message du sujet. Mais je serais toi, je ne le ferais pas tout de suite car... tu n'as pas tout tout compris en fait.

Pour commencer: as-tu lu la page que j'indiquais un peu plus haut (et écrite ce matin à l'occasion de ce sujet )? Si non, tu devrais le faire, ça peut être instructif.

Quant au fond du problème, c'est le suivant: la notion d'élément de type bloc est un raccourci pédagogique (du moins je le conçois ainsi, ce qui est sans doute contestable ), qui regroupe des éléments dont la valeur par défaut de la propriété display est l'une des suivantes: "block", "list-item", "run-in" (suivant le contexte...) et "table". Pour être précis et éviter les confusions, il faudrait peut-être parler d'élément de type «boite rectangulaire indivisible» (par opposition aux boites dessinées par les éléments de type en-ligne, boites qui peuvent être coupées pour être réparties sur plusieurs lignes).

Dans la pratique, le bouquin d'Eric Meyer a plus ou moins raison, et pas mal tort. D'après le passage que tu cites, j'ai l'impression que Meyer considère que les rendus de type bloc (si on peut parler de rendu de type bloc...) sont "block" et "list-item" uniquement, ce dernier étant un peu particulier à cause du marqueur de liste. Il lui en manque deux.

Pour être vraiment précis, on gagnera à ne pas trop regrouper les différentes valeurs de la propriété display, sinon on ne va pas en finir avec les «c'est un bloc mais avec des particularités» dès que l'on s'éloigne des simples "block" et "inline".

Bref, pour revenir à des choses compréhensibles:
- li est un élément de type bloc, si on veut (on s'en fiche un peu en fait);
- pour l'élément li, la valeur par défaut de la propriété display est "list-item";
- le rendu de type "list-item" est proche du rendu de type "block" (display: block), avec effectivement la subtilité de l'ajout d'un marqueur de liste qui par défaut se balade en dehors de l'élément (on pourra tester un li {list-style-position: outside; overflow: hidden;}).

Voilà, je ne sais pas si ça t'aide ou si ça t'embrouille...


Mais à la rigueur, le vrai problème ici ça n'est pas la compréhension de cet imbroglio. Ce serait plutôt le fait que ta structure HTML est invalide (un petit coup de validateur HTML pour vérifier?), parce que à priori tu détourne les listes de leur usage «normal». Je t'ai proposé ci-dessus une structure HTML valide qui pourrait correspondre à ton contenu. Une autre solution serait de ne pas utiliser de liste, et de préférer une structure avec titres hN qui vont bien.