Div-Box mit fester Höhe

[Jens_Keller]

Hallo CSS-Cracks,

ich möchte eine div-Box mit fester Höhe, dynamischer Breite und variablem Padding implementieren. Der Text in der div-Box soll also ein einstellbares Padding vom oberen Rand haben, bei unterschiedlichen Padding- und Font-Size-Werten soll die Höhe der div-Box aber unverändert bleiben; der Text soll ggf. aus der Box herausragen (overflow: hidden:wink:

Ich dachte, folgendes wäre ausreichend:

height: 30px;
width: auto;
padding-top: 10px;
padding-left: 30px;
padding-right: 35px;
overflow: hidden;

Aber es klappt nicht. Was muß ich tun?

Vielen Dank und einen guten Start in die Woche
JayKay

[liebeinge]

Was genau funktioniert denn nicht?
width:auto brauchst du nicht extra dazu schreiben, da es auto der Standardwert von width ist.

Mit overflow:hidden schneidest du den Text ab. Er ragt nicht darüber hinaus. Falls der Text außerhalb der Box angezeigt werden soll, brauchst du overflow:visible.

Ich versteh leider nicht genau, was Du mit variablen Padding meinst bzw. was diese Box überhaupt machen soll?!

Liebe Grüße
Inge

[Efchen]

Moin,

Der Text in der div-Box

Zwischenbemerkung aus HTML-Sicht: Text steht nicht direkt in einem div, das eine logische Gruppe auszeichnet, sondern wohl eher in einem p, was einen Textabsatz auszeichnet. Bitte die Semantik nicht vernachlässigen.

der Text soll ggf. aus
der Box herausragen (overflow: hidden:wink:

Was machst Du, wenn die Schriftgröße zu groß wird und man den Text nicht mehr lesen kann? Hatdas overflow:hidden einen Sinn?

Aber es klappt nicht. Was muß ich tun?

Was klappt denn daran nicht? Liegts an Deinem Verständnis des CSS Box Model?

Wenn Du die Größe des Padding veränderst, verändert sich natürlich auch die Größe Deiner Box.

Denn die Größe einer Box ermittelt sich aus margin + border + padding + height/width + padding + border + margin.

Liebe Grüße,
-Efchen

[Efchen]

Moin,

width:auto brauchst du nicht extra dazu schreiben, da es auto
der Standardwert von width ist.

Da es aber keine Vorschriften für Standardwerte von Browsern gibt, sondern nur Empfehlungen, sollte man IMMER alle CSS-Eigenschaften angeben, deren Werte man unbedingt setzen will. Setzt man eine Eigenschaft nicht, bedeutet das bei CSS immer „der Wert hierfür ist mir egal, mach es, wie Du es am besten findest“.

Liebe Grüße,
-Efchen

[Jens_Keller]

Hallo Efchen,

Der Text in der div-Box

Zwischenbemerkung aus HTML-Sicht: Text steht nicht direkt in
einem div, das eine logische Gruppe auszeichnet, sondern wohl
eher in einem p, was einen Textabsatz auszeichnet. Bitte die
Semantik nicht vernachlässigen.

Du meinst, es wäre sauberer Code, wenn ich den Text innerhalb einer div-Box immer in p-Tags packe?

der Text soll ggf. aus
der Box herausragen (overflow: hidden:wink:

Was machst Du, wenn die Schriftgröße zu groß wird und man den
Text nicht mehr lesen kann? Hatdas overflow:hidden einen Sinn?

Ja. Bei zu großem Text soll ja gerade der Text herausragen. Das ist ausdrücklich gewünscht und Basis dieser Frage. Wichtiger als die Lesbarkeit des Textes sind hier die korrekte Anordnung und Größe der div-Box(en).

Aber es klappt nicht. Was muß ich tun?

Was klappt denn daran nicht? Liegts an Deinem Verständnis des
CSS Box Model?

An meinem Unverständnis meinst Du!? Das kann sein.

Wenn Du die Größe des Padding veränderst, verändert sich
natürlich auch die Größe Deiner Box.

Hmm, das komische ist aber: Wenn ich eine div-Box ohne Höhenangabe nur mit padding-top: 10px versehe, ist sie höher als nur 10px, denn der Text wirkt sich auf die Box-Höhe aus.

Ich hätte gedacht: Box mit fester Größe (height: 15px) mit ausgeblendetem Überstand (overflow: hidden) bleibt auch dann 15px hoch, wenn padding: 20 (der Text wäre dann natürlich nicht mehr zu sehen).

Denn die Größe einer Box ermittelt sich aus margin + border +
padding + height/width + padding + border + margin.

Ja, offenbar kann man die div-Box-Größe nicht unabhängig von diesen Werten festnageln, oder?

Viele Grüße
JK

[Efchen]

Moin,

Du meinst, es wäre sauberer Code, wenn ich den Text innerhalb
einer div-Box immer in p-Tags packe?

Nein, ich meine, dass Text als text und nicht als Gruppe ausgezeichnet wird. Text kommt also in ein p. Das div, wenn es nicht noch andere Elemente umschließt (denn eine Gruppe beinhaltet ja in der Regel mindestens zwei Elemente), kann ersatzlos gestrichen werden.

Wichtiger als die Lesbarkeit des Textes sind hier die korrekte
Anordnung und Größe der div-Box(en).

Verstehe ich nicht. Wozu der Text, wenn man ihn nicht lesen kann?

Hmm, das komische ist aber: Wenn ich eine div-Box ohne
Höhenangabe nur mit padding-top: 10px versehe, ist sie höher
als nur 10px, denn der Text wirkt sich auf die Box-Höhe aus.

Ja, richtig.

Ich hätte gedacht: Box mit fester Größe (height: 15px) mit
ausgeblendetem Überstand (overflow: hidden) bleibt auch dann
15px hoch, wenn padding: 20 (der Text wäre dann natürlich
nicht mehr zu sehen).

Was ist 20? Ohne Einheit? Nehmen wir an, das sind px, dann ist die Box 55px hoch. 2x padding = 40px plus height.

Denn die Größe einer Box ermittelt sich aus margin + border +
padding + height/width + padding + border + margin.

Ja, offenbar kann man die div-Box-Größe nicht unabhängig von
diesen Werten festnageln, oder?

Wieso sollte man? Die Sonne läuft auch immer den selben Weg im Universum.
Die Größe einer Box ist so definiert.

Hast Du mal bitte einen Link zur Seite, damit wir nicht aneinander vorbei reden? Ich bin mir da nämlich grad nicht ganz sicher, ob wir das nicht tun…

Grüße,
-Efchen

[Anja_a3d12b]

Hallo.

Ich hätte gedacht: Box mit fester Größe (height: 15px) mit
ausgeblendetem Überstand (overflow: hidden) bleibt auch dann
15px hoch, wenn padding: 20 (der Text wäre dann natürlich
nicht mehr zu sehen).

Denn die Größe einer Box ermittelt sich aus margin + border +
padding + height/width + padding + border + margin.

Ja, offenbar kann man die div-Box-Größe nicht unabhängig von
diesen Werten festnageln, oder?

Da hilft dir meines Erachtens nur, dass du dem Div kein(!) Padding mitgibt, aber dem enthaltenen Text ein eigenes Margin. Dann behält das Div seine Höhe bei, aber der Text hält trotzdem den Abstand von der Div-Kante.

Funktionieren würde es mit einer Konstruktion aus einem P-Tag (mit Margin) innerhalb des Div-Tags (ohne Padding) - was hier möglicherweise zum Geschrei „Semantik! Semantik!“ führt.

Streng genommen müssen im Div nämlich mindestens zwei aufeinander folgende HTML-Elemente (gleicher Strukturtiefe) untergebracht werden, die durch das Div gruppiert werden. So steht es im W3C: „if a div wraps just one block-level element […] it’s being used unnecessarily“. Es wird also als „unnütz“ deklariert; ausdrücklich verboten wird es aber nicht, zumindest kenne ich kein solches Verbot in den Infos des W3C.

Jetzt müsstest du also mit deinem Gewissen vereinbaren, ob du auch ein einzelnes Element ins Div setzen willst, oder ob du dich zwingst, mehrere Tags dort hinein zu legen, z.B. indem du den Text auf mehrere Ps verteilst - was aber aus semantischer Sicht ebenfalls wenig Sinn machen kann, je nach textlichem Inhalt.

Merke: Tags ausschließlich für Layout-Zwecke einzufügen, obwohl sie für das Text-Verständnis unnötig sind, ist eine „suboptimale“ Vorgehensweise - obgleich sie für das Design wunderbar funktionieren kann.

Gruß
A.

[Efchen]

Moin,

möglicherweise zum Geschrei „Semantik! Semantik!“ führt.

Ausnahmen bestätigen immer die Regel
Wichtig für Anfänger ist, dass sie verstehen, dass das div kein Zauberleement ist, das man grundsätzlich immer um alles andere drumrum legt.
Es gibt auch viele, die glauben, sie können nur divs mit CSS formatieren, nicht aber andere Elemente. Ist natürlich alles Unfug und sinnfrei.

zumindest kenne ich kein solches Verbot in den Infos des W3C.

Ich auch nicht. Es gibt auch so immer wieder mal Situationen, in denen man zum Erreichen eines gewissen Aussehens mehrere divs oder prinzipiell auch andere Elemente) ineinander verschachtelt, obwohl es semantisch keinen Sinn bringt. Extrem seien hier natürlich die CSS Pencils
Aber auch so Dinge wie Rahmen mit Images, um einen größenvariablen Content.

Merke: Tags ausschließlich für Layout-Zwecke einzufügen,
obwohl sie für das Text-Verständnis unnötig sind, ist eine
„suboptimale“ Vorgehensweise - obgleich sie für das Design
wunderbar funktionieren kann.

Das ist so richtig. Man sollte es aber - gerade als Anfänger - immer erstmal vermeiden. Bis man sicher ist, wie HTML anzuwenden ist.

Liebe Grüße,
-Efchen