Zwei relative Elemente in Tabellenzelle übereinanderlegen mit z-index, klappt nicht.

[Gutschy]

Hallo Leute;

hier mein Problem.
http://b481.de/test2/pizza_taxi.php

Die Idee ist, das Adblock Nutzer anstelle der ausgeblendeten Banner den Text zu lesen bekommen. Leider schaffe ich es nicht.

Natürlich ist mir klar wie das ganze mit "absolute" zu machen wäre, aber das finde ich unpraktisch. Habe jetzt einiges erfolglos herumprobiert und gesucht, am ehesten kommt glaube ich das meinem Problem nahe:
http://www.php.de/html-usability-und...d-z-index.html

Aber ich konnte die Lösung nicht nachvollziehen. Tja...

Hier das CSS:

/*Grafikbanner innerhalb der Tabelle*/

tr.relative {
    z-index: 0;
    position: relative;
    top:0px;
    left: 0px;
}


#tabbanner {
    z-index: 50;
    position: relative;
    top:0px;
    left: 0px;
    margin: 0px;    
}

#bannertable {
    z-index: 10;
    position: relative;
    top:0px;
    left: 0px;
    margin: 0px;
    background-color:#F0F0F0; border: #FFFFFF; border-style: solid;
    font-size: 16px;
    border-width: 1px 1px 0px 1px;
    
}

Und hier der Seitenteil:

<tr class="relative">
      <td colspan="6" rowspan="1"
 style="vertical-align: top; height: 1px; width: 1px;">
 
      <div id="tabbanner"><a href="speika-ems-la-piazza/seite9.php"
 target="_blank" class="test"><img src="werbung/la_piazza/la_piazza.png"
 alt="la piazza"></a> </div>
 
 
 
      <div id="bannertable">
      <table class="bannertable"
 style="text-align: left; height: 150px; width: 1000px;" border="1"
 cellpadding="0" cellspacing="0">
        <tbody>
          <tr>
            <td class="bannertable" colspan="1" rowspan="1"
 style="vertical-align: top;">Sehr
geeherter
Nutzer
von Adblock, mir ist v&ouml;llig verst&auml;ndlich das
Sie dieses Programm benutzen, ich als Programmierer dieser Seite nutze
es auch um so einigerma&szlig;en vor dem Werbeterror gesch&uuml;tzt zu
sein.<br>
            </td>
          </tr>
          <tr>
            <td class="bannertable" colspan="1" rowspan="1"
 style="vertical-align: top;">Ich
m&ouml;chte
Sie
aber
bitten f&uuml;r diese Seite eine Ausnahme zu
machen,
weil in diesem Moment teilweise zeitlich begrenzte Pizza-Sonderaktionen
vor Ihnen verborgen bleiben
und das kann nicht in Ihrem interesse liegen.<br>
Darum bitte ich Sie oben rechts in Ihrem Browser da Adblock Symbol zu drücken und diese Seite von Adblock auszunhemen.<br>

            </td>
          </tr>
          <tr>
          </tr>
        </tbody>
      </table>
      </div>
      </td>
    </tr>
    
<tr class="relative">

      <td colspan="6" rowspan="1"
 style="vertical-align: top; height: 1px; width: 1px;">
 
      <div id="tabbanner"><a href="speika-ems-la-piazza/spezial.php"
 target="_blank" class="test"><img
 src="werbung/spezial_la_piazza/spezial_la_piazza3.png" alt="lo canta"></a>
      </div>
      
      
<div id="bannertable">
      <table class="bannertable"
 style="text-align: left; height: 150px; width: 1000px;" border="1"
 cellpadding="0" cellspacing="0">
        <tbody>
          <tr>
            <td class="bannertable" colspan="1" rowspan="1"
 style="vertical-align: top;">Sehr
geeherter
Nutzer
von Adblock, mir ist v&ouml;llig verst&auml;ndlich das
Sie dieses Programm benutzen, ich als Programmierer dieser Seite nutze
es auch um so einigerma&szlig;en vor dem Werbeterror gesch&uuml;tzt zu
sein.<br>
            </td>
          </tr>
          <tr>
            <td class="bannertable" colspan="1" rowspan="1"
 style="vertical-align: top;">Ich
m&ouml;chte
Sie
aber
bitten f&uuml;r diese Seite eine Ausnahme zu
machen,
weil in diesem Moment teilweise zeitlich begrenzte Pizza-Sonderaktionen
vor Ihnen verborgen bleiben
und das kann nicht in Ihrem interesse liegen.<br>
Darum bitte ich Sie oben rechts in Ihrem Browser da Adblock Symbol zu drücken und diese Seite von Adblock auszunhemen.<br>
            </td>
          </tr>
          <tr>
          </tr>
        </tbody>
      </table>
      </div>

      </td>
    </tr>

Sorry für dem Spaghetti Code

Gruss,

Gutschy

[th2409]

Aus meiner Sicht kannst Du nicht zwei relativ zueinander positionierte Element übereinander legen, da sie im selben Textfluss sind und -anders als bei absoluter Positionierung- nicht daraus gelöst werden. Der z-Index bringt nur was, wenn Elemente in ihrer "Stapel-Reihenfolge" getauscht werden müssen, und das ist hier nebensächlich, da die Stapel-Elemente nicht übereinander liegen.

Wie wäre es denn, wenn Du das Banner als CSS-Hintergrundbild vereinbaren würdest? Dann brauchst Du keinen "Ersatztext", der an Stelle des geblockten Bildes erscheinen muss. Allerdings solltest Du "obendrauf", sozuagen als Inhalt, ein zu verlinkendes Element legen. Das geht auf verschiedene Art, am Ende kann's sogar ein transparentes GIF von der Größe des Banners sein.

[Gutschy]

Hi Thomas,

dein Ansatz ist auf jedem Fall interessant. Aber mir fällt auf Anhieb nicht ein wie ich Adblock daran hindern soll das transparente GIF zu blocken. Wenn du mir dafür eine Lösung bringen könntest??

MfG,

Gutschy

[th2409]

An irgendeiner Stelle muss man einen Kompromiss eingehen. Blockt Dein Adblock wirklich jedes Bild (was nicht mal als Popup erzwungen wird!) auf einer x-beliebigen Website- und das zudem nicht von einer "bekannten" Werbungsseite kommt? Das Internet-Leben ist ohne Bilder nur halb so interessant, keiner schaltet sich alle Bilder aus (andere Gründe mal außen vorgelassen).
Das transparente GIF bietet normalerweise keinen Grund, sich auf die Blockliste setzen zu lassen.

Im Grunde kann man auch statt des GIFs einen Text-Link setzen, der nicht mit seinem Text sichtbar ist. Kriegt man über CSS text-indent hin. Den Textlink muss man als Block definieren und in seiner Größe width/height festsetzen. Ein bisschen testen, damit auch der Kamerad IE6 was davon hat, und "title" im Tag setzen, damit auch (evtl freiwillig) CSS-Unfähige was sehen.

[Gutschy]

Hmm... also ich werde das mal Heute und Morgen austesten. Das mit dem transparentem GIF wird glaube ich nicht funktionieren, aber an einen unsichtbaren Textlink habe ich noch nie gedacht, hört sich gut an.

Adblock geht nicht gegen meine Header Grafik oder die Speisekarten vor, aber gegen alles was nach Werbung aussieht. IE6 und IE7 lasse ich links liegen, ist zwar irgendwie gegen die Webdesigner Ehre aber so ein richtiger Webdesigner bin ich dann wohl eher nicht.

[Gutschy]

Ich hab es ja schon vor zwei Stunden geahnt, warum sollte Adblock intern verlinkte Grafiken blocken, ganz einfach, weil in der Pfadangabe der Ordner Werbung vorgekommen ist. Den Ordner umbenannt, Pfade angepasst und alles Prima. Tja..... hätte ich das mal eher gewusst.

Aber das mit dem Blindtext werde ich noch ausprobieren.