nicht angemeldet
Inhalt geht über css box hinaus
0 Tabellenkalk
0 0 0 
Auge
0 
Gunnar Bittersmann
0 
Matthias Scharwies
0
1 Gunnar Bittersmann
Inhalt geht über css box hinaus
Matthias ApselHallo Experten,
ich bin Lehrer und das erste mal mit einer profanen Frage hier. Möchte mit Schülern eine Box machen, die ca 90% des screens füllt aber mit dem Inhalt wächst. Habe im Beispiel eine Tabelle (ich weiß es ist verpönt, ging aber schneller) verwendet. Wenn ich die kommentierten Reihen aktiviere, schaut die Tabelle über die Box hinaus, was gräßlich aussieht. Hab schon vieles probiert aber noch keine Lösung gefunden. Hat da wer einen Rat? Box mit Tabelle Herzlichen Dank aus Salzburg.
-
Hallo,
Hat da wer einen Rat?
Ein Fehler ist offensichtlich: du hast den Styleabschnitt zwischen head und body gesetzt, er gehört aber in den head!
Gruß
Kalk-
Oh danke,das ging aber schnell, hat aber keinerlei Auswirkung. Style ist jetzt im Head, wenn ich aber das Kommentar entferne, schauen die Zeilen immer noch über die Box hinaus.
-
-
Hallo
Oh danke,das ging aber schnell, hat aber keinerlei Auswirkung. Style ist jetzt im Head, wenn ich aber das Kommentar entferne, schauen die Zeilen immer noch über die Box hinaus.
Eine Tabelle wächst mit ihrem Inhalt [1]. Nun hat deine Tabelle keinen Nutzinhalt, aber in jeder Zelle steht ein Leerzeichen. Wenn der Kommentar entfernt wird, werden also diverse zusätzliche Zeilen dargestellt, die durch die Leerzeichen halt jeweils so hoch sind, wie ein einzeiliger Text.
Dabei ragt die Tabelle bei (Höhen)-Bedarf auch über das umgebende Element hinaus, wenn dies eine harte Höhenbeschränkung hat. Das ist mit deinen CSS-Angaben gegeben.
body { height:100%; } #info{ height:90%; }Soll
#infomit dem potentiellen Inhalt der Tabelle mitwachsen, darf es nicht diese feste Höhe haben. Abstände nach oben und unten (außen wie innen) müssen dann mitmarginundpaddingfür das Element und/oder die außen und innen liegenden Elemente (bodybzw.table) geregelt werden.Soll die Box nicht mitwachsen, braucht sie die vorhandene feste Höhe und eine Angabe, mit der bei Bedarf Scrollbalken erzeugt werden. Das wäre dann
overflowmit dem Wertauto. Um die Scrollbalken dauerhaft aber mit zu wenig Inhalt funktionslos anzuzeigen, wird der Wertscrollbenötigt.Tschö, Auge
--
Wenn man ausreichende Vorsichtsmaßnahmen trifft, muss man keine Vorsichtsmaßnahmen mehr treffen.
Toller Dampf voraus von Terry Pratchett
Das gilt natürlich auch für jedes anderre blockbildende Element. ↩︎
-
Herzlichen Dank, overflow:auto ist die Lösung. Liebe grüße aus Salzburg
-
-
@@Tabellenkalk
Ein Fehler ist offensichtlich: du hast den Styleabschnitt zwischen head und body gesetzt, er gehört aber in den head!
“
<style>in<body>is just a conformance error. It's required to be supported, and every browser does and will do so forever.” —Tab Atkinss.a. Bestrebungen
LLAP 🖖
--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory-
Hallo,
“
<style>in<body>is just a conformance error.Und? Nur weil du alles schlecht reden musst, ist es ja nicht so, dass du auch alles schlecht lesen musst ... 😉
Gruß
Kalk-
@@Tabellenkalk
Und? Nur weil du alles schlecht reden musst, ist es ja nicht so, dass du auch alles schlecht lesen musst ... 😉
Touché. 😅
LLAP 🖖
--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
-
-
-
-
Servus!
Hallo Experten,
ich bin Lehrer und das erste mal mit einer profanen Frage hier. Möchte mit Schülern eine Box machen, die ca 90% des screens füllt aber mit dem Inhalt wächst. Habe im Beispiel eine Tabelle (ich weiß es ist verpönt, ging aber schneller) verwendet. Wenn ich die kommentierten Reihen aktiviere, schaut die Tabelle über die Box hinaus, was gräßlich aussieht.
Deine Box hat eine feste Höhe von 90%. Warum?
Wenn Du ihr eine
min-heightgibst, nimmt sie den gewünschten Raum ein, wächst, wenn nötig, aber mit.#info { min-height:90%; margin: 2em; padding: 1em; background-color: #666666; border-bottom: 1px solid rgba(255, 255, 255, 0.2); border-radius: 5px; box-shadow: 2px 3px 5px rgba(255, 0, 0, .6), 0 2px 9px rgba(255, 255, 255, 0.2) inset, 0 -2px 9px rgba(0, 0, 0, 0.3) inset; color: #FFFFFF; }PS: Die Box ist unnötig, mach das gleich im body. Die feste Höhe von 100% ist auch nicht optimal, wenn du auf dem Handy nicht nach unten scrollen kannst, besser
min-height: 100%?Hab schon vieles probiert aber noch keine Lösung gefunden. Hat da wer einen Rat?
Hast Du schon einmal überlegt mit Grid Layout zu arbeiten?
Herzlichen Dank aus Salzburg.
Herzliche Grüße
Matthias Scharwies
--
Es gibt viel zu tun: ToDo-Liste-
Danke, auch dieser tipp ist super. Komme eher von der Softwareentwicklung und taste mich autodidaktisch in die Welt des HTML. Auf Grid css bin ich auch schon gestoßen, dachte aber, dass das wegen einer Box mit Kanonen auf Spatzen schießen sei. Vielleicht lieg ich da falsch und sollte mich mit diesem Thema weiter beschäftigen.
-
Hallo uwe gutwirth,
ich bin Lehrer
Komme eher von der Softwareentwicklung
Seiteneinsteiger?
Bis demnächst
Matthias--
Rosen sind rot.-
Ja sozusagen. Eigentlich Betriebswirt aber Softwareentwicklung ist ein spannendes Hobby und hält den Geist rege(bin schon 67). Und es ist einfach toll, dass man gleich hilfreiche Tipps erhält. Bin echt begeistert!
-
-
-
-
@@uwe gutwirth
Inhalt geht über css box hinaus
LLAP 🖖
--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory-
Wollte ich auch gerade verlinken 😂
-