Hallo Community,

letzte Frage bezüglich meiner Probleme im Web

Ich habe ein DIV-Element, das dynamisch wächst, sieht ca so aus:

Also es handelt sich hierbei um eine Java Web / JSP Anwendung.

out.println("<td><div id='progressing' style=\"width:" + s.getProcent() + "%\"><h3>" + s.getProcent() + "%</h3></td>");

Wie ihr sehen könnt, wächst die Width mit der Funktion s.getProcent()! Diese div ist ein Teil einer Tabelle und ich will in der Tabelle immer Mittig die Prozentzahl anzeigen. Also es geht mehr oder weniger um eine Art Progressbar, dazu muss ich das aber auch ab und zu eben auf das DIV Element schreiben.

Wenn jemand einen anderen Vorschlag hat um ein Progressbar zu erstellen, gerne her damit! Ich kann aber leider nicht HTML5 einsetzen.

Das DIV hat keinen Bezugspunkt. Das Vaterelement(Hier: das TD) kann hier keine Angaben zu Höhe/Breite machen, da TDs recht dynamisch mit Inhalt umgehen.

Beispiel: 50% * (Höhe von nichts) = undefined.

Lösung:

Gib dem DIV ein Vater-Element mit definierter Breite/Höhe.. dann kann es sich daran anpassen und wird sich füllen.

out.println("<td>[COLOR="#FF0000"]<div style=\"width: 200px; height: 100px; display:inline-block;\">[/COLOR]<div id='progressing' style=\"width:" + s.getProcent() + "%\">[COLOR="#FF0000"]</div>[/COLOR]<h3>" + s.getProcent() + "%</h3></td>");

Bearbeitet 11. Juni 201510 j von Memento
Typo

Leider kann ich meinen Beitrag nicht mehr ändern, aber eins fällt mir noch auf/ein:

Versuche, falls irgend möglich, auf Tabellen als Designelement zu verzichten. Die waren nie für Design gedacht.. und zählen nach wie vor (nicht erst seit kurzem) als no-go.

Mit DIVs kann man genauso wunderbar strukturell arbeiten und hat nicht die Nachteile von Tabellen (ein Nachteil hast du ja schon selbst gefunden. )

Achja: Das von mir im oberen Beitrag eingefügte Vater-DIV sollte keine %-Angaben in Breite und Höhe haben, weil du dein Problem damit nur um eine Ebene verschiebst.