Beiträge von Dorjechang

  • Füllzeichen mit HTML / CSS realisieren

    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>

  • Füllzeichen mit HTML / CSS realisieren

    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>