nicht angemeldet
Nur Fuchs: 'n Link nicht anklickbar. Validator findet nichts.
Hi Selfer, ;-)
ich arbeite seit gestern an meiner neuen Homepage und schon gibt es das erste Problem, das seltsamerweiße ned den Explorer, sonder nur den Fuchs (getestet mit Version 3).
Ich habe gleich einmal validiert, doch der Validator findet nichts (außer das ich mit die HTML-Variante noch ned ausgesucht hab' ;-) ).
Meine Webseite ist Dreivierteltransparent, aber dies dürfte nicht damit zu tun haben, denn wenn man den Link auf eine andere Position legt, funktioniert er. Am ehesten liegt es mit dem Floatbefehl (float:right;), den ich mit CSS auf den Link gelegt habe. Doch selbst wenn ich den Link in nen Divcontainer packe und den Container und nicht das <A>-Kind floate, funktioniert der Link nicht. Und auch an den ASCII-Leerzeichen davor liegt es nicht. Ich bin am Ende meiner Weisheiten mit unserem bösen Fox. :-((((
Aber seht selbst:
CSS:
#transbox {margin:50px;background:url(transparent.png);border:1px solid black;}
#transbox div#body {color:black;filter:alpha(opacity=100);position:relative;}
div#header {background:lime url(navi_out3.jpg);}
/* <<<< Transparenter PNG-Hintergrund */
div#header ul {font-size:16px;margin:0;padding:0;padding-left:10px;position:relative;}
div#header ul li {display:inline;list-style:none;}
div#header ul li a {font-weight:bold;color:#7EA800;text-decoration:none;} /* <<<< Navigation */
div#header a#title {font-size:16px;margin-right:20px;position:relative;color:black;
display:block;font-weight:bold;text-decoration:none;} /* <<<< Das Problemkind :-(((( */
div#txt {clear:both;padding:10px 23px;}
/* [...] */
div#footer {text-align:center;}
Explorer-CSS (Conditional Comments):~~~css
#transbox {filter:alpha(opacity=75);background:white;height:1px;overflow:visible;} /* <<<< Filter für den Explorer (weil der ja noch keine Transparenzen in PNGs kennt und den dafür notwendigen Filter auch erst in der V. 6 bekommt, verwende ich nen OpacityAlphaFilter) */
Und HTML:~~~html
<div id="transbox">
<div id="body">
<div id="header">
<a href="ZIEL" id="title"> Linktext</a> <!-- <<<< Das ist der Problemlink -->
<ul>
<li>.:<a href="?kategorie=news&size=min">Menüpunkte</a></li>
</ul>
</div>
<div id="txt">
Text</div>
<div id="footer">Futter ;-)</div>
</div>
</div>
Eine Onlinetestversion kommt gleich.
lg
---THE---
S T E L L
-
Selfer,
ich habe mich vertan:
Dies ist nicht der Transparente Hintergrund, ...div#header {background:lime url(navi_out3.jpg);}...sonder dies:
#transbox {margin:50px;background:url(transparent.png);border:1px solid black;}Sorry,
---THE---
S T E L L -
Hi Selfer, ;-)
[...]
Eine Onlinetestversion kommt gleich.lg
---THE---
S T E L Lhi,
Hier ist die Testversion: http://funrooom.bplaced.net/halb_transparentforum.htmlthe stell
-
Hallo,
(außer das ich mit die HTML-Variante noch ned ausgesucht hab' ;-) ).
Was du schleunigst nachholen solltest! Andernfalls holen die Browser ihre Glaskugel heraus, statt sich an die Standards zu halten (und da die Glaskugeln von unterschiedlichen Herstellern sind...)
denn wenn man den Link auf eine andere Position legt, funktioniert er.
Hast du schon daran gedacht, dass er von einem anderen Element überdeckt sein könnte?
Am ehesten liegt es mit dem Floatbefehl (float:right;), den ich mit CSS auf den Link gelegt habe.
Ja, auch
Doch selbst wenn ich den Link in nen Divcontainer packe und den Container und nicht das <A>-Kind floate, funktioniert der Link nicht.
Richtig. Zwischen <div> und <a> gibt es, aus CSS-Sicht, auch keinen Unterschied.
Ich bin am Ende meiner Weisheiten mit unserem bösen Fox. :-((((
Sag doch nicht sowas :-(
So, und jetzt zu deinem Problem:
float:right sorgt dafür, dass dein Link am rechten Rand positioniert wird und die Liste in die gleiche Zeile rutschen kann. Was es aber nicht tut, ist eine Anpassung der Größe -> Die Liste nimmt weiterhin die volle Breite ein. Normalerweise ist das auch kein Problem, da sich der floatende Link ja über der Liste befindet und somit im Vordergrund angezeigt wird.
Nun sagt du ihm aber, er möchte doch bitte eine bestimmte "position" annehmen. Positionierte Elemente werden aber immer über "statischen" Elementen dargestellt.
Deshalb wird der Link durch die Liste überdeckt.
Lange Rede, kurzer Sinn. Du kannst entweder das position:relative bei der Liste entfernen, aber aber den Link nach oben befördern (ebenfalls position:relative und z-index).
Was den IE betrifft:
Er behandelt transparente Elemente anders als solche, die einen Hintergrund haben, weshalb der Link dort noch anklickbar ist. Würdest du der Liste eine Hintergrundfarbe verpassen, hättest du das Problem somit auch im IE.Eine Onlinetestversion kommt gleich.
Könntest du deine Beispielseite das nächste Mal bitte erst online stellen und dann den Thread (inkl. Link) eröffnen? Ich hätte ihn fast übersehen, weil es ja schon 2 Antworten gibt...
mfg. Daniel
-
(außer das ich mit die HTML-Variante noch ned ausgesucht hab' ;-) ).
Was du schleunigst nachholen solltest! Andernfalls holen die Browser ihre Glaskugel heraus, statt sich an die Standards zu halten (und da die Glaskugeln von unterschiedlichen Herstellern sind...)
Ja, werd ich machen.
denn wenn man den Link auf eine andere Position legt, funktioniert er.
Hast du schon daran gedacht, dass er von einem anderen Element überdeckt sein könnte?
Am ehesten liegt es mit dem Floatbefehl (float:right;) [...]
Ja, auch
[...]
Ich bin am Ende meiner Weisheiten mit unserem bösen Fox. :-((((
Sag doch nicht sowas :-(
Ja, haste recht, Gecko is ja die beste Energie und IE um Jahrtausende vorraus.
[...]
Lange Rede, kurzer Sinn. Du kannst entweder das position:relative bei der Liste entfernen, aber aber den Link nach oben befördern (ebenfalls position:relative und z-index).Was den IE betrifft:
Er behandelt transparente Elemente anders als solche, die einen Hintergrund haben, weshalb der Link dort noch anklickbar ist. Würdest du der Liste eine Hintergrundfarbe verpassen, hättest du das Problem somit auch im IE.Eine Onlinetestversion kommt gleich.
Könntest du deine Beispielseite das nächste Mal bitte erst online stellen und dann den Thread (inkl. Link) eröffnen? Ich hätte ihn fast übersehen, weil es ja schon 2 Antworten gibt...
Ja. K.
Tut mir Leid, dass ich mich jetzt so kurz fasse, aber ich hab schon ne lange Antwort geschrieben, diese wurde aber irgendwie vom Server verschluckt ;-) bzw. :-(((.
Und allerbesten Dank für deine Lösung. Sie funzt wie geschmiert. 10 thx.
stell
-