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

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

Ansophie

Mitglied
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

  • bsp-foto.png
    bsp-foto.png
    488,3 KB · Aufrufe: 6
Werbung:
danke für deine Antworten.
bin gerade dabei das schritt für schritt durchzugehen.

ad 2)
vertical-align: top;
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
 
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.
 
Werbung:
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?
 
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
 
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. ;)
 
Werbung:
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:
Zurück
Oben