Beiträge von Sempervivum

Dann ist wahrscheinlich nicht genug Platz in der Horizontalen. Mach das Browserfenster mal etwas breiter.

flex-start wirkt nur auf die Querachse zusammen mit align-items. Bei dem was Du online hast, brauchst Du nur das flex-direction: column; bei nav zu löschen, dann bekommst Du was Du brauchst:

align-menu.png

Durch das space-between wird ein Zwischenraum zwischen dem Namen und der Nav erzeugt.

Bei mir sieht es gar nicht schlecht aus, klappt bei Klick auf den Hamburger auf und zu, mobil vertikal und Desktop horizontal. Nur die Borders in vertikaler Anordnung hängen ein wenig weit unten. Wahrscheinlich musst Du das padding-bottom ein wenig kleiner machen.

Möglicher Weise macht dir der Cache Probleme, Du hast ja Javascript und CSS ausgelagert. Lade mal mit Strg+F5 neu, ob es dann besser wird.

Da hat sich ja schon einiges verbessert: Menü klappt auf und zu, d. h. das Javascript funktioniert.

Jetzt muss noch in der Desktop-Ansicht das Menü horizontal angeordnet werden, d. h. hier das "flex-direction: column;" löschen:

.list-container ul {
    /* flex-direction: column; */
    width: 100%;
}

und in der Mediaquery hinzu fügen:

@media(max-width:750px){
    .list-container ul {
        flex-direction: column;
    }    
    .list-container {
        display: none;
        width: 100%;
    }
    .toggle-button{
        flex-direction: column;
        display: flex;
     }
}

In der Desktop-Ansicht hängen jetzt die Borders ein Stück unten, das liegt daran, dass die Listenelemente sowohl padding als auch border haben. Wir müssen dies bei der Berechnung der Höhe berücksichtigen:

nav ul li {
    height: calc(100% - 64px);
    padding: 30px;
    list-style-type: none;
    border-bottom: 4px solid rgb(42,42,42);
}

Letzteres gefällt mir weniger, mit Flex geht es eleganter:

nav ul li {
    /* height: calc(100% - 64px); */
    padding: 30px;
    list-style-type: none;
    border-bottom: 4px solid transparent;
}

und

nav ul {
    display: flex;
    align-items: flex-end;
}

Das geht ja ein wenig hektisch voran in diesem Video ;), da wundert es mich nicht, dass das eine oder andere verloren geht.

Positiv auf jeden Fall, dass der Tutor Flex verwendet. Negativ, dass er, wie so viele, der Meinung ist, dass überall ein überflüssiger div-Container drum herum sein muss. Und dass ein a-href-Tag als Button missbraucht wird.

Dass er die Semikolons im Javascript weg lässt ist ein wenig nachlässig, beeinträchtigt jedoch die Funktion nicht.

Sehe ich mir das Ergebnis deines Codes an, fällt sofort folgendes auf:

In der Desktop-Ansicht sind die Menüpunkte untereinander angeordnet. Also das flex-direction: column; in die Mediaquery hinein verschieben.

In der Desktop-Ansicht ist der Hamburger-Button sichtbar. Also ein display: none; hinzu fügen und den Button in der Mediaquery mit display:flex; sichtbar machen.

Haben wir dich schon auf die Entwicklerwerkzeuge deines Browsers hingewiesen? Siehe hier:

Grundlagen/Webprojekte/testen – SELFHTML-Wiki

Dort findest Du auch die Console, die häufig wichtige Hinweise auf Fehler liefert. In diesem Fall, dass toggleButton nicht definiert bzw. null ist. Das liegt daran, dass Du das Javascript im head einbindest, dort sind die betr. Elemente noch nicht definiert. Verschiebe die Zeile an das Ende des body:

     <script type="text/javascript" src="js/script.js" ></script>
    </body>

Das müsste schon einiges verbessern.

Zitat

Ich aircraft, Kontexte mit js zu ändern,

Verstehe ich nicht.

Für das Problem gibt es bestimmt eine Lösung aber man muss dazu den Code sehen. Poste am besten einen Link zu der Seite.

Zitat

Ich ätte da gerne veranschaulichungen bzw gebraüchlich Beispiele um mich mit dem Code vertraut zu machen

Genau das findest Du in meinem ersten Screenshot, musst nur hin gucken und wirst sehen, dass es unschlagbar einfach ist.

Zitat

Und wie Ihr ja seht brauche ich sobald es etwas knifflig wird auch hier Hilfe.

Genau das ist das Problem bei vorgefertigten Dingen wie Bootstrap, CMS etc.: Du bekommst eine 08/15-Lösung. Willst Du etwas umsetzen, was ein wenig vom Standard abweicht, gehen die Probleme los.

Zitat

Im Desktopmode soll der 1. col-md4 links und der 3. col-md4 rechts ausgerichtet sein.

Auch hier eine Demo mit dem Seiteninspektor, ich habe die ersten drei Zeilen auf grid umgestellt:

grid-o-saft-4.png

D. h. dem Container eine geeignete Klasse geben ("name", "size", "price") und dann kannst Du mit "text-align" problemlos die Ausrichtung fest legen.

Ja, das ist möglich, sieh dir nth-of-type an:

CSS :nth-of-type() Selector

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript,…

www.w3schools.com

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:

Should I learn Bootstrap?

Bist Du da inzwischen umgeschwenkt?

Ohne diesen ganzen Overhead und ohne überflüssige Container wird es ganz simpel und sieht gut aus:

grid-o-saft.png

Auch die Überschrift lässt sich problemlos ohne div-Container und hr gestalten:

grid-o-saft-2.png

Im HTML für die Eingabefelder legst Du mit size="45" eine Breite fest, das hindert sie, zu schrumpfen. Tue dies besser mit CSS:

input[type="text"], textarea {
    width: 100%;
    max-width: 20em;
}

max-width habe ich hinzu gefügt, damit die Felder nicht überbreit werden wenn das Browserfenster sehr breit ist.

Eine simple und robuste Lösung wäre: Das Symbol mit der Flage mit einem a-href-Tag umgeben und die Sprache als URL-Parameter anhängen.

Irgend wie witzig: Da wird Noscript installiert und man wundert sich dann, dass ein Javascript nicht richtig funktioniert

Zitat von Tourbine66

Bisher wurden diese Daten mit Hilfe von Include-dateien aktualisiert, das ging relativ einfach mit dem html-editor phase 5, man kann dort Inlude-Dateien einfügen und später "Projektweit Includes aktualisieren".

Das verstehe ich noch nicht ganz: Unter "Include-Dateien" verstehe ich Dateien, z. B. mit Header, Navigation oder Footer, die auf allen Seiten gleich sind, deshalb nur ein Mal existieren und mit PHP-Include eingebunden werden.

So wie es hier beschrieben wird:

PHP/Tutorials/Templates/Dateien mit include nachladen – SELFHTML-Wiki

Und weil sie nur ein Mal existieren kann man sie mit jedem x-beliebigen Editor editieren. Aber was Du mit "Projektweit Includes aktualisieren" meinst, scheint etwas anderes zu sein?

Zitat

Also es sollte gleich beim ersten Seitenaufruf der Sitzung klappen.

D. h. es klappt immer noch nicht?

Generell:

entweder das Skript in den head-Bereich und "DOMContentLoaded" benutzen

oder das Skript an das Ende des body und ohne "DOMContentLoaded".

Wenn es dann immer noch nicht funktioniert, poste am besten die URL der Seite, damit man es sich live ansehen kann.

Zitat von Karbon

Aufstecken ist ja ansich gar nicht mein Ding.

Bei mir genau so, kann nicht locker lassen bis es funktioniert.

Platziere das HTML dort wo Datum und Uhrzeit angezeigt werden sollen, und das Skript danach vor dem schließenden </body>. Platzierst Du das Skript im head, existieren die Elemente noch nicht wenn es abläuft.

Ich hatte dein Posting zunächst so verstanden, dass es funktioniert wenn Du die Seite neu lädst aber wenn ich deinen Code teste, bekomme ich einen dauerhaften Laufzeitfehler:

Da Du den Modus 'strict' eingeschaltet hast, muss eine Variable definiert werden bevor man ihr etwas zuweist, das ist bei monat und jear nicht der Fall.

So funktioniert es:

    <span id="wota"></span> <span id="tag"></span>.<span id="monat"></span> <span id="jahr"></span> <span
        id="uhr"></span>
    <script>'use strict';

        (function () {
            function berechne() {
                var jetzt = new Date(),
                    tag = jetzt.getDate(),
                    tagZahl = jetzt.getDay(),
                    wochentag = ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
                    text, monat, year;
                text = wochentag[tagZahl];
                document.getElementById('wota').innerHTML = text;
                monat = jetzt.getMonth() + 1;
                year = jetzt.getFullYear();
                document.getElementById('tag').innerHTML = tag;
                document.getElementById('monat').innerHTML = monat;
                document.getElementById('jahr').innerHTML = year;
            }

            document.addEventListener("DOMContentLoaded", berechne);
        }());
    </script>
    <script>'use strict';
        (function () {
            function uhrzeit() {
                var jetzt = new Date(),
                    h = jetzt.getHours(),
                    m = jetzt.getMinutes().padStart('0', 2);
                document.getElementById('uhr').innerHTML = h + ':' + m;
                setTimeout(uhrzeit, 500);
            }

            document.addEventListener('DOMContentLoaded', uhrzeit);
        }());
    </script>

Dabei habe ich das Voranstellen einer führenden Null bei den Minuten durch das vorgefertigte padStart ersetzt.

Benutzt man zusätzlich die vorgefertigten Funktionen toLocaleString, kann man das Ganze stark straffen:

    <span id="time"></span>
    <script>'use strict';
        (function () {
            function displayTime() {
                const
                    now = new Date(),
                    weekdayStr = now.toLocaleString('de-DE', { weekday: 'long' }),
                    dateStr = now.toLocaleDateString('de-DE'),
                    timeStr = now.toLocaleString('de-DE', { hour: '2-digit', minute: '2-digit' });
                document.getElementById('time').innerText = weekdayStr + ' ' + dateStr + ' ' + timeStr;
                setTimeout(displayTime, 500);
            }
            displayTime();
        }());
    </script>

Zitat

Wo bzw wie kann ich das machen? Bitte etwas mehr Info.

Steht in meinem Link in Posting #5. css-tricks ist eine gute Quelle. Außerdem findest Du hier auf html-seminar ebenfalls eine gute Einführung, leider etwas versteckt:

CSS Flexbox Layout - Design einfach umsetzen

Die Fragen, die Du hier stellst, sind an sich schon eine gute Begründung dafür, ohne Bootstrap zu layouten: Es erfordert jedes Mal intensive Forschungsarbeiten, den richtigen Selektor heraus zu finden, um einen Wert, der durch Bootstrap gesetzt wurde, umzuändern. Oder man muss den Holzhammer !important verwenden.

Und, sofern ich richtig informiert bin, verwenden die neuesten Versionen von Bootstrap hinter den Kulissen ebenfalls Flex und Grid. Warum also nicht gleich das Original verwenden statt eines überflüssigen Layers.

Und zu dem Stoßseufzer: "Was, ich soll jetzt auch noch Flex und Grid lernen?!" gebe ich immer gern folgendes zum Besten:

Zitat

Ein Lagerarbeiter schleppt keuchend einen schweren Sack durch das Lager. Ein Kollege empfiehlt ihm: "Nimm doch eine Sackkarre!" Antwort: "Bist Du verrückt, ich soll mir zu dem schweren Sack auch noch eine Sackkarre auf die Schulter packen?!"

Ich nehme an, dass sich deine Frage auf dieses CSS bezieht:

.carousel-indicators li.active {
  color:greenyellow;
  opacity: 100;
}

Da sehe ich zwei Probleme:

1. Diese Indikatoren haben keine Schrift, deshalb geht "color" ins Leere. Wolltest Du statt dessen die Hintergrundfarbe "background-color" ändern?
2. Der Wertebereich von opacity geht von 0 bis 1.