Mehrere Linkstyles in einem Style-Sheet

KevinsDarling

Hallo,

ich gestalte grade meine Fanpage neu und möchte gerne 2 verschiedene Link-Styles einbauen. Über meinem Header habe ich sogenannte Quick-Links (kleine Buttons) eingebaut und die sollen folgenden Code zugewiesen bekommen:

link="#3A3A3A" vlink="#3A3A3A" alink="#3A3A3A"

den momentan haben sie einen häßlichen, weißen rand, welchen ich weghaben möchte. die kleinen buttons haben die gleiche farbe wie mein hintergrund (siehe link-angabe)

für die normalen links habe ich diese farben gewählt:

a {
color: #D278FF;
text-decoration: none;
}

a:hover {
color:#D278FF;
text-decoration: none;
}

wie kann ich das umsetzen?

Grevas

kleine Buttons... Sprich <a><img /></a> ? Oder <input ... /> ?
Egal, mach mal border: none; dazu... Ansonsten zeig doch mal den htmlcode für dein quicklink.

HTML

a {
color: #D278FF;
text-decoration: none;
}


a:hover {
color:#D278FF;
text-decoration: none;
}

Solltest du nicht nehmen, dadurch werden zwangsweise allen <a> Tags diese Attribute zugewiesen, diese Angaben werden höher bewertet als ID & Class, die einzige Möglichkeit diese zu umschreiben ist über eine style="" Angabe im Element-Tag selbst. Außer du bist dir sicher, dass du immer die selben Farben für deine Links benutzen wirst...

KevinsDarling

ja, sind mit <a><img /></a> eingebunden.

hier ein code:

.quick-gallery {
background-color:transparent;
position:absolute;
z-index:2;
top:25px;
left: 128px;
text-align:justify;
visibility:visible;
width:50px;
a.quicklink: #3A3A3A
a.quicklink:visited: #3A3A3A
a.quicklink:hover: #3A3A3A
}

Grevas

Siehste, sag doch. dein

HTML

a {
...
}

stört

Aber den border kriegst da auch weg - nur die Farbe kriegst nicht anders ;P aber da des beim <img> eh egal ist...
So z.B.

HTML

.quick-gallery { 
background-color:transparent; 
position:absolute; 
z-index:2; 
top:25px; 
left: 128px;
text-align:justify; 
visibility:visible;
width:50px;
border: none;
}

Alles anzeigen

Das hier ist falsch:

HTML

a.quicklink: #3A3A3A
a.quicklink:visited: #3A3A3A
a.quicklink:hover: #3A3A3A

Wenn schon dann müsstest du es so machen:

HTML

.quick-gallery, .quick-gallery a, .quick-gallery a:visited, , .quick-gallery a:hover { 
background-color:transparent; 
position:absolute; 
z-index:2; 
top:25px; 
left: 128px;
text-align:justify; 
visibility:visible;
width:50px;
color: #3A3A3A;
}

Alles anzeigen

KevinsDarling

Zitat von Grevas
Siehste, sag doch. dein
HTML
a {
...
}
stört

Aber den border kriegst da auch weg - nur die Farbe kriegst nicht anders ;P aber da des beim <img> eh egal ist...
So z.B.
HTML
.quick-gallery { 
background-color:transparent; 
position:absolute; 
z-index:2; 
top:25px; 
left: 128px;
text-align:justify; 
visibility:visible;
width:50px;
border: none;
}
Alles anzeigen
Das hier ist falsch:
HTML
a.quicklink: #3A3A3A
a.quicklink:visited: #3A3A3A
a.quicklink:hover: #3A3A3A
Wenn schon dann müsstest du es so machen:
HTML
.quick-gallery, .quick-gallery a, .quick-gallery a:visited, , .quick-gallery a:hover { 
background-color:transparent; 
position:absolute; 
z-index:2; 
top:25px; 
left: 128px;
text-align:justify; 
visibility:visible;
width:50px;
color: #3A3A3A;
}
Alles anzeigen

also mit der version verschwindert der button völlig

Grevas

ah sry, stimmt, position absolute... usw. ...

HTML

.quick-gallery { 
background-color:transparent; 
position:absolute; 
z-index:2; 
top:25px; 
left: 128px;
text-align:justify; 
visibility:visible;
width:50px;
}
 .quick-gallery a, .quick-gallery a:visited, , .quick-gallery a:hover {
color: #3A3A3A;
}
 .quick-gallery img {
border: none;
}

Alles anzeigen

KevinsDarling

hab es jetzt so gelöst, dass ich einfach neue buttons gebastelt habe und nun ist die umrandung weg. aber trotzdme danke für deine hilfe. kann ich sicher an anderer stelle auch gut gebrauchen

Tags

Benutzer online in diesem Thema