28172 sujets

CSS et mise en forme, CSS3

[RESOLU] Tarif avec liste à puce

Salut,

Je cherche à faire quelque chose de ce style :
upload/7137-tarif-firef.png

J'y parviens de la manière suivante (peut-être pas la meilleure ? Les suggestions seront bienvenues !) :
HTML :
<ul class="tr-liste">
	<li class="tr-li"><span class="gauche">Plat du jour</span><span class="droite">6.80 €</span></li>
	<li class="tr-li"><span class="gauche">Entrée + Plat du jour</span><span class="droite">8.80 €</span></li>
	<li class="tr-li"><span class="gauche">Entrée + Plat du jour + Dessert</span><span class="droite">11.20 €</span></li>
</ul>

CSS :
.tr-li {
	background-image:url("images/lignesuivi.gif");
	background-repeat:repeat-x;
	display:list-item;
	list-style-position: outside;
	list-style-type:disc;
	margin-right:0;
	padding-right:0;
	width:100%;
}

.tr-liste {
	font-family:monospace;
	list-style-position: outside;
	list-style-type:disc;
	margin-left:20px;
	margin-right:0;
	padding-right:0;
	text-align:left;
}

J'ai rajouté les list-style et quelques autres bricoles pour tenter de résoudre le problème de certains navigateurs, mais sans succès : ça fonctionne parfaitement avec Firefox et Opéra, mais pas sous Chromium, Konqueror (et pas encore essayé IE/Edge, j'ai peur du résultat !). Voilà ce que ça donne sous Chromium et Konqueror :
upload/7137-tarif-chrom.png

A noter que tout ça est dans un <div> dont la largeur est variable (responsive design...), et que je veux comme sur l'image :
- Les textes alignés à gauche avec une puce
- Les prix alignés à droite
- Des pointillés pour faciliter la lecture, qui doivent s'allonger ou se rétrécir selon la largeur du <div>

Le texte+le prix tiennent dans la plus petite largeur imposée, quitte à supprimer complètement les pointillés.

Je demande l'impossible, je m'y prends mal ou quelque chose m'échappe pour que ça fonctionne dans tous les navigateurs ?
Modifié par jibe74 (12 Sep 2016 - 22:24)
Modérateur
Bonjour!

intéressant comme bug.

Si tu enlèves la classe "gauche" (qui ne sert pas à grand chose et qui est certainement un float: left) ça devrait mieux fonctionner. Les puces posent souvent problèmes dès qu'on a une mise en page complexe et leur implémentation sont variable selon le navigateur. Une autre solution est donc de désactiver les puces, et le refaire «à la main», avec un :before contenant une image de fond (mieux pour l'accessibilité) ou un caractère (plus rapide à faire).
Bonjour jibe74,

J'ai trop envie de rentrer chez moi pour prendre le temps de faire un exemple, mais pour ma part je passerais plutôt par une mise en forme via Flexbox.

Construction en 3 cases :
- le texte
- un vide flexible
- le prix

Et au sein du vide flexible tu places un pseudo-éléments en inline-block de width 100%, aligné sur la baseline et contenant un background en repeat.

J'ai pas le temps de le tester (Youpi, le travail est fini !) mais ça me semble une voie plus "propre".
Modifié par erwan21a (13 Sep 2016 - 09:43)
Modérateur
Salut,

Juste fite fait en passant je propose un truc en flex ou seul le bloc du milieu s'étire. Seul pb : on perd les puces par défaut Smiley langue 

<li class="tr-li">
    <div class="gauche">Plat du jour</div>
    <div class="dash"></div>
    <div class="droite">6.80 €</div>
  </li>

.tr-li {
  display:flex;
	list-style-position: outside;
	list-style-type:disc;
}
  .gauche {
    flex:0 0 auto;
  }
  .dash {
    flex:1 1 auto;
    border-bottom: 1px dashed #000;
  }
  .droite {
    flex:0 0 auto;
  }


https://jsfiddle.net/0ardzaba/

Bonne réflexion, et bonne soirée ! Smiley murf
Merci pour vos réponses !

Et désolé, effectivement j'avais oublié de recopier le code des classes "droite" et "gauche"...

J'avais effectivement pensé à la solution flexbox, mais je n'ai jamais étudié la question : je trouve qu'en HTML5/CSS3 on peut faire déjà énormément de choses et j'évite le javascript que je désactive généralement pour naviguer : je n'ai jamais eu confiance dans ce truc, et maintenant il provient très souvent directement des GAFAM... Donc, je ne recours au javascript que quand je n'ai vraiment pas d'autre solution, c'est à dire extrêmement rarement. Cela dit, la solution flexbox est certainement une excellente idée.

La suggestion de kustolovic était la bonne (suppression du float:left), sauf que les pointillés transparaissent sous le texte ! Il m'a donc fallu barbouiller de blanc ces parties. Voilà ce que mon code CSS est devenu :
.droite {
	background-color:white;
	border-bottom: 1px solid white;
	float:right;
}	

.gauche {
	background-color:white;
	border-bottom: 2px solid white;
}

.tr-li {
	border-bottom: 1px dotted black;
}

.tr-liste {
	font-family:monospace;
	margin-left:20px;
	margin-right:0;
	padding-right:10px;
	text-align:left;
}
Curieusement, j'ai été obligé de mettre une bordure de 2 pixels dans la classe "gauche" pour couvrir les pointillés (faits par la bordure "dotted" de "tr-li"), sans quoi un léger décalage en hauteur les laissait visibles.

Le fonctionnement est correct dans Firefox et dans Chromium, je verrai demain pour les autres navigateurs, mais j'ai assez bon espoir cette fois !
Modifié par jibe74 (12 Sep 2016 - 22:21)
jibe74 a écrit :

J'avais effectivement pensé à la solution flexbox, mais je n'ai jamais étudié la question : je trouve qu'en HTML5/CSS3 on peut faire déjà énormément de choses et j'évite le javascript que je désactive généralement pour naviguer


Flexbox n'a rien à voir avec JavaScript, c'est une spécification CSS version 3.Cette propriété répond à une grande partie des problèmes rencontrés par les designer du web jusqu'au années 2010 alors pourquoi s'en priver maintenant que c'est normalisé et plutôt bien soutenu par les navigateurs ?

Le float est une propriété en voie de disparition. Ou du moins on va de plus en plus se remettre à l'utiliser ce pour quoi elle a été conçue : placer une image au sein d'un texte fluide.

Je t'encourage fortement à découvrir Flexbox. C'est un peu déroutant mais tellement intéressant au niveau positionnement !
Sujet clos
Aller à