Beiträge von Sempervivum

Sempervivum · 25. April 2018

Anscheinend hast Du das CSV in eine Tabellenverarbeitung eingelesen und ich vermute, dass es bloß ein Problem dieses Einlesevorgangs ist: Häufig wird nicht das Komma sondern das Semikolon per Default als Trennzeichen interpretiert. Versuche, entweder beim Schreiben in die Datei das Semikolon als Trennzeichen zu definieren, oder bei den Einstellungen für das Einlesen das Komma.

Sempervivum · 25. April 2018

Zitat

wie Sempervivum weiter oben schon geschrieben und du offensichtlich nicht gelesen hast

Ja, das ist leider häufig so, dass zielführende Hinweise ignoriert werden, so auch hier:

https://www.html.de/threads/countdown.58395/

Es ist häufig schon zum Verzweifeln: Wenn man es nicht wortreich, ready-for-copy-and-paste und womöglich noch klicki-bunti präsentiert, wird man ignoriert. Substanz hat keinen Stellenwert.

Sempervivum · 24. April 2018

Meine Lösung:

HTML

<!doctype html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <style>
        .row {
            display: flex;
        }

        .row .item {
            flex: 1;
        }
        .item.text {
            padding-left: 1em;
            padding-right: 1em;
        }

        img.theimg {
            width: 100%;
            height: auto;
            align-self: center;
        }

        img.headline-img {
            width: 100%;
            align-self: center;
        }
    </style>

</head>

<body>
    <div class="row top">
        <p class="item text">
            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.
        </p>
        <p class="item text">
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
            aliquyam erat, sed diam voluptua.
        </p>
    </div>
    <div class="row img">
        <figure class="item">
            <img class="theimg" src="images/dia0.jpg">
        </figure>

        <figure class="item">
            <img class="theimg" src="images/dia1.jpg">
        </figure>
    </div>
    <div class="row headline">
        <figure class="item">
            <img class="item headline-img" src="images/catimage11.png">
        </figure>
        <figure class="item">
            <img class="item headline-img" src="images/catimage12.png">
        </figure>
    </div>
    <div class="row text-bottom">
        <p class="item text">
            Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </p>
        <p class="item text">
            Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
            sadipscing elitr.
        </p>
    </div>
</body>

</html>

Alles anzeigen

Zunächst hatte ich versucht, zwei Spalten zu verwenden, so wie moon7331, weil die Elemente darin ja offenbar semantisch zusammen gehören, aber dann konnte ich die Höhen zwischen links und rechts nicht angleichen.

Mal sehen, wie MrMurphy es macht.

Edit: Nachdem ich noch Mal drüber geschaut habe, scheint mein Eindruck, dass die Inhalte der Spalten semantisch zusammen gehören, doch nicht zuzutreffen?

Sempervivum · 24. April 2018

Über den Bildern ist aber auch noch jeweils Text? Ohne den hättest Du wahrscheinlich die Probleme mit der Ausrichtung nicht.

Sempervivum · 24. April 2018

Ich bekomme das HTML nicht mit dem Screenshot zusammen: Im HTML kommt erst ein Bild, dann ein Textabsatz und dann ein div mit einem Bild drin. Im Screen dagegen oben Text, dann je ein Bild und dann darunter Text mit Überschrift?

Sempervivum · 24. April 2018

Den Code hast Du vergessen, HTML und CSS.

Sempervivum · 24. April 2018

Zitat

es funktioniert alles wieder.

Bezieht sich das auch auf das Ausblenden? Ich war mir nämlich nicht ganz sicher, ob es an der Platzierung von div und form liegt, weil mein Editor es nicht als fehlerhaft erkannte.

Bootstrap für das Layout zu benutzen ist sicher eine gute Wahl, wenn Du gewohnt bist, damit zu arbeiten. Auf jeden Fall besser als ein Tabellenlayout.

Sempervivum · 24. April 2018

PS: Bin ein wenig verunsichert: Mein Editor, den ich eigentlich als zuverlässig kenne, markiert dies nicht als Fehler, der W3C-Validator jedoch schon:

Zitat

Error: Start tag div seen in table.

From line 37, column 18; to line 38, column 17

</tr>↩ <div>↩

Fatal Error: Cannot recover after last error. Any further errors will be ignored.

From line 37, column 18; to line 38, column 17

</tr>↩ <div>↩

Alles anzeigen

Sempervivum · 24. April 2018

Zitat

Weiteres was ich mir nicht erklären kann ist, dass im Quellcode das div und das form rot markiert ist.

Der Grund ist, dass diese Elemente an dieser Stelle, zwischen </tr> und <tr> nicht zulässig sind. Innerhalb einer Tabelle nur in den Zellen. Du musst das Layout umstellen.

Sempervivum · 24. April 2018

Dein Code funktioniert bei mir, das Problem muss irgend wo anders liegen. Ein Kandidat ist das window.onload: Wird es irgend wo überschrieben?

Sempervivum · 24. April 2018

Probier mal, ob dies deinen Absichten einiger Maßen nahe kommt:

HTML

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

<head></head>

<body>
    <div id="bildwrapper">
        <img src="images/dia0.jpg">
        <input type="text" id="textfeld">
    </div>
    <style>
        body {
            padding: 0;
            margin: 0;
        }

        #bildwrapper {
            width: 100vw;
            height: auto;
            position: relative;
        }
        #bildwrapper img {
            width: 100%;
            height: auto;
        }
        #textfeld {
            position: absolute;
            left: 60%;
            top: 20%;
            transform: translate(-50%);
        }
    </style>
</body>

</html>

Alles anzeigen

Ich bin dabei davon ausgegangen, dass das Eingabefeld nicht mit skaliert werden soll.

Sempervivum · 24. April 2018

Zitat

Punkt 1: Die Größe des Bildes ist relativ egal, es soll sich jedoch an die Auflösung anpassen, heißt es soll nicht größer sein wenn die Auflösung geringer ist.

Das verstehe ich immer noch nicht. In welcher Form soll es sich an die Auflösung anpassen?

Zitat

Punkt 4&5: Nein es soll nicht zwingend zentriert sein, es soll sich an einer bestimmten Stelle befinden: 500 vom linken Rand und 200 von oben, dass das vertikal genau das Zentrum ist, ist Zufall

Auch das verstehe ich noch nicht. Die 500 und 200 (ich nehme an, Du meinst px) sollen sich auf die Originalgröße des Bildes beziehen? Denn wenn das Ganze responsiv sein soll, kann man dies nicht absolut angeben.

Sempervivum · 24. April 2018

Ich bin ganz optimistisch, dass man das auch mit CSS machen kann, aber mir ist nicht ganz klar, wie Du es haben willst:

Soll das Bild das Browserfenster ganz ausfüllen?
Das Seitenverhältnis des Bildes soll erhalten bleiben?
Was ist der Sinn beim Drehen des Eingabefeldes um 90 Grad?
Das Eingabefeld soll vertikal zentriert sein?
Das Eingabefeld soll horizontal nicht zentriert, sondern mehr zum rechten Rand hin platziert werden?

Sempervivum · 24. April 2018

Ich sehe nicht, warum Du das mit echo ausgeben musst. Du kannst den Code so, wie er ist, auf einer PHP-Seite einfügen, in Code-Tags natürlich.

Sempervivum · 23. April 2018

Zitat

Ich möchte gerne das man auf dem Button klickt und und dann auf eine andere Seite geleitet wird.

Genau das tut der Code, den ich gepostet habe.

Sempervivum · 23. April 2018

Zitat

Nur ich muss da ja nicht nur 2 mal hochgehen. Sondern muss nach dem 2 mal hoch gehen in user/images rein.

Genau das tut mein Code doch:

../../ zwei Stufen hoch gehen

users/images von da aus in users hinein und von da aus in images hinein gehen.

Du schreibst einmal user und einmal users. Liegt da vielleicht ein Fehler?

Sempervivum · 23. April 2018

So funktioniert es, jedenfalls, wenn ich deine Absicht richtig verstehe:

Code

        setTimeout(function () {
            swal({ title: 'Wow!', text: 'Message!', type: 'success' })
                .then(function () {
                    window.location = 'redirectURL';
                });
        }, 2000);

Du hattest als Zeit 1 angegeben, die wird in Millisekunden definiert, so dass der Alert praktisch sofort kommt. In dem Code oben habe ich 2000 ms bzw. 2 sec verwendet.

Und den Sinn, das Ganze mit echo auszugeben, sehe ich nicht.

Sempervivum · 23. April 2018

Heißt "aufrufen" in einem img-Tag anzeigen? Oder als BG in CSS? Hast Du dies schon versucht?

../../users/images/test.png

Sempervivum · 23. April 2018

Zu deiner Testseite http://kahn.8sf.de/subtabs-test.html

Dein 4. vertikaler Tab funktioniert nicht, weil Du ihn nicht initialisiert hast. Ergänze das Javascript auf diese Weise und er funktioniert:

Code

    <script>
        $(document).ready(function() {
        //Horizontal Tab
        $('#parentHorizontalTab').easyResponsiveTabs({
            type: 'horizontal', //Types: default, vertical, accordion
            width: 'auto', //auto or any width like 600px
            fit: true, // 100% fit in a container
            tabidentify: 'hor_1', // The tab groups identifier
            activate: function(event) { // Callback function if tab is switched
                var $tab = $(this);
                var $info = $('#nested-tabInfo');
                var $name = $('span', $info);
                $name.text($tab.text());
                $info.show();
            }
        });

        // Child Tab
        $('#ChildVerticalTab_1').easyResponsiveTabs({
            type: 'vertical',
            width: 'auto',
            fit: true,
            tabidentify: 'ver_1', // The tab groups identifier
            activetab_bg: '#fff', // background color for active tabs in this group
            inactive_bg: '#F5F5F5', // background color for inactive tabs in this group
            active_border_color: '#c1c1c1', // border color for active tabs heads in this group
            active_content_border_color: '#5AB1D0' // border color for active tabs contect in this group so that it matches the tab head border
        });

        // Child Tab 4
        $('#ChildVerticalTab_4').easyResponsiveTabs({
            type: 'vertical',
            width: 'auto',
            fit: true,
            tabidentify: 'ver_1', // The tab groups identifier
            activetab_bg: '#fff', // background color for active tabs in this group
            inactive_bg: '#F5F5F5', // background color for inactive tabs in this group
            active_border_color: '#c1c1c1', // border color for active tabs heads in this group
            active_content_border_color: '#5AB1D0' // border color for active tabs contect in this group so that it matches the tab head border
        });
    });
    </script>

Alles anzeigen

Damit funktioniert der vierte vertikale Tab auf meiner Testseite. Wahrscheinlich müsste man noch den tab groups identifier anpassen und eindeutig machen.

Sempervivum · 23. April 2018

Für background-color ist rgba möglich, dann ist nur der Hintergrund transparent:

https://jsfiddle.net/Sempervivum/g0ynznfy/2/

(klick auf das Bild)

Beiträge von Sempervivum

Jedem Array-Wert eine eigene Spalte in der CSV geben

Transparenten Hintergrund für eine Schrift erzeugen

Ausrichtung IMG in div Element

Ausrichtung IMG in div Element

Ausrichtung IMG in div Element

Ausrichtung IMG in div Element

div ausblenden

div ausblenden

div ausblenden

div ausblenden

Auflösungsunabhängig platzieren

Auflösungsunabhängig platzieren

Auflösungsunabhängig platzieren

Sweetalert

Sweetalert

Ordnerstruktur zum Bild anzeigen

Sweetalert

Ordnerstruktur zum Bild anzeigen

Wie kann ich bei diesen JS-Tabs Subtabs auch auf die zweiten und dritten Parenttabs bekommen

Transparenten Hintergrund für eine Schrift erzeugen