Positionsrahmen im IE

[SiDeu]

Hallo kann mir jemand helfen und sagen wie ich den Positionsrahmen (der graue gepunktete Rahmen wenn mann ein div anklickt) im IE wegbekomme ?

 

[threadi]

Das geht per CSS-Eigenschaft opacity. Ich würde jedoch abraten das zu verwenden, da Du durch die Abschaltung dieser Punktlinie einem Nutzer, der per Tab-Taste durch die Webseiten navigiert oder irgendein Hilfsprogramm verwendet um eine Webseite zu betrachten, jede Chance nimmst sich auf der Seite zurecht zu finden.

Moderation: Verschoben von HTML zu CSS, da es um Gestaltung geht.

 

[SiDeu]

Kanns du mir vieleicht noch verraten wie ich opacity genau benutze? opacity: 0 ?

 

[threadi]

Oh, sorry, hatte mich glatt vertan bei der CSS-Eigenschaft. Ich meinte nicht opacity (das ist für Transparenz) sondern outline.

outline: 0;

Siehe auch: CSS/Properties/outline - W3C Wiki

 

[SiDeu]

outline: 0; hatte ich schon probiert funktioniert nicht!

 

[SiDeu]

#TK-Anlagen1 {
position: absolute;
top: 13%;
left: 48%;
outline: 0;
}


<div id="TK-Anlagen1">
<a href="TK-Anlagen1.html" target="AnzeigeFenster"> <img
src="../Buttons/TK-Anlagen1.jpg"
onmouseover="this.style.borderColor='red';"
onmouseout="this.style.borderColor='#292643';"
onclick="this.src ='../Buttons/TK-Anlagen2.jpg';" />
</a>
</div>

 

[threadi]

Die outline-Eigenschaft musst Du auf den Link beziehen, nicht das <div>.

Und verwende bitte Code-Tags wenn Du im Forum Quellcode zeigst.

 

[SiDeu]

Verstehe ich irgendwie nicht richtig !
Der Link geht ins AnzeigeFenster aber der Link selbst ist ja eine html seite
wo muss ich dann die outline einbauen?

 

[threadi]

Dir ist offenbar noch nicht bewusst, dass man Links auch stylen kann.

a { outline: 0; }

Oder die ausführliche Variante um versehentliche Falschausgaben in manchen Browsern zu verhindern:

a:link, a:visited,a:hover,a:active,a:focus { outline: 0; }

 

[SiDeu]

Danke !
jetzt ist es klar habe es hinbekommen nochmals Danke!

 

[SiDeu]

Morgen threadi!
Habe es ja gestern hinbekommen mit a:hover...
auf die jeweiligen Links habe ich es auch hinbekommen mit A.ITDokumentation:link {}
im firefox funktioniert es aber immer noch nicht !

[I][SIZE=2][COLOR=#3f7f7f][SIZE=2][COLOR=#3f7f7f]#Kontakt
[/COLOR][/SIZE][/COLOR][/SIZE][/I][SIZE=2] {[/SIZE]
[SIZE=2]
    
[/SIZE][SIZE=2][COLOR=#7f007f][SIZE=2][COLOR=#7f007f]position[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]: [/SIZE][I][SIZE=2][COLOR=#2a00e1][SIZE=2][COLOR=#2a00e1]absolute[/COLOR][/SIZE][/COLOR][/SIZE][/I][SIZE=2];[/SIZE]
[SIZE=2]
    
[/SIZE][SIZE=2][COLOR=#7f007f][SIZE=2][COLOR=#7f007f]top[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]: [/SIZE][I][SIZE=2][COLOR=#2a00e1][SIZE=2][COLOR=#2a00e1]17.5%[/COLOR][/SIZE][/COLOR][/SIZE][/I][SIZE=2];[/SIZE]
[SIZE=2]
    
[/SIZE][SIZE=2][COLOR=#7f007f][SIZE=2][COLOR=#7f007f]left[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]: [/SIZE][I][SIZE=2][COLOR=#2a00e1][SIZE=2][COLOR=#2a00e1]87%[/COLOR][/SIZE][/COLOR][/SIZE][/I][SIZE=2];[/SIZE][SIZE=2]
[/SIZE][SIZE=2]
[/SIZE][SIZE=2]
}[/SIZE]

[B][SIZE=2][COLOR=#3f7f7f][SIZE=2][COLOR=#3f7f7f]A
[/COLOR][/SIZE][/COLOR][/SIZE][/B][SIZE=2][COLOR=#3f7f7f][SIZE=2][COLOR=#3f7f7f][I].ITDokumentation:link[/I]
[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2] {[/SIZE]
[SIZE=2]
    
[/SIZE][SIZE=2][COLOR=#7f007f][SIZE=2][COLOR=#7f007f]color[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]: [/SIZE][I][SIZE=2][COLOR=#2a00e1][SIZE=2][COLOR=#2a00e1]red[/COLOR][/SIZE][/COLOR][/SIZE][/I][SIZE=2];[/SIZE]
[SIZE=2]
    
[/SIZE][SIZE=2][COLOR=#7f007f][SIZE=2][COLOR=#7f007f]text-decoration[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]: [/SIZE][I][SIZE=2][COLOR=#2a00e1][SIZE=2][COLOR=#2a00e1]none[/COLOR][/SIZE][/COLOR][/SIZE][/I]
[I][SIZE=2][COLOR=#2a00e1][SIZE=2][COLOR=#2a00e1]
[/COLOR][/SIZE][/COLOR][/SIZE][/I][SIZE=2]}


[/SIZE][B][SIZE=2][COLOR=#3f7f7f][SIZE=2][COLOR=#3f7f7f]A
[/COLOR][/SIZE][/COLOR][/SIZE][/B][SIZE=2][COLOR=#3f7f7f][SIZE=2][COLOR=#3f7f7f][I].ITDokumentation:visited[/I]
[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2] {[/SIZE]
[SIZE=2]
    
[/SIZE][SIZE=2][COLOR=#7f007f][SIZE=2][COLOR=#7f007f]color[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]: [/SIZE][I][SIZE=2][COLOR=#2a00e1][SIZE=2][COLOR=#2a00e1]white[/COLOR][/SIZE][/COLOR][/SIZE][/I][SIZE=2];[/SIZE]
[SIZE=2]
    
[/SIZE][SIZE=2][COLOR=#7f007f][SIZE=2][COLOR=#7f007f]text-decoration[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]: [/SIZE][I][SIZE=2][COLOR=#2a00e1][SIZE=2][COLOR=#2a00e1]none[/COLOR][/SIZE][/COLOR][/SIZE][/I]
[I][SIZE=2][COLOR=#2a00e1][SIZE=2][COLOR=#2a00e1]
[/COLOR][/SIZE][/COLOR][/SIZE][/I][SIZE=2]}


[/SIZE][B][SIZE=2][COLOR=#3f7f7f][SIZE=2][COLOR=#3f7f7f]A
[/COLOR][/SIZE][/COLOR][/SIZE][/B][SIZE=2][COLOR=#3f7f7f][SIZE=2][COLOR=#3f7f7f][I].ITDokumentation:active[/I]
[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2] {[/SIZE]
[SIZE=2]
    
[/SIZE][SIZE=2][COLOR=#7f007f][SIZE=2][COLOR=#7f007f]color[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]: [/SIZE][I][SIZE=2][COLOR=#2a00e1][SIZE=2][COLOR=#2a00e1]none[/COLOR][/SIZE][/COLOR][/SIZE][/I][SIZE=2];[/SIZE]
[SIZE=2]
    
[/SIZE][SIZE=2][COLOR=#7f007f][SIZE=2][COLOR=#7f007f]text-decoration[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]: [/SIZE][I][SIZE=2][COLOR=#2a00e1][SIZE=2][COLOR=#2a00e1]none[/COLOR][/SIZE][/COLOR][/SIZE][/I]
[I][SIZE=2][COLOR=#2a00e1][SIZE=2][COLOR=#2a00e1]
[/COLOR][/SIZE][/COLOR][/SIZE][/I][SIZE=2]}


[/SIZE][B][SIZE=2][COLOR=#3f7f7f][SIZE=2][COLOR=#3f7f7f]A
[/COLOR][/SIZE][/COLOR][/SIZE][/B][SIZE=2][COLOR=#3f7f7f][SIZE=2][COLOR=#3f7f7f][I].ITDokumentation:hover[/I]
[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2] {[/SIZE]
[SIZE=2]
    
[/SIZE][SIZE=2][COLOR=#7f007f][SIZE=2][COLOR=#7f007f]color[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]: [/SIZE][I][SIZE=2][COLOR=#2a00e1][SIZE=2][COLOR=#2a00e1]red[/COLOR][/SIZE][/COLOR][/SIZE][/I][SIZE=2];[/SIZE]
[SIZE=2]
    
[/SIZE][SIZE=2][COLOR=#7f007f][SIZE=2][COLOR=#7f007f]text-decoration[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]: [/SIZE][I][SIZE=2][COLOR=#2a00e1][SIZE=2][COLOR=#2a00e1]none[/COLOR][/SIZE][/COLOR][/SIZE][/I]
[I][SIZE=2][COLOR=#2a00e1][SIZE=2][COLOR=#2a00e1]
[/COLOR][/SIZE][/COLOR][/SIZE][/I][SIZE=2]}


[/SIZE][B][SIZE=2][COLOR=#3f7f7f][SIZE=2][COLOR=#3f7f7f]A
[/COLOR][/SIZE][/COLOR][/SIZE][/B][SIZE=2][COLOR=#3f7f7f][SIZE=2][COLOR=#3f7f7f][I].ITDokumentation:focus[/I]
[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2] {[/SIZE]
[SIZE=2]
    
[/SIZE][SIZE=2][COLOR=#7f007f][SIZE=2][COLOR=#7f007f]outline[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]: [/SIZE][I][SIZE=2][COLOR=#2a00e1][SIZE=2][COLOR=#2a00e1]0[/COLOR][/SIZE][/COLOR][/SIZE][/I][SIZE=2];[/SIZE]
[SIZE=2]
}
[/SIZE]

<
divid="Kontakt">

            
<ahref="formular2.html"target="AnzeigeFenster"><img

                
src="../Buttons/TK-Anlagen1.jpg"onclick="this.src ='../Buttons/TK-Anlagen2.jpg';"/>
</
a>

		
</div>

 

[threadi]

Du hast die Eigenschaft ja nur bei focus gesetzt - mach es einfach mal bei allen o.g. Pseudoklassen.

 

[SiDeu]

ich hab do bei a:link, a:visited,a:hover,a: eigenschaften gesetzt nur bei a:focus nicht und a:active

 

[djheke]

   a:active , a:focus {     outline:none;        color:#aaa; /* Nur als Beispiel */   }

So funktioniert's auch im FF. Übrigens reicht :active und :focus aus. Bei :hover und :visited erscheinen keine gestrichelten Linien.

 

[SiDeu]

Funktioniert nur bei text! aber egal war nur ne idee von mir!
aber warum sagen alle divs sind schlecht lieber mit padding arbeiten !
verstehe ich nicht divs sind doch präzise und gut !????

 

[threadi]

Es kommt nicht drauf an was präzise ist oder gut aussieht - im Quellcode repräsentiert ein <div> ein semantisch bedeutungsloses Element, welches einzig für Gruppierung von Elementen genutzt werden sollte. Und selbst das nur sehr sparsam. Wenn eine Webseite nur aus <div> besteht, dann haben die darin stehenden Inhalte aus Sicht von Suchmaschinen keine Bedeutung da sie nicht semantisch ausgerichtet sind. Daher schreibt man auch Überschriften in die <hx>-Elemente, Texte in Absätze etc.

Bei HTML5 ist das noch eindeutiger geregelt. Hier gibt es <header> und <footer> zur Gruppierung von Elementen die ober- und unterhalb des eigentlichen Content-Bereiches liegen und drücken somit semantisch auch eben dies aus.