✔ [DIV + CSS + HTML] Verlinkung geht nicht immer

[Maik]

Hi,

vielleicht hilft es weiter, wenn du in den einzelnen Pseudoklassen der Klasse link_format die width:100% herausnimmst, da du ja für jeden Link eine individuelle Breite in Pixeln definierst?

 

[bladich]

Guten Morgen

Hui, ist schon eine Zeit lang her.


Habe jedenfalls das mit der Breite versucht, genau das gleiche Problem.


http://morrigan.ch spinnt immer noch im FF und IE7.
Ich bin irgendwie am Ende es logisch erklären zu können.



Gruss

bladich

 

[Maik]

Hi,

dir kommt da scheinbar die text-indent:-10000em-Deklaration in die Quere.

Versuch es mal ohne sie und binde stattdessen den Linktext in ein span-Element, das mit display:none nicht angezeigt wird:

a.link_format{
        border: none;
        display: block;
        /*text-indent:-10000em;*/ /* auskommentiert = deaktiviert */
        z-index: 500;
        width: 100%;
        height: 100%;
}

a.link_format:link{
        border: none;
        display: block;
        /*text-indent:-10000em;*/ /* auskommentiert = deaktiviert */
        z-index: 500;
        width: 100%;
        height: 100%;
}

a.link_format:visited{
        border: none;
        display: block;
        /*text-indent:-10000em;*/ /* auskommentiert = deaktiviert */
        z-index: 500;
        width: 100%;
        height: 100%;
}

a.link_format:active{
        border: none;
        display: block;
        /*text-indent:-10000em;*/ /* auskommentiert = deaktiviert */
        z-index: 500;
        width: 100%;
        height: 100%;
}

a.link_format:hover{
        border: none;
        display: block;
        /*text-indent:-10000em;*/ /* auskommentiert = deaktiviert */
        z-index: 500;
        width: 100%;
        height: 100%;
}

a.link_format span { display:none; }

<a class="link_format" style="width: 90px; height: 30px;" href="/main/project"><span>Project</span></a>

 

[bladich]

Hallo

Super, das war es! =) Vielen herzlichen Dank!


Nur noch eine letzte Frage:

Jetzt habe ich einen kleinen "Rahmen" um den Link sobald ich drauf klicke, kriege ich den noch irgendwie weg?

CSS:

a.link_format{
        border: none;
        display: block;
        /*text-indent:-10000em;*/
        z-index: 500;
        text-decoration: none;
        width: 100%;
        height: 100%;
}

Das brachte so weit nichts. Dann hab ich dieses hier gefunden:

<a href="xyz.htm" onFocus="if (this.blur) this.blur();">
<b>XYZ-Link</b></a>

Funktioniert zwar ohne Probleme aber finde die Lösung nicht so sauber. Gibt es da vlt. noch etwas anderes?


Gruss und vielen Dank

Bladich

 

[Maik]

In den Gecko-Browsern (Firefox, Mozilla, Netscape, usw.) funktionert:

a { outline:none; }

Für alle anderen Browser wirst du auf onfocus="this.blur()" zurückgreifen müssen, oder du verwendest das folgende Script, das den Eventhandler onfocus in den Links überflüssig macht:

function BlurLinks(){
        lnks=document.getElementsByTagName('a');
        for(i=0;i<lnks.length;i++){
        lnks[i].onfocus=new Function("this.blur()");
        }
}

onload=BlurLinks;

 

[bladich]

Hallo


Ok, vielen Dank. Werde ich dann so einbauen.


Schönen Tag wünsche ich Dir noch und nochmals Danke.