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.
Perlschnur per HTML und CSS gestalten
-
-
Guten Abend, ist das das selbe Thema wie hier?
-
-
Hallo! Scheinbar sehr ähnlich. Aber ich bin nicht einmal so weit wie dort. 😃
-
Scheinbar sehr ähnlich
Ja, nee, is' klar. Hier User berlin und in dem anderen Forum ichbineinberliner. Beides mal geht es um einen Fahrplan oder ähnliches, aber es sind beides mal andere Leute? Wer's glaubt!
-
Wie dem auch sei, da sehe ich zwei verschiedene Ansätze:
- 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.
- Es mit HTML und CSS realisieren.
Bei letzterem kannst Du einen Kreis so erzeugen:
Codediv.circle { width: 30px; height: 30px; background-color: white; border: 2px solid black; border-radius: 30px; }
Und die vertikale Linie so:
Codediv.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.
-
Vielen Dank. Aber wie schaffe ich es, dass ich den Text daneben positioniert bekomme?
-
Sieh dir den Link über Gridlayout an. Damit kannst Du ein Gitter, in deinem Fall mit zwei Spalten erzeugen durch dieses CSS:
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.
-
Alternativ könnte auch eine handelsübliche Liste in Kombination mit Rahmen und list-style-type, list-style-image oder ::before-Pseudoelement und content-Eigenschaft funktionieren.
-
Also ich habe es mir anschaut auch mit mehreren YouTube-Videos aber sehe dabei gar nicht durch.
-
Sieh dir dieses Beispiel an:
HTML
Alles anzeigen<!DOCTYPE html> <html> <head> <title>Linienplan</title> <meta http-equiv="content-type" content="text/html; charset=" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <style> #linegraph { display: grid; grid-template-columns: auto 1fr; } 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; } div.vertical-line.top { background-size: 6px 50%; background-position: center bottom; } div.circle { width: 30px; height: 30px; background-color: white; border: 2px solid black; border-radius: 30px; } h2.station { padding-left: 10px; display: flex; align-items: center; } </style> </head> <body> <div id="linegraph"> <div class="vertical-line top"> <div class="circle"></div> </div> <h2 class="station">Lichtenberg</h2> <div class="vertical-line"> <div class="circle"></div> </div> <h2 class="station middle">Friedrichsfelde</h2> <div class="vertical-line"> <div class="circle"></div> </div> <h2 class="station middle">Tierpark</h2> </div> </body> </html>
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...
-
Wenn Du die Farbe gern variabel haben möchtest ist eine Grafik natürlich nicht so flexibel. Alternativen:
- Einen Farbverlauf für den Hintergrund nehmen, damit kannst Du auch harte Sprünge erzeugen: https://wiki.selfhtml.org/wiki/CSS/Tutor…linear-gradient() siehe den Exkurs "Flaggen"
- Statt eines Hintergrundes ein weitere div-Element verwenden. Dann musst Du die die Kreise durch absolute Positionierung darüber legen.
-
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
-
Und gibt es einen Weg die Höhe automatisch anzupassen? Eben für Responsive.. Siehe Anhang.
-
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?
-
PS: Ich hatte deinen Screenshot nicht richtig interpretiert. Bei mir sieht es genau so aus und ich würde erwarten, dass es so richtig ist. Oder möchtest Du, dass der Kreis oben bleibt?
-
Ja genau, der Kreis soll dann oben bleiben.
-
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!