1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

Füllzeichen mit HTML / CSS realisieren

Dieses Thema im Forum "Design" wurde erstellt von Tomahawk, 6. Juni 2013.

  1. Tomahawk

    Tomahawk Well-Known Member

    Registriert seit:
    4. Mai 2013
    Beiträge:
    68
    Zustimmungen:
    0
    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:

    Snap4.png

    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:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    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!
     
  2. bgeissler

    bgeissler Well-Known Member

    Registriert seit:
    6. August 2006
    Beiträge:
    4.404
    Zustimmungen:
    0
    das ginge:
     
  3. Tomahawk

    Tomahawk Well-Known Member

    Registriert seit:
    4. Mai 2013
    Beiträge:
    68
    Zustimmungen:
    0
    Hallo,
    dachte zuerst eigentlich, dass die Idee nicht schlecht ist mit <hr>. Hab's jetzt probiert, aber schaut auch schlecht aus:

    Snap3.png

    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
     
  4. bgeissler

    bgeissler Well-Known Member

    Registriert seit:
    6. August 2006
    Beiträge:
    4.404
    Zustimmungen:
    0
    Kannst für td auch ne %Breite angeben
     
  5. formateins

    formateins Gast

    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... :)
     
  6. Tomahawk

    Tomahawk Well-Known Member

    Registriert seit:
    4. Mai 2013
    Beiträge:
    68
    Zustimmungen:
    0
    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 :)
     
  7. Putzlowitsch

    Putzlowitsch Well-Known Member

    Registriert seit:
    21. Oktober 2006
    Beiträge:
    5.955
    Zustimmungen:
    47
    Ist zwar eine ziemliche DIV-Orgie, aber so habe ich das mal früher gelöst:

    HTML:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    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
     
    #7 Putzlowitsch, 6. Juni 2013
    Zuletzt bearbeitet: 6. Juni 2013
  8. formateins

    formateins Gast

  9. Tomahawk

    Tomahawk Well-Known Member

    Registriert seit:
    4. Mai 2013
    Beiträge:
    68
    Zustimmungen:
    0
    Hallo,

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

    Snap2.png

    MILLE GRAZIE!!!
     
  10. Dorjechang

    Dorjechang New Member

    Registriert seit:
    14. März 2019
    Beiträge:
    2
    Zustimmungen:
    0
    Hallo,

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

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
     
  11. Dorjechang

    Dorjechang New Member

    Registriert seit:
    14. März 2019
    Beiträge:
    2
    Zustimmungen:
    0
    Und hier noch eine Ergänzung mit einer Kapitelnummer.

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
     
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden