HTML / CSS: Mein div wird oben abgeschnitten?
https://jsfiddle.net/qkw45jne/1/
Wenn der Bildschirm zu klein wird (in der Höhe), wird das rote div oben teilweise abgeschnitten. Scrollbars kommen aber trotzdem, da die teile drunter vollständig zu sehen bleiben.
Was muss ich ändern, dass auch das rote div immer vollständig da bleibt?
In dem jsfiddle könnt ihr das recht einfach nachstellen, indem ihr die mittlere grenze hoch schiebt. Dann wird irgendwann auch der text im roten div sichtbar:
vs
Es liegt wahrscheinlich an
-ms-transform: translateY(-50%);
transform: translateY(-50%);
Aber ich möchte gerne dass der Content auf großen Bildschirmen zentriert bleibt (deshalb auch die weißen Balken im 2. Bild)
1 Antwort
Zentrieren geht doch viel einfacher als mit den transforms. Bei denen brauchst du dich ja auch nicht zu wunder, dass das aus dem sichtbaren Bereich rausgeht... :/
Was spricht denn z.B. gegen margin: 0 auto; oder flexbox..?
Was hast du denn für Uralt Quellen? Naja, egal... Um vertikal zu zu zentrieren reicht eigentlich folgendes:
Danke erstmal :) flexbox geht, aber dann sind meine anderen Elemente neben einander, und das rote div überspannt nicht mehr alles: https://jsfiddle.net/Lrzkhu4n/
nevermind ich habs: https://jsfiddle.net/xowrta20/1/
musste noch ein div dazwischen.
Danke für deine Hilfe :)
Kein Problem. Aber nur mal so als weitere Anmerkungen:
- Inline-Styles im html sind nicht besonders klug
- Label's sind eigentlich nur für inputs. progress, meter etc. gedacht
- br's zu verwenden ist meistens nicht klug. besonders dann nicht, wenn man nur mehr Abstände haben will
- wozu das position: relative beim container?
Also mein Ziel ist ne kleine Website die Daten von unserer PV Anlage und meinem Überschussladen anzeigt. Der Webentwicklungsteil ist aber nicht so meins ^^
Wie würdest du das anstelle von Labels darstellen? Da schreib ich via JS immer dynamisch Sachen rein.
Durch die flexbox jetzt kann auch viel von dem inline zeugs weg. Das text-align center war z.b. um die divs zu centern, dadurch kam dann ein text-align left an anderer stelle hinzu usw... alles ein bisschen hingerotzt.
Joa könnte ich machen, aber was ist der Vorteil davon? Ich würde das ja ein bisschen missbrauchen, weil ich das viel kleiner machen würde.
Was ist mit Paragraph p?
Und wie? Gefühlt alle online Quellen machen das mit transform :(