Beiträge von Sempervivum

Ja, wenn das dein Wunsch ist, kannst Du das mit Gridlayout realisieren. Mit grid-column und grid-row kannst Du angeben, in welcher Zelle des Grid ein Element angezeigt wird, siehe hier:

A Complete Guide to CSS Grid | CSS-Tricks

Our comprehensive guide to CSS grid, focusing on all the settings both for the grid parent container and the grid child elements.

css-tricks.com

Lies das in der rechten Spalte über die Grid-Items.

Oder alternativ kannst Du den Elementen jeweils eine grid-area zuweisen und dann mit grid-template-areas angeben in welchen Zellen des Grid sie angezeigt werden sollen.

Und wenn Du damit nicht zum Ziel kommst, dann melde dich wieder.

Dass eine Konstante definiert ist, bewirkt erst Mal gar nichts, Du musst UTF-8 auch einschalten.

Der Vorschlag auf Stackoverflow sieht so aus:

$mail->CharSet = "UTF-8";

aber Du kannst natürlich auch die Konstante zuweisen.

Zitat

Wie ist das mit den Eintragungen (Hacks?) für andere Browser à la -moz-*, -webkit-*, -ms-* und -o-* ?

Hier gibt canisuse.com Auskunft:

"cursor" | Can I use... Support tables for HTML5, CSS3, etc

D. h. cursor wird noch nicht von allen verbreiteten Browsern unterstützt und ich sehe auch keine Fußnote, dass es mit Prefix unterstützt wird. D. h. Du kannst diese unbesorgt weg lassen.

Lupus_III Benutzt Du PHP-Mailer? Bei dem ist UTF-8 nicht Default, Du musst es explizit einschalten, siehe hier:

PHPMailer character encoding issues

I try to use PHPMailer to send registration, activation. etc mail to users: require("class.phpmailer.php"); $mail -> charSet = "UTF-8"; $mail = new…

stackoverflow.com

Es gibt dazu auch ein Issue und man hat sich bewusst dagegen entschieden, es zum Default zu machen.

Guten Morgen, auch ein früher Vogel?

Zitat

wie kann ich diesen "nicht vorhandenen Cache" definitiv ausschalten?

Was zuverlässig funktioniert, ist ein Anhängsel an die URL:

    <link rel="stylesheet" type="text/css" href="css/tam-26-split-2.css" />

Und dann nach jeder Änderung erhöhen.

Ich habe mir das jetzt angesehen, funktioniert so weit einwandfrei. Wenn ein Bild groß ist, und man klickt auf das gleiche kleine wird verkleinert und gleich wieder vergrößert, wahrscheinlich ist es das, was Du meinst. Kann man leicht unterbinden, indem man prüft ob beide Bilder gleich sind:

            // Ist kein vergößertes Bild vorhanden?
            if (!document.querySelector('figure.ovl.large')) {
                // Bild sofort vergrößern:
                enlargeIt(event.target);
            } else {
                // Unterscheidet sich das geklickte Bild von dem großen
                if (event.target.getAttribute('src')
                    != ovl.querySelector('img').getAttribute('src')) {
                    // Das aktuell vergrößerte Bild verkleinern:
                    ovl.classList.remove('large');
                    // Vergrößern des neuen Bildes vormerken:
                    ovl.dataset.toEnlarge = event.target.getAttribute('src');
                }
            }

Weil der Browser eine relative URL zu einer vollständigen ergänzt, müssen wir konsequent mit getAttribute arbeiten damit die Vergleiche funktionieren, auch in dieser Zeile:

    // Bild in Overlay eintragen:
    largeImg.src = img.getAttribute('src');

Natürlich würde es auch anders herum gehen: Konsequent mit der vollständigen URL arbeiten.

Zitat

nach dessen Vergrösserung bei Klick an gleicher Stelle, also nach wie vor auf "Dorf", das Bild zuerst ein- und dann gleich wieder aufgezoomt.

...

Aber sie danach gleich wieder vergrössern ist dann m. E. doch etwas too much

Das darf natürlich nicht sein, ich hatte das im Verlauf der Entwicklung aber auch. Möglicher Weise habe ich nicht den aktuellen Stand gepostet, ich werde mir das ansehen.

Zitat

- Bei Anzeige von vergrössertem Bild und Klick darauf, wird "langsam" ausgeblendet. Wenn ich aber bei vergrössertem Bild auf anderes, kleines Bild klicke, fehlt diese Verzögerung. Lässt sich das "zwischen" den Bildern auch realisieren?

Versuche dieses Javascript. Es ist ein wenig kompliziert geworden. Die Alternative wäre gewesen, die Zeitdauer der Transition aus dem CSS auszulesen und mit setTimeout zu arbeiten.

const
    ovl = document.querySelector('figure.ovl'),
    largeImg = ovl.querySelector('img');
function enlargeIt(img) {
    const
        // Seitenverhältnisse von Body und Bild ermitteln:
        boxBody = document.querySelector('body').getBoundingClientRect(),
        ratioBody = boxBody.width / boxBody.height,
        boxImg = img.getBoundingClientRect(),
        ratioImg = boxImg.width / boxImg.height;
    // Bild entspr. Seitenverhältnis einpassen:
    if (ratioImg > ratioBody) {
        largeImg.classList.add('fitVertically');
    }
    // Bild in Overlay eintragen:
    largeImg.src = img.src;
    // Bild groß machen indem wir die Klasse "large" zum Overlay hinzu fügen:
    ovl.classList.add('large');
}
// Eventlistener für Klick irgend wo auf der Seite registrieren
window.addEventListener('click', event => {
    // Wurde innerhalb eines großen Bildes geklickt?
    if (event.target.matches('figure.ovl.large img')) {
        // Bild wieder klein machen indem wir die Klasse "large" löschen:
        ovl.classList.remove('large');
    } else {
        // Wurde auf ein kleines Bild geklickt?
        if (event.target.matches('img.small')) {
            // Ist kein vergößertes Bild vorhanden?
            if (!document.querySelector('figure.ovl.large')) {
                // Bild sofort vergrößern:
                enlargeIt(event.target);
            } else {
                // Das aktuell vergrößerte Bild verkleinern:
                ovl.classList.remove('large');
                // Vergrößern des neuen Bildes vormerken:
                ovl.dataset.toEnlarge = event.target.getAttribute('src');
            }
        }
    }
});
document.querySelector('figure.ovl').addEventListener('transitionend', event => {
    imgSrc = ovl.dataset.toEnlarge;
    // Wurde eine Vergrößerung vorgemerkt
    // und handelt es sich um das Ende der Transition
    // für das Verkleinern?
    if (imgSrc && !ovl.classList.contains('large')) {
        // Vorgemerkte Vergrößerung löschen:
        ovl.dataset.toEnlarge = '';
        // Neues Bild vergrößern:
        enlargeIt(document.querySelector('img[src="' + imgSrc + '"]'));
    }
});

Zitat

- Bei Anzeige von vergrössertem Bild und Klick darauf, wird "langsam" ausgeblendet. Wenn ich aber bei vergrössertem Bild auf anderes, kleines Bild klicke, fehlt diese Verzögerung. Lässt sich das "zwischen" den Bildern auch realisieren?

Da hast Du vollkommen Recht, dieser Code war ein erster Ansatz und ist in einigen Punkten noch verbesserungsfähig. Diesen Punkt sehe ich mir anschließend an.

Zitat

- Beim Vergrössern/Verkleinern des Bildes ist eine gewisse Verzögerung realisiert. Das ist prima. Bloss, wenn ich den Wert (in cc-File)

transition: all 1s linear; (?) ändere, kann ich auf der Seite keine Veränderung feststellen. Was habe ich (beim Verändern des Wertes "1s") falsch gemacht?

Bei ausgelagerten Dateien, sowohl CSS als auch JS, hat man öfters Probleme mit dem Cache: Der Browser holt die Datei aus dem Cache statt sie neu zu laden. Versuche, die Seite mit Strg+F5 neu zu laden, das erzwingt das Neuladen am Cache vorbei.

Zitat

- Wunsch wäre nun noch - ich hab's leider nicht hinbekommen - dass Maus-Zeiger bei hovern über kleinem Bild zu "Plus-Zeiger" bzw. über grossem Bild zu "Minus-Zeiger" wird. Ansatz etwa wie nachstehend? (Mir ist klar, dass das nur für Bildschirm gilt).

Wie hast Du das denn versucht? Bei mir funktioniert es mit diesem CSS einwandfrei:

img.small:hover {
    cursor: zoom-in;
}

figure.large:hover {
    cursor: zoom-out;
}

Hallo Emess,

schön, dass Du dieses Thema ansprichst und ich kann deine Aussagen zum großen Teil unterschreiben.

Insbesondere was die Netikette betrifft. Ich lese öftest Redewendungen wie "nicht dein Ernst!" "ist Schrott/Müll/kaputt" "dieses Gehampel". So etwas widerspricht nicht nur der Netikette sondern sicherlich auch den Forenregeln. Die Reaktionen darauf sind unterschiedlich: Manch einer hat da eine bemerkenswerte Leidensfähigkeit aber ich habe es mehr als ein Mal beobachtet, dass ein Fragesteller nach solchen unfreundlichen Postings von der Bildfläche verschwand - immer ein Schaden für das Forum. Und ich vermute eine hohe Dunkelziffer: Wer neu ist und eine Frage hat, wird sich vor der Registrierung ein wenig umsehen, und, wenn er einen Umgang wie oben beschrieben bemerkt, es gar nicht erst tun. Jedes Mal ein verlorenes Mitglied.

"Viele Wege führen nach Rom" - im Prinzip richtig aber es gibt Einschränkungen, ein Beispiel: Bei manchen Aufgaben kann auch ein Tabellenlayout oberflächlich betrachtet zum Ziel führen. Aber niemand, der sachkundig ist, wird eine Empfehlung dahin gehend gutheißen. Und bei manchen Mitgliedern gewinnt man den Eindruck, dass nicht die technische Fragestellung im Vordergrund steht und die Absicht, eine konstruktive Alternative vorzuschlagen sondern ein übersteigertes Interesse am Kritisieren und Besserwissen, wenn ein konstruktiver Beitrag reflexhaft mit Kritik gekontert wird. Hin und wieder beobachte ich, dass eine Frage mehr als einen Tag unbeantwortet herum liegt aber, wenn ich sie dann beantworte, postwendend ein Ja-Aber-Posting folgt.

Mitunter kann es nicht schaden, einen Erfolg und eine positiven Beitrag einfach mal stehen zu lassen und anzuerkennen.

Beste Grüße, Ulrich

Zitat

Warum du jetzt allerdings immer noch flex bevorzugst obwohl das ja ein Element mehr braucht, ist mir nicht so ganz klar.

Wie früher schon geschrieben, es nimmt sich nichts. Mit jedem Spanning entfernt man sich von der Semantik eines Grid und das Layout wird unübersichtlicher.

Dies bedarf auch noch der Kommentierung:

Zitat

Ehrlich gesagt finde ich es an dieser Stelle etwas unpassend.

Ich hätte nicht für die Tage und die Uhrzeiten alles einzelne Elemente genutzt und sie mit Grid ausgerichtet.

Beim dl, das tk1234 vorschlägt, ist das genau so vorgesehen:

HTML/Tutorials/Listen/Beschreibungslisten – SELFHTML-Wiki

Die Elemente werden aneinander gereiht ohne jedes Paar zu umschließen. Aber wahrscheinlich liegen die Leute, die hier den Standard definiert haben, ebenfalls falsch

Ich bin dann aber erst Mal raus hier bzw. heraus gedrängt. Unbefriedigend, wenn die Beiträge nicht von Sachverstand, sowohl technisch als auch didaktisch, geprägt sind sondern von Besserwisserei.

Das liegt daran, dass dieses Vorgehen mit Flex nichts zu tun hat, sondern veraltet ist. Es bringt dir wenig Nutzen wenn Du dort einsteigst um es zu verstehen. Profitieren würdest Du, wenn Du dich damit vertraut machen würdest, wie man so etwas mit Mitteln umsetzt, die Stand der Technik sind, siehe auch mein Posting #23 in deinem anderen Thread.

Ausgehend von meinem Posting in #8 hier mal wie ich mir das vorstelle.

Mit Flex:

        .flex-container {
            display: flex;
        }

        .flex-item {
            flex: 1;
        }

        #welcome h1,
        #welcome div {
            text-align: center;
        }

    <section id="welcome">
        <img src="images/logo.png">

        <h1>welcome</h1>
        <div class="flex-container">
            <div class="flex-item">1</div>
            <div class="flex-item">2</div>
        </div>
        <div>3</div>
    </section>

Und mit Grid:

        #welcome {
            display: grid;
            grid-template-columns: 1fr 1fr;
        }

        #welcome img,
        #welcome h1,
        #welcome div.bottom {
            grid-column: 1/3;
        }

        #welcome h1,
        #welcome div {
            text-align: center;
        }

    <section id="welcome">
        <img src="images/logo.png">

        <h1>welcome</h1>
        <div>1</div>
        <div>2</div>
        <div class="bottom">3</div>
    </section>

Zitat

Doch das gibt mir immer noch Rätsel auf

Siehe den ersten Absatz in meinem Posting #34: Code sollte so gestaltet sein, dass er klar und selbst erklärend ist und keine Rätsel aufgibt.

Zitat von @tk1234

Nicht mit flex, versuch es mal mit grid: grid-template-areas ist dein Freund.

Hier wäre eine Begründung wünschenswert, warum Du an dieser Stelle Grid bevorzugst. Dadurch wird alles nur unnötig kompliziert und mit jedem Spanning entfernt man sich von der Semantik eines Grid.

footer>section:last-of-type
{
    flex-basis: calc(100% - 4rem);
    flex-shrink: 0;
}

Ich schätze ja dieses Vorgehen mit Wrapping und Rechnerei mit calc nicht so sehr. Dadurch, dass es Flex gibt, ist das überflüssig. flex: 1; und gut ist, das ist übersichtlich, klar und lesbar. Und man muss sich nicht mit padding, border etc. befassen. An den Fragen von Emess erkennt man ja, dass dieses Vorgehen unübersichtlich ist und das Verständnis erschwert.

Und, Bemerkung am Rande: Auch an dieser Stelle frage ich mich, wo die Mitglieder sind, die sonst das Posten von fertigem Code reflexhaft beanstanden.

Zitat

Das dritte div muss ebenfalls mit eigener Klasse angesprochen werden.

Für die Anordnung, die Du haben willst, erst Mal nicht denn der Browser stapelt die Elemente übereinander. Sondern nur, wenn Du z. B. eine Höhe angeben willst, eine Farbe und/oder.

Da sieht man dann sofort, wo es hakt: Du willst ja die Items 1 und 2 nebeneinander anordnen. Dafür brauchst Du, wenn Du es mit Flex erledigen willst, einen Container drum herum, also so:

<div class="flex-container">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
</div>
<div class="flex-items">3</div>

Die Klasse "flex-items" für einen Flex-Container ist zwar nicht falsch, lädt aber zu Missverständnissen ein weil man meistens "flex-item" eben für ein Item verwendet. Daher war ich so frei, die Klassen anders zu definieren.

Mit diesem:

/* #welcome .flex-items{ */
#welcome .flex-container {
  background-color: dimgray;
  padding-top: 0.3vw;
  width: 50vh;
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
 
}

und dem "flex-direction:row" darin warst Du schon auf dem richtigen Wege.

Natürlich kann man diese Anordnung auch mit Grid machen aber es nimmt sich nicht viel. Außerdem entfernt man sich mit jedem Spanning von der Semantik eines Grid.

Poste doch auch mal das HTML dazu oder lade den aktuellen Stand wieder auf miflo.de hoch.