Beiträge von Sempervivum

Sempervivum

Auf den Bildern kann ich leider gar nichts erkennen, da sind bei mir nur Schleier und Schatten.

Zitat

Komischerweise funktioniert es, wenn ich anstatt 1200PX einfach 62% verwende. Ich weiß aber nicht ob das richtig ist

Richtig oder falsch ist hier weniger die Frage, sondern ob Du damit zu einer Darstellung kommst, die auf allen Monitoren gut aussieht. Wenn ich das mit den 62% ausprobiere, habe ich das Problem, dass bei schmalem Browserfenster, auch wenn die Mediaquery greift, links und rechts Platz verschenkt wird. Eine einfache Möglichkeit, beiden, schmalen und ganz breiten Browserfenstern gerecht zu werden, ist, max-width statt width zu verwenden. Dann ufert die Breite auf der einen Seite nicht aus und auf der anderen Seite wird bei schmalerem Browserfenster der verfügbare Platz ausgenutzt.

Sempervivum

Gern.

Deaktiviert man die feste Breite für #homepage, so verschwindet die horizontale Scrollbar und man kann die Seite auf einen Blick erfassen.

Code

        #homepage {
            margin: 0 auto;
            margin-top: 35px;
            /* width: 1200px; */
            display: flex;
            flex-direction: column;
            border: 5px solid #000;
            border-radius: 5px;
            box-shadow: 0 0 10px #000;
            background-image: url(images/background.jpg);
            background-repeat: repeat;
        }

Alles anzeigen

Und die vertikale Anordnung erreichst Du mit diesem CSS:

Code

        @media screen and (max-width: 500px) {
            #row {
                flex-direction: column;
            }
        }

Damit die Sidebar auch dann sichtbar ist, musste ich ihr eine min-height verpassen. Wenn erst Mal Inhalte drin sind, kann das entfallen.

Code

        .sidebar {
            flex: 1;
            min-height: 470px;
            background-color: #000;
        }

Was die HG-Grafiken betrifft, so müsste man wissen, wie Du dir die Anzeige vorstellst. Es gibt da ja diverse Varianten, gekachelt oder nicht gekachelt etc. Kannst Du sie vielleicht an dein nächstes Posting anhängen?

Sempervivum

Zitat

Ich möchte, dass sich alle Container auf dem Handy untereinander anordnen. Verwende ich dann flex-direction innerhalb der Media-Queries ?

Dann war meine Vermutung ja richtig und die Verwendung von flex-direction:column in der Mediaquery wäre der beste Weg.

Zitat

Das Design verwendet Grafiken, welche eine feste Breite haben. Das Layout soll auf dem PC 1200PX breit sein und sich auf einem Mobilgerät entsprechend adaptieren. Vor Allem sind ja alle Werte relativ beziehen sich also auf etwas.

Nicht jeder hat seinen Browser im Vollbild laufen, ich auch nicht und ich muss horizontal scrollen, um den Bereich rechts sehen zu können. Responsives Layout verstehe ich so, dass sich das Layout an die Breite des Browserfensters anpasst. Das schließt die Verwendung von Hintergrund-Grafiken nicht aus, es gibt CSS-Anweisungen um die Größe an den umgebenden Container anzupassen.

Sempervivum

Da kann man ja vor lauter schwarz kaum etwas erkennen

Ein Kernproblem ist, dass Du dem Container #homepage eine feste Breite gegeben hast. Damit hebelst Du das Flexlayout insofern aus, als zwar die Verteilung der Breite von 3:1 passt, aber das Layout passt sich nicht an das Browserfenster an und man muss scrollen.

BTW: Das Body-Element ist nicht tabu für Styling, man kann diesem ebenfalls ein display:flex geben und hat dann einen Container weniger.

Was die Mediaquery betrifft, so ist mir nicht ganz klar, was Du damit erreichen willst. Naheliegend wäre ein vertikale Anordnung auf einem schmalen Bildschirm. Wolltest Du da vielleicht 100% statt 100px schreiben?

Eine vertikale Anordnung kannst Du leichter erzielen, wenn Du das Layout auf flex-direction:column umschaltest.

Edit: Ich sehe gerade, dass der schwarze Hintergrund dadurch kommt, dass ich die Hintergrundbilder nicht habe.

Sempervivum

Dann poste am besten auch das HTML zu dem CSS.

Sempervivum

Dann probiere mal dieses:

https://webentwicklung.ulrichbangert.de/hover.html

Ich habe zusätzlich das Bild etwas nach links oben verschoben, weil es sonst vom Finger bedeckt ist.

HTML

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

<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <title>Testseite</title>
    <style>
        html,
        body,
        div {
            width: 100%;
            height: 100%;
        }

        #bcpo .bcpo-images {
            display: flex;
            justify-content: center;
            align-items: center;
        }



        #bcpo .bcpo-images div.bcpo-image-parent {
            width: 100px;
            height: 100px;
            transition: 0.5s;
        }

        img {
            width: 100%;
            height: 100%;
        }

        #bcpo .bcpo-colors div.bcpo-color-parent:hover,
        #bcpo .bcpo-colors div.bcpo-color-parent.magnify,
        #bcpo .bcpo-images div.bcpo-image-parent:hover,
        #bcpo .bcpo-images div.bcpo-image-parent.magnify {
            transform: scale(2);
            z-index: 1;
        }

        #bcpo .bcpo-colors div.bcpo-color-parent.magnify,
        #bcpo .bcpo-images div.bcpo-image-parent.magnify {
            transform: scale(2) translate(-50px, -50px);
            z-index: 1;
        }
    </style>
</head>

<body>
    <div id="bcpo">
        <div class="bcpo-images">
            <div class="bcpo-image-parent">
                <img src="images/Stoff-transparent.png">
            </div>
        </div>
    </div>
    <script>
        var conts = document.querySelectorAll('#bcpo .bcpo-images div.bcpo-image-parent');
        for (var i = 0; i < conts.length; i++) {
            conts[i].addEventListener('touchstart', function (event) {
                event.preventDefault();
                this.classList.add('magnify');
            });
        }
        document.querySelector('body').addEventListener('touchend', function () {
            document.querySelector('div.bcpo-image-parent.magnify').classList.remove('magnify');
        });
    </script>
</body>

</html>

Alles anzeigen

Sempervivum

Und welche Variante hast Du jetzt genommen, die mit einer weiteren Zeile oder die mit Flex?

Sempervivum

Wenn Du das Bild nicht als Hintergrund sondern als normales img-Tag einbindest und absolut positioniert unter die Slideshow legst, kannst Du u. a. Helligkeit und Kontrast mit CSS steuern:

https://wiki.selfhtml.org/wiki/CSS/Eigen…/Anzeige/filter

Sempervivum

PS: Ich sehe gerade, dass es das auch beim Gridlayout gibt: align-self

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

Allerdings scheint dieses nur anwendbar zu sein, wenn es nur ein Item in der Zelle gibt.

Eine andere Möglichkeit könnte sein, eine weitere Zeile anzulegen mit den Knöpfen:

HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Test Gridlayout</title>
    <style>
        .container {
            display: grid;
            grid-template-columns: 33.33% 33.3% 33.3%;
            grid-template-rows: 1fr auto;
        }
    </style>
</head>

<body>
    <div class="container">
        <div id="e1">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
            labore et dolore
            magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
            kasd
            gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
            sadipscing
            elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
            vero eos et
            accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
            dolor sit
            amet.</div>
        <div id="e2">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
            labore et dolore
            magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
            kasd
            gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
            sadipscing
            elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
            vero eos et
            accusam et justo duo dolores et ea rebum.</div>
        <div id="e3">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
            labore et dolore
            magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
            kasd
            gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
        <button>Button 1</button>
        <button>Button 2</button>
        <button>Button 3</button>
    </div>
</body>

</html>

Alles anzeigen

Mit Flex geht es aber auf jeden Fall.

Sempervivum

Ja, das geht sehr gut mit Flexlayout, etwa so:

Code

.container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Sempervivum

Einfach direkt im HTML notieren:

Code

<body>
    <iframe src="https://domain.de/seite.html">

und dann die Sichtbarkeit mit Javascript steuern:

Code

document.querySelector('iframe').style.display='none'; // oder 'block'

Sempervivum

Zitat

die Seite wird aber auch bei allen Unzterseiten angezeigt

Wahrscheinlich bindest Du deine header.php auch auf den Unterseiten ein, dann wird auch dort das Skript ausgeführt und der iFrame angezeigt.

BTW, dieser HTML-Text für den iFrame ist vollkommen statisch, es werden keine Variablen darin verwendet, und daher halte ich es für überflüssig, ihn mit Javascript anzuzeigen.

Sempervivum

Hier scheint mir mit den Hochkommas etwas nicht zu stimmen:

'header' => "Content-type: 'Content-Type: text/xml',

Versuche es so:

'header' => 'Content-Type: text/xml',

Sempervivum

Zitat

Kann mir jemand erklären warum man fortfahren kann (auschecken) - auch wenn man kein file upgeloaded hat?

Unabhängig von den Fehlern im HTML kann man die Frage sicher beantworten: Die Validierung für "required" prüft nur, ob eine Datei ausgewählt wurde, nicht ob sie auch hochgeladen wurde.

Lösung 1: Zunächst nur ein Formular mit dem Upload anbieten und die weiteren Eingabemöglichkeiten erst auf der Folgeseite, die durch das Upload-Script erzeugt wird.

Lösung 2: Mit Ajax hochladen und den erfolgreichen Upload z. B. in einem data-Attribut merken. Dann selbst eine Validierung programmieren, die dies berücksichtigt.

Sempervivum

Zitat

Mir geht es darum, um Hilfe zu bitten, die ich so natürlich leichter bekomme.

Für dich als Fragesteller ist es natürlich angenehm, möglichst viele Helfer mit deinem Problem zu beschäftigen, aber für die Helfer weniger: Die Erfahrung lehrt, dass der Fragesteller glücklich ist, wenn er eine Lösung in einem Forum bekommt. Die Helfer in anderen Foren bleiben häufig auf ihren Beiträgen sitzen, weil der Fragesteller nicht mehr gesehen ward.

Sempervivum

Wenn das Bild im Cache ist, kann es sein, dass es schon geladen ist, wenn das Skript abläuft. Kann man abfangen, indem man den Ladezustand abfragt:

Code

        var theimg = jQuery(".wp-post-image");
        onResize = function () {
            var hoehe = theimg.height();
            jQuery(".pic-wrap").css("height", hoehe);
        }
        if (theimg.prop('complete')) {
            onResize();
        } else {
            theimg.on('load', onResize);
        }
        jQuery(window).bind('resize', onResize);

Alles anzeigen

Sempervivum

Ich weiß nicht genau, wie Du das meinst. Ein bestimmtes Bild kannst Du ohne weiteres ansprechen und einen Eventlistener registrieren, bei deinem Beispiel so:

Code

onResize = function() {
    var hoehe = jQuery(".wp-post-image").height();
    console.log("Höhe", hoehe);
    jQuery(".pic-wrap").css("height", hoehe);
}

jQuery(".wp-post-image").on('load', onResize);

jQuery(window).bind('resize', onResize);

Sempervivum

Zitat

Noch ein wenig Zeit sparen, indem man nur die eine spezielle Grafik auf vollständiges Laden prüft, geht wohl nicht?

Doch, auch die Grafik hat ein load-Event und Du kannst das on-load auch darauf anwenden.

Sempervivum

Du benutzt das document-ready-Event. Bei diesem Event kann es sein, dass die Bilder noch nicht geladen sind und die Abmessungen nicht richtig berechnet werden. Du musst statt dessen das load-Event benutzen, siehe hier:

https://api.jquery.com/load-event/

Und beachte dort den gelb hinterlegten Hinweis.

Sempervivum

Zitat

Wenn man das a weg macht ( so wie du es hattest ) geht es nicht. Obwohl das andere alle geht was da drinne steht .

Kennt hier eine die erklärung dafür ?????

Der Grund ist, dass ihr das Hintergrund-Bild einfach mit background zuweist. Dadurch werden alle anderen Eigenschaften des Hintergrundes auf ihre Defaultwerte gesetzt. Verwendet man background-image funktioniert es auch ohne a im Selektor. Siehe das erste Bild:

https://codepen.io/Sempervivum/pen/XWWPezN?editors=1100

Beiträge von Sempervivum

Flexboxen & Media Queries

Flexboxen & Media Queries

Flexboxen & Media Queries

Flexboxen & Media Queries

Flexboxen & Media Queries

Hover auf dem Handy erstellen

Knöpfe bei einem Grid auf gleiche Höhe bringen

Slide Schow mit festem Hintergrundbild

Knöpfe bei einem Grid auf gleiche Höhe bringen

Knöpfe bei einem Grid auf gleiche Höhe bringen

iFrame per Java beim Aufruf der Domain laden bzw. Seite vorschalten

iFrame per Java beim Aufruf der Domain laden bzw. Seite vorschalten

Völliger Anfänger und APIs einbinden

Fortfahren trotz required?

CSS Grid Layout

Höhe beim Reload manchmal falsch berechnet

Höhe beim Reload manchmal falsch berechnet

Höhe beim Reload manchmal falsch berechnet

Höhe beim Reload manchmal falsch berechnet

Hilfe: background (code kürzen!)