Gonzo: background durchsichtig machen

Beitrag lesen

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.