Beiträge von Sempervivum

Linien zeichnen, die wahrscheinlich auch diagonal sein können, ist möglich mit HTML und CSS aber nicht zu empfehlen, weil zu umständlich. Ich empfehle statt dessen, das mit einer SVG-Grafik zu machen, dann kannst Du ganz direkt eine Linie durch Start- und Endpunkt definieren.

Erweitere doch mal deine Grafik mit einigen solcher Linien, damit man es sich besser vorstellen kann. Ich weiß nicht genau, ob diese von der Tischkante ausgehen sollen oder von der Mitte der Fläche mit dem Text, oder ...

Brackets hatte ich auch Mal angetestet und festgestellt, dass er keine Validierung und Fehleranzeige gleich bei der Eingabe unterstützt (wenn man von Erweiterungen absieht, die alle nicht vernünftig funktioniert hatten). Das war für mich ein no-go und ich bin bei Visual Studio Code gelandet. Hat man das genannte Feature erst Mal kennen gelernt, will man nicht mehr darauf verzichten, weil es die Entwicklung enorm beschleunigt und erleichtert.

Das ist ja mal eine gute Nachricht!

Nein, nicht blöd oder umständlich erklärt, kein Grund, dich zu entschuldigen Ich hatte unter "Projekt" ein Vorhaben, z. B. die Entwicklung einer Website, verstanden. War es bei dir ja auch, nur, dass Du mehrere solcher Projekte auf dieser Seite vorstellst.

Irgend wie war ich da ein wenig schwer von Begriff: Mit "Projekt" meinst Du in diesem Fall eines der Projekte, die Du auf der einen Seite präsentierst und es war klar, dass es dann mehrere Slider auf der selben Seite gibt.

Da gibt es jetzt mehrere Lösungen:

1. Du bleibst bei diesem einfachen und erweiterst ihn so, dass er mehrere Slider verwalten kann oder
2. Du setzt einen fertigen ein, bei dem das von vorn herein der Fall ist. Da gibt es jetzt sehr viele. Da Du schon Bootstrap verwendest, könntest Du den von Bootstrap nehmen, heißt dort "Carousel": https://getbootstrap.com/docs/4.0/components/carousel/ Oder Cycle2: https://jquery.malsup.com/cycle2/

Wobei ich 2. empfehlen würde, weil es wenig Sinn macht, das Rad neu zu erfinden, es sei denn, man sieht es als Lernaufgabe.

Ja, das hilft auf jeden Fall schon Mal weiter. Ich sehe, das Blättern durch die Bilder klappt nicht so richtig, sie verschwinden und man muss dann ein paar Mal klicken bis wieder eins auftaucht.

Was ist denn jetzt eigentlich dein Ziel? Möchtest Du zwei unabhängige Slideshows haben, eine in jedem Projekt? Dann wären wir bei dem Problem das Basti in Posting #2 angeschnitten hat: Da müsste dein Skript ein wenig angepasst werden.

Ein wenig schwierig, wenn das CSS fehlt aber wenn ich dein neues HTML in meine Testseite übernehme, funktioniert die Slideshow so weit, dass ich mit den Pfeilen und den Kugeln/Punkten blättern kann.

Was meinst Du denn genau, wenn Du schreibst: "Und da haben die Bilder nicht funktioniert."?

Ich vermute nach wie vor, dass es bei dem neuen Projekt irgend etwas anderes gibt, was sich mit der Slideshow beißt.

Das beste wäre, wenn Du eine vollständige Testseite machst und wieder die URL postest.

Ja, dann musst Du uns aber den zeigen, der nicht funktioniert, damit man den Fehler finden kann.

PS: Wer lesen kann ist klar im Vorteil, Du schriebst "In der ersten Reihe ganz rechts" - Slider gefunden aber bei mir funktioniert der einwandfrei?

Hilf mir mal, ich kann da nichts von einem Slider entdecken. Beim Hover über eine Box kommt ein großes Pluszeichen und wenn ich drauf klicke, ein Modal. Das ist doch, was Du meinst, nicht wahr?

Zitat

Also bei dem Code oben funktioniert alles wie es soll. Muss ich trotzdem die ID zu einer Class abändern?

Die mehrfachen IDs sind zwar nicht valide aber da sie im Javascript nicht benutzt werden sind sie auch nicht dafür verantwortlich, wenn etwas nicht funktioniert. Du kannst sie einfach löschen.

Meine erster Gedanke war auch, dass Du versucht hast, diesen Slider mehrfach auf der selben Seite zu benutzen aber das trifft ja offenbar nicht zu. Dass es auf dem 2. Projekt nicht funktioniert kann viele Gründe haben, z. B. dass sich globale Variablen überschneiden. Aber um das beurteilen zu können, müsste man die betr. Seite im Zusammenhang sehen, mit allem was noch darauf ist und was dem Slider ins Gehege kommen könnte. Am besten postest Du die URL, damit man es sich ansehen kann.

Wenn Du eine Variable verwenden willst, musst Du eine andere Notation verwenden:

window.document.Rechner[platzhalter].value

Ja, diese Zeilen in unterschiedlichen Farben sehen gut aus und machen das Ganze übersichtlicher. Schade, dass das von Grid nicht unterstützt wird, bei einer Tabelle kann man es sehr einfach mit nth-child machen.

Das wird hier besprochen:

https://stackoverflow.com/questions/4630…css-grid-layout

chipit24 stellt dort eine sehr elegante Lösung mit display: contents; vor, aber die Browserunterstützung lässt leider noch zu wünschen übrig. Was die erste Zeile betrifft, ist es wahrscheinlich am einfachsten, mit Klassen zu arbeiten. Die erste Spalte kannst Du jedoch sehr einfach im CSS mit nth-child ansprechen.

Das liegt auch nicht an den Row-Gaps sondern daran, dass per Default die Spalten gestreckt werden, so dass sie die Höhe voll ausfüllen. Mit align-items: start; für den äußeren Container kannst Du das beheben:

#dashboard-start-first {
    margin: 2rem;
    display: grid;
    grid-template-columns: repeat(4, auto);
    column-gap: 2.5rem;
    width: 95%;
    row-gap: 0;
    align-items: start;
}

BTW: Kennst Du schon die Entwicklerwerkzeuge und den HTML-Inspektor deines Browsers? Damit kannst Du dir sehr schön einen Überblick verschaffen, wie die Elemente angeordnet sind. Rechtsklick auf ein Element und "Element untersuchen".

Zitat

Bin ich auf dem richtigen Weg, oder baue ich gerade etwas umständlich, wie ich Spalte 1 aus Reihe 2 wie auf die Größe von Reihe 1 bekomme?

Offenbar möchtest Du die Höhe einheitlich machen und beim Durchsehen scheint mir das gangbar zu sein. IMO ist das aber erst in zweiter Linie wichtig, erst Mal dahin kommen, dass das Layout wieder so aussieht, wie Du es eingangs beschrieben hattest.

Erst Mal rate ich dringend ab, zweigleisig zu fahren und Bootstrap und Flex/Grid gleichzeitig zu verwenden. Dann kannst Du nie sicher sein, ob dein Layout so aussieht wie es durch Flex/Grid eingerichtet wird oder ob Bootstrap es verfälscht.

In deinem HTML hast Du dich an dem zeilenweisen Aufbau deines Layouts orientiert. Beim Gridlayout funktioniert das jedoch anders, Du musst die Elemente bzw. Grid-Items ohne Unterbrechung aneinander reihen. Der zeilenweise Aufbau entsteht dann dadurch, dass Du die Spalten z. B. durch grid-template-colums fest legst.

                <div clas="col-6" id="fehlende-unterlagen">
                    <!-- <div class="row grid-header"> -->
                    <div class="col">
                        <span>Team/Disponent</span>
                    </div>
                    <div class="col">
                        Jahresunt.
                    </div>
                    <div class="col">
                        Vorsorge
                    </div>
                    <div class="col">
                        APBP
                    </div>
                    <div class="col">
                        Checkliste
                    </div>
                    <div class="col">
                        HWK
                    </div>
                    <div class="col">
                        ausl. AüV
                    </div>
                    <div class="col">
                        fehl. AüV
                    </div>
                    <div class="col">
                        &sum;
                    </div>
                    <!-- </div>
                    <div class="row grid-row"> -->
                    <div class="col">
                        <span>BF</span>
                    </div>
                    <div class="col">
                        0
                    </div>
                    <div class="col">
                        0
                    </div>
                    <div class="col">
                        0
                    </div>
                    <div class="col">
                        0
                    </div>
                    <div class="col">
                        0
                    </div>
                    <div class="col">
                        0
                    </div>
                    <div class="col">
                        0
                    </div>
                    <div class="col">
                        0
                    </div>
                    <!-- </div> -->
                </div>

        #fehlende-unterlagen {
            display: grid;
            /* Das Raster soll 9 Spalten bekommen */
            grid-template-columns: repeat(9, auto);
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 2.5rem;
        }

So bekommen wir ein Layout mit 9 Spalten und 2 Zeilen. Durch das Festlegen der Breite über auto werden die Breite entspr. Inhalt verteilt.

Zitat

Die Variante von MrMurpy habe ich jetzt mal um eine Zeile erweitert, das sieht zwar gut aus, aber beim Umbruch passt nichts mehr und für mich ist es auch nicht einfach nachvollziehbar, wo dann der zweite Mitarbeiter, also Wert für Spalte Disponent/Team hinkommt.

Das ist die natürliche Konsequenz, wenn fertiger Code ohne Erklärungen oder Kommentare gepostet wird: Die Probleme gehen los, wenn der Code erweitert oder an andere Gegebenheiten angepasst werden soll. Es hat schon seinen Grund, dass in den Forenregeln steht, dass das nicht erwünscht ist:

Regeln „Hilfestellung im Forum“

Wie war das noch mit dem Hungrigen, dem man einen Fisch schenkt?

Mal eine ganz andere Frage:

Zitat von Elly

Wenn man jetzt zB (wie ich später) eine Tabelle erstellen will, in der ein Datum und ein Event steht, wäre das ja im Grunde auch eine table.

Wenn es sich um ein Event handelt, liegt die Vermutung nahe, dass noch weitere Infos dazu kommen wie Ort, Thema, Leiter, Vortragender ...

Dann würde eine Lösung mit DL vermutlich scheitern. Und es wäre definitiv eine Tabelle mit Header und Body.

Das lässt sich mit wenigen Zeilen Javascript machen:

    <script>
        // Element bereit stellen
        const ele = document.querySelector('#parent-index');
        // Eventlistener fuer Scroll registrieren
        window.addEventListener('scroll', event => {
            // top-Position des Elementes ermittteln
            const topPos = ele.getBoundingClientRect().top;
            // Hat das Element seine oberste Position erreicht?
            if (topPos <= 20) {
                // Klasse hinzu fuegen, die das anzeigt
                ele.classList.add('is-on-top');
            } else {
                // Klasse loeschen, die Top-Position anzeigt
                ele.classList.remove('is-on-top');
            }
        });
    </script>

Testseite:

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial=scale=1.0" />
    <title>
        Change background when sticky element is on top
    </title>
    <style>
        #above {
            background-color: lightblue;
            height: 20vh;
        }

        #below {
            background-color: lightblue;
            height: 200vh;
        }

        #parent-index {
            position: sticky;
            top: 20px;
        }

        #parent-index.is-on-top #child01-index {
            background-color: aqua;
        }

        #child01-index {
            height: auto;
            margin-top: 5px;
            margin-left: 5px;
            margin-right: 5px;
            padding-top: 5px;
            padding-bottom: 5px;
            padding-left: 5px;
            padding-right: 5px;
            background-color: red;
            max-width: 1024px;
            /* background-color: green; */
            z-index: 2;
        }
    </style>
</head>

<body>
    <div id="above"></div>
    <div id="parent-index">
        <div id="child01-index">
            <table cellpadding="0" cellspacing="0" style="width: 100%">
                <tr>
                    <td class="text-def-nav">
                        <a href="http://weltenbauer.mygigahost.de/bluetenzauber/index.php">Startseite</a>
                    </td>
                    <td class="text-def-nav">
                        <a href="http://weltenbauer.mygigahost.de/bluetenzauber/01/01.php">Leistungen</a>
                    </td>
                    <td class="text-def-nav">
                        <a href="http://weltenbauer.mygigahost.de/bluetenzauber/02/02.php">Über Uns</a>
                    </td>
                    <td class="text-def-nav">
                        <a href="http://weltenbauer.mygigahost.de/bluetenzauber/03/03.php">Kontakt</a>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <div id="below"></div>
    <script>
        // Element bereit stellen
        const ele = document.querySelector('#parent-index');
        // Eventlistener fuer Scroll registrieren
        window.addEventListener('scroll', event => {
            // top-Position des Elementes ermittteln
            const topPos = ele.getBoundingClientRect().top;
            // Hat das Element seine oberste Position erreicht?
            if (topPos <= 20) {
                // Klasse hinzu fuegen, die das anzeigt
                ele.classList.add('is-on-top');
            } else {
                // Klasse loeschen, die Top-Position anzeigt
                ele.classList.remove('is-on-top');
            }
        });
    </script>
</body>

</html>

Dafür, dass Du ganz am Anfang bist mit Flex ist das doch schon ein sehr ordentliches Ergebnis. Das mit den Rahmen kannst Du beheben, indem Du bei align-items: stretch; bleibst und den Text innerhalb wiederum mit Flex unten ausrichtest:

.grid-header {
    font-weight: bold;
    text-align: center;
    /* align-self: flex-end; */
    border-style: solid;
    border-width: 0px 1px 0px 0px;
    border-color: #000000;
    display: flex;
    align-items: flex-end;
}

Ich hätte das gleich sagen sollen weil es aus deinem Eingangsposting schon ersichtlich war: Besser würde sich hier Grid eignen, weil es ein Gitter liefert, bei dem die Zellen automatisch vertikal in einer Linie ausgerichtet sind. Bei Flex haben die Elemente in den Zeilen zunächst mal keine Beziehung zueinander und man muss, wie Du es getan hast, die Ausrichtung durch einheitliche Größe erzwingen.

Wenn Du dir Grid ansiehst, dann achte auf grid-template-colums: Damit kannst Du sehr leicht die Proportionen der Spaltenbreiten einstellen ohne jeder Zelle eine eigene Klasse zuweisen zu müssen.