background durchsichtig machen

[KFlash]

Hallo,

folgedes Problem habe ich (zur Veranschaulichung: http://www-user.tu-chemnitz.de/~flke/bgFehler.jpg ):

Eine <table> der Klasse="A" weißt per CSS allen <th> ein Hintergrundbild zu.
Eine der <th> enthält eine weitere Tabelle mit 3 Spalten. Diese 3spaltige Tabelle hat nur eine Zeile. Diese eine Zeile besteht nur aus <th>.

In der mittleren der 3 Spalten ist eine Combobox.

Wenn die umgebende <th> (die welche die 3 spaltige tabelle enthält) an höhe zulegt, passen die Hintergrundbilder der 3inneren und der umgebenen <th> nicht mehr zusammen. Folge ist ein unschöner rand. (siehe Bild. Die untere der 3 Zeilen zeigt, wie es ohne Höhenveränderung aussieht.)

Mein Ziel ist, dass die Combobox immer im Zentrum der umgebenden <th> liegt (und dass bei Bedarf neben der Combobox der "!" Button eingeblendet werden kann).

Ich hatte bereits versucht den <th> der 3spaltigen Tabelle als style folgendes mitzugeben: style="background:transparent none;"

Leider führt dies dazu, dass man nicht nur durch das <th> der 3spaltigen Tabelle sondern auch durch das background-image der umgebenden <th> sehen kann. Man sieht dann die background-color der umgebenden <th>.

Ideal wäre es, wenn man durch die <th> der 3spaltigen Tabelle durch gucken kann, direkt auf das umgebende <th>.

Wie kann ich das erreichen?

[Gonzo]

Hallo,

deinen HTML-Aufbau habe ich nicht kapiert, nicht die Verschachtelung und auch nicht, was du mit den ganzen <th> willst, obwohl es nichts zu betiteln gibt  - aber das ist letztlich das übliche Chaos beim Tabellenlayout.

Den Aufbau aus dem Beispielbild solltest du jedenfalls erreichen können, indem du eine einzige Tabelle nimmst, pro Häkchen eine <td>-Zelle, die Zelleninhalte vertikal zentrierst und als Hintergrund ein einzelnes Bild einsetzt, das oben bündig anschliesst (background: url(bla) no-repeat #farbe top).

[KFlash]

Hallo,

deinen HTML-Aufbau habe ich nicht kapiert, nicht die Verschachtelung und auch nicht, was du mit den ganzen <th> willst, obwohl es nichts zu betiteln gibt  - aber das ist letztlich das übliche Chaos beim Tabellenlayout.

Den Aufbau aus dem Beispielbild solltest du jedenfalls erreichen können, indem du eine einzige Tabelle nimmst, pro Häkchen eine <td>-Zelle, die Zelleninhalte vertikal zentrierst und als Hintergrund ein einzelnes Bild einsetzt, das oben bündig anschliesst (background: url(bla) no-repeat #farbe top).

Dies ist leider (soweit ich deine Lösung verstanden habe) nicht möglich. Denn wie man sieht, kann bei bedarf ein "!" Button neben dem Häckchen eingeblendet werden. Die Checkboxen sollen trotzdem vertikal untereinander ausgerichtet bleiben. Ohne eine eingeschachtelte Tabelle geht das nicht.

PS: Du hast recht. Anstatt des <th> hätte ich auch eine klasse verwenden können (sollen).

[Steel]

Hi!

Dies ist leider (soweit ich deine Lösung verstanden habe) nicht möglich. Denn wie man sieht, kann bei bedarf ein "!" Button neben dem Häckchen eingeblendet werden. Die Checkboxen sollen trotzdem vertikal untereinander ausgerichtet bleiben. Ohne eine eingeschachtelte Tabelle geht das nicht.

Da dein komplettes Layout keine Tabellen benoetigt (keine enthalten sollte) trifft das auch auf dieses Detail zu.

PS: Du hast recht. Anstatt des <th> hätte ich auch eine klasse verwenden können (sollen).

Oder vernuenftig fomruliertes CSS in einer exterenen Datei vielleicht noch mit ein paar vergebenen IDs...

[Gonzo]

Den Aufbau aus dem Beispielbild solltest du jedenfalls erreichen können, indem du eine einzige Tabelle nimmst, pro Häkchen eine <td>-Zelle

Dies ist leider (soweit ich deine Lösung verstanden habe) nicht möglich. Denn wie man sieht, kann bei bedarf ein "!" Button neben dem Häckchen eingeblendet werden. Die Checkboxen sollen trotzdem vertikal untereinander ausgerichtet bleiben. Ohne eine eingeschachtelte Tabelle geht das nicht.

Du kannst entweder den Häkchen ohne ! einen entsprechend breiten Abstand rechts verpassen (padding- oder margin-right), damit dort der Platz frei bleibt, oder, falls nur die Häkchen in der Zelle horizontal zentriert erscheinen sollen und nicht Häkchen + ! bzw. Abstand, das ! mit position:absolute aus dem Layoutvorgang rausnehmen.

Probiere das mal, eines von den beiden sollte dir die zusätzliche Tabelle ersparen.

[KFlash]

Du kannst entweder den Häkchen ohne ! einen entsprechend breiten Abstand rechts verpassen (padding- oder margin-right), damit dort der Platz frei bleibt, oder, falls nur die Häkchen in der Zelle horizontal zentriert erscheinen sollen und nicht Häkchen + ! bzw. Abstand, das ! mit position:absolute aus dem Layoutvorgang rausnehmen.

Um das Umfeld noch etwas zu beschreiben. Der Code wird generiert (mittels JSPs).
Ziel ist, dass die Checkboxen zentriert und jeweils untereinander stehen und in dem Platz rechts davon bei Bedarf dieser Button eingeblendet werden kann.

Ich hab mir gerade nochmal die Positionierungsarten angesehen. Kann es sein, dass du statt "absolut" eher "relativ" meinst? Ich muss mal sehen ob das damit geht.

[Gonzo]

Du kannst entweder den Häkchen ohne ! einen entsprechend breiten Abstand rechts verpassen (padding- oder margin-right), damit dort der Platz frei bleibt, oder, falls nur die Häkchen in der Zelle horizontal zentriert erscheinen sollen und nicht Häkchen + ! bzw. Abstand, das ! mit position:absolute aus dem Layoutvorgang rausnehmen.

Ziel ist, dass die Checkboxen zentriert und jeweils untereinander stehen und in dem Platz rechts davon bei Bedarf dieser Button eingeblendet werden kann.

Aha, dann also die position:absolute-Version. Ohne lange drumherum zu reden, etwas Code zur Demonstration:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
<title></title>  
  
<style type="text/css">  
td,th {  
  border:1px solid #000;  
  text-align:center;  
}  
td span {  
  position:absolute;  
  border:1px solid red;  
}  
</style>  
  
</head>  
<body>  
  
<form>  
  <table>  
    <tr><th>Eine lange &Uuml;berschrift</th></tr>  
    <tr><td><input type="checkbox"></td></tr>  
    <tr><td><input type="checkbox"><span><img src="test.png" width="10" height="10"></span></td></tr>  
    <tr><td><input type="checkbox"></td></tr>  
  </table>  
</form>  
  
</body>  
</html>

<span> um <img> herum ist nötig, um die vertikale Zentrierung des Bildes innerhalb der Zeile zu behalten, ohne kapselndes <span> hat die Grafik nur ihre eigene Höhe und rutscht ganz an den oberen Rand der Zelle. Zur Verdeutlichung habe ich dem <span> einen roten Rahmen gegeben.
Beachte, dass <span> zwar absolut positioniert wird, aber keine Koordinaten bekommt. Ohne left & Co. nutzt das Element die Koordinaten, an denen es normalerweise eingebettet worden wäre.

Eventuell musst du entweder den Tabellenzellen eine Mindestbreite geben, da die absolut positionierte Zusatzgrafik nicht nur keine Auswirkungen auf die Zentrierung des Häkchens hat, sondern auch auf die Breite der Tabellenzelle - die Zusatzgrafik fällt daher rechts aus der Zelle raus, sobald die Zelle zu schmal für beide Elemente wird.

Ich hab mir gerade nochmal die Positionierungsarten angesehen. Kann es sein, dass du statt "absolut" eher "relativ" meinst?

Nein, absolut ist schon richtig. Der Unterschied zwischen position:absolut und position:relative ist (unter anderem), dass bei relativer Positionierung das Element seinen Platz entsprechend des normalen Elementflusses reserviert bekommt und anschließend, so gewünscht, von dort aus verschoben wird. Alle Elemente drumherum benehmen sich daher, als wenn das relativ positionierte Element in normaler Form, ohne position:relative vorhanden wäre.
Bei absoluter Positionierung wird hingegen kein Platz reserviert, die umstehenden Elemente benehmen sich, als wäre das absolut positionierte Element überhaupt nicht vorhanden.

Macht man sich dieses Verhalten ohne jegliche Koordinatenangabe zu nutzen, erreicht man den von dir gewünschten Effekt, nämlich dass das Zusatzelement keinen Einfluss auf die Zentrierung der immer vorhandenen Kernelemente hat.

[KFlash]

Habe das Problem lösen können.

Und zwar war der ansatz mit background-color:transparent schon richtig. Worauf hier (und ich schließ mich da nicht aus) niemand gekommen war ist, dass das nicht nur bei den Zellen sondern auch bei der tabelle auf transparent gestellt werden muss.

Also
<th valign="middle">
   <table class="test" style="table-layout: fixed;background-color:transparent;" border="0" cellpadding="0" cellspacing="0" width="100%">
   <tbody><tr>
      <th width="100%" style="background-color:transparent;">
      </th>
      <th width="100%" style="background-color:transparent;">
         <input name="auswGruppe" value="A#82940043" checked="true" onclick="ausstSelect()" type="checkbox">
      </th>
      <th width="100%" style="background-color:transparent;">
         <a href='javascript:konfliktBeheben("A#82940043")'>
            <img src="/res/img/icons/problembehandlung.png" alt="problem behandeln" title="Klicken um ..." border="0">          </a>
      </th>
   </tr></tbody>
   </table>
</th>
<th>
   <input disabled="disabled" type="checkbox">
</th>