PS: Ich vergaß: Da ist noch ein Fehler im CSS:
ul li ul {
display: none;
position: absolute;
padding-left: 10;
}Das Padding braucht eine Einheit, wenn es ungleich 0 ist, in diesem Fall muss es jedoch gleich 0 sein, dann kann man sie weg lassen.
Da gibt es jetzt noch dieses Margin:
ul {
display: flex;
list-style-type: disc;
margin: 2px;
padding: 2px;
}Das führt dazu, dass das Untermenü etwas nach rechts gerückt ist. Wenn ich es lösche sind die Punkte genau untereinander:
Bei mir waren sie genau untereinander, aber es kann sein, dass ich etwas von dem CSS vergessen habe zu posten. Poste doch noch Mal das neue CSS.
Hallo Nancy und willkommen im Forum!
Du machst nicht direkt etwas falsch, dass diese Listenpunkte nach rechts versetzt sind, liegt daran, dass für ul per default ein padding-left definiert ist. Setzt man dieses auf 0 rutschen sie nach links, allerdings hat dann die Tatsache, dass Du float verwendest, den unangenehmen Nebeneffekt, dass sie dann nebeneinander angeordnet werden. Dies kannst Du wiederum beheben, indem Du sie mit flex statt float anordnest. So funktioniert es bei mir:
ul {
/* Listenpunkte nebeneinander anordnen */
display: flex;
list-style-type: disc;
/* Bei den folgenden Regeln fehlte die Maßeinheit */
margin: 2px;
padding: 2px;
}
ul li ul {
display: none;
position: absolute;
/* dies sorgt dafür, dass die Listenpunkte
mit dem des li darueber auf eine Linie liegen */
padding-left: 0;
}
ul li:hover ul {
/* Listenpunkte untereinander anordnen */
display: flex;
flex-direction: column;
background-color: #626262;
color: black;
}Dies ist kein Einzelfall, dass die Verwendung von float unerwünschte Nebenwirkungen hat, daher empfehle ich generell, dich mit Flexlayout vertraut zu machen:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
BTW: Beim Posten von Code besser Codetags verwenden, das </> in der Werkzeugleiste rechts oben.
Wenn ich das richtig verstehe, brauchst Du nur den aktuellen Kurs. Lies mal hier:
https://stackoverflow.com/questions/4572…base-python-api
Das scheint ganz einfach zu sein und um nur den Kurs zu bekommen brauchst es keine Auth.
Anscheinend gibt es eine bestimmte Anzahl von freien Aufrufen und dann musst Du dir einen API-Key besorgen.
Ja, Beitrag editieren ist meistens schlecht und ich mache es normale Weise nur, wenn er noch nicht gelesen wurde. Aber in diesem Fall hatte ich mich wohl getäuscht.
Und die zweite Methode mit den Indizes? Dabei wären die Elemente vollkommen getrennt und Du könntest sie beliebig anordnen.
Hallo VFB, ebenfalls ein frohes neues Jahr und willkommen im Forum!
Das ließe sich relativ einfach umsetzen, wenn Du jede Gruppe in einen Container legen würdest, also so:
<div class="container">
<div class="text">Dies ist Text 1</div>
<img class="img" src="bild1.jpg">
<button class="textBtn">Text 1 sichtbar</button>
<button class="imgBtn">Bild 1 sichtbar</button>
<button class="bothBtn">Alles sichtbar 1</button>
</div>
<div class="container">
<div class="text">Dies ist Text 2</div>
<img class="img" src="bild2.jpg">
... usw.
</div>
<div class="container">
...
</div>
... usw.Aber ich weiß nicht, ob das damit verträglich ist, wie Du alles auf der Seite anordnen willst?
Jedenfalls könntest Du dann von dem geklickten Button aus das Elternelement .container ermitteln und von da aus wieder jedes gewünschte Element der Gruppe.
Alternativ den Elementen einer Gruppe einen Index zuordnen und dann mit indizierten IDs "img1", "text1" etc. auf das Element zugreifen.
Gern geschehen, sieht jetzt alles so aus, wie Du es die vorgestellt hast?
Auch kein Problem:
.Contact {
flex-direction: row;
display: flex;
transform: rotate(-90deg) translateY(-50%);
z-index: 3;
position: fixed;
right: 0;
top: 50vh;
text-align: center;
}Ebenso für ABOUT.
Die sehen mit meiner Testdatei so aus:
html-seminar.de/woltlab/attachment/2779/
Ich dachte, so wolltest Du es haben? Wenn nicht, dann beschreibe wie es aussehen soll.
Sorry das ich dich so Durchlöcher mit Fragen.
Kein Problem, dafür ist das Forum ja da.
wie mach ich die an der Seite wieder zentriert?
Ein Möglichkeit ist, margin: 0 auto; zu verwenden:
.timeline-item {
margin: 0 auto;
}Oder mit Flexlayout.
Da fehlt die schließende geschweifte Klammer bei .Contact:
.Contact {
flex-direction: row;
display: flex;
transform: rotate(-90deg);
z-index: 3;
position: fixed;
right: 0;
top: 5em;
text-align: center;
} /* <-- fehlte */Da kommt sich dann wohl irgend etwas ins Gehege. Um das korrigieren zu können, müsste man jetzt die ganze Seite im Zusammenhang sehen. Wenn Du sie online hast, dann poste die URL.
Wenn ich das richtig verstehe oder errate, willst Du "Home" in der Mitte und die anderen beiden links und rechts?
Versuche, ob dies das ist, was Du dir vorstellst:
<!doctype html>
<html>
<head>
<title>
Test centered alignment
</title>
<style>
.Home {
display: flex;
align-self: center;
align-content: center;
z-index: 3;
justify-content: center;
align-items: center;
position: fixed;
top: 0;
left: 50%;
transform: translateX(-50%);
}
.About {
display: flex;
transform: rotate(90deg);
z-index: 3;
position: fixed;
left: 0;
top: 5em;
}
.Contact {
display: flex;
transform: rotate(-90deg);
z-index: 3;
position: fixed;
right: 0;
top: 5em;
}
</style>
</head>
<body>
<div class="About">
<a href="About.html">
<h1>
<center>ABOUT</center>
</h1>
</a>
</div>
<div class="Home">
<a href="Index.html">
<h1>
<center>HOME</center>
</h1>
</a>
</div>
<div class="Contact">
<a href="Contact.html">
<h1>
<center>CONTACT</center>
</h1>
</a>
</div>
</body>
</html>Guten Morgen TakeOnMii, ein frohes neues Jahr und willkommen im Forum!
Da geht ja einiges durcheinander:
<center> ist veraltet und sollte nicht mehr verwendet werden.
float ist für diesen Zweck ebenfalls veraltet und die Kombination mit Flex macht keinen Sinn.
Mit flex bist Du dagegen auf dem richtigen Weg, um das Element in beiden Richtungen zu zentrieren.
Um es vertikal zu zentrieren ist freier Raum nötig, daher habe ich zur Demonstration die Höhe auf 100vh gesetzt.
So funktioniert es dann:
<!doctype html>
<html>
<head>
<title>
Test centered alignment
</title>
<style>
.About {
height: 100vh;
display: flex;
/* transform: translateY(-50%); */
text-outline: 20% 20% #6f6f6f;
z-index: 3;
transform: rotate(90deg);
text-align: center;
/* bottom: 50%; */
/* float: left; */
margin: auto;
flex-direction: row;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<h1 class="About">
<a href="About.html" data-transition="flow">
ABOUT
</a>
</h1>
</body>
</html>Ja, da fehlt jetzt oben ein Stückchen der Linie. Wie hast Du die Linien denn jetzt grün gemacht? Bei der Lösung mit dem Hintergrund hatte ich ja anfangs dieses:
div.vertical-line.top {
background-size: 6px 50%;
background-position: center bottom;
}Das musst Du jetzt anpassen, damit die Linie weiter nach oben reicht:
div.vertical-line.top {
background-size: 6px calc(100% - 1.5em);
background-position: center bottom;
}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.
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?
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?