Beiträge von Sempervivum

Zitat

Dazu müsste ich wissen was das $1 zu bedeuten hat ,bzw welche Variable da rein soll ?

Steht alles auch in der Beschreibung:

http://php.net/manual/de/function.preg-replace.php

Also: RTFM

Zitat

input type image

Nie gehöhrt ,wird es wohl nie geben

https://developer.mozilla.org/en-US/docs/Web…ent/input/image

Wenn Du style-Tags einfügen kannst, solltest Du auch script-Tags verwenden können.

Lade die Dateien doch mal herunter und auf deinen Webspace hoch. Und dann versuche, sie so einzubinden, wie es auf der Seite beschrieben ist.

D. h. das Javascript, das CSS und das Einbinden von jQuery und dem Karussell-Skript auf deiner Seite einfügen.

Soich ein Karussell habe ich selber:

http://ulrichbangert.de

Es handelt sich um Coding-Jacks 3D-Carousel:

https://codecanyon.net/item/codingjacks-3d-carousel/2958101

Kostet ein paar Euro, aber die habe ich ausgegeben, weil ich nichts kostenloses gefunden habe.

Etwas ähnliches gibt es auch hier:

http://paio-co-kr.github.io/carousel-3d/

Wie Du es möchtest, mit Buttons für das Fortschalten. Unterstützt nicht nur Bilder sondern beliebiges HTML, wie Du oben geschrieben hast.

Hast Du denn mit FTP-Zugriff auf deinen Webspace, so dass Du die benötigten Dateien hoch laden könntest.?

Zitat

PS: Wenn ich es richtig verstehe hast du die "Spaltenzusammenfassung" waagerecht gemacht anstatt so wie es bei mir vorher war senkrecht, oder?

Genau, dann ist es leicht, die gleiche Höhe zu erreichen. Das Geheimnis ist wieder einmal das Flex-Layout, damit kann man sehr leicht die gleiche Höhe erreichen, siehe hier:

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

align-items:stretch bewirkt, dass die Container auf gleiche Höhe gebracht werden. Da dies der Default-Wert ist, brauchte ich es nicht anzugeben. Und flex:1 bewirkt, dass die Container von der Breite her jeweils gleich sind.

Wie ich schon schrieb, hatte ich anfangs deinen Ansatz mit den zwei Spalten benutzt, war damit aber nicht zum Ziel gekommen, die Container horizontal auf gleiche Höhe zu bringen. Mit fester Höhe wäre es natürlich kein Problem, aber es soll ja responsiv sein, d. h. sich an die Größe des Browserfensters anpassen.

Zitat

ist jQuery für mich allerdings noch ein Fremdbegriff.

Keine Sorge, jCanvas baut zwar auf jQuery auf, aber um es zu benutzen brauchst Du nicht in jQuery einzusteigen.

@moon7331 Warum ignorierst Du mein Posting #10? Es gibt dir die Lösung für dein Problem, die Elemente auf gleiche Höhe auszurichten.

Globale Variablen vermeiden siehe hier, Kapitel 4:

https://molily.de/js/organisation-module.html

Zitat

Die Punktmenge habe ich irgendwie lokal in einer Funktion erstellt

Meine Empfehlung: Die Punktmenge in einem Array speichern.

Zitat

ich habe mein Polygon im Canvas aber wie mache ich weiter? Wie habe ich jetzt jederzeit Zugriff auf das Objekt, um es im Algorithmus Schrittweise zu verarbeiten?

Wenn Du die einfache Canvas-API verwendet hast, hast Du als Ergebnis das Bitmap des Canvas und keinen Zugriff mehr auf die gezeichneten Objekte. Du müsstest sie parallel in Strukturen von Javascript halten. Es ist jedoch dringend zu empfehlen, eine Bibliothek wie jCanvas zu verwenden, die das für dich tut. Die Objekte nennen sich dort Layer.

https://projects.calebevans.me/jcanvas/

Du kannst dann jederzeit auf die Layer zugreifen und ihre Eigenschaften ändern oder auslesen.

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.

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.

Meine Lösung:

<!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>

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?

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

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?

Den Code hast Du vergessen, HTML und CSS.

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.

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

1. Error: Start tag div seen in table.

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

   </tr>↩ <div>↩

2. 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

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.

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

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

<!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>

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

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.