28173 sujets

CSS et mise en forme, CSS3

Paragraphes précédés d'une date en CSS

Pages :
Bonjour à tous !
Je ne suis pas une grosse bête en CSS mais je les pratique depuis un certain temps déjà.

Je voudrais savoir comment faire pour avoir des paragraphes précédés d'une date.
Ca fait des lustres que je me pose cette question !

Je vous joins une image d'exemple.
Désolé si cette question a déjà été posé, je n'ai pas su trouver.

upload/15525-exemple.gif
verdan a écrit :
bonjour

avec un text-indent négatif, je pense :


p{
text-indent:-100px;
}


Bof. Le résultat de l'alignement dépend alors des aléas de polices et de tailles de caractères. Le passage en em ne résoud pas vraiment le problème.

Un grand vieux... tableau, tout à fait adapté, comme souvent ? Smiley cligne
Modifié par Laurent Denis (23 Jan 2008 - 16:28)
de toute facon il faut voir la structure html pour pouvoir te conseiller, tu as plusieurs solutions avec les float, text-indent, first-line et table
Modifié par overflow (23 Jan 2008 - 16:59)
C'est en effet avec les tableaux que je procède en général, mais on a là deux entités bien distinctes (petit 'titre' à gauche, paragraphe à droite) et ça me paraît être vraiment un cas à faire en CSS (épanouissement personnel on dira).

Je ne fais rien de vraiment particulier au niveau de la structure html sinon, vu que la-dite page n'existe pas encore Smiley biggrin
Modifié par alexfromfrance (23 Jan 2008 - 17:46)
alexfromfrance a écrit :
(épanouissement personnel on dira).



ah bah, dans ce cas, c'est évidemment un tout autre problème. Respect Smiley ravi
alexfromfrance a écrit :
on a là deux entités bien distinctes (petit 'titre' à gauche, paragraphe à droite)


Plus constructif: sauf contextes spécifiques, j'ai acquis à l'usage une grande méfiance a priori sur les dates-qui-sont-des-titres. Le plus souvent, l'information résumée est tout, sauf là. Je dis ça juste pour faire avancer éventuellement la réflexion fascinante qui s'annonce sur la structure sémantique de la chose, et que tu sembles fort heureusement prêt à aborder sans état d'âme... Smiley cligne

Maintenant, lâchez les fauves sémantiques... Smiley ravi
Modifié par Laurent Denis (23 Jan 2008 - 17:55)
alexfromfrance a écrit :
Oui non c'est sûr le mot titre est méga mal choisi (je me flagelle).
Personne n'a de proposition précise ?

Sur? Le marquage HTML ou la mise en forme?
Modérateur
bonsoir , pour le marquage , rien a propose de pertinent , c'est toi qui voit .
pour la mise en forme je dirais , la date en flottant et le texte en marge.


<date style="float_gauche" width="tant"></date>
<texte marge-gauche="tant">textes</texte>


GC
J'ai trouvé cette solution là en tatonnant...


<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html>
<head>
<style type=text/css>
.clear{ clear: both; }
.date {  font-weight: bold; }
.par {  float: right; width:230px; }
</style>
</head>

<body>

<div style='width: 350px;'>
<div class=clear>
<span class=date>2007-12-31 </span>
<span class=par>baba baba bababa babaaba<br>baba abababa <br>bababa</span>
</div>

<div class=clear>
<span class=date>2007-12-12</span>
<span class=par>baba baba baaba abababa <br>bababa</span>
</div>

<div class=clear>
<span class=date>2007-12-01</span>
<span class=par>baba baba bbaba babaaavwdfgerg ergergeaba<br>baba abababa <br>bababa</span>
</div>

</div>

</body>
</html>


Pas vraiment plus élégante qu'un tableau à mon avis.
Vous voyez comment l'améliorer ?

@Laurent Denis : en fait je cherche d'abord une solution qui marche, après j'essayerai de la justifier sémantiquement Smiley ravi

Edit : j'ai rajouté la balise code mais perso je trouve ça moins lisible.
Modifié par alexfromfrance (25 Jan 2008 - 10:45)
Merci d'éditer ton message pour présenter correctement ton code.

ps: il est où le DOCTYPE ?
Bon n'allez pas me dire que vous êtes contents de ma solution. Me laissez pas patauger comme ça je suis sûr que quelqu'un peut trouver mieux que le tableau ou "ce truc". Un petit effort allez Smiley smile .
alexfromfrance a écrit :
@Laurent Denis : en fait je cherche d'abord une solution qui marche, après j'essayerai de la justifier sémantiquement Smiley ravi


Perdu. C'est exactement le contraire de ce qu'il faut faire, et surtout le contraire de ce qui marche durablement.

<sic>"Sémantiquement"</sic>, si on tient à utiliser ce terme malgré ses lourds défaut en HTML (et XHTML1.0), un tableau convient. Je ne vois aucune raison de perdre du temps ailleurs Smiley cligne

(le but du jeu, globalement, est tout de même de mettre des contenus en ligne, non ? Smiley cligne )

Sinon, la solution ci-dessus est une abominable horreur, en effet (utilisation d'un élément générique là où au moins un élément spécifique est possible, un nom de classe dénué de sens, tout ça...) Smiley ravi
Modifié par Laurent Denis (26 Jan 2008 - 19:34)
Cela dit, je suis surpris, dans la catégorie "abomination", personne n'a encore proposé le couple maudit dt dd (abominable, parce que, sauf contexte très spécifique, ce n'est pas la date qui est décrite par le libellé, mais l'inverse).
Laurent Denis a écrit :
(le but du jeu, globalement, est tout de même de mettre des contenus en ligne, non ? cligne )

Smiley ravi
Laurent Denis a écrit :
Cela dit, je suis surpris, dans la catégorie "abomination", personne n'a encore proposé le couple maudit dt dd (abominable, parce que, sauf contexte très spécifique, ce n'est pas la date qui est décrite par le libellé, mais l'inverse).

C'est parce qu'on ne sait rien du contenu de alexfromfrance que les dl ne sont pas venus sur le tapis Smiley cligne . Dès lors qu'on aura un début de relation çà sera bon, elles arriveront Smiley biggrin . Faut "sémantiquement" les appâter.
a écrit :

Cela dit, je suis surpris, dans la catégorie "abomination", personne n'a encore proposé le couple maudit dt dd (abominable, parce que, sauf contexte très spécifique, ce n'est pas la date qui est décrite par le libellé, mais l'inverse).

Laurent, le contexte est-il différent sur la page de pompage ?

Pfiou...J'étais encore à deux doigts de me faire bacher proprement moi... Smiley scotch
Je retourne à mon civet de lapin moi... Smiley lol

<édit=Igor>J'ai modifié le lien vers le site original de Pompage Smiley cligne </édit>
Modifié par Igor (26 Jan 2008 - 20:38)
6l20 a écrit :

Laurent, le contexte est-il différent sur la page de pompage ?


Un vieil article passionnant, mais ouvrant la voie à des conséquences dramatiques (les dl dans les formulaires, par exemple).

Cela dit, HTML5 ne ferait pour l'instant que confirmer la même inutilisabilité des listes de défintions : elles traduisent avant tout un fantasme quant aux possibilité du HTML où les associations entre le contenu foo et le contenu bar sont soit uniquement linéaire (type titre de section et contenu de la section), soit tellement vagues qu'on ouvre la porte à n'importe quoi.

Cela dit, personne n'en est jamais mort. Une sémantique un peu plus ou un peu moins illusoire en HTML, ou en XHTML1.x, ça ne justiifie guère que quelques discussions de plus... Smiley ravi
Modifié par Laurent Denis (26 Jan 2008 - 20:58)
Pages :
Sujet clos
Aller à