Beiträge von Sempervivum

Sempervivum

Wenn es nur ein Bild wäre oder zwei Bilder mit gleicher Breite wäre es eine Kleinigkeit, auch ohne Tabelle den Text und das/die Bild(er) nebeneinander anzuordnen. Mit dieser treppenförmigen Anordnung kenne ich jedoch keine Lösung nur mit CSS. Mal sehen ob da noch jemand anders eine Idee hat.

Sempervivum

Bei mir wird die Seite jetzt angezeigt und alles funktioniert. Gut gemacht!

Sempervivum

Wie Du CSS einbinden kannst, kannst Du hier im HTML-Seminar nachlesen:

https://www.html-seminar.de/stylesheets_in_html_einbinden.htm

Am besten in eine weitere CSS-Datei und diese einbinden.

Sempervivum

Zu 1.: Mit   wird das nichts aber die gute Nachricht ist, dass es eine einfache Lösung gibt: Das Gridlayout.

HTML

    <div class="input-elements">
        <label>Benutzername: </label>
        <input type="text" class="input_txt_norm" name="userName" value="">
        <label>Passwort: </label>
        <input type="password" class="input_txt_norm" name="password">
        <label>E-Mail Adresse: </label>
        <input type="text" class="input_txt_norm" name="email" value="">
        <!-- usw., hier die weiteren Elemente -->
    </div>

CSS

        div.input-elements {
            display: grid;
            grid-template-columns: auto auto;
        }

Damit macht der Browser die Ausrichtung automatisch, ohne dass Du etwas berechnen oder austarieren musst.

Zum Verständnis kannst Du die Einzelheiten z. B. hier nachlesen:

https://css-tricks.com/snippets/css/complete-guide-grid/

Sempervivum

Immer wieder gern.

Dann viel Erfolg beim Staatsexamen. Das hört sich nach Jura an?

Sempervivum

Mir scheint, es liegt am HTML und CSS. Nimm das div.frame aus dem div.stadion heraus und platziere es dahinter, so dass im div.stadion nur das div#bande liegt. Und dann ändere das CSS so:

Code

div.stadion {
    overflow-x: scroll;
}

#bande {
    /* width: 100%; */
    display: inline-flex;
    /* overflow-x: scroll; */
}

Dies habe ich nur mit dem HTML-Inspektor getestet, wenn es nicht funktioniert, werde ich mir eine neue Testseite mit deinen Namen bauen.

Sempervivum

Mit HTML nicht aber mit Javascript und auch relativ einfach. In welchem Format bekommst Du denn die Uhrzeit? Ich gehe mal davon aus in Stunden, Minuten und Sekunden. Dann gibt es für das Date-Objekt Setter-Funktionen für UTC, z. B. setUTCMinutes.

https://developer.mozilla.org/de/docs/Web/Ja…al_Objects/Date

Nachdem Du Datum und Uhrzeit damit gesetzt hast, kannst Du dann die lokale Zeit in Stringdarstellung ermitteln.

Getestet hiermit:

Code

        const now = new Date();
        now.setUTCFullYear(2021);
        now.setUTCMonth(3);
        now.setUTCDate(9);
        now.setUTCHours(13);
        now.setUTCMinutes(0);
        now.setUTCSeconds(0);
        console.log(now.toLocaleString('de-DE'));

Sempervivum

Das dürfte kein Problem sein, wenn Du die Container verschachtelst: Im äußeren Container flex-direction: column; Jedes der Flex-Items darin ist wiederum ein Flex-Container mit flex-direction: row; und enthält die Elemente des betr. Jahres. Wobei flex-direction: row; Default ist und auch weg gelassen werden kann.

Sempervivum

Wie das ohne Dateiendung funktioniert wird hier erklärt:

https://stackoverflow.com/questions/5110…xtension-in-img

Wenn ich dein Vorhaben jedoch richtig verstehe, willst Du eigene Bilder anzeigen und dann kannst Du sie ganz normal mit Dateiendung speichern. Das CSS für das Akkordeon ist auf das Format von unsplash.com nicht angewiesen.

Sempervivum

Allzu schwer ist das auch nicht zu lösen, wir legen einfach die beiden Bilder in einen weiteren Container und beziehen die weiteren Operationen auf diesen:

Code

    <div id="pano-outer">
        <div id="pano-inner">
            <!-- Hier zunaechst keine src-Attribute angeben -->
            <img id="pano-img">
            <img id="pano-img-2" style="filter: grayscale(1);">
        </div>
    </div>

(filter nur testweise, damit ich die Bilder auseinander halten kann).

Und das CSS dafür:

Code

        #pano-inner {
            /* Der Container muss seine Groesse abhaengig vom Inhalt einstellen,
            daher verwenden wir inline-flex */
            display: inline-flex;
        }

Dann die weiteren Berechnungen auf den inneren Container beziehen:

Code

        const panoOuter = document.querySelector('#pano-outer'),
            panoInner = document.querySelector('#pano-inner'),
            panoImg = document.querySelector('#pano-img'),
            panoImg2 = document.querySelector('#pano-img-2');
            // Um sicher zu stellen, dass beide Bilder geladen sind,
            // verwenden wir jetzt das load-Event für "window":
        window.addEventListener('load', event => {
            // Die Breite des "Bildes" ergibt sich jetzt aus der des
            // inneren Containers:
            const wPanoImg = panoInner.getBoundingClientRect().width,
                // Die Positionen fest legen, bei denen im Bild
                // die Uebergaenge zwischen Kurven und Geraden liegen:
                pos1 = 0,
                pos2 = wPanoImg / 4,
                pos3 = wPanoImg / 4 * 2,
                pos4 = wPanoImg / 4 * 3,
                startPos = pos4,
                // Die Breite des sichtbaren Bereichs im Container des Bildes:
                wWin = panoOuter.getBoundingClientRect().width,
                maxScrollPos = wPanoImg - wWin;
            let scrollPos = 0;

            // Zeichnet einen Kreisbogen-Indikator:
            function drawArcIndi(start, end, translate) {

// usw. wie bisher

            // Eventhandler fuer das Scrollevent beim Container registrieren:
            panoOuter.addEventListener('scroll', event => {
                scrollPos = panoOuter.scrollLeft + startPos;
                // Frueher gezeichnete Indikatoren loeschen:
                svg.selectAll(".indi").remove();
                // Neuzeichnen der Indikatoren veranlassen:
                update();
            });
        }); // Ende Eventlistener fuer window
        // Jetzt muessen wir natuerlich beide Bilder laden:
        panoImg.src = "_HP-Subdomain/images/2016-06-05_Wolfenbüttel_Bankplatz_Panorama_3708x640.jpg";
        panoImg2.src = "_HP-Subdomain/images/2016-06-05_Wolfenbüttel_Bankplatz_Panorama_3708x640.jpg";
    </script>
</body>

Alles anzeigen

Sempervivum

Nein, mit dem return klappt das in diesem Zusammenhang nicht. Du kannst jedoch das Ergebnis des confirm abfragen:

Code

            $('#btnSendEIN1').click(function(){
                if (confirm('Would you like switch on?')) {
                    // usw.:
                    $.ajax({

Sempervivum

Da werden wir wohl an zwei zusätzlichen Spans nicht vorbei kommen:

Code

        <div class="grid-item">
            <span><span style="font-size:40px" id="Voltage1">12</span>&nbsp;V</span>
            <span><span style="font-size:40px" id="Voltage2">24</span>&nbsp;V</span>
        </div>

Und dann beim .grid-item flex-direction: column; setzen.

Sempervivum

Das ist eine Anforderung, die es häufig gibt und auch kein Problem: Über eine Klasse merken wir uns den Zustand des Relais und setzen abhängig davon den Text und die URL:

Code

        <div class="grid-item" id="btnSendEINAUS1">Off</div>
    </div> <!-- Ende Gridcontainer -->
    <script>
        $('#btnSendEINAUS1').click(function () {
            let url;
            // Abhaengig davon ob die Klasse "is-on" vorhanden ist,
            // setzen wir den Text und die URL fuer das Umschalten:
            if ($(this).hasClass('is-on')) {
                url = '/relais1AUS';
                $(this).text('Off');
            } else {
                url = '/relais1EIN'
                $(this).text('On');
            }
            // Zustand der Klasse wechseln:
            $(this).toggleClass('is-on')
            $.ajax({
                type: 'POST',
                url: url,
                success: function (data) {
                    alert(data);
                }
            });
        });
    </script>
</body>

Alles anzeigen

Sempervivum

Du machst da etwas doppelt: Inline registrierst Du die Funktion relais123_clicked für Click, darin wieder einen Eventlistener für document-ready und dann wiederum über die ID "btnSendAUS2" für Click. Gib der Zelle diese ID, dann kannst Du das jQuery so beibehalten:

Code

<div id="btnSendAUS2" class="grid-item_relais">on</div>

Code

    <script>
    <!--####################################################-->
        $(document).ready(function(){
            $('#btnSendEIN1').click(function(){
                $.ajax({
                    type: 'POST',
                    url: '/relais1EIN',
                    success: function(data){
                        alert(data);
                        }
                    });
                });
            });
    </script>

Alles anzeigen

(Das language="javascript" brauchst Du heute nicht mehr).

Sempervivum

Zitat

Ich verspreche Dir, dass ich mich in naher Zeit endlich einmal mit scss befasse und lerne das Zeug zu compilieren obwohl ich da nicht ganz begreife, was das bringen soll
.... außer, dass es wahrscheinlich schwieriger ist einen compilierten Code abzuändern

Es gibt sicher lohnendere Lernobjekte als SCSS. Der Nutzen besteht weniger darin, den Code gegen Manipulationen zu schützen sondern es soll Features zur Verfügung stellen, die CSS nicht bietet, z. B. Schleifen. Ich habe da vor längerer Zeit mal hinein gerochen und fest gestellt, dass diese Features dann doch wieder eingeschränkt sind, so dass ich zu dem Schluss gekommen bin, dass der Nutzen begrenzt ist und bin dann nicht tiefer eingestiegen.

Sempervivum

Leider habe habe ich kein iPad und konnte es deshalb weder untersuchen noch beheben. Unabhängig davon bin ich jedoch der Meinung, dass Du bei diesem Layout mit einem Grid besser bedient bist. Ich habe hier mal die grobe Struktur aufgebaut:

HTML

<!doctype html>
<html lang="de">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MerryFisher | BoatPanel</title>
    <style type="text/css">
        html,
        body {
            height: 100%;
        }

        body {
            margin: 0;
            background-color: black;
            display: flex;
        }

        #grid-container {
            flex: 1;
            display: grid;
            /* Aufteilung der Breite der Spalten: */
            grid-template-columns: 1fr 1fr 2fr 2fr;
            /* Aufteilung der Höhe der Zeilen,
            6 Zeilen, alle gleich hoch: */
            grid-template-rows: repeat(6, 1fr);
            /* Abstand zwischen den Zellen: */
            gap: 0.25em;
            /* Abstand außen: */
            margin: 0.25em;
        }

        /* Die beiden Items, die zwei Zeilen ueberspannen sollen: */

        .grid-item.span1 {
            grid-column: 3 / 4;
            grid-row: 1 / 3;
        }

        .grid-item.span2 {
            grid-column: 4 / 5;
            grid-row: 1 / 3;
        }

        .grid-item {
            /* Inhalt der Griditems zentrieren: */
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: darkgray;
            color: white;
        }
    </style>
</head>

<body>
    <div id="grid-container">
        <div class="grid-item">Battery 1</div>
        <div class="grid-item">12 V</div>
        <div class="grid-item">Battery 2</div>
        <div class="grid-item">24 V</div>
        <div class="grid-item span1">0 km/h</div>
        <div class="grid-item span2">0</div>
        <div class="grid-item">Temp 1</div>
        <div class="grid-item">20,7 C</div>
        <div class="grid-item">0</div>
        <div class="grid-item">Shutdown</div>
        <div class="grid-item">Temp 2</div>
        <div class="grid-item">20,5 C</div>
        <div class="grid-item">0</div>
        <div class="grid-item">Reboot</div>
        <div class="grid-item">Temp 3</div>
        <div class="grid-item">20,2 C</div>
        <div class="grid-item">0</div>
        <div class="grid-item">On/Off</div>
        <div class="grid-item">Temp 4</div>
        <div class="grid-item">20,2 C</div>
        <div class="grid-item">0</div>
        <div class="grid-item">On/Off</div>
    </div>
</body>

</html>

Alles anzeigen

Prüfe, ob das auf dem iPad richtig angezeigt wird und wenn ja, kannst Du es ja weiter verfeinern mit den Hintergrundfarben, Schriftarten etc.

Sempervivum

Mit SCSS bist Du schon auf der richtigen Spur aber es nützt nichts, die Endung einfach zu ändern, weil dieses CSS vorkompiliert werden muss. Betroffen ist nur dieses:

Code

&:hover{
    flex: 7;
}

Ändere es in dieses um und die Animation wird funktionieren:

Code

.item:hover {
    flex: 7;
}

Und für die Zukunft, falls Du wieder mal etwas mit SCSS findest: Du kannst dir bei Codepen die kompilierte Version anzeigen lassen, indem Du oben rechts über dem CSS-Fenster auf den Pfeil klickst und "View Compiled CSS" auswählst.

Und ebenfalls für die Zukunft: Code besser formatiert posten, das Symbol </> rechts oben beim Verfassen eines Beitrages.

Sempervivum

Besser nicht editieren, weil man dann keine Nachricht bekommt, dass es etwas Neues gibt.

Der Grund für den Fehler ist, dass das load-Event für das Bild schon feuert, bevor wir den Eventlistener dafür registriert haben. Dies kann passieren, wenn das Bild schon im Cache ist, denn dann geht das Laden sehr schnell.

Lösung indem man das src-Attribut erst setzt, nachdem der Listener registriert wurde:

Code

    <div id="pano-outer">
        <!-- Hier zunaechst kein src-Attribut angeben -->
        <img id="pano-img">
    </div>
    <svg width="600" height="300">
    </svg>
    <script>
        const innerRadius = 80,
            outerRadius = 85,
            svg = d3.select("svg");

// der weitere Code wie bisher

            //Zeichnen der Indikatoren veranlassen:
            scrollPos = startPos;
            update();

            // Eventhandler fuer das Scrollevent beim Container registrieren:
            panoOuter.addEventListener('scroll', event => {
                scrollPos = panoOuter.scrollLeft + startPos;
                // Frueher gezeichnete Indikatoren loeschen:
                svg.selectAll(".indi").remove();
                // Neuzeichnen der Indikatoren veranlassen:
                update();
            });
        }); // Ende Eventlistener für das load-Event des Bildes
        // Jetzt setzen wir das src-Attribut:
        panoImg.src = "http://temp.9rp.de/forum/zaun.jpg";
    </script>

Alles anzeigen

Sempervivum

Zitat

Am liebsten sogar so, dass man die Dateinamen gar nicht erst in ein HTML reinschreiben muss, sondern, dass die Namen dann vom Srver aus eingelesen werden.

Das geht recht einfach mit der PHP-Funktion glob:

PHP

<?php
$images = glob('images-gallery/*.jpg');
$css = '';
$html = '';
for ($i = 0; $i < count($images); $i++) {
    $css .= '.item-' . ($i + 1) . ' {
        background-image: url(' . $images[$i] . ');
    }';
    $html .= '<div class="item item-' . ($i + 1) . '"></div>';
}
?>

Dann im head-Bereich das CSS einfuegen
<style>
    <?php echo $css; ?>
</style>
und im body das HTML genau so.

Alles anzeigen

Sempervivum

Das scheint mir sehr simpel zu sein: Einfach flex-direction auf column ändern und Bingo:

https://codepen.io/Sempervivum/pen/JjEyGGW

Beiträge von Sempervivum

Text soll meherer unterschiedlich breite Bilder umfließen

Wie hatte ich das mal gemacht-html indexseite Provider?

Anpassen der Website

Anpassen der Website

div/img mit Regler auf Bild scrollen

div/img mit Regler auf Bild scrollen

Zeitoffset mit HTML

Ich suche ein Responsives vertikales Akkordeon für Bilder

Ich suche ein Responsives vertikales Akkordeon für Bilder

div/img mit Regler auf Bild scrollen

Click in Zelle führt Funktion aus

Zeilenumbruch in einem Grid

Click in Zelle führt Funktion aus

Click in Zelle führt Funktion aus

Ich suche ein Responsives vertikales Akkordeon für Bilder

HTML-Tabelle | Formatierung / Anpassung der Spaltenbreiten/Zeilenhöhen

Ich suche ein Responsives vertikales Akkordeon für Bilder

div/img mit Regler auf Bild scrollen

Ich suche ein Responsives vertikales Akkordeon für Bilder

Ich suche ein Responsives vertikales Akkordeon für Bilder