Gepunkteter Rahmen bei Links unter Firefox
Aktive und fokussierte Links bekommen unter’m Firefox automatisch einen grau gepunkteten Rahmen um das Element. In den meisten 
Fällen vielleicht praktisch, da viele Webdesigner vergessen diesen Pseudoelementen Werte zuzuweisen um sie von anderen Zuständen zu unterscheiden, aber in einigen Fällen sieht das nicht so schön aus.
Z. B. wenn Linkelemente aus gestalterischen Gründen aus Grafiken bestehen.
Die Rahmengestaltung kann man beeinflussen oder den Rahmen ganz weg bekommen, indem man der Pseudo-Klassen :focus und :active die selten benutzte Eigenschaft outline mit den bestimmten Werten zuweist.
Wenn es also ganz weg soll:
a:active, a:focus{outline: none}
Aber nicht vergessen focus und active optisch mit den anderen Zuständen zu unterscheiden. Sonst ist es nicht möglich zu erkennen auf welchem Element man gerade fokussiert ist, wenn man mit dem Tab arbeitet.
Verwandte Artikel
Zerob hat geschrieben:
Endlich^^, danke fuer diesen Tip! Funktioniert einwandfrei!
Jean hat geschrieben:
Hab ich nicht hinbekommen. Wo muss das den genau eingefuegt werden!
alican hat geschrieben:
In die CSS-Datei, hat eine .css als Endung.
Da dann in eine neue Zeile a:active, a:focus{outline: none} schreiben.
Jean hat geschrieben:
hey danke, allerdings arbeite ich mit rapid weaver und habe 4 moeglichkeiten der css datei (style.css slimbox.css videobox.css und nochmal auf jeder seite direkt in den Text. Ich tippe eigentlich auf die style.css. Wen ich es jedoch da reinhaue veraendert sich das komplette layout meiner Seite! ??????
alican hat geschrieben:
dann zeig mal deine style.css
Jean hat geschrieben:
Kommt anbei.
/***************************************************
Design by Michel Honold. http://www.designdifferent.org
***************************************************/
/* @group Global */
body {
text-align: center; background: #F4FDE5 url(‘images/body_bg.png’); margin-top:0px; margin-bottom:10px;}
A:link {
COLOR: #CC0033; text-decoration: none
}
A:visited {
COLOR: #336600; text-decoration: none
}
A:active {
COLOR: #336600; text-decoration: none
}
A:hover {
font-weight:bold; COLOR: #000033; text-decoration: underline
}
#content_wrapper {
margin-top:10px; margin-bottom:0px; margin-left:30px; margin-right:15px; clear:both;}
#right_side {
margin-top:5px; float: right; width:161px; border:0px dashed #333333;}
#right_side h3, .sidebar_title {
margin-top:0px; margin-bottom:10px; margin-left:0px; font-family: verdana, arial, sans-serif; font-size: 14px; color: #333333;}
#right_side {
margin-top:0px; margin-bottom:15px; font-family: verdana, arial, sans-serif; font-size: 11px; line-height: 16px;}
#left_side {
float: left; width:540px; border:0px}
#left_side{
margin-top:5px; margin-bottom:15px; font-family: verdana, arial, sans-serif; font-size: 12px; color: #333333; line-height: 18px; padding-left:4px;}
.image-left {
float: left; margin-right: 10px;}
.image-right {
float: right; margin-left: 10px;}
#feature_box, blockquote, code {
float:left; background-color: #F6FCEC; border:1px solid #AAE5A4; padding:10px; margin-top:10px; margin-bottom:5px; margin-right:8px;}
#feature_box h4 {
padding-left:5px; margin-top:0px; margin-bottom:5px; font-family: verdana, arial, sans-serif; font-size: 12px; color: #779E28;}
#feature_box p {
font-family: verdana, arial, sans-serif; font-size: 10px; color: #333333; line-height: 16px; margin-bottom:5px;}
#spacer {
height:20px; clear:both;}
#page_wrapper {
margin-left: auto; margin-right: auto; width: 760px; text-align: left; background: #FFFFFF url(‘images/content_bg.png’) top right repeat-y; border: 0px solid #018843;}
#page_picture {
height: 120px; background: #9ACD34 url(‘images/header.gif’) top right no-repeat; clear: both;}
#page_header h1 {
margin: 0px; padding-top:30px; padding-left:25px; font-family: verdana, arial, sans-serif; font-size:32px; font-weight: normal; letter-spacing: -1px; color: #99cc33;}
#page_header h2 {
margin: 0px; padding-left:25px; font-family: verdana, arial, sans-serif; font-size:13px; font-weight: normal; letter-spacing: 2px; color: #99cc33;}
#left_side h3, .blog-entry-title, .album-title, .movie-page-title{
font-weight: bold; margin-top:0px; margin-bottom:10px; font-family: verdana, arial, sans-serif; font-size: 18px; color: #333333; border-bottom: 1px solid #333333; clear:both;}
/* @end */
/* @group Footer */
#page_footer {
height: 31px; background: #336600 url(‘images/footer_bg.jpg’) top left repeat-x; clear: both;}
#page_footer p {
padding-top:6px; text-align: center; font-family: verdana, arial, sans-serif; font-size: 11px; color: #333333; letter-spacing:1px;}
#page_turnedfooter {
height: 31px; background: #336600 url(‘images/turnedfooter_bg.png’) top left repeat-x; clear: both;}
#page_turnedfooter p {
padding-top:6px; text-align: center; font-family: verdana, arial, sans-serif; font-size: 11px; color: #333333; letter-spacing:1px;}
/* @end */
/* @group Sidebar */
#sideMenu {
margin-top: -20px; margin-left: 10px; padding-left: 0; list-style: none;}
#sideMenu li {
display: inline;}
#sideMenu a{
display: none;
}
#sideMenu ul ul a {
margin-left: -80px; display: block; padding-left: 10px; background-repeat: no-repeat; background-position: 0 7px; font-family: verdana, arial, sans-serif; font-size: 11px; line-height:18px;}
/* @end */
/* @group Tag Cloud */
ul.blog-tag-cloud {
margin: 0 0 10px;
padding: 0;
text-align: justify;
}
ul.blog-tag-cloud li {
display: inline;
padding-right: 5px;
}
.blog-tag-size-1 {
font-size: 6px;
}
.blog-tag-size-2 {
font-size: 7px;
}
.blog-tag-size-3 {
font-size: 8px;
}
.blog-tag-size-4 {
font-size: 9px;
}
.blog-tag-size-5 {
font-size: 10px;
}
.blog-tag-size-6 {
font-size: 11px;
}
.blog-tag-size-7 {
font-size: 12px;
}
.blog-tag-size-8 {
font-size: 13px;
}
.blog-tag-size-9 {
font-size: 14px;
}
.blog-tag-size-10 {
font-size: 15px;
}
.blog-tag-size-11 {
font-size: 16px;
}
.blog-tag-size-12 {
font-size: 17px;
}
.blog-tag-size-13 {
font-size: 18px;
}
.blog-tag-size-14 {
font-size: 19px;
}
.blog-tag-size-15 {
font-size: 20px;
}
.blog-tag-size-16 {
font-size: 21px;
}
.blog-tag-size-17 {
font-size: 22px;
}
.blog-tag-size-18 {
font-size: 23px;
}
.blog-tag-size-19 {
font-size: 28px;
}
.blog-tag-size-20 {
font-size: 24px;
}
/* @end */
/* @group Blog */
.blog-entry-date {
font-weight: bold; margin-top:-10px; margin-bottom:10px; font-family: verdana, arial, sans-serif; font-size: 0.8em; color: #333333; padding:4px; clear:both;}
.blog-image-smiley{
margin-bottom: -6px;
}
.blog-entry-summary, .blog-entry-body{
line-height: 1.6em;
}
/* @end */
/* @group Filesharing */
.filesharing-item{
border: 0px solid #336600;
padding: 10px;
margin: 5px;
}
.filesharing-item:hover{
background: #efefef;
}
.filesharing-item-description{
margin-left: 1em;
}
/* @end */
/* @group Navigation */
#menu_bar ul {
margin-top: 0px; padding-left: 0px; margin-left: 0px; background: #336600; color: White; float: left; width: 100%; font-family: verdana, arial, sans-serif; font-size:14px; font-weight: bold;}
#menu_bar ul {
margin-top: 0px; padding-left: 0px; margin-left: 0px; background: #336600 url(‘images/menu_bg.jpg’) top left repeat-x; color: #000000; float: left; width: 100%; font-family: verdana, arial, sans-serif; font-size:14px; font-weight: bold;}
#menu_bar ul li { display: inline; }
#menu_bar ul li a
{
padding-top:5px; padding-bottom:5px; padding-left:15px; padding-right:15px; color: #333333; text-decoration: none; float: left; border-right: 0px solid #fff;}
#menu_bar ul li a:hover, #menu_bar #current
{
color: #336600;}
#menu_bar ul ul{
display:none;
}
/* @end */
/* @group Moviepage */
.movie-thumbnail-frame:hover{
font-weight: normal;
}
.movie-thumbnail-caption{
text-align: center;
}
.movie-page-description, .album-description, .filesharing-description{
padding: 5px;
margin-bottom: 5px;
}
.movie-thumbnail-frame{
float:left;
margin: 5px;
padding: 5px;
border: 0px solid #336600;
}
/* @end */
/* @group Photoalbum */
.photo-title, .movie-title{
font-weight: bold; margin-top:15px; margin-bottom:10px; font-family: verdana, arial, sans-serif; font-size: 18px; color: #333333; padding:4px; clear:both;}
.photo-caption, .photo-links{
font-family: verdana, arial, sans-serif;
font-size: 12px; color: #333333; line-height: 18px;}
.photo-frame{
padding: 10px;
border: 0px solid #333333;
}
.thumbnail-wrap{
text-align: center;
float:center;
margin: 5px;
padding: 10px;
padding-bottom: 15px;
border: 1px solid #336600;
}
.thumbnail-wrap:hover{
}
.thumbnail-frame{
padding:0px;
}
/* @end */
alican hat geschrieben:
mhh
Hier die Änderung
Habe nur was ab Zeile 13 bis 39 gemacht.
Jean hat geschrieben:
Sorry, bringt nichts. ganzes seitenlayout veraendert sich. Werde die bildlinks jetzt entfernen, der mist nervt nur. ersetze jetzt durch textlinks, da veraendert sich wenigstens nur die farbe.
Danke trotzdem.
jean
alican hat geschrieben:
Wenn ich die Seite online sehen könnte, würde ich den Fehler finden.
Jean hat geschrieben:
schau mal unter
www.xtrems.net/page19/index.html
hier steht noch n link von contact. der rahmen ums bild nervt, ebenso stimmen die Farben der linkschrift rechts nicht, die muesste rot sein.
jean
alican hat geschrieben:
Der Rahmen kommt aber von der Grafik, nicht dem Link.
Verschwindet mit:
.imageStyle{border:none}
oder border:none hinzufügen, wenn .imageStyle schon vorhanden ist.
Und wegen der grünen Schrift.
Ändere folgenden Eintag:
A:visited {
COLOR: #336600; text-decoration: none
}
so um:
A:visited {
COLOR: #CC0033; text-decoration: none
}
diese visited-Angabe gibt Links, die schon besucht worden sind, einen Stil. Da bei visited eine andere Farbe angegeben ist und du die Seiten schon besucht hast, sind sie bei dir auch alle grün.
Jean hat geschrieben:
Hey, es gibt noch licht am Horizont. Klappt, kaempfe noch mit 2 links bei der bestellung, dann gehts ans naechste. Irgendwo muss firefox was umwerfen. In meiner Programmierung auf dem Mac mit rapid weaver macht er die filme und slides im Fenster auf. Ebenso alle weiteren links auf der ganyen seite. Bei firefox oeffnet er alle seiten sobald ich auf der Movie oder slideseite war in dem kleinen Mediafenster.
Jean
Jean hat geschrieben:
Vielen Dank fuer deine Unterstuetzung. Jetzt stimmt wenigstens das Grobe!
Jean