[gelöst] Bild responive machen

Zitat von Emess

Es steht oben und unter über.

Das liegt daran, das man dem Bild eine "Basis" geben muss, auf dessen Grundlage es angepasst wird.

Im bisherigen Code haben wir dafür "min-width: 200px" verwendet.

Jetzt hast du in deinem CSS "max-heigt: 55%", das geht auch.

Allerding ist diese Angabe in der Media-Query mit der Bedingung "max-width: 750px" verknüpft.

Dein S9+ hat horizontal ausgerichtet sicherlich genau wie das S10+ 760px, daher greifen die Angaben im Media-Query hier nicht mehr.

Du kannst jetzt entweder einen angepassteren Wert, der auf beiden Ansichten greift, als "Basis" setzen, oder du kannst auch eine Media-Query speziell für die horizontale Ansicht nutzen...

Btw. schmeiß das "display: flex" aus deinem img-Block, das hat da nichts zu suchen.

Flex & Grid sind sinnlos bei einem einzigen Element ohne Kindelemente.

Und noch eine kleine Ergänzung:

Da du jetzt offensichtlich den Text unter dem Bild haben willst ist es Blödsinn, die <section> weiterhin als "position: absolut" zu belassen und dann mit padding zu arbeiten!

Schmeiß position & padding raus, gib dem <header> "flex-direction: column" und der <section> "order: 1".

Und auch deine <section> braucht kein "display: flex", da h1 & p standardmäßig "display: block" haben und somit automatisch untereinander gesetzt werden. Da ist "display: flex & flex-direction: column" völlig sinnlos.

Und nimm doch endlich die "margin-right: 30rem" weg...

Oh, ich Depp habe grad erst dein Bild gesehen, in dem auch die Abmessungen (658px) zu sehen sind...

Aber egal, ändert nichts an der Begründung.

Zitat

Jetzt hast du in deinem CSS

Soweit ich verstanden habe gilt die Frage nicht dem Quelltext von Emess, sondern deinem Quelltext aus Beitrag #31.

Zitat von MrMurphy

Soweit ich verstanden habe gilt die Frage nicht dem Quelltext von Emess, sondern deinem Quelltext aus Beitrag #31.

Kommt auf's selbe hinaus.

In meinem Beispiel verwende ich sogar nur "max-width: 700px" im MQ-Block

Ich war ein paar Stunden weg und die Diskussion ist weiter gegangen, aber will nicht versäumen, die Frage von AndreasB in #35zu beantworten:

Zitat von AndreasB

Kannst du erklären, wieso dieser Weg "verfehlt" ist?

Gern. Wie der Name schon sagt, ist Grid dafür entwickelt worden, ein Gitter zu produzieren. Dieses erstreckt sich in zwei Dimensionen, horizontal und vertikal. Haben wir nur zwei Container neben einander, fehlt die zweite Dimension und die Anwendung eines Grid macht keinen Sinn. Hier ist dann Flex besser geeignet, weil sich dieses auf eine eindimensionale Anordnung beschränkt. Und mit flex:1 für beide Flexitems kann man problemlos die selbe Breite einstellen. Damit habe ich noch nie irgend welche Probleme gehabt.

Übrigens, ich vergaß zu erwähnen: Bei einem Posting wie #30 mit dem umfangreichen HTML und CSS ohne Erklärungen oder Kommentare frage ich mich ebenfalls, wo die Mitglieder sind, die sonst leidenschaftlich das Posten von fertigem Code beanstanden.

Zitat von Sempervivum

frage ich mich ebenfalls, wo die Mitglieder sind, die sonst leidenschaftlich das Posten von fertigem Code beanstanden.

Schreibt derjenige, der in anderen Foren regelmäßig fertige Codes postet oder sogar per PN hilft.

Können wir das Thema mit diesem fertigen-Code-Bullshit jetzt mal wieder runterschrauben?

Wenn jemand eine Frage stellt und man dann mit einem vollständigen Code antwortet, finde ich es ja noch nachvollziehbar darüber zu meckern.

Wenn jemand aber eine Frage stellt, Code liefert und man dann seinen Code umschreibt und ihm somit mitteilt, was man persönlich besser machen würde, dann ist das Gemecker finde ich übertrieben.

Das meine ich aber natürlich nur bei Leuten, die wie Emess offensichtlich schauen & experimentieren, nicht bei Leuten die ohne eigenes Zutun eine Fertiglösung erhoffen.

Das nav-Element ist nur für Navigationsblöcke gedacht einschließlich (falls sinnvoll) passenden Überschriften und / oder verlinkten Bildern.

Das header-Element hat genau wie nicht zur Navigation gehörende Bilder nichts im nav-Element verloren.

Umgekehrt darf das header-Element ein nav-Element enthalten.

In der Regel werden header- und nav-Elemente getrennt, da die Seite so flexibler an unterschiedliche Bildschirme und andere Ausgabegeräte angepasst werden kann. Wobei es keine Rolle spielt, ob zu erst das header-Element oder das nav-Element im Quelltext steht.

Zitat von Emess

Das mit der Navigation konnte ich mit z-Index lösen. Aber das bild will einfach nicht so wie ich will

Bild bekomme ich nicht mittig und im Querformat nicht wirklich responsive.

https://my2.emess62.de/

Bei deiner aktuellen Seite liegt es daran, das dein <header> 100vh hat, also auch die Fläche der <nav>, die ja absolut positioniert ist, mit einbezieht.

Machst du die Höhe wieder auf "height: calc(100vh - 80px)" mit entsprechendem Abstand von der <nav> und gibst dem Bild noch ein "max-height: 100%" oder so, dann klappt das...

Irgendwie ist dein Code jetzt aber (vermutlich durchs Experimentieren) ordentlich durcheinander.

Dein <main>, der den eigentlichen Seiteninhalt beinhalten sollte, umschließt jetzt nur deinen <header>. Der eigentliche Content geht erst nach </main> los...

Ich glaube, du solltest lieber kurz mal durch deinen Code und deine Seite gehen und mal genauer definieren, was du eigentlich genau möchtest.

Ich schau es mir morgen mal gründlicher an.

Na "position: absolute" beim Bild ist Quatsch und bringt dich entsprechend noch mehr aus der Struktur...

Ich habe deinen Code jetzt mal folgendermaßen angepasst:

• Viele CSS-Einstellungen zusammengefasst. Z.B. ist es Blödsinn, immer die gleiche Schriftart bei allen Elementen zu setzen, das gehört global!
  Genauso deine ganzen ContentX-Abschnitte kann man wunderbar zusammenfassen.
• Die <nav> ist jetzt "position: relative". Es ist besser nur die <ul> in der Smartphone-Ansicht darauf zu setzen.
• Ein einzelner Wert bei "margin" oder "padding" wirkt auf alle Seiten, das brauchst du absolut nicht und verzerrt deine <nav> unten teilweise wegen "padding: 30px" und "border: 4px...".

Um jetzt mal auf gleicher Basis zusammen weiter zu machen, hier die angepasste CSS:

*
{
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
}

html, body
{
    height: 100%;  
    background-color: blue;
}

#brand
{
    margin: 0 1rem;
    font-size: 1.2em;
    font-weight: bold;
    color: aqua;
}

#menu
{
    height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgb(56,54,54);
    color: white;
}

#menu>ul
{
    display: flex;
    background-color: rgb(56,54,54);
    height: 100%;
}

#menu>ul>li
{
    padding: 0 1rem;
    list-style: none;
    border-bottom: 4px solid transparent;
    display: flex;
    align-items: center;
}

#menu>ul>li:hover
{
    border-color: purple;
}

#menu>ul>li>a
{
    text-decoration: none;
    font-size: 1em;
    font-family: sans-serif;
    color: white;
}

#menu>button
{
    display: none;
    justify-content: space-between;
    flex-direction: column;
    width: 30px;
    height: 23px;
    background: none;
    border: none;
    cursor: pointer;
}

#menu>button>span
{
    height: 4px;
    width: 100%;
    background-color: white;
    border-radius: 2px;
}

main>header
{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: calc(100vh - 80px);
    background-color: black;
}
main>header>section
{
    flex-grow: 1;
    font-weight: bold;
    text-align: center;
}
main>header>section>h1
{
   color: darkkhaki;
}

main>header>section>p
{
   font-size: 2rem;
   color: bisque;
}

main>header>img
{
    min-width: 200px;
    max-height: 100%;
    margin-left: 1rem;
}

main>section
{
    height: 100vh;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
main>section>h1
{
    margin: 2rem 0;
}

#about
{
    background-color:white;
}

#about>p
{
    font-weight: bold ;
    color: rgba(75, 72, 72, 0.912);
    width: 70%;
}

#content1
{
    background-color: chocolate;
}
#content2
{
    background-color: rgb(183, 248, 129);
}
#content3
{
    background-color: rgb(191, 160, 244);
}

footer
{
    display: flex;
    height: 90px;
    justify-content: center;
    align-items: center;
    background-color: rgb(56, 54, 54);
    color:aliceblue;
}

@media only screen and (max-width: 700px)
{
    #brand
    {
        margin-left: 1rem;
    }
    #menu>ul
    {
        position: absolute;
        display: none;
        flex-direction: column;
        width: 100%;
        height: auto;
        align-items: center;
        top: 80px;
    }
    #menu>ul.active
    {
        display: flex;
    }
    #menu>ul>li
    {
        padding: 1rem 0;
    }
    #menu>button
    {
        display: flex;
        margin-right: 1rem;
    }

    main>header
    {
        flex-direction: column;
        justify-content: space-around;
    }
    main>header>section
    {
        flex-grow: 0;
    }
    main>header>img
    {
        max-width: 90%;
        min-height: 40%;
        margin: 0;
    }
}

Wo genau soll der <header>-Text hin? Unterhalb, oberhalb, oder auf dem Bild?

Zitat von Emess

Da wird man schon mit margin bzw padding arbeiten müssen (Denke ich mir so)

Gib der <section> dazu einfach "order: 1"

Mit dem "justify-content" und "align-items" des umgebenden section-Elements zentrierst du das div#about horizontal und vertikal..

Das div#about nimmt durch seinen Inhalt die gesamte Breite des umgebenden section-Elements ein, wird aber nur so hoch wie sein Inhalt. Das ist das ganz normale Verhalten.

Du musst also dem div#about entweder mehr Inhalt oder eine vorgegebene Höhe mit auf seinen Weg geben.