Div in Tabellen

[Bastian Schnitzler]

Sooo jetzt zeige ich nochmal wie wenig ich mit CSS umgehen kann...
Nachdem ich ueber Stunden von Americas Army-Spielen keine Loesung gefunden hatte, frage ich jetzt mal hier:
Ich generiere mit einer div-span-Verschachtelung automatisch einen Statusbalken, der so aussehen soll:
http://freshflesh.de/index.php?mode=test3&style=transform
schoen, gell?
naja, den will ich jetzt in meiner statistik in eine tabellen zeile einbauen, aber der browser setzt die divs immer aus der tabelle raus und uebereinander. Welche von tausen CSS-Eigenschaften, display, float, margin hilft mir? Ich werde wahnsinnig.
thx in advance,
Bastian

ps: so sieht die Statistik aus:
http://freshflesh.de/index.php?mode=statistics&style=transform

[MudGuard]

Hi,

naja, den will ich jetzt in meiner statistik in eine tabellen zeile einbauen, aber der browser setzt die divs immer aus der tabelle raus und uebereinander. Welche von tausen CSS-Eigenschaften, display, float, margin hilft mir? Ich werde wahnsinnig.

Hm. Laut Quelltext und laut DOM-Inspector liegen die divs zwischen zwei Tabellen.
Warum sollten sie also in einer Tabelle dargestellt werden?

cu,
Andreas

[Bastian Schnitzler]

Hm. Laut Quelltext und laut DOM-Inspector liegen die divs zwischen zwei Tabellen.

also ich bin der meinung, dass wird nur vom browser so dargestellt.
ich poste mal den php code:

<tr class="".$Counter->aCounter().""><td><img alt="" src="images/osicons/netbsd.gif" /></td><td>Net BSD</td><td>".$OS['NetBSD']."</td><td>".$OSProzent['NetBSD']." %</td><td>".bar($OSProzent['NetBSD'])."</td></tr>
<tr class="".$Counter->aCounter().""><td><img alt="" src="images/osicons/openbsd.gif" /></td><td>Open BSD</td><td>".$OS['OpenBSD']."</td><td>".$OSProzent['OpenBSD']." %</td><td>".bar($OSProzent['OpenBSD'])."</td></tr>
<tr class="".$Counter->aCounter().""><td><img alt="" src="images/osicons/linux.gif" /></td><td>Linux</td><td>".$OS['Linux']."</td><td>".$OSProzent['Linux']." %</td><td>".bar($OSProzent['Linux'])."</td></tr>
<tr class="".$Counter->aCounter().""><td><img alt="" src="images/osicons/unbekannt.gif" /></td><td>Unbekanntes OS</td><td>".$OS['UnbOS']."</td><td>".$OSProzent['UnbOS']." %</td><td>".bar($OSProzent['UnbOS'])."</td></tr>

also ist jetzt vielleicht ein bissl unuebersichtlich. auf jeden fall gib die funktion bar diese prozent bar aus. firefox gibt ja nicht den original quelltext an, sondern scheint diesen irgendwie zu vereinfachen und da sieht man sofort dass die prozent bars nicht in der tabelle dargestellt werden.

mfg,
Bastian

[daniel84]

Hallo Bastian Schnitzler,

firefox gibt ja nicht den original quelltext an, sondern scheint diesen irgendwie zu vereinfachen

_Gestern_ hättest du so etwas bringen sollen...

Gruss aus Luzern,
Daniel

[Bastian Schnitzler]

firefox gibt ja nicht den original quelltext an, sondern scheint diesen irgendwie zu vereinfachen

_Gestern_ hättest du so etwas bringen sollen...

ja aber mit php lass ich die divs doch in die spalten schreiben! also bei mir zeigt firefox nicht den original quelltext an :(
aber du koenntest mal schreiben, ob du ne loesung zu meinem problem siehst.
hier:
http://www.freshflesh.de/index.php?mode=test3
ist das div auch im quelltext in der tabelle...

[MudGuard]

Hi,

Hm. Laut Quelltext und laut DOM-Inspector liegen die divs zwischen zwei Tabellen.
also ich bin der meinung, dass wird nur vom browser so dargestellt.
ich poste mal den php code:

Also selbst unter Verwendung eines meiner Perl-Scripts, das wirklich NICHTS mit dem Quellcode tut, kommt folgendes an:
(Das könnte wesentlich übersichtlicher werden, wenn Du die gleichbleibenden Teile des CSS nicht für jedes div/span einzeln ausgibst, sondern Klassen verwendest)

</table><br /><div style="position: relative; border: 1px solid black; height: 15px; width: 100px;"><span style="position: absolute; margin-left: 0px; left: 0%; top: -1px; width: 99%; height: 15px; border-left: 1px solid black; border-top: 1px solid black; border-right: 1px solid white;border-bottom: 1px solid white;"></span><span style="position: absolute; left: 0px; top: 0px; width: 0%; height: 15px; background-color: #336699; background-image: url(images/bginputtransform.jpg);"></span><span style="position: absolute; left: 0px; top: -1px; width: 100%; height: 100%; color: #669999; font-size: 11;">0%</span></div>
[... noch einige weitere dieser divs ...]
<div style="position: relative; border: 1px solid black; height: 15px; width: 100px;"><span style="position: absolute; margin-left: 0px; left: 81%; top: -1px; width: 18%; height: 15px; border-left: 1px solid black; border-top: 1px solid black; border-right: 1px solid white;border-bottom: 1px solid white;"></span><span style="position: absolute; left: 0px; top: 0px; width: 81%; height: 15px; background-color: #336699; background-image: url(images/bginputtransform.jpg);"></span><span style="position: absolute; left: 0px; top: -1px; width: 100%; height: 100%; color: #669999; font-size: 11;">81%</span></div><table class="tablebig">

Wie man sieht, wird zuerst die Tabelle geschlossen. Dann kommt ein div mit einigen spans drin, das letzte span enthält den Prozentwert.
Das wiederholt sich einige Male, und nach dem letzten div wird wieder eine Tabelle geöffnet.

Kann es sein, daß die Beispielseite, die Du angegeben hast, nichts mit dem Problem zu tun hat?

cu,
Andreas

[Bastian Schnitzler]

Wie man sieht, wird zuerst die Tabelle geschlossen. Dann kommt ein div mit einigen spans drin, das letzte span enthält den Prozentwert.
Das wiederholt sich einige Male, und nach dem letzten div wird wieder eine Tabelle geöffnet.

Die Kinder Gottes sehen es aufgrund der Bibel auch bewiesen, dass nur sie bei einem bald eintreten Armageddon ueberleben werden. Ist dir schonmal aufgefallen, dass es zwei Tabellen gibt? du hast lediglich den endtag der ersten tabelle erwaehnt und den anfangstag der zweiten tabelle.
Die divs sollten eigentlich in der letzten Spalte der zweiten Tabelle stehen, allerdings wird der Quelltext vom Browser geaendert ausgegeben.

Nun nochmal der Aufbau der Layer: Ganz aussen ist ein div, was alles zusammenhaelt. Innen sind drei span-Tags, wobei der erste den Fortschritt anzeigt, der zweite den inset-Effekt simuliert und im letzten die Schrift steht.

Das div was alles beinhaltet laesst sich aber nicht in eine tabellen-spalte packen, warum???

mfg,
Bastian

[MudGuard]

Hi,

Wie man sieht, wird zuerst die Tabelle geschlossen. Dann kommt ein div mit einigen spans drin, das letzte span enthält den Prozentwert.
Das wiederholt sich einige Male, und nach dem letzten div wird wieder eine Tabelle geöffnet.

Die Kinder Gottes sehen es aufgrund der Bibel auch bewiesen, dass nur sie bei einem bald eintreten Armageddon ueberleben werden.

Keine Ahnung, was Du mit dem Religionsgedöns bewirken willst.

Ist dir schonmal aufgefallen, dass es zwei Tabellen gibt?

Du solltest das mit dem Zählen nochmal üben.
Es sind mehr als zwei Tabellen.
Das ändert aber nichts an der Tatsache, daß entgegen Deiner Behauptung, die divs würden innerhalb einer Tabelle stehen, die divs außerhalb der Tabelle stehen.

du hast lediglich den endtag der ersten tabelle erwaehnt und den anfangstag der zweiten tabelle.

Nein, den endtag der zweiten, Deine divs, die angeblich in einer Tabelle stehen sollen, dies aber nicht tun, und den starttag der dritten.

Die divs sollten eigentlich in der letzten Spalte der zweiten Tabelle stehen, allerdings wird der Quelltext vom Browser geaendert ausgegeben.

Wie gesagt: ich hab beim zweiten Test gar keinen Browser benutzt. Also kann auch kein Browser den Quelltext geändert ausgegeben haben.

cu,
Andreas