Perlschnur per HTML und CSS gestalten

  • Hallo, ich bin gerade dabei eine Perlschnur (Linienverlauf) per HTML und CSS darzustellen. Leider komme ich dabei gar nicht voran. Habt ihr eine Idee wie ich die Linie mache? Die Punkte an jeder Haltestelle sollen dann richtige Kreise sein.

  • Wie dem auch sei, da sehe ich zwei verschiedene Ansätze:

    1. Das Ganze als SVG-Grafik realisieren. Bei dem Bild, das Du oben gepostet hast, ist das relativ einfach zu machen. In dem Thread bei html.de dagegen nicht so einfach, weil SVG keine automatischen Zeilenumbrüche unterstützt.
    2. Es mit HTML und CSS realisieren.

    Bei letzterem kannst Du einen Kreis so erzeugen:

    Code
            div.circle {
                width: 30px;
                height: 30px;
                background-color: white;
                border: 2px solid black;
                border-radius: 30px;
            }

    Und die vertikale Linie so:

    Code
            div.vertical-line {
                background-image: url(images/black-px.png);
                background-size: 6px 100%;
                background-position: center center;
                background-repeat: no-repeat;
                display: flex;
                align-items: center;
                justify-content: center;
            }

    wobei ich eine Grafik verwendet habe, die aus nur einem schwarzen Pixel besteht. Man könnte es auch ohne Grafik mit einem Farbverlauf machen, aber das wäre umständlicher.

    Dann die Linie aus mehreren div-Elementen zusammen setzen und die Kreise darüber legen. Dabei kann dir Gridlayout nützlich sein, siehe hier:

    https://css-tricks.com/snippets/css/complete-guide-grid/

    Versuche, ob Du mit diesen Hinweisen weiter kommst.

  • Sieh dir den Link über Gridlayout an. Damit kannst Du ein Gitter, in deinem Fall mit zwei Spalten erzeugen durch dieses CSS:

    Code
    .grid-container {
        grid-template-columns: 30px 1fr;
    }

    Die linke Spalte, die die Linie aufnehmen soll, wird 30px breit und die rechte für die Texte füllt den freien Raum vollständig aus.

  • Sieh dir dieses Beispiel an:

    Die Grafik als Dateianhang funktioniert nicht so richtig, versuche, sie selbst zu erzeugen.

  • Vielen Dank, das sieht schon echt gut aus, wow.

    Kann ich auch die Datei gegen eine Farbe ersetzen? Hatte mich dort jetzt schon probiert aber irgendwie wird die Linie dann so dick wie die Punkte...

  • Ok, das habe ich jetzt hinbekommen. Ist es möglich auch die Höhen der einzelnen Grids anzupassen?

    Und ich hatte mir jetzt das aus dem anderem Forum abgeguckt mit den Anschlüssen unter der Haltestelle. Wie kann ich das ermöglichen? Wenn ich unter dem Haltestellen name noch eine <p> Tag einfüge verschiebt sich alles. :0

  • Zitat

    ich hatte mir jetzt das aus dem anderem Forum abgeguckt mit den Anschlüssen unter der Haltestelle. Wie kann ich das ermöglichen?

    Da würde ich so vorgehen, dass Du eine zusätzliche Zeile im Grid anlegst, wo sich links wieder die Linie befindet und rechts die Anschlüssen statt des Namens der Haltestelle.

  • Zitat

    Und gibt es einen Weg die Höhe automatisch anzupassen? Eben für Responsive.. Siehe Anhang.

    In meiner Testdatei passt sich die Höhe von allein an. Hast Du irgend wie eine feste Höhe für die Zeile fest gelegt?

  • Die Kreise werden ja mit Flex angeordnet. Du brauchst nur align-items auf flex-start zu setzen, dann rutscht der Kreis nach oben. Und dann brauchst Du wahrscheinlich ein margin-top beim Kreis, damit er ein wenig weiter unten auf der Höhe der ersten Zeile des Bahnhofsnamens liegt.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!