Füllzeichen mit HTML / CSS realisieren

Tomahawk

Hallo zusammen,

ich habe eine Frage die nicht direkt mit Wordpress zusammenhängt.
Vorweg ich habe ein eigenes Theme gebaut und meine Seite ist fertig.
Die Seite ist voll Responsive/Adaptive.

Für eine Preisliste möchte ich Füllzeichen mit HTML / CSS realisieren.
Damit man sich vorstellen kann was ich mit Füllzeichen meine, habe ich untenstehend einen Screenshot gemacht:

Man sieht links steht das Produkt und rechts der Preis. Dazwischen sollen Punkte als Füllzeichen verwendet werden.
Wie gesagt ist meine Seite Responsive und ich stelle mir vor, dass wenn ich das Browserfenster verkleinere die Anzahl der Punkte natürlich auch weniger werden soll. Ich denke ihr versteht das Problem.

Ich habe jetzt mit einer Tabelle experimentiert:

HTML

<table width="100%" border="0" cellspacing="2" cellpadding="2">
      <tr>
        <td><p class="preis">30 Minuten</p></td>
        <td></td>
        <td><p class="preis">€ 50,-</p></td>
      </tr>
      <tr>
        <td><p class="preis">60 Minuten</p></td>
        <td></td>
        <td><p class="preis">€ 100,-</p></td>
      </tr>
    </table>

Alles anzeigen

Der mittleren Spalte habe ich dann ein "border-bottom" - dotted gegeben. Leider schaut das nichts gleich. Beispielsweise ist die Linie viel zu weit unten usw.

Jetzt wollte ich fragen, ob jemand von euch eine Idee hat, wie man das sauber realisieren könnte?

Vielen Dank!

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

bgeissler

das ginge:

Zitat

<td><p class="preis">30 Minuten</p></td>
<td><hr/></td>
<td><p class="preis">€ 50,-</p></td>

Tomahawk

Hallo,
dachte zuerst eigentlich, dass die Idee nicht schlecht ist mit <hr>. Hab's jetzt probiert, aber schaut auch schlecht aus:

Hab versucht mit margin/padding die gepunktete Linie auf die selbe Höhe mit der Schrift zu bekommen, aber dann verschiebts mir die restliche Tabelle.

Wie würde ich schließlich bewerkstelligen, dass sich die Länge der Linie exakt an den Freiraum zwischen der ersten und der dritten Spalte anpasst? Ich muß da ja eine width angeben, da die Zelle keinen Inhalt hat?? Und die width sollte ja variabel sein...

Danke

bgeissler

Kannst für td auch ne %Breite angeben

formateins

Mal ganz Abstrakt: per CSS ein Hintergrundbild (z. B. einen Punkt) definieren und das dann auf der x-Achse wiederholen lassen? ;)

PS: Für 2 Spalten brauchts keine Tabelle... :)

Tomahawk

Ja du hast schon recht - Ich dachte anfangs mit einer Tabelle ließe sich das easy lösen...
Das mit dem Hintergrundbild und repeat-x kommt auch in Frage. Werd' ich dann noch probieren :-)

Putzlowitsch

Ist zwar eine ziemliche DIV-Orgie, aber so habe ich das mal früher gelöst:

HTML

<style type="text/css">
<!--
.left { float:left;padding-right:0.3em; background-color:white;}
.right { float:right;padding-left:0.3em; background-color:white; }
.dot-dummy { border-bottom: 3px dotted #555;overflow:hidden;font-size:0.60em;margin-bottom:0.7em; } 
-->
</style>


<div>
<div class='left'>Gyros aus der Pfanne mit Tsatsiki und Salat</div><div class='right'>€ 7,90</div><div class='dot-dummy'>&nbsp;</div>
<div class='left'>Himmel und Erde Mecklenburger Eintopf aus Äpfeln und Kartoffeln</div><div class='right'>€ 4,90</div><div class='dot-dummy'>&nbsp;</div>
<div class='left'>Tomatensuppe</div><div class='right'>€ 4,90</div><div class='dot-dummy'>&nbsp;</div>
<div class='left'>Italian Burger mit Pesto u. Mozarella</div><div class='right'>€ 4,90</div><div class='dot-dummy'>&nbsp;</div>
</div>

Alles anzeigen

Mit dem margin-bottom in der Klassse .dot-dummy kann man etwas den Zeilenabstand steuern. Der Wert darf aber nicht zu groß und nicht zu klein werden, sonst verrutscht alles.

Gruß
Ingo

formateins

Hier mal eine kleine Responsive-Variante:

CSS:

Code

<style type='text/css'>
    ul {list-style:none; margin:0; padding:0;}
    ul > li {width:100%; background:transparent url('img/dots.png') repeat-x 0px 19px;}
    ul > li > span {background:#fff;}
    ul > li > span.links {padding-right:10px;}
    ul > li > span.rechts {float:right; padding-left:10px;}
</style>

HTML-Schnipsel:

Code

<ul>
	<li><span class="links">Erdberrtorte mit Sahne</span><span class="rechts">&euro; 5,99</span></li>
	<li><span class="links">Teller Eintopf</span><span class="rechts">&euro; 17,99</span></li>
	<li><span class="links">Quatsch mit So&szlig;e</span><span class="rechts">&euro; 125,99</span></li>
</ul>

Screenshot:
[ATTACH=CONFIG]7585[/ATTACH]

Tomahawk

Hallo,

@formateins:
Sorry, hab' deinen letzten Beitrag erst jetzt gesehen.
Musste es natürlich gleich ausprobieren.
Funktioniert perfekt - Absolute spitzenklasse :-)

MILLE GRAZIE!!!

Dorjechang

Hallo,

die Lösung von formateins (super! danke!) etwas weiter entwickelt auf basis des flex-models.

Code

<style>
body {font-family: Arial; font-size: 16px;}
.container {display: flex;align-items: flex-end;background: transparent url('dot3.png') repeat-x bottom;margin-bottom: 10px;}
.ivz-text-container {max-width: 75%; flex: 0 0 auto;}
.ivz-text-container span {padding-right: 20px; background-color: white;}
.ivz-flexibel {flex: 1;}
.ivz-seitennummer {text-align: right;flex: 0 0 30px; background-color: white;}
</style>

Code

<div class="container">
<div class="ivz-text-container">
<span>ich bin der text der zeile des inhaltsverzeichnisses</span>
</div>
<div class="ivz-flexibel"></div>
<div class="ivz-seitennummer">85</div>
</div>
    
<div class="container">
<div class="ivz-text-container">
<span>und hier ist ein neuer spannender abschnitt des buches</span>
</div>
<div class="ivz-flexibel"></div>
<div class="ivz-seitennummer">13</div>
</div>

Alles anzeigen

Dorjechang

Und hier noch eine Ergänzung mit einer Kapitelnummer.

Code

<style>
body {font-family: Arial; font-size: 16px;}
.container {display: flex;align-items: flex-start;margin-bottom: 10px;}
.ivz-number {flex: 0 0 55px;}
.ivz-container-down {display: flex; align-items: flex-end;background: transparent url('dot3.png') repeat-x bottom;}
.ivz-text-container {max-width: 75%; flex: 0 0 auto;}
.ivz-text-container span {padding-right: 10px; background-color: white;}
.ivz-flexibel {flex: 1;}
.ivz-seitennummer {text-align: right;flex: 0 0 30px; background-color: white;}
</style>

Code

<div class="container">
<div class="ivz-number">7.13.5</div>
<div class="ivz-container-down">
   <div class="ivz-text-container">
   <span>ich bin der text der zeile des inhaltsverzeichnisses</span>
   </div>
   <div class="ivz-flexibel"></div>
   <div class="ivz-seitennummer">85</div>
</div>
</div>

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Füllzeichen mit HTML / CSS realisieren

Jetzt mitmachen!