Tabellenzelle 0px breit.

[Stefan Link]

Hallo community,

mit der folgenden Tabelle möchte ich grafisch Darstellen, wie in einem Spiel der Zustand eines Wachturms ist. Dieser kann zwischen 0 - 100% zerstört sein. Leider wird die Tabellenzelle mit der Weitenangabe dennoch angezeigt (FF 2.0 / IE 7). Kann mir hier jemand einen Tipp geben, was ich falsch mache?

<table>
  <tr>
    <td style="height:10px;width:100px" bgcolor="#00cc00"  title="The tower is 100% undamaged." />
    <td style="height:10px;width:0px" bgcolor="#dd0000" title="The tower is 0% destroyed" />
  </tr>
</table>

Vielen Dank!
Stefan

[JürgenB]

Hallo Stefan,

<table>
  <tr>
    <td style="height:10px;width:100px" bgcolor="#00cc00"  title="The tower is 100% undamaged." />
    <td style="height:10px;width:0px" bgcolor="#dd0000" title="The tower is 0% destroyed" />
  </tr>
</table>

warum nimmst Du keine DIVs? Z.B. ein DIV mit rotem Hintergrund und gewünschter Breite in einem mit grünem und fester Breite, oder zwei SPANs nebeneinander.

Gruß, Jürgen

[Genie]

Hi

Als erstes würde ich dir auch <div>s empfehlen.

<td [...] />

http://de.selfhtml.org/html/xhtml/unterschiede.htm#leere_elemente:
Wenn Sie Elemente, die Inhalt haben können, ohne Inhalt verwenden, z.B. <p></p>, dann notieren Sie sie in XHTML jedoch besser in dieser Form und nicht in der Form <p />.

mfg
Genie

[Stefan Link]

Hi,

danke zunächst :) Ok, ich habe das Ganze nun mit divs versucht.

<div style="height:10px;width:50px;background-color:green;" title="The tower is 50% undamaged."></div>
<div style="height:10px;width:50px;background-color:red;" title="The tower is 50% destroyed"></div>

Ergibt zwei schöne Balken untereinander. Jetzt hätte ich die gerne nebeneinander und nehme daher:

<div style="height:10px;width:50px;background-color:green;display:inline;" title="The tower is 50% undamaged."></div>
<div style="height:10px;width:50px;background-color:red;" title="The tower is 50% destroyed"></div>

Ergebnis: nur ein roter Balken :( Ich habe hier mal ein bisschen herumgespielt:

http://tabea.second-home.org/Pages/Karten/file.php

Sorry, ich brauche nochmals einen Tipp :(

Grüße
Stefan

[JürgenB]

Hallo Stefan,

nur Blockelemente haben eine Breite. Abhilfe: float. Oder eben div in div, wobei das Innere schmaler ist als das Äußere und so der Hintergrund des Äußeren auch noch z.T. zu sehen ist.

Gruß, Jürgen

[MudGuard]

Hi,

nur Blockelemente haben eine Breite.

Falsch.
z.B. haben replaced inline Elemente eine Breite.

Non-replaced inline Elemente haben keine Breite.

cu,
Andreas

[Genie]

Hi

Könnte vielleicht daran liegen, dass die <div>s leer sind. Das hat bei mir gefunzt:

<style type="text/css">
#green
{
 width:50px; /* hier Breite des grünen Bereichs */
 height:1em;
 margin:0px;
 float:left;
 padding: 0px;
 background-color:red;
}
#red
{
 width:50px; /* hier Breite des roten Bereichs */
 height:1em;
 margin:0px;
 margin-left:50px; /* hier Breite des grünen Bereichs */
 padding: 0px;
 background-color:green;
}
</style>

<div id="green" title="...">&nbsp;</div>
<div id="red" title="...">&nbsp;</div>

mfg
Genie

[Genie]

Hab aus Versehen die Farben vertauscht. Außerdem hier neue Version:

  
<style type="text/css">  
[code lang=css]#status  
{  
 width:100px; /* Gesamtbreite */  
 padding:0px;  
}  
#green  
{  
 width:50%; /* hier Breite des grünen Bereichs in Prozent */  
 margin:0px;  
 height:1em;  
 float:left;  
 padding: 0px;  
 background-color:green;  
}  
#red  
{  
 width:50%; /* hier Breite des roten Bereichs in Prozent */  
 margin:0px;  
 height:1em;  
 float:right;  
 padding: 0px;  
 background-color:red;  
}

</style>

<div id="status">
<div id="green" title="...">&nbsp;</div>
<div id="red" title="...">&nbsp;</div>
</div>
[/code]

[Gunnar Bittersmann]

Hello out there!

<td [...] />
http://de.selfhtml.org/html/xhtml/unterschiede.htm#leere_elemente:
Wenn Sie Elemente, die Inhalt haben können, ohne Inhalt verwenden, z.B. <p></p>, dann notieren Sie sie in XHTML jedoch besser in dieser Form und nicht in der Form <p />.

Hier nicht nötig.

Die Kurzschreibweise kann dann verwendet werden, wenn ein Tag-Soup-Parser das Element auch ohne End-Tag schließt, also bei Elementen, bei denen das End-Tag in HTML 4.01 optional ist.

See ya up the road,
Gunnar