[ERLEDIGT] Flexbox mit Text und Bild - Probleme bei der Umsetzung und frage zu fixed header mit dynamischer Höhe

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Ansophie

Mitglied
17 August 2019
49
2
8
Hallo,

Wie der Titel schon sagt, geht es um Schwierigkeiten bei der Umsetzung einer Flexbox.

Größtenteils funktioniert sie, allerdings stimmen ein paar Details nicht.

  1. banner-intro sollte sich flexibel an die browserfensterbreite anpassen. Leider stoppt die Ausbreitung der Box. Der banner darunter, funktioniert, dank Basti1012, wie gewünscht.
  2. das Bild im orangen Rahmen hat unten einen kleinen Abstand - wo kommt der her, der soll da nicht hin. stelle ich die Bildgröße ein (original: 1274x769) oder kleiner wie in Kommentar angegeben. ist es nicht flexibel, stell ich keine ein, ist es so.
  3. außerdem scheint mir das Bild ohne Größenangaben etwas groß, selbst auf einem großen Bildschirm, wie kann ich das kleiner stellen?
  4. ist es möglich - die erste box "intro-content-text", wie im bspfoto, überlappend zu positionieren? oder geht das nur mit JS oder Grid Layout?

HTML:
<div class="banner-intro">
    <div class="container-intro">
        <div class="intro-content-text"><p>Hier steht<br>ein kurzer Text </p></div>
        <div class="intro-content-pic"><img class="image-intro" src="#" alt="xx "/></div>
    </div>
</div>

<div class="banner-1">
    <div class="container-1">
        <div class="aussage"><p>&bdquo;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&rdquo;</p></div>
        <div class="antwort"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae malesuada ipsum. Duis sit amet leo metus. Vivamus sed libero eleifend, auctor leo non, dignissim tortor. Maecenas quam enim, interdum vitae massa non, tincidunt maximus nisi. Suspendisse vehicula dui sed tempor interdum. Vestibulum pharetra dolor at felis auctor hendrerit. In vel risus dictum, condimentum leo et, tempus magna. Ut pretium semper mauris, nec mattis eros consequat quis.</p>
            <div class="weiterleitung"><a href="#">mehr erfahren</a></div>
        </div>
</div>
</div>

CSS:
.banner-intro{
    background-color: #ffffff;
    border: 1px solid red;
    display: flex;
    flex-direction: row;
    padding: 3rem;
}

.container-intro{
    align-items: center;
    border: 1px solid purple;
    display: flex;
    flex-direction: row;
    padding: 15px;
}

.intro-content-text{
    border: 1px solid blue;
    text-align: left;
}

.intro-content-text p{
    border: 2px solid pink;
    color: #add29f;
    font-size: 1.6rem;
    font-weight: 300;
    text-transform: uppercase;
    padding: 1rem 3rem 1rem 3rem;
    white-space: nowrap;
}

.intro-content-pic{
    border: 1px solid orange;
}

.intro-content-pic img{
    max-width: 100%;
}

.image_intro{
    /*width: 450px;*/
    /*height: 280px;*/
}

@media only screen and (max-width:1000px){
    .banner-intro{
        flex-direction: column;
    }
    .container-intro{
        flex-direction: column;
    }
    .intro-content-text{
        text-align: center;
    }
}

.weiterleitung{
    padding: 1.5rem;
    text-align: center;
}

.weiterleitung a{
    align-content: flex-end;
    border: 1px solid #660033;
    color: #660033;
    flex-basis: auto;
    font-family: Geneva, sans-serif;
    font-size: 1.1rem;
    padding:14px 19px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
}

.weiterleitung a:hover{
    background: #660033;
    color:white;
}

.banner-1{
    background-color: #ffffff;
    display: flex;
    flex-direction: row;
    padding: 3rem;
    border: 1px solid red;
}

.container-1{
    align-items: stretch;
    background-color: #edf1f0;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    padding: 15px;
}

.aussage{
    padding: 15px;
    text-align:center;
}

.aussage p{
    color: #660033;
    line-height: 1.4;
    font-family: Geneva, sans-serif;
    font-size: 1.5rem;
    text-transform: none;
}

.antwort{
    padding: 25px;
    flex-basis: 55%;
}

.antwort p{
    color: #660033;
    display: inline-block;
    font-family: Geneva, sans-serif;
    font-size: 1.2rem;
    letter-spacing: .02em;
    text-transform: none;
}

.antwort a{
    white-space: nowrap;
}

@media only screen and (max-width:700px){
    .container-1{
        flex-direction: column;
    }
    .banner-1{
        flex-direction: column;
    }
}


Da mein Header auch flex ist, schließe ich meine Frage hier gleich an.

Ist es ohne Javascript möglich, den fixed header, mit einer dynamischen Höhe einzustellen? Also, sobald man scrolled, soll er schmäler werden und sein Inhalt von center, column zu flex-start, row werden

Bitte Hilfe.

lg, ansophie
 

Anhänge

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.486
295
83
66
2. ist einfach zu beheben: Der Grund ist, dass der Default-Wert für die vertikale Ausrichtung "baseline" ist. Du kannst das ändern, indem Du für das Bild z. B. vertical-align: top; setzt.

4. ist auch relativ einfach zu erreichen, indem Du dem betr. Container eine negatives margin-right gibst.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.486
295
83
66
Zu 1.: Der HTML-Inspektor zeigt, dass der äußerste Container .banner-intro schon mit wächst, genau wie der untere. Der Text im p-Element und das Bild nehmen jedoch nur soviel Platz ein wie nötig.
Möchtest Du, dass sie auch wachsen, musst Du ihnen ein flex-Attribut geben, entsprechend dem Platz, den sie prozentual einnehmen sollen. Ebenso dem umgebenden .container-intro.
Oder von den Möglichkeiten von justify-content Gebrauch machen und sie zentrieren oder den freien Raum dazwischen steuern.
 
Zuletzt bearbeitet:

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.486
295
83
66
Zu 3.: Die maximale Größe des Bildes kannst Du über das max-width steuern.
 
Zuletzt bearbeitet:

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.486
295
83
66
PS: Auf den Container .container-intro kannst Du ohne weiteres verzichten, er macht das HTML und das Layout nur unnötig kompliziert.

Und für .intro-content-pic würde sich ein figure-Tag anbieten.
 

Ansophie

Mitglied
17 August 2019
49
2
8
danke für deine Antworten.
bin gerade dabei das schritt für schritt durchzugehen.

ad 2)
das ist ein prima tipp!

auch das hat super geklappt. figure hat im css bei mir noch keine besonderen Anweisungen, habe stattdessen img.image-intro direkt "angesprochen".
weil doch sonst ein anderes figure oder figure img dieselben Anweisung erhält, nicht?!

ad 3)
die Bild-größe kann ich zwar mit max-width reduzieren, danach verzerrt sich das Bild aber grauenvoll, wenn der viewport kleiner wird.
wenn ich max-height ergänze, muss ich wieder drauf achten, dass es im richten Verhältnis ist, weil ja sonst genauso verzerrt. könntest du mir das bitte näher erläutern, wie es richtig geht.

Zu 1.: Der HTML-Inspektor zeigt, dass der äußerste Container .banner-intro schon mit wächst, genau wie der untere. Der Text im p-Element und das Bild nehmen jedoch nur soviel Platz ein wie nötig.
Möchtest Du, dass sie auch wachsen, musst Du ihnen ein flex-Attribut geben, entsprechend dem Platz, den sie prozentual einnehmen sollen. Ebenso dem umgebenden .container-intro.
Oder von den Möglichkeiten von justify-content Gebrauch machen und sie zentrieren oder den freien Raum dazwischen steuern.
Hier steh ich auf der Leitung: ich hab flex-attribute vergeben sowie prozentual und justify-content angewendet , ganz nach deiner Vorgabe. Leider bleibt der banner-intro immer noch zu kurz. Egal was ich tue, es ist wie tot.

interessant ist, ich habe zum test/zum üben folgendes eingegeben:
HTML:
<div class="box">
        <div class="box-item">One</div>
        <div class="box-item">Two</div>
        <div class="box-item">Three</div>
    </div>
CSS:
.box {
    border: 2px solid blue;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 15px;
}

.box-item{
    border: 3px solid pink;
    font-weight: 100;
    text-transform: uppercase;
    padding: 15px;
    display: flex;
    align-items: center;
}
gebe ich das in den header ein, klappt alles - box ist von Beginn an so breit wie das Browserfenster und die box-items folgen meinen Anweisungen.
gebe ich das über mein intro (welches im main liegt) ein, ist es ebenfalls tot und es bleibt überhaupt noch kürzer als mein intro.

es kann doch nicht sein, dass als "child" reagiert - der Banner darunter ist ja auch ganz normal.
liegt es vielleicht am @media?

was habe ich übersehen?

lg, ansophie
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.486
295
83
66
Ich habe den oberen Container mal eingerichtet, so dass die Elemente ihn vollständig ausfüllen und das Bild eine maximale Breite hat und die Änderungen kommentiert, Kommentare mit !!! markiert:
CSS:
        .banner-intro {
            background-color: #ffffff;
            border: 1px solid red;
            display: flex;
            flex-direction: row;
            padding: 3rem;
        }

        .container-intro {
            align-items: center;
            border: 1px solid purple;
            display: flex;
            flex-direction: row;
            padding: 15px;
        }

        .intro-content-text {
            /* !!! Hierdurch waechst dieser Container,
            sodass der umgebende vollstaendig ausgefuellt wird: */
            flex: 1;
            border: 1px solid blue;
            text-align: left;
        }

        .intro-content-text p {
            border: 2px solid pink;
            color: #add29f;
            font-size: 1.6rem;
            font-weight: 300;
            text-transform: uppercase;
            padding: 1rem 3rem 1rem 3rem;
            white-space: nowrap;
        }

        .intro-content-pic {
            border: 1px solid orange;
        }

        figure.intro-content-pic {
            /* !!! Default-Margin und - Padding beim figure entfernen */
            margin: 0;
            padding: 0;
            /* !!! Anfangsbreite: 600px
            0: waechst nicht, dadurch ergibt sich eine maximale Breite
            1: schrumpft */
            flex: 0 1 600px;
        }

        .intro-content-pic img {
            /* Luecke unten entfernen: */
            vertical-align: top;
            width: 100%;
        }

        .image_intro {
            /*width: 450px;*/
            /*height: 280px;*/
        }

        @media only screen and (max-width:1000px) {
            .banner-intro {
                flex-direction: column;
            }

            .container-intro {
                flex-direction: column;
            }

            .intro-content-text {
                text-align: center;
            }
        }

        .weiterleitung {
            padding: 1.5rem;
            text-align: center;
        }

        .weiterleitung a {
            align-content: flex-end;
            border: 1px solid #660033;
            color: #660033;
            flex-basis: auto;
            font-family: Geneva, sans-serif;
            font-size: 1.1rem;
            padding: 14px 19px;
            text-align: center;
            text-decoration: none;
            text-transform: uppercase;
            white-space: nowrap;
        }

        .weiterleitung a:hover {
            background: #660033;
            color: white;
        }

        .banner-1 {
            background-color: #ffffff;
            display: flex;
            flex-direction: row;
            padding: 3rem;
            border: 1px solid red;
        }

        .container-1 {
            align-items: stretch;
            background-color: #edf1f0;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            padding: 15px;
        }

        .aussage {
            padding: 15px;
            text-align: center;
        }

        .aussage p {
            color: #660033;
            line-height: 1.4;
            font-family: Geneva, sans-serif;
            font-size: 1.5rem;
            text-transform: none;
        }

        .antwort {
            padding: 25px;
            flex-basis: 55%;
        }

        .antwort p {
            color: #660033;
            display: inline-block;
            font-family: Geneva, sans-serif;
            font-size: 1.2rem;
            letter-spacing: .02em;
            text-transform: none;
        }

        .antwort a {
            white-space: nowrap;
        }

        @media only screen and (max-width:700px) {
            .container-1 {
                flex-direction: column;
            }

            .banner-1 {
                flex-direction: column;
            }
        }
HTML:
    <div class="banner-intro">
        <!-- <div class="container-intro"> -->
        <div class="intro-content-text">
            <p>Hier steht<br>ein kurzer Text </p>
        </div>
        <figure class="intro-content-pic">
            <img class="image-intro" src="images/dia0.jpg" alt="xx " />
        </figure>
        <!-- </div> -->
    </div>
Hoffe, so wird es klarer.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.486
295
83
66
PS: Die max. Breite des Bildes habe ich mit den Möglichkeiten von Flex statt max-width eingerichtet.
 

Ansophie

Mitglied
17 August 2019
49
2
8
deine Kommentare sind hilfreich und die Bildgröße ist besser, danke.

Aber halt mich für verrückt - der banner intro wächst trotzdem nicht und im kleinen viewport hab ich jetzt die Lücke unter dem Bild.
 

Ansophie

Mitglied
17 August 2019
49
2
8
also, ich hab jetzt den banner-intro mit width: 100%; versehen und es funktioniert. yippie.

kann man das so machen, oder ist dieses Attribut unüblich?

Lediglich die Lücke unter dem Bild im kleineren viewport ist noch da - hast du eine Idee?
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.486
295
83
66
Lediglich die Lücke unter dem Bild im kleineren viewport ist noch da
Das ist jetzt ein bisschen tricky: Wir haben ja dem figure-Element flex: 0 1 600px;
verpasst und durch die Umschaltung auf Richtung Spalte wirkt es jetzt in vertikaler Richtung. Allerdings verstehe ich es nicht wirklich, weil "grow" ja auf 0 steht und "shrink" auf 1, d. h. das Element müsste eigentlich schrumpfen. Auf jeden Fall kannst Du es abstellen, indem Du in der betr. Medaiquery flex: auto; gibst.
 

Ansophie

Mitglied
17 August 2019
49
2
8
Hallo,

flex: auto bei figure.intro-content-pic hat geklappt.
Das Bild ist jetzt im kleineren viewport tadellos.

Aber: wenn ich jetzt im großen viewport bin und den browser kleiner ziehe, bekommt das Bild ab einer bestimmten Größe wieder diese Lücke, solange bis es umspringt auf den kleinen viewport.

habe versucht intro-content-pic flex: auto/ 0/ 1; , vertical-align: top; , margin:0;, padding:0; und min-width zu geben - kein erfolg.
Alles zugleich habe ich nicht probiert. Diese Lücke verfolgt mich. =D

übrigens:
habe das negative margin-right aus #2 ebenfalls angewendet - funktioniert super. DANKE!
wenn ich opacity: 0.9; setze, liegt es auch über dem Bild.
hierzu habe ich auch gleich eine Frage:
ich habe betreffend intro-content-p drei Paragrafen, zwei davon sind , wie schon erwähnt mit der opacity: 0.9 belegt, das dritte <p> hat ein class (background-color: transparent) bekommen, soweit so gut.
der Inhalt ist ein a href-button mit background-color: white; opacity: 1;
Warum übernimmt dieser die opacity: 1 nicht?

lg, ansophie
 

Ansophie

Mitglied
17 August 2019
49
2
8
also, ich habe das problem mit der Lücke jetzt so gelöst, indem ich mediaquery auf größeren Viewport gesetzt habe.

Ob diese Art als komplizierter Lösungsweg einzustufen ist, kann ich nicht sagen. Es ist jedenfalls eine Symptombekämpfung und lässt das o.g. Makel verschwinden.
Vielleicht weiß jemand eine Vereinfachung oder findet die Ursache ein andermal.

Die opacity-frage aus #13 hat noch keine Lösung - hat jemand eine Idee/Erklärung? Ich probiere inzwischen weiter. ;)
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.486
295
83
66
Die Probleme wären einfacher zu analysieren, wenn man die vollständige Seite live vor sich hätte. Hast Du sie online? Das poste die URL.
 

Ansophie

Mitglied
17 August 2019
49
2
8
Hallo,

nein leider, ist nicht online - geht wenn, nur über den Code.

aber ich konnte auch dieses Problem beheben, nämlich mit z-index.

Danke für deine Hilfe Sempervivum!

lg, AnSophie

p.s. bitte das Präfix dieses Threads auf Erledigt setzen. Danke.
 
Zuletzt bearbeitet:
Werbung:

Latest posts