RalphT: Anordnung einiger Elemente im Grid

SELF-Forum

Anordnung einiger Elemente im Grid

RalphT (Versionen)
– Informationen zu den Bewertungsregeln

Moin,

ich lege mir hier gerade die Karten und komme einfach nicht weiter.

Als Diskussionsgrundlage dient der Anhang.

Zum Problem: Ich habe hier ein Gridmodell. Das letzte Gridelement ist unten und geht über die ganze Seite.

Hier möchte ich, wie dargestellt, etwas weiter links vom Rand ein Foto haben und rechts neben dem Foto, soll die Beschreibung stehen. Dazu soll das Foto umrandet sein und rechts der Text soll die gleiche Größe der Umrandung haben, wie das Foto. Das ist hier im Anhang nicht der Fall.

Ok, die beiden Umrandungen sind hier schon soweit korrekt dargestellt. Sobald ich aber ein weiteres Foto unter dem ersten Foto haben möchte, dann wird das erste Textfeld ganz woanders angezeigt. Weiterhin habe ich keine Kontrolle, ob die Bildelemente nebeneinander oder untereinander angeordnet werden.

Wie bekomme ich das hin, dass ich die Fotos mit deren Beschreibung untereinander darstellen kann?

Ich habe im CSS eigentlich mehr oder weniger ohne Sinn und Verstand einiges ausprobiert.

Anbei noch das Negativbeispiel:

Problembeschreibung

Negativbeispiel.

Antwort verfassen Antwort mit Zitat verfassen Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Anordnung einiger Elemente im Grid

    Matthias Scharwies E-Mail-Adresse des Autors (Versionen)
    – Informationen zu den Bewertungsregeln

    Servus!

    Als Diskussionsgrundlage dient der Anhang.

    Zum Problem: Ich habe hier ein Gridmodell. Das letzte Gridelement ist unten und geht über die ganze Seite.

    ok, also so:

    .fullwidth {
  grid-column: 1 / -1;
}

    Siehe: CSS/Tutorials/Grid/Implizite_und_explizite_Erzeugung#negative_Werte

    Hier möchte ich, wie dargestellt, etwas weiter links vom Rand ein Foto haben und rechts neben dem Foto, soll die Beschreibung stehen. Dazu soll das Foto umrandet sein und rechts der Text soll die gleiche Größe der Umrandung haben, wie das Foto.

    Ich stelle mir jetzt ein solches HTML vor:

    <figure>
  <img src="" alt="">
  <figcaption>Beschreibung</figcaption>
</figure>

    Mit CSS bringst du die beiden Kindelemente in ein Grid (Achtung: ein neues Grid, nicht das Grid in dem das figure drin ist!):

    figure {
  diplay: grid;
 grid-template-columns: 1fr 1fr;
}

figure > img,
figure >figcaption {
  border: thin solid;
}

figure > img {
    margin-left: 2em;
}

figure > figcaption {
    align-self: center;
}

    Damit erzeugst du 2 Spalten. Das Grid ist so hoch wie das Bild. Eigentlich ist die zweite Rasterzelle auch so hoch wie das Bild. Durch align-self: center; wird die Bildunterschrift aber vertikal zentriert. Wenn du das nicht willst, lass' align-self weg oder setze es auf stretch.

    Schau mal hier: Beispiel:CSS-grid-ausrichtung-5.html

    Sobald ich aber ein weiteres Foto unter dem ersten Foto haben möchte, dann wird das erste Textfeld ganz woanders angezeigt. Weiterhin habe ich keine Kontrolle, ob die Bildelemente nebeneinander oder untereinander angeordnet werden.

    Passt, oder?

    Herzliche Grüße

    Matthias Scharwies

    --
    Was ist eine Signatur?
    Antwort verfassen Antwort mit Zitat verfassen Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Anordnung einiger Elemente im Grid

      RalphT
      – Informationen zu den Bewertungsregeln

      Hallo Matthias,

      vielen Dank für die schnelle Antwort.

      Das muss ich mir erst einmal in aller Ruhe ansehen und verstehen. Dazu brauche ich etwas Zeit. Ich werde mich später damit genau auseinandersetzen.

      Antwort verfassen Antwort mit Zitat verfassen Beitrag melden
      –
      Informationen zu den Bewertungsregeln

    2. Anordnung einiger Elemente im Grid

      RalphT (Versionen)
      – Informationen zu den Bewertungsregeln

      Hallo Matthias,

      jetzt habe ich mir das mal eben genauer durchgelesen.

      Ich bin mir jetzt nicht sicher ob das, was ich vor habe, mit "Figcaption" die richtige Wahl ist.

      Ich dachte als Beschreibung eher an so ein Textfeld. Das ich auch mal ggf. mit "a href" versehen kann. Mein Bildbeispiel hatte ich wohl etwas unglücklich erstellt.

      Dieses Beispiel trifft das aber sehr genau. Die beiden Umrandungen sollen gleich groß sein, was hier im Screenshot nicht der Fall ist.

      Ich vermute aber, dass die Vorgehensweise mit einem zweitem Grid aber trotzdem noch zurifft- oder liege ich da falsch?

      Wäre nett, wenn du da nochmal drauf gucken könntest.

      Wunschlayout

      Antwort verfassen Antwort mit Zitat verfassen Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Anordnung einiger Elemente im Grid

        Matthias Scharwies E-Mail-Adresse des Autors (Versionen)
        – Informationen zu den Bewertungsregeln

        Servus!

        Hallo Matthias,

        jetzt habe ich mir das mal eben genauer durchgelesen.

        Ich bin mir jetzt nicht sicher ob das, was ich vor habe, mit "Figcaption" die richtige Wahl ist.

        Ich dachte als Beschreibung eher an so ein Textfeld. Das ich auch mal ggf. mit "a href" versehen kann.

        Genau dafür ist figure / figcaption da! Inhalt der figcaption ist Text, durchaus auch mit einem Link zu weiterführenden Informationen!

        Mein Bildbeispiel hatte ich wohl etwas unglücklich erstellt.

        Dieses Beispiel trifft das aber sehr genau. Die beiden Umrandungen sollen gleich groß sein, was hier im Screenshot nicht der Fall ist.

        Ich vermute aber, dass die Vorgehensweise mit einem zweitem Grid aber trotzdem noch zurifft- oder liege ich da falsch?

        Wäre nett, wenn du da nochmal drauf gucken könntest.

        Wunschlayout

        Ja, nimm einfach align-self raus oder ändere den Wert auf stretch!

        Dann würde ich aber evtl. doch die border rechts weglassen - oder soll das die (gedachte) Rückseite des Bildes sein?

        Herzliche Grüße

        Matthias Scharwies

        --
        Was ist eine Signatur?
        Antwort verfassen Antwort mit Zitat verfassen Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Anordnung einiger Elemente im Grid

          RalphT
          – Informationen zu den Bewertungsregeln

          Moin,

          heute hatte ich etwas mehr Zeit, mich mit deinem Vorschlag zu befassen.

          Soweit funktioniert es. Siehe Anhang 1. Ich wollte auch für den Text die Umrandung haben. Also quasi die Rückseite vom Bild.

          Nun habe ich leider noch 2 Probleme damit.

          Wenn ich die Auflösung verändere, dann wird der Abstand zwischen den Elementen Bild und Beschreibung größer oder kleiner. Siehe Anlage 2.

          Ich dachte erst, ich bekomme das in den Griff, wenn ich statt dem Grid mit nur einer Zeile und einer Spalte, in ein Grid mit einer Zeile 1fr, 2fr, 1fr nehme. Das habe ich dann in die Mitte (2fr) reinkopiert. Aber das funktioniert so nicht. Gibt es da noch eine Möglichkeit, dass das Element Bild und daneben die Beschreibung immer den gleichen Abstand haben?

          Ich hatte das ja in einer neuen, leeren html-Datei eingebaut. Jetzt sollte dieses Konstrukt in die richtige Datei eingebaut werden. Dabei habe ich festgestellt, dass ich dort schon im CSS figure konfiguriert hatte. Jetzt kollidieren dabei einige Werte. Gibt es hierfür noch eine andere Möglichkeit?

          Ergebnis 1

          Ergebnis 2

          Antwort verfassen Antwort mit Zitat verfassen Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Anordnung einiger Elemente im Grid

            MrMurphy
            – Informationen zu den Bewertungsregeln

            Wenn ich die Auflösung verändere, dann wird der Abstand zwischen den Elementen Bild und Beschreibung größer oder kleiner.

            Für Abstände, Rahmen, schmale Container, ..., die sich nicht mit der Fenstergröße oder dem Zoom-Faktor ändern sollen benutze ich starre oder relativ starre Einheiten wie px oder rem.

            Gibt es hierfür noch eine andere Möglichkeit?

            Ja, du verwendest Klassen (class="").

            Zu deinem Layout: Linien und erst recht Rahmen trennen Inhalte und erschweren das Aufnehmen der Informationen. Durch die Rahmen wird bei deiner Seite das Bild von seiner zugehörigen Information getrennt.

            Ich biete dir mal ein Layout mittels CSS-Grid an, wie ich so ein Layout erstellen würde. Die Seitenbreite wird ausgenutzt und das Layout ist sehr flexibel. Es passt sich "jeder" Browserfensterbreite sehr flexibel an. Folgend der komplette Quelltext der Seite. Er enthält auch einige nicht für das Layout notwendige CSS-Angaben, da ich mir eine Datei erstellt habe, die ich für Tests immer als Grundlage verwende, das sollte dich aber nicht stören.

            
<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Cards</title>
   <meta name="description" content="Platzhalter - Ein kurze Beschreibung des Inhalts in Satzform">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <!-- <link href="../css/zentrale.css" rel="stylesheet"> -->

   <style>

   /* Überschriften - font-family: 'Roboto Slab', Serif; */
   @import url(https://fonts.googleapis.com/css?family=Roboto+Slab);

   /* Fließtext - font-family: 'Roboto', Sans-Serif"; */
   @import url(https://fonts.googleapis.com/css?family=Roboto);

   /* Zahlen* - font-family: 'Merriweather'; */
   @import url(https://fonts.googleapis.com/css?family=Merriweather);

   /* Basisangaben */
   @media all {
      * {
         min-width: 1px;
      }
      html {
      }
      body {
         padding: 1rem 1rem 2rem 1rem;
         margin: 0rem auto 0rem auto;
      }
   }

   /* Schriften */
   @media all {
      html {
         font-family: sans-serif;
         font-size: 120%;
         line-height: 1.3;
      }
      h1 {
         font-family: 'Roboto Slab', serif;
         font-size: 1.2rem;
         letter-spacing: 0.1rem;
         margin: 0.5rem 0rem 0.5rem 0rem;
      }
      h2, h3, h4, h5, h6 {
         font-family: 'Roboto Slab', serif;
         font-size: 1rem;
         margin: 0.5rem 0rem 0.5rem 0rem;
      }
      p, li, dl, dt, address {
         font-family: Roboto, sans-serif;
         font-size: 1rem;
         font-style: normal;
         margin: 0.5rem 0rem 0.5rem 0rem;
      }
      a {
         /* darkblue */
         color: hsla(240, 100%, 27%, 1);
         text-decoration: none;
         outline: none;
         margin: 0rem 0rem 0rem 0rem;
      }
      figcaption {
         font-family: Roboto, sans-serif;
         font-size: 0.9rem;
         margin: 0rem 0rem 0rem 0rem;
      }
      .zahl {
         font-family: "Merriweather";
         font-size: 1rem;
      }
   }

   /* Grafiken */
   @media all {
      figure {
         text-align: center;
         min-width: 1px;
         max-width: 100%;
         min-height: 1px;
         margin: 0rem;
         display: inline-block;
      }
      img {
         min-width: 1px;
         display: block;
         max-width: 100%;
         border: 0px;
      }
      figcaption {
         text-align: left;
         display: inline-block;
      }
   }

   /* .cards (Container Query)*/
   @media all {
      .cards {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
         gap: 1rem;
      }
      .cards>* {
         padding: 0.5rem;
         border: 1px solid grey;
         border-radius: 0.5rem;
         container-type: inline-size;
      }
      @container (min-width: 500px) {
         .cards>*>* {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1rem;
         }
      }
      .cards figure {
         display: block;
      }
      .cards img {
         display: block;
         max-height: 300px;
         border-radius: 0.5rem;
         margin: 0rem auto 0rem auto;
      }
   }

   </style>
</head>
<body>
   <header>
      <h1>Cardlayout</h1>
   </header>
   <main>

      <section class="cards">

         <article>
            <div>
               <figure>
                  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ed/Sigourney_Weaver_by_Gage_Skidmore.jpg/668px-Sigourney_Weaver_by_Gage_Skidmore.jpg" alt="Sigourney Weaver">
               </figure>
               <section>
                  <p>Sigourney Weaver (* 8. Oktober 1949 als Susan Alexandra Weaver in New York) ist eine US-amerikanische Schauspielerin.</p>
               </section>
            </div>
         </article>

         <article>
            <div>
               <figure>
                  <img src="https://upload.wikimedia.org/wikipedia/commons/4/45/Reese_Witherspoon_2005.jpg" alt="Laura Jeanne Reese Witherspoon">
               </figure>
               <section>
                  <p>Laura Jeanne Reese Witherspoon (* 22. März 1976 in New Orleans, Louisiana) ist eine US-amerikanische Schauspielerin, Filmproduzentin und Oscar-Preisträgerin.</p>
               </section>
            </div>
         </article>

         <article>
            <div>
               <figure>
                  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/76/Lily_Allen_%40_INmusic_festival.jpg/597px-Lily_Allen_%40_INmusic_festival.jpg" alt="Lily Allen">
               </figure>
               <section>
                  <p>Lily Allen, bürgerlich Lily Rose Beatrice Cooper (* 2. Mai 1985 in Hammersmith, London) ist eine britische Popsängerin, Songwriterin, Showmasterin und Schauspielerin.</p>
               </section>
            </div>
         </article>

         <article>
            <div>
               <figure>
                  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/df/Pressekonferenz_K%C3%B6lner_Sportjahr_2019-3059.jpg/900px-Pressekonferenz_K%C3%B6lner_Sportjahr_2019-3059.jpg" alt="Renate Lingor">
               </figure>
               <section>
                  <p>Renate „Idgie“ Lingor (* 11. Oktober 1975 in Karlsruhe) ist eine ehemalige deutsche Fußballspielerin.</p>
               </section>
            </div>
         </article>

         <article>
            <div>
               <figure>
                  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Zoe_Bell_2019_by_Glenn_Francis.jpg/600px-Zoe_Bell_2019_by_Glenn_Francis.jpg" alt="Zoë Bell">
               </figure>
               <section>
                  <p>Zoë Bell (* 17. November 1978 auf Waiheke Island, Auckland Region) ist eine neuseeländische Stuntfrau und Schauspielerin.</p>
               </section>
            </div>
         </article>

         <article>
            <div>
               <figure>
                  <img src="https://upload.wikimedia.org/wikipedia/commons/a/ae/Bonnie_Tyler.jpg" alt="Bonnie Tyler">
               </figure>
               <section>
                  <p>Bonnie Tyler MBE (* 8. Juni 1951 als Gaynor Hopkins in Skewen, Neath) ist eine britische Pop- und Rocksängerin.</p>
               </section>
            </div>
         </article>

         <article>
            <div>
               <figure>
                  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c1/2019_BR_Filmbrunch_-_Jutta_Speidel_-_by_2eight_-_DSC6737.jpg/599px-2019_BR_Filmbrunch_-_Jutta_Speidel_-_by_2eight_-_DSC6737.jpg" alt="Jutta Speidel">
               </figure>
               <section>
                  <p>Jutta Speidel (* 26. März 1954 in München) ist eine deutsche Schauspielerin, Autorin, Hörbuch- sowie Hörspielsprecherin und Synchronsprecherin.</p>
               </section>
            </div>
         </article>

      </section>

   </main>
   <footer>
      <p>Originaldiskussion: <a href="https://forum.selfhtml.org/self/2024/oct/26/anordnung-einiger-elemente-im-grid/1817291#m1817291">https://forum.selfhtml.org/</a></p>
   </footer>
</body>
</html>
            Antwort verfassen Antwort mit Zitat verfassen Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. Anordnung einiger Elemente im Grid

              Matthias Scharwies E-Mail-Adresse des Autors (Versionen)
              – Informationen zu den Bewertungsregeln

              Servus!

              Wenn ich die Auflösung verändere, dann wird der Abstand zwischen den Elementen Bild und Beschreibung größer oder kleiner.

              Für Abstände, Rahmen, schmale Container, ..., die sich nicht mit der Fenstergröße oder dem Zoom-Faktor ändern sollen benutze ich starre oder relativ starre Einheiten wie px oder rem.

              Schau mal hier: Beispiel:CSS-grid-ausrichtung-5.html [1]

              Im Beispiel beträgt der Abstand immer 2em, egal ob oben rechts oder in den .fullwidth-Zeilen unten.

              Gibt es hierfür noch eine andere Möglichkeit?

              Ja, du verwendest Klassen (class="").

              Das Beispiel enthält auch Klassen:

              .gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: .5em;
	border: thin dotted red;
}

.gallery figure {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2em;
	margin: 0;     /* sonst großer Rand wg. Default-Stylesheet */
}

.fullwidth {
	grid-column: 1 / -1;
	border: thin dotted pink;
}

.gallery figure > img,
.gallery figure >figcaption {
	border: thin solid;
}

.gallery figure > figcaption {
	align-self: center;                  	/* oder stretch */

              Wir können anhand Deiner Screenshots nicht nachvollziehen, warum das bei dir anders ist.

              @Mr.Murphy

              Ich biete dir mal ein Layout mittels CSS-Grid an, wie ich so ein Layout erstellen würde.

              
         <article>
            <div>
               <figure>
                  <img src="https://upload.wikimedia.org/wikipedia/commons/4/45/Reese_Witherspoon_2005.jpg" alt="Laura Jeanne Reese Witherspoon">
               </figure>
               <section>
                  <p>Laura Jeanne Reese Witherspoon (* 22. März 1976 in New Orleans, Louisiana) ist eine US-amerikanische Schauspielerin, Filmproduzentin und Oscar-Preisträgerin.</p>
               </section>
            </div>
         </article>

              Das ist zu viel HTML für 2-spaltiges Grid; vor allem article und section stoßen mir auf, da sie eine Überschrift benötigen. (HTML/Tutorials/Seitenstrukturierung)

              Herzliche Grüße
              Matthias Scharwies

              --
              Was ist eine Signatur?

              1. Ich hatte das Beispiel Nr5. anstelle eines veralteten Beispiels gesetzt. Nach einigem Nachdenken passt das doch ganz gut in den Artikel:
                CSS/Tutorials/Grid/Ausrichtung_von_Grid-Items. ↩︎

              Antwort verfassen Antwort mit Zitat verfassen Beitrag melden
              –
              Informationen zu den Bewertungsregeln