Beiträge von Kurtus

  • 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
    [COLOR=#D7BA7D][FONT=Consolas].flex-container[/FONT][/COLOR][COLOR=#D4D4D4][FONT=Consolas] {[/FONT][/COLOR][COLOR=#D4D4D4][FONT=Consolas]  [COLOR=#9cdcfe]display[/COLOR]: [COLOR=#ce9178]flex[/COLOR];
  [COLOR=#9cdcfe]justify-content[/COLOR]: [COLOR=#ce9178]space-between[/COLOR];
[/FONT][/COLOR]
[COLOR=#D4D4D4][FONT=Consolas]}[/FONT][/COLOR]


    Mein HTML-code sieht wie folgt aus:

    HTML
    <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
    [COLOR=#D7BA7D][FONT=Consolas].flex-container[/FONT][/COLOR][COLOR=#D4D4D4][FONT=Consolas] {[/FONT][/COLOR][COLOR=#D4D4D4][FONT=Consolas]  [COLOR=#9cdcfe]display[/COLOR]: [COLOR=#ce9178]flex[/COLOR];
  [COLOR=#9cdcfe]justify-content[/COLOR]: [COLOR=#ce9178]space-between[/COLOR];
}


[COLOR=#d7ba7d].flex-item[/COLOR] {
  [COLOR=#9cdcfe]float[/COLOR]: [COLOR=#ce9178]left[/COLOR];
[/FONT][/COLOR]
[COLOR=#D4D4D4][FONT=Consolas]}[/FONT][/COLOR]

    Wo liegt mein Fehler?


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

    VIELEN DANK!

  • 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-2019-unsere-tollitaeten

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

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

  • Wappen in per CSS animiertem Bild einfügen

    Hallo Basti,

    vielen Dank,

    jetzt ist es perfekt!

    Danke für den Link zur Erläuterung der CSS-Selektoren. Ich werde mir das mal anschauen und hoffe ich kapiere es auch :?

    Du hast außer diesen "2 kleinen Änderungen" auch noch hier was verändert:

    Code
    margin: 10px 1%;
min-width: 230px;
max-width: 315px;
max-height: 230px;
width: 100%;

    Bei Dir sieht es so aus:

    Code
    margin: 10px 1%;
 width: 285px;
 height: 350px;

    Ist diese feste Größenangabe erforderlich?

    LG
    Kurt

  • Wappen in per CSS animiertem Bild einfügen

    Hi Arne,

    ich habe seine Erklärung verstanden, dass nämlich alle Images die in der klasse figure eingeschlossen sind verschwinden.
    Somit auch mein eingefügtes Bild. Das weiß ich aber erst jetzt nachdem Basti mir das erklärt hat, vorher wusste ich es beim Original Snippet noch nicht, deshalb hatte ich ja gefragt...

    Wie und wo ich noch was ändern muss, damit beim hovern nur der nachfolgene img verschwindet, weiß ich allerdings immer noch nicht.
    Also das Wissen um die Lösung des Problems fehlt mir als Anfänger.

    LG
    Kurt

  • Wappen in per CSS animiertem Bild einfügen

    Hallo Basti,

    vielen lieben Dank, dass Du mir da so toll weiter hilfst. :danke2:

    Deine Erklärung habe ich übrigens gut verstanden, allerdings fehlt mir dazu die Lösung ;)

    Es klappt mit Deiner ersten Version sehr gut und hat auch meine Vorstellungen genau getroffen.
    Allerdings würde ich mir auch gerne Deine zweite Version anschauen, diese funktioniert bei mir leider nicht.
    Der Kermit ist in einem Kreis nur teilweise zu sehen und es passiert nicht beim mouse over....

    Nochmals tausend Dank

    LG
    Kurt

  • Wappen in per CSS animiertem Bild einfügen

    Hallo,

    ich habe mir von der Seite http://littlesnippets.net/ein Schnipsel geholt und möchte ihn bei mir auf der Seite einbinden.

    Der CSS Code sieht wie folgt aus:



    Dies ist der HTML-Code dazu:

    HTML
    <figure class="snip1455">  <img src="images/knr/personen/kermit_.jpg" alt="Günther Frieß" />  <figcaption>    <img src="images/knr/Mitglieder_2018/2018_KNR-MCV_rgb.png" alt="MCV" />    <h3>Günther Frieß</h3>    <p>Präsident<br />Kreisnarrenring Obernburg</p><a href="#" class="read-more">Kontakt</a>  </figcaption></figure><figure class="snip1455"><img src="images/knr/personen/kermit_.jpg" alt="Othmar Morczinczyk" />  <figcaption>    <img src="images/knr/Mitglieder_2018/2018_KNR-NCV_rgb.png" alt="NCV" />    <h3>Othmar Morczinczyk</h3>    <p>Vizepäsident<br />Kreisnarrenring Obernburg</p><a href="#" class="read-more">Kontakt</a>  </figcaption></figure><figure class="snip1455"><img src="images/knr/personen/kermit_.jpg" alt="Werner Schmitt" />  <figcaption>    <img src="images/knr/Mitglieder_2018/2018_KNR-MCV_rgb.png" alt="MCV" />    <h3>Werner Schmitt</h3>    <p>Schatzmeister<br />Kreisnarrenring Obernburg</p><a href="#" class="read-more">Kontakt</a>  </figcaption></figure>  <figure class="snip1455"><img src="images/knr/personen/kermit_.jpg" alt="Werner Schmitt" />  <figcaption>    <img src="images/knr/Mitglieder_2018/2018_KNR-HCV_rgb.png" alt="MCV" />    <h3>Christine Braun</h3>    <p>Schriftführerin<br />Kreisnarrenring Obernburg</p><a href="#" class="read-more">Kontakt</a>  </figcaption></figure>

    Wobei die jeweiligen Zeilen

    HTML
    <img src="images/knr/Mitglieder_2018/2018_KNR-HCV_rgb.png" alt="MCV" />

    von mir zusätzlich eigefügt wurden. Diese Bild sollte beim Mouse over oberhalb des Textes erscheinen.

    Leider sieht man es beim mouse over nicht. Es erscheint kurz wenn man mit der Maus wieder heraus fährt.

    Hier zu sehen: http://kreisnarrenring.de.cs249.fc-testdomain.de/index.php/wir-…/das-praesidium

    Wenn ich im CSS-Code an dieser Stelle:

    Code
    100% {
    -webkit-transform: scale(0.8) translateX(150%);
    transform: scale(0.8) translateX(150%);
    opacity: 0.5;
  }


    den Wert translateX auf 0% ändere, sieht man zwar das eingefügte image (Wappen) aber das Hintergrundfoto (Kermit) fährt nicht mehr nach rechts heraus und bleibt sichtbar.

    Hier zu sehen: http://uebung.mcv-moemlingen.net/wir-ueber-uns/das-praesidium

    Es sollte eigentlich so wie in der Originalversion sein, dass das Kermit-Foto nach rechts heraus fährt und dann das Wappen mit dem Namen und Kontakt-Button erscheint.

    Das Umstellen des Wertes opacity bringt leider auch nichts.


    Da ich in CSS noch nicht die große Ahnung habe, wollte ich fragen, ob mir auch hier jemand helfen könnte?

    Vielen tausend Dank im Voraus!

    Liebe Grüße
    Kurt