[gelöst] Bild responive machen

Zitat von Emess

Habe ich eine falsche vorstellung von @mediaquerry?

Entferne ich das margin-right aus der "body>header>section" passt erst mal die smartphoneansicht aber in der Desktopansicht steht die headline direkt neben dem Bild

Ne du sollst es ja nicht aus body>header>section entfernen, sondern es einfach IN deinem Media-Query-Block überschreiben, damit die 30rem margin nicht für die Smartphone-Ansicht gelten.

Zitat

Gibt es eine Alternative zu margin-right?

1. Korrektes HTML

2. Passendes CSS

Du bist beim CSS leider einseitig auf Flexbox fixiert. CSS ist aber ein Gesamtpaket und Flexbox ist für viele Lösungen halt nur schlecht oder gar nicht geeignet.

Eine Grundregel beim HTML und CSS ist zum Beispiel, den Quelltext minimal zu halten. Also nur HTML-Elemente und CSS-Anweisungen zu verwenden, die notwendig sind.

Schau dir

display: grid;

mal genauer an.

Zitat von MrMurphy

Schau dir

Code

display: grid;

mal genauer an.

Das sehe ich anders.

Ich selbst nutze für ein aktuelles Projekt zum Großteil grid mit flex im Detail, aber hier bei dem simplen Onepager mit keinen wirklichen Elementen & Struktur zum Layouten ist es für mich mit flex gut bedient.

Deine letzten beiden Antworten wirken auf mich wie von Leuten die grid genutzt haben, jetzt bei absolut jeder Seite darauf schwören und im Endeffekt genau das machen, was du weiter oben mit "... leider einseitig auf ... fixiert" kritisierst.

Kann sein, das ich es einfach nur falsch "rausgelesen" habe und du nicht zu dieser Gruppe gehörst, dann nichts für ungut.

Ich würde anhand seiner aktuellen Seite aber bei flex bleiben.

Zitat

Kann sein, das ich es einfach nur falsch "rausgelesen" habe und du nicht zu dieser Gruppe gehörst, dann nichts für ungut.

Du könntest zum Beispiel mal ältere Beiträge von mir lesen. Dann wirst du feststellen, dass ich immer das passende CSS für das jeweilige Problem empfehle und nichts gegen Flexbox habe, wenn es angebracht ist, zum Beispiel

Beitrag

RE: HTML Code Bild+Link+ausrichten

Dazu benötigst du HTML und CSS in aktueller Version. Die beiden Texte werden als Text zusammen mit dem Bild in einen Container in HTML eingegeben und mittels CSS ausgerichtet. Aus dem Bauch raus würde ich die Texte mittels Flexbox (display: flex;) ausrichten, das hängt aber von der gesamten Seite ab, die ich nicht kenne.

Als Einzeiler geht das etwas komplizierter auch, das hat aber mit aktuellem HTML und CSS nichts zu tun.

MrMurphy

27. Februar 2023

Ob Flexbox (display: flex;) oder CSS-Grid (display: grid;) zur Lösung des jeweiligen Problems besser geeignet ist hängt nicht davon ab, aus wie vielen Seiten die Website besteht.

Zitat von MrMurphy

Du könntest zum Beispiel mal ältere Beiträge von mir lesen. Dann wirst du feststellen, dass ich immer das passende CSS für das jeweilige Problem empfehle und nichts gegen Flexbox habe, wenn es angebracht ist...

Ja gut, ich hatte jetzt nicht vor dich zu analysieren.

Ich hatte nur erwähnt, wie es auf mich wirkte und lag falsch, alles gut.

Zitat von MrMurphy

Ob Flexbox (display: flex;) oder CSS-Grid (display: grid;) zur Lösung des jeweiligen Problems besser geeignet ist hängt nicht davon ab, aus wie vielen Seiten die Website besteht.

Habe ich ja auch nicht gesagt.

Mit "bei dem simplen OnePager" bezog ich mich auf den sehr bescheidenen Inhalt der Seite, nicht auf die Seitenzahl!

Das dürfte der rest des Satzes aber auch so hergeben...

Zitat

Jetzt würde mich mehr interessieren ob ich beim bisherigen Projekt margin oder position mit modernen Alternativen ersetzen kann?

Ja, mit CSS-Grid (display: grid;) in Verbindung mit Flexbox (display: flex;).

Zu dem HTML

   <main class="content">
      <header>
         <section>
            <h1>Flexboxprojekt</h1>
            <p>Schaut doch mal rein</p>
         </section>
         <figure>
            <img src="https://my2.emess62.de/img/kasper.png">
         </figure>
      </header>
   </main>

reicht dann grundsätzlich folgendes CSS

   @media only screen and (min-width: 700px) {
      .content header {
         display: grid;
         grid-template-columns: 1fr 1fr;
      }
      .content header section {
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
      }
   }

Dazu dann noch etwas Standard-CSS für die Schrift und um Grafiken responsive zu bekommen.

Der gesamte Quelltext (für die Ausrichtung des Textes neben der Grafik) könnte dann folgendermaßen aussehen. Die Angaben Basisangaben, Schriften und Grafiken sind aus Erfahrung für mich für die gesamte Website sinnvoll:

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

   <style>

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

   /*Schriften*/
   @media all {
      html {
         font-family: sans-serif;
         font-size: 120%;
         line-height: 1.3;
      }
      h1 {
         font-family: serif;
         font-size: 1.2rem;
         letter-spacing: 0.1rem;
         margin: 0.5rem 0rem 0.5rem 0rem;
      }
      p {
         font-family: sans-serif;
         font-size: 1rem;
         font-style: normal;
         margin: 0.5rem 0rem 0.5rem 0rem;
      }
   }

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

   /*.content*/
   @media all {
      .content header h1, p {
         text-align: center;
      }
      .content header figure img {
         max-width: 300px;
         margin: 0 auto 0 auto;
      }
   }
   @media only screen and (min-width: 700px) {
      .content header {
         display: grid;
         grid-template-columns: 1fr 1fr;
      }
      .content header section {
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
      }
   }

   </style>
</head>
<body>
   <main class="content">
      <header>
         <section>
            <h1>Flexboxprojekt</h1>
            <p>Schaut doch mal rein</p>
         </section>
         <figure>
            <img src="https://my2.emess62.de/img/kasper.png">
         </figure>
      </header>
   </main>
</body>
</html>

Zitat von MrMurphy

Ja, mit CSS-Grid (display: grid;) in Verbindung mit Flexbox (display: flex;).

Grid braucht es hier nicht.

Das was du mit Grid in deinem Beispiel machst (beiden Elementen im header die Hälfte der Fläche geben) ist absolut keine Begründung, um Grid ANSTATT Flex zu verwenden!

Das ist mit Flex sehr gut selbst zu lösen.

Zu deinem Code mal etwas meine Meinung:

• <main> ist in den meisten Fällen nur einmal auf der Seite anzutreffen und bedarf keiner Klasse oder ID um im CSS eindeutig angesprochen zu werden.
• <figure> kann man machen, würde ich hier aber weglassen, weil das Bild nicht mitten im eigentlichen Inhaltsfluss steckt sondern im <header> und auch keine ergänzenden Elemente wie eine Bildunterschrift besitzt, die ein <figure> üblicherweise als einzelnes Element mit "unabhängiger" Bedeutung zusammenfasst.
• Ich bevorzuge im CSS zum Ansprechen von Kindelementen immer das größer-als-Zeichen ">" um wirklich auch nur die Elemente anzusprechen, die ich will. Beispiel:
  .content header // Spricht auch alle anderen <header> unterhalb von .content an.
  .content>header // Spricht nur den gewollten <header> an.
• in "min-width: 1px" sehe ich absolut keinen Sinn.
• deine margins mit 4 Angaben gehen auch kompakter mit 2 Angaben.
• dein "margin: 0 auto 0 auto" wäre nicht nötig, hättest du es das Bild nicht in ein <figure> verpackt. "margin ... auto" ist aber auch nicht mehr zeitgemäß...
• 4 Mal "@media all"? Warum nicht in einen Block?

Ich würde dein Beispiel so umsetzen:

<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="utf-8">
        <title>Flexboxprojekt</title>
        <meta name="description" content="Platzhalter - Ein kurze Beschreibung des Inhalts in Satzform">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            body
            {
                margin: 0;
            }
            main>header
            {
                display: flex;
                justify-content: space-between;
                align-items: center;
                height: 100vh;
                background-color: black;
            }
            main>header>section
            {
                flex-grow: 1;
                text-align: center;
                color: aqua;
            }
            main>header>img
            {
                min-width: 200px;
                margin-left: 1rem;
            }
            @media only screen and (max-width: 700px)
            {
                main>header
                {
                    justify-content: center;
                }
                main>header>section
                {
                    z-index: 2;
                }
                main>header>img
                {
                    position: absolute;
                    margin: 0;
                    max-width: 90%;
                }
            }
        </style>
    </head>
    <body>
        <main>
            <header>
                <section>
                    <h1>Flexboxprojekt</h1>
                    <p>Schaut doch mal rein</p>
                </section>
                <img src="https://my2.emess62.de/img/kasper.png">
            </header>
        </main>
    </body>
</html>

Emess hatte den Text ja zuletzt auf dem Bild, daher hab ichs so gemacht...

   <main class="content">
      <header>
         <section>
            <h1>Flexboxprojekt</h1>
            <p>Schaut doch mal rein</p>
         </section>
         <figure>
            <img src="https://my2.emess62.de/img/kasper.png">
         </figure>
      </header>
   </main>

      .content header {
         display: grid;
         grid-template-columns: 1fr 1fr;
      }

So etwas kann man nun wirklich nicht mehr ernst nehmen. Ein Grid, um simpel zwei Container neben einander anzuordnen. Semantik Adé!

Mit der Bildergalerie hast Du ja schon einen richtigen Anwendungsfall für ein Grid erkannt. Da müsste eigentlich offensichtlich sein, dass die Anwendung, die ich in #32 zitiert habe, verfehlt ist.

Natürlich kann es sinnvoll sein, auch Alternativen aufzuzeigen aber diese müssen Sinn haben, damit niemand beim Lernen in eine falsche Richtung geführt wird.

Zitat von Sempervivum

Da müsste eigentlich offensichtlich sein, dass die Anwendung, die ich in #32 zitiert habe, verfehlt ist.

Kannst du erklären, wieso dieser Weg "verfehlt" ist? Wenn du zwei Container nebeneinander setzen möchtest, die die gleiche ausgangsgröße Größe haben sollen, ist das doch der Beste Weg dazu.

Man kann natürlich auch mit flex oder inline-block etc. arbeiten, dann ist das mit der gleichen Größe aber problematischer.

Zitat von AndreasB

Wenn du zwei Container nebeneinander setzen möchtest, die die gleiche ausgangsgröße Größe haben sollen, ist das doch der Beste Weg dazu.

Inwiefern der beste Weg? Gerade auf das Beispiel, dass Grid vorzugsweise vor Flex zeigen soll?

Zitat von AndreasB

Man kann natürlich auch mit flex oder inline-block etc. arbeiten, dann ist das mit der gleichen Größe aber problematischer.

NEIN!

inline-block? Zum setzen einer gleichen Größe zweier Parts?

Schon mal von flex-grow, flex-basis ect... gehört? Wo ist es problematisch?

Zitat von Emess

Wie ich es verstanden habe, wäre in meinem Falle der gesamte Screen mit 2 Container gefüllt.

Der Container gilt nur dort, wo du "display: grid" auch setzt.

Zitat

Dabei ist mir aufgefallen, das bild passt sich den Smartphoneansichten im Querformat nicht an.

Was verstehst du unter "passt sich ... nicht an"?