Vier Vierecke im Vollbild anpassbar

Sempervivum · 3. April 2018

Ob es Sinn macht, darüber will ich nicht urteilen. Funktionieren tut es auf jeden Fall, wenn Du die absolute Positionierung weg lässt. Ob es praktikabel ist, hängt zum großen Teil davon ab, wie viel Inhalt Du in die Kästen tun willst, ob er hineinpasst, wenn man die Größe auf das Browserfenster begrenzt.

vic951 · 5. April 2018

[Blockierte Grafik: http://www.bilder-upload.eu/thumb/553d46-1522916098.jpg]

so habe es mal hier veranschaulicht, wie es ist aber nicht sein soll.

ich habe folgendes geändert

Code

header {
        position: absolute;
    }

zu

Code

header {
        display: flex;
    }

es hat sich jedoch leider nichts geändert.

Sempervivum · 5. April 2018

Poste doch Mal die URL der Seite, damit man es sich im Zusammenhang ansehen kann.

In dem Fiddle sieht man sowohl position: fixed als auch position:absolute. Deaktiviert man beides, ist es OK.

html-seminar.de/woltlab/attachment/1493/

vic951 · 5. April 2018

Es gibt noch keine URL baue die momentan nur an meinem Rechner die Seite.

korrekt habe es gestrichen und schon geht es. Es muss so einfach sein wenn man sich damit auskennt.

Vielen Vielen Dank.

Ich hoffe es ist nicht zu viel verlangt, aber eine Ahnung warum mir der IE die Zeilenumbrüche nicht macht? Und ich mein Menü-Icon wieder nach rechts bekomme, in Chrome und Firefox wird alles richtig dargestellt.

https://jsfiddle.net/FCS2018/L0czsvnv/3/

Sempervivum · 5. April 2018

Zitat

Ich hoffe es ist nicht zu viel verlangt, aber eine Ahnung warum mir der IE die Zeilenumbrüche nicht macht?

Nicht zu viel verlangt, nur immer her mit den Fragen

Stackoverflow weiß Rat:

https://stackoverflow.com/ques…ainer-doesnt-wrap-in-ie11

Setzt man das um, funktioniert es mit den Zeilenumbrüchen:

html-seminar.de/woltlab/attachment/1494/

Was die Navigation anbetrifft, so empfehle ich, auf float zu verzichten und sie ebenfalls auf Flexlayout umzustellen. Dann ist alles viel einfacher.

vic951 · 5. April 2018

Also ich habe das jetzt mal versucht, aber es ändert sich nichts ich habe wie in Stackoverflow

Code

align-self: stretch;

zu meiner .box Klasse hinzugefügt aber im Internet-Explorer ändert sich nichts.

Ich verstehe auch nicht was ::selection für einen Einfluss darauf hat.

Flexlayout schaue ich mir gleich auch noch an.

Sempervivum · 5. April 2018

Nimm wie auf meinem Screenshot width:100% für das p-Element.

vic951 · 5. April 2018

oh das habe ich übersehen aber leider schafft das nur das nächste Problem

[Blockierte Grafik: http://www.bilder-upload.eu/thumb/0eb5a3-1522930701.jpg]

das margin vom Button wird nicht genommen.

Sempervivum · 5. April 2018

Mir scheint, dass das Problem weniger das margin ist, sondern dass einfach der Platz nicht ausreicht. Wird der Platz noch knapper, überlappen sich Button und Schrift. Abhilfe, indem Du das Padding reduzierst.

vic951 · 5. April 2018

Ok das mit dem Padding war korrekt, aber komisch das der Internet-Explorer alles so anders darstellt.

vic951 · 5. April 2018

Es will einfach nicht aufhören, und warum kriege ich den Button nicht weiter runter? Selbst wenn ich padding auf 10px stelle und margin-top auf 120px geht der Text nach oben aber der Button bleibt wo er ist. ich würde gerne den Text mittig haben aber den Button eher weiter unten.

Sempervivum · 5. April 2018

Auch das ist mit Flexlayout kein Problem. Hier wird beschrieben, wie man es mit margin:auto macht:

https://stackoverflow.com/ques…perties/33856609#33856609

Du brauchst nur dem p-Element ein margin-auto zu geben, dann rutscht der Button nach unten und das p-Element wird im freien Raum zentriert. Voraussetzung ist, dass genug Platz vorhanden ist.

Siehe Screenshot:

html-seminar.de/woltlab/attachment/1495/

vic951 · 10. April 2018

Perfekt!! Vielen Dank.

Vier Vierecke im Vollbild anpassbar

Jetzt mitmachen!

Teilen