Breite eines Bereichs (DIV) bestimmen

[ikarus1969]

Hallo liebe Forumsmitglieder! Eine kleine persönliche Herausforderung hat mich dazu bewegt, mich im SelfHTML-Forum anzumelden und auf Eure Hilfe zu hoffen.

Mein "Problem":
ich möchte ein DIV-Element, für das im STYLE-Attribut keine Angaben zu Width oder Height notiert sind auf quadratische Größe bringen.

Das DIV wird über ein Script mit Text (einer Reihe von Wörtern) gefüllt, die unterschiedlich lang und auch unterschiedlich groß sein können, was vorher nicht bekannt ist.

Nach der Befüllung möchte ich gerne die Breite und die Höhe des DIV auf denselben Wert setzen und zwar so, dass der Inhalt (die Wörter) alle sichtbar sind.

Einer meiner vergeblichen Versuche bestand daraus, für das DIV eben doch eine width- und eine height-Angabe im Style zu machen und zwar habe ich sie auf 1 gesetzt. Danach habe ich naiverweise gedacht ich kann mit "document.all.DIVELEMENT.width" bzw "document.all.DIVELEMENT.height" die echten Maße auslesen um damit weiterzurechnen. Leider sind in den Angaben nur die ursprünglichen Werte (1) zu erfahren und nicht die wirkliche Breite bzw. Höhe.

Weiss jemand Rat???

[Gunnar Bittersmann]

Hello out there!

ich möchte ein DIV-Element, für das im STYLE-Attribut keine Angaben zu Width oder Height notiert sind auf quadratische Größe bringen.
Das DIV wird über ein Script mit Text (einer Reihe von Wörtern) gefüllt, die unterschiedlich lang und auch unterschiedlich groß sein können, was vorher nicht bekannt ist.

Da verlangst du etwas zu viel DTP-Fähigkeiten von CSS und Browsern.

Du musst dir wohl einen Algorithmus überlegen, der im Text Zeilenumbrüche setzt.

Dann lässt die ihn anzeigen und sorgst bspw. mit 'float' dafür, dass die 'div'-Box nicht die ganze zur Verfügung stehende Breite einnimmt, sondern nur so viel, wie es die Zeilenlänge verlangt. Die Breite kannst du mit JavaScript auslesen ('offsetWidth') und der Höhe diesen Wert zuweisen.

See ya up the road,
Gunnar

[ikarus1969]

Hallo Gunnar!

Vielen Dank für Deine schnelle Antwort und für Deinen Tip mit offsetWidth.

Ich verwende jetzt folgenden "Workaround":

vermindere width um 1, solange offsetWidth > offsetHeight

Danach hat das DIV (fast) quadratische Ausmaße und ist für meinen Zweck genau das, was ich mir vorgestellt habe.

Nochmals Danke!

lg
Reinhart

Hello out there!

ich möchte ein DIV-Element, für das im STYLE-Attribut keine Angaben zu Width oder Height notiert sind auf quadratische Größe bringen.
Das DIV wird über ein Script mit Text (einer Reihe von Wörtern) gefüllt, die unterschiedlich lang und auch unterschiedlich groß sein können, was vorher nicht bekannt ist.

Da verlangst du etwas zu viel DTP-Fähigkeiten von CSS und Browsern.

Du musst dir wohl einen Algorithmus überlegen, der im Text Zeilenumbrüche setzt.

Dann lässt die ihn anzeigen und sorgst bspw. mit 'float' dafür, dass die 'div'-Box nicht die ganze zur Verfügung stehende Breite einnimmt, sondern nur so viel, wie es die Zeilenlänge verlangt. Die Breite kannst du mit JavaScript auslesen ('offsetWidth') und der Höhe diesen Wert zuweisen.

See ya up the road,
Gunnar