Bilder zentrieren

  • Hallo,


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


    Der CSS Code sieht wie folgt aus:



    Der HTML-Code so:



    Hier der Link dazu


    http://uebung.mcv-moemlingen.n…-uns/das-knr-praesidium-2


    Nun versuchte ich die ganze Geschichte zu zentrieren und habe es mit diesem div-Tag probiert, was aber nicht zu Erfolg führte:

    Code
    1. <div class="center">


    Bei einem ähnlichen Snippet hatte mir anka in diesem Beitrag Zentrieren mit diesem CSS Codeschnipsel weitergeholfen:


    Code
    1. .zentriert {
    2. display: flex;
    3. flex-wrap: wrap;
    4. justify-content: center;
    5. }
    6. .zentriert h1 {
    7. width: 100%;
    8. }

    Das funktioniert aber bei diesem Snippet nicht. Es wird zwar zentriert aber die Fotos liegen vertikal übereinander und sind teilweise außerhalb des Content-Bereichs:


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



    Könnte mir da evtl. jemand weiterhelfen?





    Mein zweites Problem ist folgendes, ich habe in dem HTML-Code folgendes eingefügt, was vorher nicht drin war (sieh Quellcode oben)


    Code
    1. <img src="images/knr/Mitglieder_2018/2018_KNR-MCV_rgb.png" alt="MCV" />

    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. Zu sehen wenn man auf einen meiner Links oben geht.


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


    Vielen tausend Dank im Voraus!


    Liebe Grüße


    Kurt


    PS: Das Kermit-Foto ist nur ein Platzhalter :)

  • OT:

    Vielleicht mal die info: Grundsätzlich sollte immer ein aussagekräftiger beitragstitel gewählt werden. So können Supporter besser einschätzen ob sie helfen können. Siehe auch in den Forenregeln. Gruss

    Ich hätte den Thread gar nicht erst aufgemacht, wenn der Titel klar und deutlich formuliert wäre. So hab ich jetzt mal wieder Zeit verplempert... :(

  • Ich werde mich künftig daran halten und entschuldige mich bei jedem der seine Zeit jetzt verplempert hat, weil er den Thread öffnete.

    Leider kann ich den Titel nachträglich nicht mehr ändern.


    Das kommt davon wenn man die Forenregeln vorher nicht genau durchliest.

    Den Fehler mache ich auch bei Gebrauchsanweisungen immer...

    Muss jetzt wohl meinen Avatar ändern: :(

  • Hier solltest du mit dem Grid-System arbeiten (s.hier) und die einzelnen Schnipsel in Reihen anordnen.


    In deinem konkreten Beispiel würde es etwa so aussehen:


  • Hallo anka,


    erneut vielen lieben Dank für Deinen Tipp.


    Ich muss mir das mit dem Grid-System mal genauer durchlesen, da ich noch immer nicht verstehen weshalb es bei dem alten Snippet mit Deinem ursprünglichen CSS Code


    Code
    1. .zentriert {
    2. display: flex;
    3. flex-wrap: wrap;
    4. justify-content: center;
    5. }
    6. .zentriert h1 {
    7. width: 100%;
    8. line-height: 120%;
    9. }


    alleine funktionierte und bei diesem noch diese Änderungen erforderlich sind:


    Code
    1. <div class="row-fluid">
    2. <div class="zentriert span6">


    Ich hoffe ich werde auch mal so fit wie Ihr Experten hier...


    LG

    Kurt

  • So schwer ist das nicht. "span6" ist die entscheidene Angabe beim Grid.


    Erklärbär:

    Das Grid besteht immer aus 12 Spalten., Das ist die Matrix, die über deiner Website liegt.

    Neben wir mal an, du hast eine linke und eine rechte Spalte und die Beiträge in der Mitte. Du kannst/musst nun diese drei Bereiche auf die 12 Spalten Grid aufteilen. Beispielsweise 4 Grid-Spalten links, 3 Grid-Spalten rechts und für die Mitte bleiben dann noch 5 Grid-Spalten übrig. Das sind dann im Grid-System die Angaben:

    span4, span5 und span3

    Immer 12 in der Matrix und dein Layout wird darauf aufgeteilt.


    Die Feinheiten danach machen wir dann später ;)



    Axel

  • Danke für die Erläuterung, das habe ich soweit verstanden.


    Was allerdings der Unterschied zwischen <div class="row"> und <div class="row-fluid"> ist, erschließt sich mir noch nicht.




    Zu meinem zweiten Problem mit dem eingefügten Image, habe ich mal den wert translateX(150%); in translateX(0%); umgewandet.


    Hierdurch sehe ich das eingefügte Image,. aber der Kermit bleibt im Hintergrund sichtbar und verschwindet nicht nach rechts aus dem Bild.

    Auch das Herumspielen mit dem Wert opacity hat keine Erfolg gebracht.


    Original:

    Original snippet


    Geänderter Wert:

    tranlateX(0%) geändert


    LG

    Kurt

  • Erklärbär:


    (Kämpfe gerade mit Umzug und Internet - drum so späte Antwort)


    Es gibt verschiedene responsive Konzepte. Eine besagt, dass immer 100% Breite genommen wird (Fluit). Egal, wie groß der Browser/Monitor ist. Die andere geht von einer festen Maximalbreite aus.

    Grundsätzlich definierst du im row welche Spalten in der Matrix liegen.

    Neue Zeile (Row) neue 12er Matrix. So kannst du im Layout verschiedene Spalten in verschiedenen Zeilen Matrixtechnisch gestalten.


    opacity dient der Transparenz und kann Werte zwischen 0 und 1 annehmen. 0=unsichtbar, 1=volle Sichtbarkeit, 0.5 mittlere Sichtbarkeit.



    Axel