[gelöst] Bild responive machen

Emess · 23. Juli 2023

Wie komme ich ein Bild richtig responive?

"img-fluid!" kenn ich von Bootstrap Wie geht das mit der Flexbox.

Hab natürlich viel Seiten gelesen, mit Igel und vielen weiteren Beispielen.

Die einzige Erkenntnis die ich gewonnen habe ist wohl das Zauberwort "grid" doch wie sieht das in meinem Falle aus?

hier mal der Code und das Problem. Natürlich auch online einzusehen. my2.emess62.de

Code

 <header id="header">
      <img class="kasper" src="/img/kasper.png ">
    </header>


#header {
    height: calc(100vh - 80px);
    padding-top: 80px;
    display: flex;
    align-items: center;
    justify-content:flex-end;
    background-color: black;
  
}

@media(max-width:750px){

#header {
    display: flex;
    align-items: center;
    justify-content:center;
    background-color: black;
    }
.kasper {
    min-width: 200px;
    /* margin-bottom: 300px; */
}
}

Alles anzeigen

respo.png

nextuser · 23. Juli 2023

Änder es mal so ab:

CSS

@media(max-width:750px)
{
    #header
    {
        justify-content: center;
    }
    .kasper
    {
        min-width: 200px;
        max-heigt: 100%; // Oder z.B. 90%, um oben & unten noch einen Abstand zu haben.
    }
}

Alles anzeigen

Btw. wenn du dem header eh schon eine ID gegeben hast, würde ich die Klasse beim Bild weglassen und es mit "#header>img" ansprechen...

Emess · 23. Juli 2023

Super freu mich sehr.

CSS

    <header id="header">
      <img src="/img/kasper.png ">
    </header>
    <main>




#header {
    height: calc(100vh - 80px);
    padding-top: 80px;
    display: flex;
    align-items: center;
    justify-content:flex-end;
    background-color: black;
}
#header>img{
    min-width: 200px;
    max-height: 90%;
}
@media(max-width:750px){

#header {
 /*    display: flex;
    align-items: center; */
    justify-content:center;
   /*  background-color: black; */
    }
#header>img {
    min-width: 200px;
    max-height: 80%;
    /* margin-bottom: 300px; */
}
}

Alles anzeigen

der Tipp mit "#header>img" gefällt mir gut

Mag, bevor ich weitet an den Content #aboutme weitermache, jemand noch mal über meinen Code schauen

und mir sagen was ich besser bzw kürzer machen kann?

nextuser · 24. Juli 2023

Zitat von Emess

Mag, bevor ich weitet an den Content #aboutme weitermache, jemand noch mal über meinen Code schauen...

Meinst du jetzt den Codeschnippsel oben, oder allgemein den Code auf der Seite?

Emess · 24. Juli 2023

Zitat von nextuser

Meinst du jetzt den Codeschnippsel oben, oder allgemein den Code auf der Seite?

Ich meinte den gesamten. Die Seite ist ja online. Oder ist es besser die Sache hier rein zu kopieren?

nextuser · 24. Juli 2023

Würde folgendes empfehlen:

Bischen sinnvoller mit ID's & Klassen umgehen. Eindeutige, in der Seite einmalige Sachen sollten eine ID, wiederkehrende Elemente & Gruppierungen eine Klasse erhalten. Und das aber auch nur, wenn es nötig ist. So würde ich in deinem Code z.B.:
- Bei deiner nav die Klasse "nav" entfernen und stattdessen z.B. die ID "menu" verwenden. Dem Brand / Logo auch eine ID und bei dem Rest im nav nichts. Ansprechen dann z.B. mit "#menu>ul..."
- Deinen "toggle-button" nicht mit einem Link, sondern mit einem "echten" Button realisieren und die Klasse bei den spans entfernen.
- Die ID "header" bei deinem Header entfernen. Da dieser Header der wirkliche Kopf der Seite ist und sich auf oberster Ebene (direktes Kindelement von body) außerhalb des eigentlichen Inhalts (main) befindet, würde ich ihn einfach mit "body>header" ansprechen. Das "größer-als Zeichen" spricht ja, wie du weißt nur DIREKTE Kindelemente an, daher sind andere header-Tags davon nicht betroffen.
- Die 3 div's mit der Id / den Klassen "about / container / about-text" würde ich vollständig entfernen und stattdessen dem entsprechenden section-Tag die ID "about" geben, genauso, wie du es bei "kuli" gemacht hast.
- Dem Footer die Klasse "footer" zu geben, finde ich nicht so prikelnd (genau wei nav & header ). Auch die Seiten-Fußzeile braucht, da direktes Kindelement von body keine ID oder Klasse. Einfach auch hier mit "body>footer" ansprechen.
Javascript binde ich persönlich immer im head-Bereich ein und nutze ggf. DOMContentLoaded.
Bildern sollte man z.B. wegen möglicher Ladeprobleme oder für Leute mit Screenreadern mit dem alt-Attribut immer eine Beschreibung hinzufügen.

Auch beim CSS könnte man manches anpassen. Zum Beispiel deine beiden identischen Media-Query-Blocks zu einem zusammenfassen. Oder ein Element, dessen Elternelement "display:flex" hat, nicht mit "margin:auto" zentrieren. Oder das du das gleiche verschieden ansprichst (".nav ul" und ".list-container ul"), usw...

Dein Javascript würde ich, wie schon früher mal erwähnt auch entsprechend bischen anpassen.

Aber gut, das erstmal so auf die Schnelle...

Emess · 24. Juli 2023

Dann werde ich das mal angehen.

Ich hoffe, bei Problemen oder Nachfragen, weiterhin diese hier vorzutragen und Beistand zu bekommen.

Emess · 29. Juli 2023

Um diesen Tread mal abzuschließen am Ende eine Frage.

so sieht es jetzt mit euerer Hilfe aus. (das eine oder andere Licht ist aufgeleuchtet)

HTML

<!DOCTYPE html>
<html lang="de">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="css/styles.css">
    <script type="text/javascript" src="js/script.js"></script>
    <title>new Beginning</title>
</head>
<body>
    <nav id="menu">
        <div id="brand">Michael Schlegel</div>
        <button type="button">
            <span></span>
            <span></span>
            <span></span>
        </button>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#about">Aboutme</a></li>
            <li><a href="#">Kulinarisches</a></li>
            <li><a href="#">Galerie</a></li>
            <li><a href="#">Datenschutz</a></li>
        </ul>
    </nav>
    <header>
        <img src="img/kasper.png">
    </header>
    <main>
        <section>
            <div id="about">
                        <h2>Übermich</h2>
                        <div class="about-text">
                        <p>Lorem ipsum dolor sit, amet consectetur adipisicing 
                        elit. Doloremque repellendus recusandae doloribus repudiandae minima est
                        nam reiciendis cum eligendi inventore! Eius hic fugit nostrum 
                        laudantium, corporis voluptatum nihil ipsam esse?</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing 
                        elit. Illo, numquam? Aspernatur tempore earum soluta adipisci sit 
                        eveniet, iusto non saepe, optio dolor deserunt quidem molestias sunt 
                        facilis molestiae? Itaque, asperiores.</p>
                    </div>
            </div>
        </section>
        <section id="kuli">Kulinarisches</section>
    </main>
    <footer class="footer">Footer</footer>
</body>
</html>

Alles anzeigen

CSS

*
{
    margin: 0;
    padding: 0;
}

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

#brand
{
    margin: 20px;
    font-size: 1.2em;
    font-weight: bold;
    color: aqua;
    align-self: center;
}

#menu
{
    position: absolute;
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    background-color: rgb(56,54,54);
    color: white;
}

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

#menu>ul>li
{
    padding: 30px;
    list-style: none;
    border-bottom: 4px solid transparent;
}

#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
{
    position: absolute;
    top: 25px;
    right: 25px;
    display: none;
    justify-content: space-between;
    width: 30px;
    height: 23px;
    background: none;
    border: none;
    cursor: pointer;
}

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

body>header
{
    height: calc(100vh - 80px);
    padding-top: 80px;
    display: flex;
    align-items: center;
    justify-content:flex-end;
    background-color: black;
}

body>header>img
{
    min-width: 200px;
    max-height: 90%;
}

#about
{
    height: 100vh;
    background-color:white;
    width: 100%;
}

h2
{
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    text-decoration: underline;
    padding-top: 2rem;
    margin-bottom: 2rem; 
}

.about-text
{
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold ;
    color: rgba(75, 72, 72, 0.912);
    width: 70%;
    margin:auto;
}





#kuli
{
    height: 500px;
    display: flex;
    background-color: chocolate;
}

.footer
{
    height: 80px;
    background-color: rgb(56, 54, 54);
}

@media(max-width: 750px)
{
    #menu
    {
        flex-direction: column;
    }

    #menu>ul
    {
        display: none;
        flex-direction: column;
        width: 100%;
    }

    #menu>ul.active
    {
        display: flex;
    }

    #menu>ul>li
    {
        text-align: center;
    }
    #menu>ul>li:hover
    {
    border-color: purple;
    width: auto;
    align-self: center;
    }

    #menu>button
    {
        display: flex;
        flex-direction: column;
    }

    body>header
    {
        justify-content: center;
    }
    
    body>header>img
    {
        max-height: 80%;
    }
}

Alles anzeigen

Wann nutze ich id's und wann class?

Ich verstehe es jetzt so.

Für eine Section, ein einzelnes sich nicht wiederholendes Element. Etwas das nur einmal vorkommt, verwendet man "id" .

Innerhalb der "id" verwendet man zb id="top" dann #top>ul>li und #top>ul>li>hover.

Eine class wird einmal definiert und greift wo sie im HTML angesprochen wird.

Doch wieso musste ich in der section about ".about-text" als klasse angeben?

nextuser · 29. Juli 2023

Zitat von Emess

Wann nutze ich id's und wann class?

Ich nutzte sie so, wie es deren Bedeutung auch nahelegt:

ID => Einmalig im Dokument. Elemente, die man direkt im CSS oder komfortabler in JS ansprechen möchte.

Klassen => Elemente, die an verschiedenen Stellen im Dokument vorkommen (können), die aber einheitlich im CSS gestyled, oder gruppiert im JS angesprochen werden sollen.

Elementen, die man sehr einfach mit CSS-Selektoren ansprechen kann (z.B. direkte Kindelemente einer ID oder des body-Körpers) gebe ich nichts.

Zitat von Emess

Für eine Section, ein einzelnes sich nicht wiederholendes Element. Etwas das nur einmal vorkommt, verwendet man "id" .

Es geht nicht um "sich nicht wiederholendes Element" an sich. Gerade einmalige Sachen in einem Dokument brauchen oft keine ID.

Eine ID sollte man vergeben, wenn man das entsprechende Element, und bequem auch direkt die Kindelemente ansprechen möchte/muss.

In einem Bereich mit mehreren Sections, die jeweils einen eigenen "Abschnitt" repräsentieren und die man dann natürlich entsprechend ansprechen will, ist eine Id gut genutzt.

Zitat von Emess

Innerhalb der "id" verwendet man zb id="top" dann #top>ul>li und #top>ul>li>hover.

Kann man, muss man aber nicht. Wenn man aber auch die Kindelemente ansprechen will, wie in deinem Beispiel, dann ist eine ID natürlich sehr sinnvoll!

Zitat von Emess

Eine class wird einmal definiert und greift wo sie im HTML angesprochen wird.

Eine Klasse gibst du jedem Element, das du gleich ensprechen / manipulieren willst.

Man könnte eine Klasse auch "anders" nutzen.

Zum Beispiel gibt es auch Leute, die einmalige Abschnitte wie folgende:

HTML

<main>
    <section></section>
    <section></section>
    <section></section>
</main>

lieber mit Klassen anstatt Id's versehen, einfach nur, weil sie es im CSS schöner finden, die Elemente so anzusprechen:

CSS

main>.klasseX
main>.klasseY
main>.klasseZ

Ich nutze es auch manchmal, allerdings nur in entsprechend für mich sinnvollen / schönen Stellen, wo eine ID keinen Sinn machen würde, ich das Element (meist Kindelement einer ID) aber trotzdem "namentlich" direkter ansprechen möchte...

Zitat von Emess

Doch wieso musste ich in der section about ".about-text" als klasse angeben?

Wie kommst du darauf, dass du es musst?

Emess · 29. Juli 2023

Zitat von nextuser

Wie kommst du darauf, dass du es musst?

hab es nicht anders hinbekommen. Mir ist schon klar dass es viele Wege gibt. Doch ich verlaufe mich da schnell.

nextuser · 29. Juli 2023

Zitat von Emess

hab es nicht anders hinbekommen. Mir ist schon klar dass es viele Wege gibt. Doch ich verlaufe mich da schnell.

In deinem Code oben kannst du es doch ganz einfach mit "#about>div" ansprechen.

Emess · 29. Juli 2023

wenn ich es mit "#about>p" anspreche kann ich auf das Div ganz verzichten.

Doch was wenn ich Absatze unterschiedlich stylen will?

nextuser · 29. Juli 2023

Zitat von Emess

Doch was wenn ich Absatze unterschiedlich stylen will?

Absätze innerhalb eines Textes unterschiedlich zu stylen ist eher ungewöhnlich.

Aber man kann es natürlich auch machen.

Wenn es nur 2 Absätze wären, würde ich mit ":first/last-of-type" arbeiten.

Bei mehr, würde ich dann die oben erwähnte "Ausnahme" bzgl. Klassen nutzen.

Emess · 30. Juli 2023

mir ist gelungen die Startseit mit Überschriften in einer Flexbox zu erstellen. ( Stolz erfüllt mein altes Herz)

Allerdings ist mein Code in den @mediaquerry eher suboptimal.

Die Überschrift sollen in der Smartphonansicht unter dem Bild oder von mir aus auch teils auf dem Bild mittig dargestellt sein.

HTML

<header>
    <section>
        <h2>Flexboxprojekt</h2>
        <h1>Schaut doch mal rein</h1>
    </section>
        <img src="img/kasper.png">
    </header>

CSS

body>header>section{
    display: flexbox;
    align-self:center;
    margin-right: 30rem;
    
}


body>header>section>h1{
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2rem;
    color: bisque;
}

body>header>section>h2{
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    color: darkkhaki;
    text-decoration: none;

@media(max-width: 750px)

    body>header
    {
        justify-content: center;
    }
    
    body>header>img
    {
        max-height: 80%;
    }
    body>header>section{
        display: flexbox;
        align-self:center;
        margin-right: 0;
}

Alles anzeigen

sec.png

da brauche ich wieder Hilfe

nextuser · 31. Juli 2023

Erstmal kurz:

"display: flexbox" gibt es nicht.
Es macht nicht viel Sinn, h2 UND h1 zusammen zu verwenden wenn der Inhalt dieses Abschnitts quasi nur aus einer Headline besteht. Schon garnicht in dieser Reihenfolge.
Man sollte keine section verwenden, um lediglich eine Headline zu verpacken. Da würde ich lieber einfach nur ein div verwenden.
Wenn es nur eine simple Headline und das Bild ist, wäre hier vielleicht auch ein figure-Tag angebracht, gerade wenn der Text unter das Bild soll.

Wie auch immer...

Soll es unter dem Bild, verschieb deine section unter das Bild und nutze "flex-direction:column".

Soll es mittig auf das Bild, gib deiner section "position: absolute".

Emess · 31. Juli 2023

Zitat

"display: flexbox" gibt es nicht.

mit "diplay-flex" werden aber h1 und h2 nebeneinander dargestellt und ich müsst mit <br> arbeiten was ja wohl nicht optimal wäre

Zitat

Es macht nicht viel Sinn, h2 UND h1 zusammen zu verwenden wenn der Inhalt dieses Abschnitts quasi nur aus einer Headline besteht. Schon garnicht in dieser Reihenfolge.

was wäre die Alternative?

Zitat

Wie auch immer...
Soll es unter dem Bild, verschieb deine section unter das Bild und nutze "flex-direction:column".
Soll es mittig auf das Bild, gib deiner section "position: absolute".

Hat bei mir keine Auswirkung . ich lade das Resultat noch mal hoch.

https://my2.emess62.de/

nextuser · 31. Juli 2023

Zitat von Emess

mit "diplay-flex" werden aber h1 und h2 nebeneinander dargestellt und ich müsst mit <br> arbeiten was ja wohl nicht optimal wäre

Nein! Zum einen heißt es "display: flex", zum anderen kennst du doch schon die Eigenschaft "flex-direction".

Zitat von Emess

was wäre die Alternative?

Nicht Alternative, sondern du musst dir erst mal im Klaren sein, was du überhaupt willst. Zwei Überschriften sicher nicht.

Dein "Flexboxprojekt" wäre wohl die Headline, dein "Schaut doch mal rein" einfach nur ein Beitext.

Da würde ich einfach nur mit <h1> & <p> arbeiten.

Die h-Tags haben schon ihre Bedeutung und Gewichtung. Mal ganz davon abgesehen, dass auch Suchmaschinen sie entsprechend bewerten...

Zitat von Emess

Hat bei mir keine Auswirkung.

Na das müsstest du aber mittlerweile schon erkennen können, was da nicht stimmt.

In der Smartphone-Ansicht ist dein "margin-right: 30rem" natürlich fehl am Platz!

Jetzt änderst du bei deinem header noch "justify-content: end" zu "justify-content: center" und ...

Emess · 31. Juli 2023

Zitat

zum anderen kennst du doch schon die Eigenschaft "flex-direction".

Ich habe das so verstanden. flex-direction richtet aus

"row" -> nebeneinander

"column" untereinander

Das margin-right" steht ja nicht in der Smartponeansicht sondern soll die "section" auf der Hauptachse nach links bringen

wie ich jetzt die Section in der Smartphoneansicht ausrichten soll hat sich mir noch nicht erschlossen.

Es tut mir leid wenn ich nerve

nextuser · 31. Juli 2023

Zitat von Emess

Ich habe das so verstanden. flex-direction richtet aus
"row" -> nebeneinander
"column" untereinander

Ja.

Zitat von Emess

Das margin-right" steht ja nicht in der Smartponeansicht...

Das hatte ich auch nicht gesagt. Ich sagte, das dein "margin-right" in der Smartphone-Ansicht fehl am Platz ist, also dass du es natürlich in deiner Media-Query für die Smartphone-Ansicht anpassen musst.

Zitat von Emess

wie ich jetzt die Section in der Smartphoneansicht ausrichten soll hat sich mir noch nicht erschlossen.

Hab ich doch bereits gesagt.

Und wie ich sehe, hast du es ja teilweise schon umgesetzt. Entferne in der Smartphone-Ansicht noch den margin-right und du hast deine section zentriert über dem Bild.

Zitat von Emess

Es tut mir leid wenn ich nerve

Du nervst nicht.

Emess · 31. Juli 2023

Zitat von nextuser

Das hatte ich auch nicht gesagt. Ich sagte, das dein "margin-right" in der Smartphone-Ansicht fehl am Platz ist, also dass du es natürlich in deiner Media-Query für die Smartphone-Ansicht anpassen musst.

Hab ich doch bereits gesagt.
Und wie ich sehe, hast du es ja teilweise schon umgesetzt. Entferne in der Smartphone-Ansicht noch den margin-right und du hast deine section zentriert über dem Bild.

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

ins.png

[gelöst] Bild responive machen

Jetzt mitmachen!

Teilen

Tags