Suivez les fils RSS
 

Des livres incontournables pour tout maîtriser

  • CSS avancées - vers HTML5 et CSS3
  • HTML5
  • CSS2
  • PHP5 avanc�
  • Memento MySQL
  • Memento CSS 3
  • Memento XHTML
  • WordPress 3 100% pratique
  • jQuery et jQuery UI
Auteur
manutudescends
#
Citer
8 Posts
Bonjour,
je souhaite mettre en forme une liste de texte avec des pointillés entre.

clé1......valeur1
clé2......valeur2
clé12....valeue12

avec la partie en pointillés qui s'adapte en fonction des autres tailles.

Une idée de comment je pourrait faire ca ?

Merci.

^
goonpay
#
Citer
18 Posts
Je passais vite fait par la,
pas sur de t'apporter LA solution mais peut etre une idée vite réfléchi

un div avec tes clé en float : left
un div avec tes valeur en float:right
un div avec un background:url(pointillé) repeat-x en width:auto

sans etre sur de moi mais doit y'avoir moyen de faire un truc dans le genre

http://www.goonpay.com 
^
fvsch
#
Citer
20100 Posts
Hello,

Tu as plusieurs solutions. Tu peux utiliser une image de fond sur un conteneur pour dessiner tes pointillés, et une couleur de fond opaque sur tes clés/valeurs pour masquer cette image de fond. Par exemple:
<p class="line">
  <span>Clé</span>
  <span>Valeur</span>
</p>

.line {
  overflow: hidden; /* bloque le dépassement des flottants */
  background: url(...) repeat-x left 1em;
}
.line > :first-child {
  float: left;
  max-width: 40%;
  padding: 0 10px 4px 0;
  background: white;
}
.line > :first-child {
  float: right;
  max-width: 40%;
  padding: 0 0 4px 10px;
  background: white;
}

Récemment j'ai fait quelque chose de similaire mais en utilisant un pseudo-élément :after en overflow:hidden (pour qu'il s'adapte aux flottants) avec un border-bottom. Ça ressemble à ça (mais c'est pas encore en ligne):

upload/2043-1328610687.png
L'avantage c'est qu'on n'utilise pas de couleur de fond opaque sur les éléments à gauche et à droite.

Autre solution envisageable: utiliser du display:table-cell.

http://fvsch.com 
^
manutudescends
#
Citer
8 Posts
Merci pour ces deux solutions.

J'avais pensé à cette solution de pseudo-élément mais j'avais ce probleme de la taille de cet élément.

^