Bilder zentrieren

Kurtus · 26. Juni 2018

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:

Code

figure.snip1455 {
  font-family: 'Tahoma', Arial, sans-serif;
  position: relative;
  float: left;
  overflow: hidden;
  margin: 10px 1%;
  min-width: 230px;
  max-width: 315px;
  max-height: 230px;
  width: 100%;
  color: red;
  text-align: left;
   /*color: #ffffff;
  background-color: #07090c;  */
  background-color: #f89406;
  font-size: 16px;
}
figure.snip1455 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
}
figure.snip1455 img {
  max-width: 100%;
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
  backface-visibility: hidden;
}
figure.snip1455 figcaption {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  -webkit-transform: scale(0.5) translate(0%, -50%);
  transform: scale(0.5) translate(0%, -50%);
  -webkit-transform-origin: 50% 0%;
  -ms-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
  z-index: 1;
  opacity: 0;
  padding: 0 30px;
}
figure.snip1455 h3,
figure.snip1455 p {
  line-height: 1.5em;
}
figure.snip1455 h3 {
  margin: 0;
  font-weight: 800;
  text-transform: uppercase;
}
figure.snip1455 p {
  font-size: 0.8em;
  font-weight: 500;
  margin: 0 0 15px;
}
figure.snip1455 .read-more {
  border: 2px solid #ffffff;
  padding: 0.5em 1em;
  font-size: 0.8em;
  text-decoration: none;
  color: #ffffff;
  display: inline-block;
}
figure.snip1455 .read-more:hover {
  background-color: #ffffff;
  color: #000000;
}
figure.snip1455:hover img,
figure.snip1455.hover img {
  -webkit-animation: snip1455 0.45s linear forwards;
  animation: snip1455 0.45s linear forwards;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}
figure.snip1455:hover figcaption,
figure.snip1455.hover figcaption {
  -webkit-transform: scale(1) translate(0, -50%);
  transform: scale(1) translate(0, -50%);
  opacity: 1;
  -webkit-transition-delay: 0.35s;
  transition-delay: 0.35s;
}
@keyframes snip1455 {
  50% {
    -webkit-transform: scale(0.8) translateX(0%);
    transform: scale(0.8) translateX(0%);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: scale(0.8) translateX(150%);
    transform: scale(0.8) translateX(150%);
    opacity: 0.5;
  }
}

Alles anzeigen

Der HTML-Code so:

Code

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

Alles anzeigen

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

 <div class="center">

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

Code

.zentriert {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.zentriert h1 {
    width: 100%;
}

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

<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

eumel1602 · 26. Juni 2018

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

Kurtus · 26. Juni 2018

Sorry, das hatte ich nicht bedacht.

Werde es beim nächsten Mal (das wird es bestimmt geben) beachten...

time4mambo · 26. Juni 2018

Zitat von eumel1602

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

Kurtus · 26. Juni 2018

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:

Indigo66 · 27. Juni 2018

Threadtitel geändert.

Kurtus · 27. Juni 2018

Danke Tom!

anka · 29. Juni 2018

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:

Code

<div  class="row-fluid">
    <div class="zentriert span6">
        <figure class="snip1455">
            .....
        </figure>
    </div>
    <div class="zentriert span6">
        <figure class="snip1455">
            ....
        </figure>
    </div>    
</div>

<div  class="row-fluid">
    <div class="zentriert span6">
        <figure class="snip1455">
            .....
        </figure>
    </div>
    <div class="zentriert span6">
        <figure class="snip1455">
            ....
        </figure>
    </div>    
</div>

Alles anzeigen

Kurtus · 30. Juni 2018

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

.zentriert {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.zentriert h1 {
  width: 100%;
  line-height: 120%;
}

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

Code

<div class="row-fluid">
<div class="zentriert span6">

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

LG

Kurt

time4mambo · 30. Juni 2018

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

Kurtus · 30. Juni 2018

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

time4mambo · 10. Juli 2018

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

Kurtus · 11. Juli 2018

Hallo Axel,

danke für die Erläuterungen.

LG

Kurt

time4mambo · 11. Juli 2018

Das andere hat sich erledigt oder ist das noch offen? (bin leider immer noch en wenig eingeschränkt momentan... )

Kurtus · 11. Juli 2018

Ja, hat sich soweit erledigt, habe in einem CSS/HTML Forum Hilfe dazu erhalten.