Breite an Inhalt anpassen

[Frederik]

Hallo!

Auf einer Seite möchte ich gerne eine kleine Box einfügen, die aber nur so breit sein soll, wie der Inhalt es erfordert. Leider sind Block-Elemente ja per Voreinstellung über die ganze verfügbare Breite ausgedehnt.

Ich habe jetzt mal eine Lösung ausprobiert, die mich aber noch nicht ganz befriedigt:

width: 10%;
overflow: visible;
white-space: nowrap;

Damit wird die Box auf die Breite ausgedehnt, die sie braucht, der Text bricht aber nicht um. Da die meisten Elemente in der Box auch nicht länger als eine Zeile sind, ist das ganz praktikabel. Aber wenn mal eine längere Zeile kommt, kann man sich damit natürlich das ganze Layout zerhauen. Bei 100% sollte der Inhalt nach Möglichkeit dann doch umgebrochen werden...

Hat jemand eine bessere Idee?

Gruß
Fredo

[Ingo Turski]

Hi,

Leider sind Block-Elemente ja per Voreinstellung über die ganze verfügbare Breite ausgedehnt.

warum nimmst Du dann kein inline-Element?

Ich habe jetzt mal eine Lösung ausprobiert, die mich aber noch nicht ganz befriedigt:

width: 10%;
overflow: visible;
white-space: nowrap;

Es ist Unsinn, die Breite von der zur Verfügung stehenden Fensterbreite abhängig zu machen, wenn es Dir um die Breite des Inhalts geht. "Dank" nowrap wird längerer Text dann auch die Box verlassen - jedenfalls in standardkonformen Browsrn.

Damit wird die Box auf die Breite ausgedehnt, die sie braucht

Nein. Nur in kaputten Browsern, die sich nicht an Dine Breitenangabe halten.

Hat jemand eine bessere Idee?

Nicht ohne konkretere Angaben zum Layout.

freundliche Grüße
Ingo

[Frederik]

Hallo,

gut, das mit der relativen Breitenangabe verstehe ich, war Blödsinn. Aber warum wird die Box durch overflow:visible nicht ausgedeht, wenn der Text breiter ist?

Also, ich schildere mal konkret, worum es geht:

Ich habe eine Playlist mit Songtiteln. Die ist als ol angelegt. Die Liste soll eine andere Hintergrundfarbe erhalten, damit sie sich besser abhebt. Aber sie soll eben nicht über die ganze Breite gehen, sondern eben nur so breit sein, wie der längste Listeneintrag.

Hm, ich hoffe, jetzt ist klarer, worauf ich hinauswill...

Gruß
Fredo

[Daniel]

HI,

Hm, ich hoffe, jetzt ist klarer, worauf ich hinauswill...

dann lass die width angabe weg. dann wird das i.d.R. so gemacht wie du es willst

MfG

[Gunther]

Hallo Fredo,

gut, das mit der relativen Breitenangabe verstehe ich, war Blödsinn.

das kann man so pauschal auch nicht sagen...

Aber warum wird die Box durch overflow:visible nicht ausgedeht, wenn der Text breiter ist?

Weil laut CSS 2 Spec overflow wiefolgt spezifiziert ist:
[Zitat]Diese Eigenschaft gibt an, ob der Inhalt eines Elements auf Blockebene abgeschnitten wird, wenn er über die Box des Elements (die als umschließender Block für den Inhalt dient) hinausgeht.[/Zitat]

Und für den Wert 'auto':
[Zitat]Das Verhalten des Werts 'auto' ist vom Benutzerprogramm abhängig, sollte aber veranlassen, dass für überlaufende Boxen ein Mechanismus zum Scrolling bereitgestellt wird.[/Zitat]

und nicht, dass die Box in ihrer Größe verändert wird!

Also, ich schildere mal konkret, worum es geht:

Ich habe eine Playlist mit Songtiteln. Die ist als ol angelegt. Die Liste soll eine andere Hintergrundfarbe erhalten, damit sie sich besser abhebt. Aber sie soll eben nicht über die ganze Breite gehen, sondern eben nur so breit sein, wie der längste Listeneintrag.

Und warum können/dürfen/sollen Listeneinträge nicht umbrechen? So lange Wörter (Zeichenketten) wie bspw. in URIs kommen doch in Songtiteln selten vor, oder?

Prinzipiell hast du 2 Möglichkeiten (wie fast immer im Leben): Entweder du gibst eine (feste/ relative) Größe für eine Box vor, oder nicht. In letzterem Fall wird die Block-Box gemäß dem Box Model und dem visuellen Formatierungsmodell ausgelegt (wobei noch etliche andere Faktoren eine Rolle spielen). Vereinfacht ausgedrückt heißt das: Die Box erzeugt eine neue Zeile und nimmt horizontal sämtlichen zur Verfügung stehenden Raum ein.

Hm, ich hoffe, jetzt ist klarer, worauf ich hinauswill...

Ehrlich gesagt hoffe ich das umgekehrt jetzt auch.

Gruß
Fredo

Gruß Gunther

[Frederik]

Hallo Gunther,

Weil laut CSS 2 Spec overflow wiefolgt spezifiziert ist:
[Zitat]Diese Eigenschaft gibt an, ob der Inhalt eines Elements auf Blockebene abgeschnitten wird, wenn er über die Box des Elements (die als umschließender Block für den Inhalt dient) hinausgeht.[/Zitat]

Ja, hatte ich nicht mehr so genau auf dem Schirm, danke!

Und warum können/dürfen/sollen Listeneinträge nicht umbrechen? So lange Wörter (Zeichenketten) wie bspw. in URIs kommen doch in Songtiteln selten vor, oder?

Naja, zur Not dürfen die schon umbrechen. Aber es wäre halt netter gewesen, wenn sie erst mal den verfügbaren Raum einnehmen, bevor sie das tun.

Prinzipiell hast du 2 Möglichkeiten (wie fast immer im Leben): Entweder du gibst eine (feste/ relative) Größe für eine Box vor, oder nicht.

Das hatte ich befürchtet. Ich glaube, das ist das erste Mal, dass ich etwas in CSS nicht so umsetzen kann, wie ich gerne würde :-( Dann werde ich mich wohl für die vorgegebene Breite entscheiden, aber die optimale Lösung finde ich das nicht. Vom technischen Stand verstehe ich jetzt auch, warum was geht oder eben nicht. Aber eigentlich ist mein Wunsch doch nicht so ungewöhnlich, oder?

Na gut, trotzdem vielen Dank!

Fredo

[Ingo Turski]

Hi,

Aber warum wird die Box durch overflow:visible nicht ausgedeht, wenn der Text breiter ist?

visible ist ohnehin die Voreinstellung und besagt, daß der Text über die Boxgrenze hinaus gehen darf.

Die Liste soll eine andere Hintergrundfarbe erhalten, damit sie sich besser abhebt. Aber sie soll eben nicht über die ganze Breite gehen, sondern eben nur so breit sein, wie der längste Listeneintrag.

Dann gebe der Liste eine zum längsten Punkt und zur Schriftgröße passende Breite. Als Einheit solltest Du em verwenden - auch für die Schriftgröße.

freundliche Grüße
Ingo

[Frederik]

Hallo Ingo,

Dann gebe der Liste eine zum längsten Punkt und zur Schriftgröße passende Breite. Als Einheit solltest Du em verwenden - auch für die Schriftgröße.

Dann kann ich aber nicht das selbe Stylesheet für verschiedene Dateien verwenden. Und auch generell würde damit ja leider auch wieder die Trennung von Inhalt und Layout durchbrochen - nur eben andersrum...

Gruß
Fredo

[Ingo Turski]

Hi,

Dann kann ich aber nicht das selbe Stylesheet für verschiedene Dateien verwenden. Und auch generell würde damit ja leider auch wieder die Trennung von Inhalt und Layout durchbrochen - nur eben andersrum...

wieso denn das? Du kannst doch Selektoren festlegen, z.B. eine ID für body oder eine Klasse für die ol und diese dann gezielt ansprechen.

freundliche Grüße
Ingo