Text über einem Bild

  • Genau, und wenn genug Inhalt da ist, sollte er nicht am unteren Rand sein, sondern erst nach dem Inhalt und damit nach scrollen zu sehen sein.

    Aber ging eigentlich nur um eine Seite, was auf die beschriebene Weise funktioniert hat.

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

    Vielen, vielen Dank nochmals für deine ganze Hilfe! Wenn ich dir mal helfen kann, auch wenn ich noch lange kein HTML Genie bin, sag mir wie ich helfen kann!

  • 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/we…nvas_colorize_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/we…/jcanvas-drawing-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.

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

  • Wow! Da steckt auf jeden Fall viel Arbeit dahinter!
    Und von deinen Skripten bin ich natürlich noch Meilenweit entfernt.

    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.

    Die Seite www.whatbabyneeds.de/magazin/videos.php hatte ich bisher auch noch nicht responsive gemacht.
    Habe dies jetzt gerade für mein Handy zumindest in den Griff bekommen.

    Allerdings hätte ich noch eine Frage: 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.

    Mit welchem Thema muss ich mich dafür befassen?

  • 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/

  • Das mit dem Flex Box Modell ist mir nun schon öfter über den Weg gelaufen, ich werde mich da mal genauer reinarbeiten!
    Sieht wirklich interessant und auch machbar aus.


    Wow vielen Dank für die Mühe!!! Schau bitte nochmal auf meiner Seite vorbei: http://www.whatbabyneeds.de/magazin/videos.php Ich habe vorerst die Zufallsartikel nach oben mit der kompletten wrapper breite gesetzt, da die Bilder in der Größe besser zu erkennen sind.
    Anschließend habe ich auch schon das responsive Design in Angriff genommen. Wäre nett wenn du mir sagen würdest ob das so in Ordnung ist, für mich als Laien hat das den richtigen Erfolg gebracht. Aber wenn du mir sagst, dass da irgendwas nicht stimm, dann würde ich deine Methode übernehmen.


  • Jetzt habe ich mir die Seite angesehen. Das responsive Verhalten funktioniert schon sehr gut. Ein kleiner Mangel besteht noch darin, dass die Bilder auf einem schmalen Bildschirm verzerrt werden. Ich habe mir die Seite auch auf meinem Samsung S4 angesehen und dort passt ebenfalls die Anordung aber die Verzerrung ist deutlich. Man kann sie beheben, indem man die feste Höhe im CSS löscht, aber dann wird wird leider das ganze Layout zerstört, weil die Bilder kein einheitliches Format haben. Eine Lösung dafür mit CSS kenne ich nicht, Mein Wissen geht dahin, dass man das Seitenverhältnis nur beibehalten kann, wenn man sich an den natürlichen Abmessungen des Bildes orientiert.


    Zwei Lösungen sehe ich:

    1. Die Bilder, die nicht passen, mit PHP auf die richtige Größe bringen.
    2. Die Höhe mit Javascript dynamisch einstellen, so dass das Seitenverhältnis erhalten bleibt.


    In Posting #47 hast Du geschrieben, dass Du die kleinen Bilder gern in einer Reihe nebeneinander haben möchtest. Hast Du das wieder verworfen?

  • Guten Morgen,


    zunächst nochmal tausend Dank für deine ganze Mühe!

    Mit den verzerrten Bildern hast du natürlich recht. Da ich jedoch in php noch nicht so auf der Höhe bin und in Javascript noch weniger kann, würde ich das Problem zunächst auf folgende Art lösen:

    den großen Artikel, gebe ich für das Smartphone ein height: auto, dann ist das Bild schon mal perfekt. Den kleineren Artikeln würde ich sobald ich diese alle in einer Reihe nebeneinander habe zum "wischen", einfach die gleiche höhe geben und ein width: auto, dann sollte das Problem auch gelöst sein, oder ?

  • Zitat

    Den kleineren Artikeln würde ich sobald ich diese alle in einer Reihe nebeneinander habe zum "wischen", einfach die gleiche höhe geben und ein width: auto

    Das ist sicher eine gute Lösung. Sie sind dann in der Horizontalen schön ausgerichtet.