Ergebnis 1 bis 4 von 4

Thema: Wie kann man 3 nebeneinander liegende Fotos mit Text rekursiv gestalten

  1. #1
    HTML Newbie
    Registriert seit
    04.04.2018
    Beiträge
    7
    Danke
    5
    Bekam 0 mal "Danke" in 0 Postings

    Standard Wie kann man 3 nebeneinander liegende Fotos mit Text rekursiv gestalten

    Hallo liebe Experten,

    als absoluter Laie und immer gerne dazu Lernender wollt ich fragen, ob mir jemand hierbei helfen könnte:

    Ich habe 9 Fotos mit Text darunter.
    Diese Fotos werden auf einem PC-Monitor jeweils Dreierweise nebeneinander angezeigt.
    Wenn sich allerdings jemand die Fotos auf einem Handy anschaut sind dort natürlich Fotos und Text komplett durcheinander.
    Früher konnte ich das in HTML mittels einer Tabelle lösen. Ich denke aber, dass es eine einfacher Möglichkeit hierfür gibt.

    Die Life-Ansicht ist hier zu finden:
    https://www.mcv-moemlingen.de/2018-2...re-tollitaeten

    Dies ist mein Quelltext, der durch das manuelle Ausrichten leider im Joomla! so erzeugt wurde:

    HTML-Code:
    <p>&nbsp;</p><p style="text-align: center;"><span style="font-family: arial, helvetica, sans-serif; font-size: 36pt; color: #ff0000;">Tollitäten 2018 / 2019</span></p><p>&nbsp;</p><p style="text-align: center;"><img style="margin: 5px auto; display: block;" src="images/mcv2019/Tollitaeten_2018-2019/Tollitaeten_2018-19_800x544.JPG" alt="Tollitaeten 2018 19 800x544" /></p><p style="text-align: center;">&nbsp;v.l.n.r.:&nbsp;</p><p style="text-align: center;">oben: <strong>Heribert I., Horst III., Heiko I., Helmut III. Uwe I., Martin I., Bernd I., Matz I., Robbi I.</strong></p><p style="text-align: center;">unten: <strong>Petra I., Christina I., Christine I., Petra III., Sandra I., Petra II., Sabine I., Belinda I.&nbsp;</strong></p><p style="text-align: center;">auf dem Foto fehlt: <strong>Gisela I.&nbsp;</strong></p><p>&nbsp;</p><p style="text-align: center;"><img src="images/mcv2019/Tollitaeten_2018-2019/2008-2009_Heribert_Petra_267x400.JPG" alt="2008 2009 Heribert Petra 267x400" />&nbsp;<img src="images/mcv2019/Tollitaeten_2018-2019/2010_Uwe_Gisela_267x400.JPG" alt="2010 Uwe Gisela 267x400" />&nbsp;<img src="images/mcv2019/Tollitaeten_2018-2019/2012_Heiko_Tine_267x400.JPG" alt="2012 Heiko Tine 267x400" /></p><p style="text-align: center;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;2008 / 2009&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;2010&nbsp; (Archivfoto)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;2012&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</p><p style="text-align: center;">&nbsp; &nbsp; &nbsp;<strong>Heribert I. und Petra I.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Uwe I. und Gisela I.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Heiko I. und Christine I.&nbsp;</strong></p><p style="text-align: center;">&nbsp; &nbsp; &nbsp; (Heribert Dietrich und Petra Hartmann)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;(Ehepaar Uwe und Gisela Büchler)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;(Ehepaar Heiko und Christine Lazarus)&nbsp;</p><p style="text-align: center;">&nbsp;</p><p style="text-align: center;">&nbsp;</p><p style="text-align: center;"><img src="images/mcv2019/Tollitaeten_2018-2019/2013_Bernd-Petra_267x400.JPG" alt="2013 Bernd Petra 267x400" />&nbsp;<img src="images/mcv2019/Tollitaeten_2018-2019/2014_Martin_Sandra_267x400.JPG" alt="2014 Martin Sandra 267x400" />&nbsp;<img src="images/mcv2019/Tollitaeten_2018-2019/2015_Belinda_Robbi.JPG" alt="2015 Belinda Robbi" /></p><p style="text-align: center;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;2013&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 2014&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;2015&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;</p><p style="text-align: center;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;<strong>Bernd I. und Petra II.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Martin I. und Sandra I.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Robbi I. und Belinda I.&nbsp;</strong>&nbsp;</p><p style="text-align: center;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; (Ehepaar Bernd und Petra Giegerich)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;(Ehepaar Martin und Sandra Faust)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;(Ehepaar Robert und Belinda Hartmann)&nbsp;</p><p style="text-align: center;">&nbsp;</p><p style="text-align: center;">&nbsp;</p><p style="text-align: center;"><img src="images/mcv2019/Tollitaeten_2018-2019/2016_Matz_Sabine_267x400.JPG" alt="2016 Matz Sabine 267x400" />&nbsp;<img src="images/mcv2019/Tollitaeten_2018-2019/2017_Horst_Christina_267x400.JPG" alt="2017 Horst Christina 267x400" />&nbsp;<img src="images/mcv2019/Tollitaeten_2018-2019/2018_Helmut_Petra_267x400.JPG" alt="2018 Helmut Petra 267x400" /></p><p style="text-align: center;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;2016&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 2017&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;2018&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;</p><p style="text-align: center;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;<strong>Matz I. und&nbsp; Sabine I.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Horst III. und Christina I.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Helmut III. und Petra III.&nbsp;</strong>&nbsp;&nbsp;</p><p style="text-align: center;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; (Matthias Ritter und Sabine Lieb)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;(Ehepaar Horst und Christina Feyrer)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;(Ehepaar Helmut und Petra Gollas)&nbsp;</p><p style="text-align: center;">&nbsp;</p><p style="text-align: center;">&nbsp;</p>

    Es wäre nett, wenn mir jemand weiterhelfen könnte.

    Viele Grüße
    Kurt

  2. #2
    Samurai
    Registriert seit
    23.01.2018
    Ort
    Minden
    Beiträge
    209
    Danke
    0
    Bekam 29 mal "Danke" in 29 Postings

    Standard AW: Wie kann man 3 nebeneinander liegende Fotos mit Text rekursiv gestalten

    Schau dir mal flexbox an https://blog.kulturbanause.de/2013/0...odell-von-css/
    und @mediqueries https://blog.kulturbanause.de/2011/0...co-optimieren/

    Damit kann man sowas ganz gut regeln.
    Tabellen layout wahr damals vieleicht gut dafür. Auch heute würde das noch gehen aber macht man eigentlich nicht mehr. Deswegen versuch dein glück mal mit Flexbox und wenn du nicht weiter kommst helfe ich dir
    Geändert von basti1012 (19.11.2018 um 16:49 Uhr)
    Mein soforthilfe Forum und Chat

  3. Folgende User finden die Antwort von basti1012 gut:


  4. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    04.04.2018
    Beiträge
    7
    Danke
    5
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Wie kann man 3 nebeneinander liegende Fotos mit Text rekursiv gestalten

    Ich habe es jetzt mal wie folgt probiert:

    In der css-Datei steht folgendes:

    Code:
    .flex-container {  display: flex;
      justify-content: space-between;
    
    }
    Mein HTML-code sieht wie folgt aus:

    HTML-Code:
    <div class="flex-container">  <div class="flex-item"><p style="text-align: center;"><img src="images/mcv2019/Tollitaeten_2018-2019/2008-2009_Heribert_Petra_267x400.JPG" alt="2008 2009 Heribert Petra 267x400" /></p><p style="text-align: center;"><strong>Heribert I. und Petra I.</strong></p><p style="text-align: center;">(Heribert Dietrich und Petra Hartmann)</p></div>  <div class="flex-item"><p style="text-align: center;"><img src="images/mcv2019/Tollitaeten_2018-2019/2010_Uwe_Gisela_267x400.JPG" alt="2010 Uwe Gisela 267x400" /></p><p style="text-align: center;"><strong>Uwe I. und Gisela I.</strong></p><p style="text-align: center;">(Ehepaar Uwe und Gisela Büchler)</p></div>  <div class="flex-item"><p style="text-align: center;"><img src="images/mcv2019/Tollitaeten_2018-2019/2012_Heiko_Tine_267x400.JPG" alt="2012 Heiko Tine 267x400" /></p><p style="text-align: center;"><strong>Heiko I. und Christine I.</strong></p><p style="text-align: center;">(Ehepaar Heiko und Christine Lazarus)</p></div></div>
    Trotzdem erscheinen die DIVs immer unter anstatt nebeneinander.

    Auch mit dem "float" im css hat sich nichts geändert:

    Code:
    .flex-container {  display: flex;
      justify-content: space-between;
    }
    
    .flex-item {
      float: left;
    
    }
    Wo liegt mein Fehler?


    EDIT: Funktioniert doch, musste nur den Browser Cache löschen!

    VIELEN DANK!
    Geändert von Kurtus (19.11.2018 um 19:40 Uhr)

  5. #4
    Samurai
    Registriert seit
    23.01.2018
    Ort
    Minden
    Beiträge
    209
    Danke
    0
    Bekam 29 mal "Danke" in 29 Postings

    Standard AW: Wie kann man 3 nebeneinander liegende Fotos mit Text rekursiv gestalten

    schön.
    Aber hast du float wieder rausgenommen nach der Cache löschen ? Weil float brauch man bei flexbox eigentlich nicht mehr.

    Ps:
    Dies hier
    Code:
    <p style="text-align: center;>
    Könntest du überall rausnehmen und in der Css den <p> zuordnen ,bzw erstellst du eine Klasse dafür. Weil Inline Styls ist nicht mehr so aktuell
    Mein soforthilfe Forum und Chat

Ähnliche Themen

  1. Nebeneinander liegende Divs
    Von Simuletsplay im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 28.05.2018, 22:38
  2. Text und Tabellen nebeneinander
    Von html_css im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 05.04.2017, 15:59
  3. Bilder und text wie in tabelle nebeneinander
    Von prymano im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 24.01.2008, 13:15
  4. kann keine fotos empfangen
    Von anjuta im Forum Computer - Internet Forum
    Antworten: 3
    Letzter Beitrag: 20.11.2006, 19:04
  5. text mit css gestalten
    Von |o|o im Forum HTML & CSS Forum
    Antworten: 22
    Letzter Beitrag: 11.09.2004, 20:03

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •