[Résolu] Données tabulaires sans tableau type 'menu restaurant'

Bonjour et bonne année à tous avec un peu de retard. Que tous vos voeux soient accessibles !

Petite question turlupinesque. Je cherche à faire un menu deux colonnes type restaurant :
Ex. :

choucroute maison au poisson................. 18 €
choucroute maison aux navets................. 15 €
choucroute du jour........................... ça dépend des jours [murf]

Je sais plus s'il y a un attribut css qui pourrait se charger d'autocompléter les petits points pour avoir des données tabulaires à largueur variable.
J'avais pensé à :before pour les points et éventuellement :after pour le signe euro mais c'est pas compatible avec tous les navigateurs

J'ai trouvé ça en attendant mais ça fait appel à une image. C'est pas pleinement accessible et si on venait à les désactiver... moyen moyen quoi...

Si vous avez des idées...
Modifié par globy (20 Jan 2006 - 13:48)

Quelque chose me turlipine aussi dans ton titre : quel est l'intérêt fondamental de faire des données tabulaires... sans tableau ?!

C'est que j'étais sans doute moyennement inspiré pour expliquer plus clairement mon problème
Enfin pour moi ça reste un tableau, des restes de pao. Sous Indesign ça se dénomine comme ça.
Si quelqu'un à une idée ou pour le problème, ou pour le titre.
@tt

Salut,

a) Si ta page est dynamique, tu pourrais surement faire ça aisément en php
b) Si tu es suffisament rapide, tu peux probablement corriger le mot choucroute (un seul t) avant que le boss ne s'en rende compte et change de couleur(fais attention, ils sont nerveux ces alsaciens )

b) Choucroutes avec un "s" à la fin ?

Pour revenir sur ton a) dois-je comprendre par là qu'en css pour une page statique ça serait impossible voire trop alambiqué ?
En php je vois même pas comment faire...
C'est quand même plus simple de faire une choucroute que d'en parler dans un simple menu :
- tu prends un chou
- tu le râpes finement
- dans un seau tu alternes de fines couches avec du sel
- tu couvres d'une assiette et tu attends 2 semaines

Le chou est plus accessible que les css

Bien amicalement vôtre
Modifié par globy (20 Jan 2006 - 13:26)

Les css ne sont pas fautives : des points, c'est du contenu. Or les css ne sont pas là pour gérer le contenu, mais bien sa présentation.
Et pour l'aspect php, c'est très simple : tu décides que ta chaîne de caractères fait une longueur n, tu mets ton texte dedans, et tu remplis de points à concurrence de n.

Oui je vois. Introduire des points ça serait faire passer du contenant pour du contenu. Pas judicieux avec les + [+] de firefox, ça risque de devenir assez moche rapidement pour les voyants.
En plus, même en php, j'imagine qu'il faudrait avoir sans doute une seule fonte à largueur fixe pour le resto-menu.
Et présenter un menu avec du monospaced, ça peut passer pour un menu Macdo mais pas forcément pour quelque chose de plus fin comme la choucroute (sincère, j'adore)
Je crois que finalement l'idée de l'image de remplacement est la meilleure si on lui imagine un alt. Qu'en penses-tu ?

Bon je mets un [réglé] en ce qui me concerne.

La solution php était bien, maintenant si tu veux pas y toucher il y a peut être un autre moyen (qui est, comme vous allez vous en rendre, du domaine de la belle bidouille).

tu déclare un bloc avec en fond une image avec un point, que tu répète en X,
dans ce bloc tu met à gauche le plat, et à droite le prix, et tu met leur met une couleur de fond identique à celle du point

du genre :

HTML :
<div class="fond">
<div class="plat">choucroute</div>
<div class="prix">pas cher</div>
</div>

CSS :
.fond {
width : 300px;
background: url(ton image);
}
.plat {
float:left;
background-color:#la meme que l'image;
}
.prix {
float:right;
background-color:#la meme que l'image;
}

Dsl pour la syntaxe, c'est pas testé

Bonjour,
Egalement possible en jouant avec la bordure du bas en pointillé et la position relative
Css:

dt {
	border-bottom: 1px dotted;
	float:left;
	width: 70%;
}
dl span {
	position: relative;
	top: 5px;
	background: #FFFFFF; /*Suivant la couleur ou l'image..*/
}

Html

<dl>
	<dt><span>choucroute maison au poisson</span></dt>
		<dd><span>18 €</span></dd>
	<dt><span>choucroute maison aux navets</span></dt>
		<dd><span>17 €</span></dd>
</dl>

Remarque : MSIE ne rend pas très bien la bordure en pointillé de 1px, il fait des petits tirets. A partir de 2px seulement (où avec la valeur "fine") ce sont des vrais points
Modifié par Alan (22 Jan 2006 - 13:15)