Autor |
Nachricht |
InYourFace
Threadersteller
Dabei seit: 29.10.2007
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mo 17.05.2010 14:44
Titel CSS Bildlink: ohne border - hover: mit border |
|
|
Brauch mal einen frischen Kopf, fipsel schon wieder viel zu lange hier dran rum.
Möchte ein verlinktes Bild ohne Rahmen erstellen dass bei hover aber einen sochen anzeigt. So weit bin ich aktuell:
html:
<div class="facebook_button"><a class="facebook_button" href="http://www.facebook.com/pages/ZOOM-designagency/126471674210"><img src="../bilder/facebook-button-en.jpg"/></a>
</div>
CSS:
a.facebook_button {
position: absolute;
left: 10px;
top: 10px;
height: 46px;
width: 256px;
z-index: 1;
border:none;
}
a.facebook_button:link {
border:none;
}
a.facebook_button:visited {
border:none;
}
a.facebook_button:hover {
border-width: 1px;
border-color: #FFFFFF;
}
a.facebook_button:active {
border:none;
}
Anyone a clou?
Edit sagt: Aktuell wird mit dieser Variante ein Rahmen in herrlich ekligem Lila im Firefox angezeigt und bei Mouseover passiert gar nichts.
Zuletzt bearbeitet von InYourFace am Mo 17.05.2010 15:05, insgesamt 1-mal bearbeitet
|
|
|
|
|
pixelpapst303
Dabei seit: 06.07.2006
Ort: hamburg
Alter: 50
Geschlecht:
|
Verfasst Mo 17.05.2010 14:53
Titel
|
|
|
und dein problem ist, dass das bild immer einen border hat?
Code: |
a img {
border: 0px;
}
|
|
|
|
|
|
Anzeige
|
|
|
Smooth-Graphics
Dabei seit: 22.05.2006
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mo 17.05.2010 15:04
Titel
|
|
|
pixelpapst303 hat geschrieben: | und dein problem ist, dass das bild immer einen border hat?
Code: |
a img {
border: 0px;
}
|
|
Code: |
a img { border: 0px; }
a:hover img{ border: 2px solid #000; }
oder
a img:hover{ border: 2px solid #000; }
oder
div.facebook_button a img{ border: 2px solid #000; }
|
|
|
|
|
|
InYourFace
Threadersteller
Dabei seit: 29.10.2007
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mo 17.05.2010 15:13
Titel
|
|
|
ich kann den Unterschied zu meiner bisherigen Lösung nicht erkennen. Das CSS ist bei mir zwar in einem Stylesheet, aber ansonsten ist das doch gleich, bis auf border:none anstelle von border:0px was ja das selbe ist und beides aktuell in dieser Konstellation nicht funktioniert.
|
|
|
|
|
Kash
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht:
|
Verfasst Mo 17.05.2010 15:26
Titel
|
|
|
Du kannst den Unterschied wirklich nicht erkennen?
Dann solltest Du aber noch einmal genau hingucken.
|
|
|
|
|
geviert
Dabei seit: 06.05.2010
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mo 17.05.2010 15:34
Titel
|
|
|
Bei dir ist nur der Link, nicht aber das Bild ohne border:
a.facebook_button
{
...
border:none;
}
Du musst dich auch noch um das Image an sich kümmern.
So wie von pixelpapst und smooth graghics beschrieben. Oder Du schreibst alles extra:
img{ border: none; }
img:hover{ border: 1px #123456; }
Zuletzt bearbeitet von geviert am Mo 17.05.2010 15:35, insgesamt 1-mal bearbeitet
|
|
|
|
|
InYourFace
Threadersteller
Dabei seit: 29.10.2007
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mo 17.05.2010 15:53
Titel
|
|
|
Ok, ich habe es jetzt so versucht:
a.facebook_button {
position: absolute;
left: 10px;
top: 10px;
height: 46px;
width: 256px;
z-index: 1;
border:0 px;
}
a.facebook_button img {
border:0 px;
}
a.facebook_button link {
border:0 px;
}
a.facebook_button visited {
border:0 px;
}
a.facebook_button hover {
border-width: 1px;
border-color: #FFFFFF;
}
a.facebook_button active {
border:0 px;
}
wie vorher nur die Anzeige im DW ist nun ohne Rahmen, im Browser immernoch vorhanden (Cache wurde gelehrt).
Hatte auch diese Version hier, selbes Ergebnis:
a.facebook_button img{
position: absolute;
left: 10px;
top: 10px;
height: 46px;
width: 256px;
z-index: 1;
border:0 px;
}
|
|
|
|
|
pixelpapst303
Dabei seit: 06.07.2006
Ort: hamburg
Alter: 50
Geschlecht:
|
Verfasst Mo 17.05.2010 15:56
Titel
|
|
|
und nu nimm mal das leerzeichen zwichen 0 und px raus
|
|
|
|
|
|
|
|
Ähnliche Themen |
Bilder im A-Element haben trotz border:none einen border
img {border: 0;} oder img {border: none;}
Border für Image
INLINE BORDER CSS
#CSS { border: problem; }
CSS BG-IMG über Border
|
|