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.
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
Wie der Titel schon sagt, geht es um Schwierigkeiten bei der Umsetzung einer Flexbox.
Größtenteils funktioniert sie, allerdings stimmen ein paar Details nicht.
- banner-intro sollte sich flexibel an die browserfensterbreite anpassen. Leider stoppt die Ausbreitung der Box. Der banner darunter, funktioniert, dank Basti1012, wie gewünscht.
- 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.
- außerdem scheint mir das Bild ohne Größenangaben etwas groß, selbst auf einem großen Bildschirm, wie kann ich das kleiner stellen?
- 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>„Lorem ipsum dolor sit amet, consectetur adipiscing elit.”</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