Flex container verändert die Position wenn Text verändert wird..

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

Prgrmmrgrl

Neues Mitglied
15 Februar 2019
18
0
1
26
Hallo Zusammen,

ich habe eine Seite erstellt in der sich drei flex Container befinden, zwei die oberen sind nebeneinander platziert und auch schon richtig ausgerichtet und ein weiterer liegt unter dem ersten container.

Im rechten Container ist Text platziert, das klappt soweit ganz gut bis ich aber den vorhandenen Text bearbeiten will und nur ein <br/> (das unter den zwei <p>) einfüge dann verändert der Container die Position bzw. margin-left extrem obwohl es nirgendwo festgelegt ist..

HTML:


<div class="flex-container2">
<div class="img-responsive"><a href=""><img alt="Endlos-Faltkarte" src="{{media url="wysiwyg/pb_faecherkarte_TEMPLATE.jpg"}}" /></div></a>
</div>

<br />

<div class="video-container">
<iframe src="https:// Youtube Link" style="margin-top:0px; border: 0px;"></iframe>
</div>

<br />

<div class="flex-container-text">
<div class="flex-item-text">
<div class="product-view-h1">Fächerkarte</div><br/>
In allen erdenklichen Formaten, als Hoch-, Querformat oder quadratisch produzierbar. Die Anzahl der Fächerstreifen können wir Ihren Bedürfnissen anpassen.
<p>
<p>
<br />
<strong><p style=" font-size: 20px"> ALLGEMEINE PRODUKTINFORMATIONEN</p></strong>
Alle DRUCKIDEEN.-Produkte werden standardmässig im 4-Farbdruck produziert. Auf <u><a href="kontakt.html">Anfrage</a></u> bieten wir den Druck mit Sonderfarben und zusätzlichen Veredelungsmöglichkeiten an.
<p>
<strong>Für all unsere DRUCKIDEEN.-Produkte können Sie gerne unseren individuellen Gestaltungsservice in Anspruch nehmen. Ein umfassender Daten-Check ist inklusive.
</strong> (mehr Informationen dazu finden sie <u><a href="service.html">hier</a></u>).</strong>
<p>
<p>
<strong><p style=" font-size: 20px"> SIE HABEN INDIVIDUELLE SONDERWÜNSCHE?</p></strong>
<u><a href="kontakt.html">Anfrage</a></u> für <strong>Sonderformate</strong> oder <strong>höhere Auflagen</strong>
<u><a href="kontakt.html">Anfrage</a></u> zum <strong>Gestaltungsservice</strong>
</div>

<center><div class="btn-anfr" style="width: 250px;">Jetzt anfragen!</div></center>

</div>



CSS:

.flex-container2 {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
padding-bottom: 20px;
padding-right: 0px;
z-index: 2;
float: left;
clear: left;
margin-top: 0px;
vertical-align: middle;
}



.img-responsive {
border-style: solid;
border-width: 0px;
box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.15);
width: 100%;
max-width: 500px;
height: auto;

}

.video-container {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
padding-bottom: 20px;
z-index: 2;
float: left;
clear: left;
margin-top: 0px;
width: 100%;
max-width: 500px;
height: 242px;
margin-right: 200px;
margin-bottom: 20px
}

.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
border-style: solid;
border-width: 0px;
box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.15);
}


.flex-container-text {
display: flex;
flex-wrap: wrap;
padding-left: 20px;
margin-top: -40px;
border-style: solid

}


Ich hoffe sehr es kann mir jemand helfen!
Danke im Voraus!

LG
 

Anhänge

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.283
263
83
66
  • Dein HTML ist fehlerhaft, vor allem fehlt </p>
  • Wenn Du mit Flexlayout arbeitest, solltest Du konsequent sein und auf float verzichten.
 

Prgrmmrgrl

Neues Mitglied
15 Februar 2019
18
0
1
26
Ok das habe ich mir gedacht.
Kannst du mir dazu etwas mehr Informationen geben?
Wie kann ich die flex Container sonst ausrichten dass sie genau in der Reihenfolge wie auf dem Screenshot platziert sind ohne Float?

Lieben Dank!
 

Prgrmmrgrl

Neues Mitglied
15 Februar 2019
18
0
1
26
Super vielen Dank! :smile:

Dann hätte ich noch eine Frage wie kann ich den Abstand zwischen .left und .right verringern ohne, dass die Anordnung mobil nicht zerstört wird?

Nachtrag: Sobald ich meinen Text in die von dir vorgesehenen <p>text</p> einfüge Ordnet sich der Container unter dem Video ein :(
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.283
263
83
66
Da ist kein Abstand zwischen den Containern, der leere Raum ist innerhalb des linken Containers, weil iFrame und Bild noch nicht responsiv sind. So verschwindet der Abstand:
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.283
263
83
66
Was den Nachtrag betrifft, müsste man sehen, wie Du das gemacht hast. Am besten trage es in das jsfiddle ein und poste davon die URl:
 

Prgrmmrgrl

Neues Mitglied
15 Februar 2019
18
0
1
26
Dazu paar Infos, im CSS wenn ich das unter body lasse zerschießt es mir das ganze Seiten-Layout. Habe deshalb .div verwendet (ob es richtig ist leider keine Ahnung)..

Die im HTML festgelegten Design-Einstellungen muss ich leider so übernehmen. Oder ist es besser die im CSS festzulegen?

Ich danke dir vielmals!

 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.283
263
83
66
Da war ja alles rot, wieder viele Fehler im HTML. Der Kern der Sache war, dass Du das display:flex einem .div zugeordnet hast, das es im HTML nicht gibt. Daher war es unwirksam. Ich habe jetzt einen neuen Container .outer darum herum gelegt.
 

Prgrmmrgrl

Neues Mitglied
15 Februar 2019
18
0
1
26
Danke!

Die Klammern um das Bild müssen leider sein, da es sonst nicht angezeigt wird in dem System das ich verwende.

Es sieht aber jetzt so aus wie ich haben muss. Mobile Ansicht stimmt jedoch noch nicht ganz, der Container mit dem Text ordnet sich nicht unter dem Video ein?
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.283
263
83
66
Dazu musst Du explizit mit einer Mediaquery einstellen, dass die Container untereinander angeordnet werden:
flex-direction: column; ist der Kern der Sache.
 

Prgrmmrgrl

Neues Mitglied
15 Februar 2019
18
0
1
26
Ich danke dir vielmals für deine Hilfe! Seite funktioniert wie gewollt!

Danke Danke Danke
 
Werbung: