Habe deine Vorschläge umgesetzt.
Aber es wird einfach vertikal angezeigt und es klappt bei mir garnicht.
Es bewegt sich leider nichts.
Also wenn ich zusammenschiebe schon dann stimmt es aber in der Desktopansicht soll es ja Horizontal ausgerichtet sein.
Was Javascript angeht habe ich bisher immer fertige kopiert da ich noch kein Javascript kann. Deshalb kann ich auch nicht die Fehler die mir gezeigt würden interpretieren.
Ist ist jetzt zwar schon einiges verbessert aber es einfach nicht klappen.
Ich habe das script im verdacht
const toggleButton = document.getElementsByClassName("toggle-button")[0]
const listContainer = document.getElementsByClassName("list-container")[0]
toggleButton.addEventListener("click",() =>{
listContainer.classList.toggle("active");
});teilen der überarbeitete css
.toggle-button{
position: absolute;
top: 25px;
right: 25px;
display: none;
justify-content: space-between;
width: 30px;
height:23px;
}
.toggle-button .bar{
height:4px;
width:100%;
background-color: white;
border-radius: 100px;
}
@media(max-width:750px){
.list-container{
display: none;
width: 100%
}
.toggle-button{
flex-direction: column;
display: flex;
}
}
nav{
flex-direction: column;
align-items: 100%;
}
.list-container ul{
flex-direction: column;
width: 100%;
}
.list-container li{
text-align: center;
}
.list-container.active{
display: flex;
}ist auch alles neu hochgeladen
Es will nicht so richtig klappen
Hab das Tut genau befolgt diese hier aber seht selbst . Hab es mal hochgeladen
HTML
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<script type="text/javascript" src="js/script.js" ></script>
<title>new Beginning</title>
</head>
<body>
<header>
<nav>
<div class="brand">Michael Schlegel</div>
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span></a>
<div class="list-container">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Fischen</a></li>
<li><a href="#">Kulinarisches</a></li>
<li><a href="#">Galerie</a></li>
<li><a href="#">Datenschutz</a></li>
</ul>
</div>
</nav>
</header>
<main></main>
<footer></footer>
</body>
</html>CSS
*{
margin: 0;
padding:0;
}
html{
height: 100%;
}
body{
height: 100%;
background-color: whitesmoke;
}
nav{
min-height: 80px;
display: flex;
justify-content: space-between;
align-items: center;
background-color: rgb(56, 54, 54);
color: white;
}
.brand{
margin: 20px;
font-size: 1.2em;
font-weight: bold;
color: aqua;
}
nav ul{
display:flex
}
nav ul li{
height: 100%;
padding: 30px;
list-style-type: none;
border-bottom: 4px solid rgb(42,42,42);
}
nav ul li:hover{
border-bottom: 4px solid purple;
}
nav ul li a{
color: white;
text-decoration: none;
font-size: 1em;
font-family: sans-serif;
}
.toggle-button{
position: absolute;
top: 25px;
right: 25px;
display: flex;
flex-direction: column;
justify-content: space-between;
width: 30px;
height:23px;
}
.toggle-button .bar{
height:4px;
width:100%;
background-color: white;
border-radius: 100px;
}
@media(max-width:750px){
.list-container{
display: flex;
width: 100%
}
.toggle-button{
display: flex;
}
}
nav{
flex-direction: column;
align-items: 100%;
}
.list-container ul{
flex-direction: column;
width: 100%;
}
.list-container li{
text-align: center;
}
.list-container.active{
display: flex;
}Javascript
const toggleButton = document.getElementsByClassName("toggle-button")[0]
const listContainer = document.getElementsByClassName("list-container")[0]
toggleButton.addEventListener("click",() =>{
listContainer.classList.toggle("active")
})Das waren sechs Stunden tippen und testen
Ich finde auch den Fehler nicht.
Gruß und gute nacht
Hm, wenn ich mir das unter deinem Link ansehe, sehe ich beim O-Saft nichts von einem Grid, nur dass Du das Ganze mit Bootstrap gemacht hast. Davon rate ich ebenfalls ab, siehe hier:
https://webentwicklung.ulrichbangert.de/faq/should-i-learn-bootstrap.html
Bist Du da inzwischen umgeschwenkt?
Noch nicht hab aber den link im Auge und sehe mir das an. Aber die Seite stellt sich für mich als eine Beschreibung eines Systems
Ich ätte da gerne veranschaulichungen bzw gebraüchlich Beispiele um mich mit dem Code vertraut zu machen
Ich fummel hauptsächlich aber nur an fertigen Snippets herum. Ich passe als Beispiele meinen Bedürfnissen an.
Deshalb bin ich an Bootstrap hängen geblieben weil das Netz voller Beispiele ist. Und wie Ihr ja seht brauche ich sobald es etwas knifflig wird auch hier Hilfe.
Aber es macht mir Spaß und ich freue mich über jeden Erfolg. Ist doch besser als den ganzen Tag Sudokus zu lösen. 
Den folgenden Code ist doch ein Grid. Oder?
.col-first p{
font-weight: bold;
text-align: left;
}
.col-third p{
font-weight: bold;
text-align: end;
}
<h2>Alkohofreie Getränke</h2></div>
<hr>
<div class="row">
<div class="col-md-4 col-first">
<p>
Orangensaft
</p>
</div>
<div class="col-md-4">
<p>
0,2l / 0,4L
</p>
</div>
<div class="col-md-4 col-third">
<p>
3,50€ / 5,00€
</p>
</div>Und jetzt zu meinem Problem.
Im Desktopmode soll der 1. col-md4 links und der 3. col-md4 rechts ausgerichtet sein.
Im Smartphonemodus zb. alles mittig.
Um was geht es hier eigentlich?
Wie genau soll es denn aussehen? Bei mir ist die 1.col durch "flex-wrap: wrap" links, die 2 mittig und die 3 rechts.
Dieses Modal hat bei dir ja die Id "openModal" (das andere "myModal"). Damit kannst du es ja weiter ansprechen...
So soll es auch im Desktopmode aussehen. Im Mobilmode könnte es mittig oder eben so sein dass es gut aussieht.
wäre es also besser wenn ich die klassen im CSS nach myModal umbenenne und das openModal als solches anspreche
Nach diesem Thread
Will ich mich nun soweit es geht von Tabellen distanzieren.
Ich habe hier 2 Modale eins mit Öffnungszeiten ein anderes mit Speisekarte Welches ich auf den grid umstellen will-
Unter Alkoholfreie Getränke habe ich schon mal, meinen bescheidenden Kenntnissen entsprechend den Osaft gegridet.
Doch wenn ich das Fester zusammenschiebe sieht das nicht so toll aus. Weil in der Desktopansicht die 1. col links ausgerichtet ist.
Achja. Wie kann ich mein Modal "Öffnungszeiten" anders ansprechen um so in css Änderungen vornehmen die nur auf besagtes Modal Wirkung hat.
hier der Link
Bitte habt etwas Nachsicht mit einem noch azubi.
Das ist ja interessant. Hier handelt es sich aber nicht um "id's! oder "class". "Und es wird auch kein div verwendet" Für mich ist das neu.
Ich versuche immer gerne das neu gelernte so oft wie möglich anzuwenden.
Sorry im Voraus.!
Aber was für ein CSS ist den dass? SCSS oder ähnliches? 
Da ich ja am üben und lernen bin wäre ich über ein Beispiel sehr erfreut.
Flexbox hab ich noch nie benutzt. Gibt es eine Seite die mein Problem behandelt
Es sollte doch aber auch mit meinem Code möglich sein
Habe hier eine Tabelle gebaut die ich mittig oben in eine Section einfügen will . Vor einigen Stunden habe ich mir das noch einfach vorgestellt.
Aber ich bekomme sie von der Seite links nur zu einem Viertel verschoben
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<style>
.oe {
font-family: arial;
color: #000;
font-size: 14px;
margin: 5px;
height: 230px;
width: 280px;
}
/* }
.centered-element {
width: 300px;
height: 30px;
border-radius: 5px;
*/
.oe table {
margin-left: auto;
margin-right: auto;
border-color: #000;
}
.oe h3 {
/* horizontal zentrieren */
text-align: center;
font-weight: bold;
}
.oe th {
padding: 5px;
border-color: transparent;
}
.oe td {
padding: 5px;
border-color:transparent;
}
</style>
</head>
<body>
<section>
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<div class="oe centered-element">
<table class="table">
<tbody>
<h3>Öffnungszeiten</h3>
<tr>
<th colspan="2">Mo + Mi + Fr</th>
</tr>
<tr>
<td colspan="2">11:00 - 14:00 und 17:30 - 22:30</td>
</tr>
<tr>
<th colspan="2">Dienstag ist Ruhetag</th>
</tr>
<tr>
<th colspan="2">Sa + SO</th>
<tr>
<td colspan="2">11:00 - 14:00 und 17:30 - 22:30</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
</body>
</html>ich steh auf dem schlauch
Man kann eine css so
<link rel="stylesheet" href="style.css">oder so
<link rel="stylesheet" type="text/css" href="css/style.css">Was ist der Unterschied oder hat eine Methode vorteile?
Hat denn schon jemand den Kurs der hier angeboten wird mit gemacht und kann sich kurz drüber auslassen. Oder Resultate zeigen?
Denn die Tage werden ja leider bald wieder länger, da könnte ich ja die Zeit nutzen.
Hab mal etwas gelesen und youtube geschaut. Vielleicht sehe ich das ja falsch aber irgendwie ist das doch Bootstrap ähnlich oder von mir aus auch umgekehrt. Allerdings gibt es meiner Erfahrung nach für Bootstrap unendliche snippets die sich mehr oder wenigen gut einbinden lassen.
Es scheint aber das Gridsystem von Flex fexibler als das von Bootstrap zu sein. ich behalt das mal im Auge
"Was, ich soll jetzt auch noch Flex und Grid lernen?!"
Wo bzw wie kann ich das machen? Bitte etwas mehr Info.
Naja, wenn man in die falsche Richtung geht, braucht man sich ja auch nicht beeilen. Und du gehst in die falsche Richtung
Was wäre denn die richtige Richtung? Bin zwar Alt aber doch aufgeschlossen.
Welche Vorteile bringt mir deiner Meinung nach, die richtige Richtung.?
Dann gewöhne dich an bessere Dinge
Pures HTML und CSS? Ich bin zu alt für sowas. 
Ich nehme an, dass sich deine Frage auf dieses CSS bezieht:
Code.carousel-indicators li.active { color:greenyellow; opacity: 100; }Da sehe ich zwei Probleme:
- Diese Indikatoren haben keine Schrift, deshalb geht "color" ins Leere. Wolltest Du statt dessen die Hintergrundfarbe "background-color" ändern?
- Der Wertebereich von opacity geht von 0 bis 1.
Genau das war das Problem
genauso klappt es
.carousel-indicators li.active {
background-color:greenyellow;
opacity: 1;
}Wo wisst ihr das nur alles her. Möge das Forum für immer bestehen, damit ich es immer wieder nachlesen kann.
Damit kann ich jetzt erst mal rum spielen.
Und dann weiter mit "section1! Inhalt. aber erst das gelernte verinnerlichen
Vielen Dank
Habe fast alles, mit eurer guten Hilfe zur Selbsthilfe und Geduld, geschafft. ( Es hat aha gemacht)
Nur beim "indicator für Slider: active" habe ich noch keinen Weg gefunden.
Vielleicht kann mich da ja jemand in die richtige Richtung stoßen?
Vielen Dank