Beiträge von Sempervivum

Zitat

Ich würde gerne auf dem Handy die vier kleineren Zufallsartikel in einer Reihe haben, aber in der aktuellen Größe.

Sodass man diese von links nach rechts und andersherum wischen kann, ich hoffe das ist verständlich ausgedrückt.

Ich empfehle, dass Du dich über Flexlayout informierst. Ich benutze immer diese Seite:

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

Ausrichtung nebeneinander ist Standard für einen flex-Container, ebenso flex-wrap:nowrap. Damit hättest Du schon alle Artikel in einer Reihe und kannst sie auf dem Handy durch Wischen bewegen.

Es hat mich heraus gefordert, dein Layout responsiv zu machen, ohne dass die Bilder verzerrt werden und dies ist dabei heraus gekommen:

https://jsfiddle.net/Sempervivum/hvo59tyq/11/

Zitat

.. habe soeben gemerkt, dass es auf anderen Geräten, in diesem Fall mein Smartphone, nicht funktioniert wie gedacht..

aber da muss ich dann morgen nochmal ran.

Ja, eine Seite responsiv und mobiltauglich zu machen, ist eine Herausforderung für sich. Ich sehe, Du hast schon die Darstellung abhängig von der Fensterbreite umgeschaltet. Leider werden dann die Bilder vom Seitenverhältnis her verzerrt. Da gibt es sicher noch zu tun.

Meine Homepage:

http://ulrichbangert.de

Wie Du siehst, geht es vor allem um die Präsentation meiner Fotos. Weil das Interesse begrenzt ist, habe ich sie in letzter Zeit nur noch wenig gepflegt und meine Fotos mehr bei Facebook gepostet:

https://www.facebook.com/ulrich.bangert.9

Außerdem kann ich dir zwei kleinere Skripte zeigen, die ich für Forenbesucher gemacht habe:

http://ulrichbangert.de/div/webentwick…ize_roof_5.html

Da kann man Elemente in einem Bild verschieden einfärben ohne für jede Farbe ein eigenes Bild zu brauchen.

http://ulrichbangert.de/div/webentwick…rawing-pad.html

Dies ist ein Zeichenbrett mit HTML5-Canvas. Wurde auch mal in einem Forum nachgefragt und ist dann im Sande verlaufen.

http://www.nachrichtentisch.de

Dies ist nicht meine Seite aber ich habe den Betreiber beim Skripting unterstützt. Was man in den Feldern sieht, sind Nachrichtenfeeds, die von den Zeitungen zur Verfügung gestellt werden und auf dieser Seite gesammelt angezeigt werden.

Ah, verstehe, Du wolltest, dass der Footer am unteren Rand ist, auch wenn die Seite sehr kurz ist.

Versuche, ob position:fixed für den footer das liefert, was Du dir vorstellst.

Zitat

Ich arbeite weiterhin mit dem Standard Windows Editor.

Dann ist es sehr einfach: Bei "Speichern unter" findest Du links neben dem Button "Speichern" ein Dropdown-Menü für die Zeichenkodierung.

Zitat

Was bedeutet die Datei als UTF 8 speichern?

Das bedeutet, dass Du, wenn Du deine Dateien speicherst, in deinem Editor eine bestimmte Zeichenkodierung, in diesem Fall UTF-8, einstellen musst. Bei mir (Visual Studio) wird ein entspr. Menüpunkt bei "Speichern unter" sichtbar, aber weil ich deinen Editor nicht kenne, kann ich dir dazu keine Hinweise geben. Möglicher Weise ist es auch irgend wo in den Einstellungen versteckt.

Diese Seite sieht doch schon sehr gut, dafür brauchst Du dich doch nicht zu entschuldigen.

Mir fällt auf, dass die Bilder in dem Raster noch nicht zufällig sind. Hast Du noch nicht mehr als vier Artikel?

Dann musst Du die Datei auch als UTF-8 speichern. Auch die Artikel-Datei, weil die Überschrift ja daraus entnommen wird. Leider kann ich dir nicht sagen, wie das bei deinem Editor geht.

Das Ergebnis dieses Threads würde ich gern sehen. Poste doch mal die URl:

Oh, natürlich $currentfile, da habe ich mich ein wenig vertan.

Zitat

Da fehlt dann noch die URL des Artikels, oder bin ich auf dem falschen Weg?

Ah so, Du möchtest auch einen Link anbringen. Bei der Überschrift? Das wäre dann die Variable $file. Ich würde empfehlen, die mit in das Array zu übernehmen, dann steht sie dir zur Verfügung:

$files = glob("verzeichnis/*.php");
$h1img = [];
foreach ($files as $currentfile) {
    $doc = new DOMDocument();
    $doc->loadHTMLFile($currentfile);
    $h1 = $doc->getElementsByTagName('h1')->item(0);
    $headline = $h1->nodeValue;
    $img = $doc->getElementsByTagName('img')->item(0);
    $imgsrc = $img->getAttribute("src");
    $h1img[] = ["h1" => $headline, "img" => $imgsrc, "link" => $file];
}

Ist das wirklich nötig? Sowohl für einen Bildpfad als auch für einen Link kannst Du doch eine relative URL verwenden. Das hat ohnehin Vorteile, weil Du dann problemlos lokal testen und problemlos auf eine andere Domain umziehen kannst.

Zitat

Gibt es zum Beispiel die Möglichkeit, dass der anstatt nur ein File zu durchsuchen, alle FIles eines Ordners zu durchsuchen, und für jedes File ein Array zu erstellen?

Ja, die gibt es: Du kannst dir die Dateien in einem Ordner mit der Funktion glob ermitteln:

$files = glob("verzeichnis/*.php");
$h1img = [];
foreach ($files as $currentfile) {
    $doc = new DOMDocument();
    $doc->loadHTMLFile($currentfile);
    $h1 = $doc->getElementsByTagName('h1')->item(0);
    $headline = $h1->nodeValue;
    $img = $doc->getElementsByTagName('img')->item(0);
    $imgsrc = $img->getAttribute("src");
    $h1img[] = ["h1" => $headline, "img" => $imgsrc];
}
var_dump($h1img);

Du hast dann nur das Problem, dass es weitere Dateien in dem Ordner geben könnte, die nicht zu durchsuchen sind. Dann brauchtest Du ein zusätzliches Kriterium, um die richtigen herauszufiltern, z. B. durch ein Prefix:

$files = glob("verzeichnis/article-*.php");

Ja, so hast Du das Problem, dass die Überschrift drüber liegt. Der Grund dafür, dass meine Version funktioniert, ist das Event-Bubbling:

Überschrift und Bild sind Kindelemente vom header. Hovert man diese, so steigt das Event wie eine Blase in der Hierachie auf und erreicht den header, wo es abgefangen wird.

Betr. Hover: Meinst Du es so?

https://jsfiddle.net/Sempervivum/9b83hsLq/6/

Ich habe mal ausgearbeitet, wie man Überschrift und Titelbild aus dem HTML in einer PHP-Datei auslesen kann:

    $doc = new DOMDocument();
    $doc->loadHTMLFile("testdomtestpage.php");
    $h1 = $doc->getElementsByTagName('h1')->item(0);
    $headline = $h1->nodeValue;
    echo $headline;
    $img = $doc->getElementsByTagName('img')->item(0);
    $imgsrc = $img->getAttribute("src");
    echo $imgsrc;
    $h1img = ["h1" => $headline, "img" => $imgsrc];
    var_dump($h1img);

Voraussetzung: Überschrift und Titelbild müssen jeweils das erste Tag dieser Art im Dokument sein. Mit diesem Code kannst Du leicht das Array mit diesen Infos aktualisieren.

Zitat

Allerdings kenne ich nur die Möglichkeit auf ein BIld zu schreiben - wie es in dem Zufallsgitter nötig ist - wenn das Bild ein background-img ist und kein normal eingefügtes Bild.

Nein, beides ist möglich. Hier:

Mysteriöser Spalt unter IMG in DIV-Box + text vertikal zentrieren

habe ich in Posting #11 und #12 beide Varianten mit ihren Vor- und Nachteilen kurz beschrieben.

Verstehe, also nur eine Variante. Dann versuche mal, deine Seite mit dem PHP aufzubauen.

Zur automatischen Generierung: In welcher Form liegen die Artikel denn vor? Jeder Artikel eine HTML-Seite? Oder auch durch PHP geniert.

1.

Zitat

Wenn ich das allerdings richtig verstehe, dann müsste ich in diesem Fall auch nach jedem geschriebenen Artikel.

Die Überschrift und das Titelbild aus dem Artikel in die PHP Datei manuell einfügen. (Dafür quasi ein Array erstellen)

Wie ich in Post #4 schon schrieb, ist es aller Voraussicht nach möglich, die Überschrift automatisch aus dem Artikel zu lesen und in das Array zu schreiben.

2.

Zitat

ob es möglich ist das man sagt erstelle für jeden geschriebenen Artikel, automatisch ein Array mit den darin enthaltenen Überschriften sowie Titelbildern.

Ja, auch das sollte möglich sein.

Wenn ich das richtig verstehe, sind das aber zwei verschiedene Dinge:

1.: Ein Array mit Überschrift und Titel für jeden Artikel.

2. Für jeden Artikel ein Array mit allen darin enthaltenen Überschriften und Titelbildern.

??

Zitat

Warum ist das denn so?

Dieses CSS bezieht sich auf body und dessen Höhe ist nicht gleich der Fensterhöhe, sondern richtet sich nach dem Inhalt, in diesem Fall der Höhe deines Formulars. Damit body das Fenster ausfüllt, muss man die Höhe auf 100vh setzen (abzüglich padding in diesem Fall).

Zitat

Und das Problem mit dem Padding besteht ebenso noch. Sollte man wenn die %-Angaben nicht greifen px-Angaben nehmen ?

Meinst Du damit, dass Du das Formular weiter nach unten verschieben möchtest? Dann funktioniert dieses in der Demo von MrMurphy einwandfrei:

.formular {
    margin-top: 30%;
}

Edit: Ich sehe, dass ich es falsch verstanden habe. Du möchtest dem Submit-Button ein padding geben. Auch das funktioniert bei mir einwandfrei:

.formular button {
    align-self: center;
    padding: 5%;
}

Der Button hat jedoch standardmäßig schon ein seitliches Padding, jedenfalls bei mir in Opera:

input[type="button" i], input[type="submit" i], input[type="reset" i], input[type="file" i]::-webkit-file-upload-button, button {
    padding: 1px 6px;
}

Dadurch hat man den Eindruck, dass das seitliche Padding nicht wirkt, weil es sich nur wenig ändert.

Das PHP-Array müsste dann wahrscheinlich etwa so aussehen:

$h1img = [
    ["h1" => "Dies ist die erste Überschrift", "img" => "erstesbild.jpg"],
    ["h1" => "Dies ist die zweite Überschrift", "img" => "zweitesbild.jpg"],
    ["h1" => "Dies ist die dritte Überschrift", "img" => "drittesbild.jpg"]
];
// entspr. ergaenzen

shuffle($h1img);

Durch das shuffle bekommen die Elemente im Array eine zufällige Reihenfolge.

Dann kannst Du die Elemente aus dem Array in deinem HTML einfügen:

<p><?php echo $h1img[0]["h1"]; ?></p>

Ungetestet,