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.
Wenn Du die Farbe gern variabel haben möchtest ist eine Grafik natürlich nicht so flexibel. Alternativen:
Sieh dir dieses Beispiel an:
<!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.
Bei Borduere 14 rechts hast Du die Erweiterung vergessen, so ist es richtig:
<img src="http://www.xxxtommyxxx.lima-city.de/Bilder/Borduere 14 rechts.png" alt="Borduere 2014 rechts.png">Sieh dir den Link über Gridlayout an. Damit kannst Du ein Gitter, in deinem Fall mit zwei Spalten erzeugen durch dieses CSS:
.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.
Wie dem auch sei, da sehe ich zwei verschiedene Ansätze:
Bei letzterem kannst Du einen Kreis so erzeugen:
div.circle {
width: 30px;
height: 30px;
background-color: white;
border: 2px solid black;
border-radius: 30px;
}Und die vertikale Linie so:
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.
Guten Abend, ist das das selbe Thema wie hier?
Was noch unterschiedlich ist bei dir und mir: Ich benutze BS 4 und Du BS 5. Ich wollte zunächst BS 5 nehmen und habe einen kurzen Blick darauf geworfen und gesehen, dass es eine Alpha-Version ist, d. h. eine sehr frühe, die noch fehlerhaft sein kann. Daher bin ich bei BS 4 geblieben.
Wenn ich das "mdb" aus den Namen der data-Attribute lösche, funktioniert es einwandfrei:
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel" data-interval="2000">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://mdbootstrap.com/img/new/slides/041.jpg" class="d-block w-100" alt="..." />
</div>
<div class="carousel-item">
<img src="https://mdbootstrap.com/img/new/slides/042.jpg" class="d-block w-100" alt="..." />
</div>
<div class="carousel-item">
<img src="https://mdbootstrap.com/img/new/slides/043.jpg" class="d-block w-100" alt="..." />
</div>
</div>
</div>Könnte ein Problem mit dem Cache sein, gerade wenn Du schreibst, dass die Bilder mit dem selben HTML geladen werden, wenn Du eine neue Seite angelegt hast. Versuche, die Seite mit Strg+F5 neu zu laden. Wenn ich mich richtig erinnere wird auch im Netzwerk-Tab der Entwicklerwerkzeuge angezeigt, wenn etwas aus dem Cache geladen wird.
Danke, ich wünsche ebenfalls angenehme Feiertage!
Nein, langi ist erst Mal verschwunden, wahrscheinlich in den Heiligabend, so dass wir es noch nicht abschließen konnten. In einer Testdatei funktioniert es bei mir auch ohne Probleme.
Ich sehe da in deinem Code dieses:
data-mdb-ride
Ich war früher einmal mit einem MD-Bootstrap konfrontiert, das waren Erweiterungen für Bootstrap, teilweise kostenpflichtig. Verwendest Du daraus das Carousel oder das Standard-Bootstrap?
Ja natürlich.
PS: Je nachdem wo der Handler aufgehängt ist, kann es jedoch angebracht sein, den vollständigen Selektor aus #14 zu verwenden, weil dieser die Ebene anspricht, die am tiefsten liegt. Durch das Event-Bubbling sollte der Klick dann auch einen Handler erreichen, der höher aufgehängt ist.
Am besten wäre es, wenn man die Seite online vorliegen hätte, dann könnte man es in den Entwicklerwerkzeugen schnell austesten.
Dann wird es ja nur einfacher:
document.querySelector('#xy').click();
Solch eine große Herausforderung dürfte das nicht sein, denn Du hast ja das HTML in deinem Eingangsposting gepostet:
document.querySelector('#xy .description .layout').click()Auch hier ist Flexlayout dein Freund:
ul {
display: flex;
}