mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Mi 12.08.2020 03:11 Benutzername: Passwort: Auto-Login

Thema: CSS Bildlink: ohne border - hover: mit border vom 17.05.2010


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> CSS Bildlink: ohne border - hover: mit border
Seite: 1, 2, 3  Weiter
Autor Nachricht
InYourFace
Threadersteller

Dabei seit: 29.10.2007
Ort: -
Alter: -
Geschlecht: -
Verfasst Mo 17.05.2010 15:44
Titel

CSS Bildlink: ohne border - hover: mit border

Antworten mit Zitat Zum Seitenanfang

Brauch mal einen frischen Kopf, fipsel schon wieder viel zu lange hier dran rum. * Ich geb auf... *

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? Glaskugel


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 16:05, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
pixelpapst303

Dabei seit: 06.07.2006
Ort: hamburg
Alter: 46
Geschlecht: Männlich
Verfasst Mo 17.05.2010 15:53
Titel

Antworten mit Zitat Zum Seitenanfang

und dein problem ist, dass das bild immer einen border hat?

Code:

a img {

border: 0px;

}
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
Smooth-Graphics

Dabei seit: 22.05.2006
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Mo 17.05.2010 16:04
Titel

Antworten mit Zitat Zum Seitenanfang

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; }
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
InYourFace
Threadersteller

Dabei seit: 29.10.2007
Ort: -
Alter: -
Geschlecht: -
Verfasst Mo 17.05.2010 16:13
Titel

Antworten mit Zitat Zum Seitenanfang

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.
  View user's profile Private Nachricht senden
Kash

Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 37
Geschlecht: Männlich
Verfasst Mo 17.05.2010 16:26
Titel

Antworten mit Zitat Zum Seitenanfang

Du kannst den Unterschied wirklich nicht erkennen?
Dann solltest Du aber noch einmal genau hingucken.
  View user's profile Private Nachricht senden
geviert

Dabei seit: 06.05.2010
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Mo 17.05.2010 16:34
Titel

Antworten mit Zitat Zum Seitenanfang

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 16:35, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
InYourFace
Threadersteller

Dabei seit: 29.10.2007
Ort: -
Alter: -
Geschlecht: -
Verfasst Mo 17.05.2010 16:53
Titel

Antworten mit Zitat Zum Seitenanfang

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;
}
  View user's profile Private Nachricht senden
pixelpapst303

Dabei seit: 06.07.2006
Ort: hamburg
Alter: 46
Geschlecht: Männlich
Verfasst Mo 17.05.2010 16:56
Titel

Antworten mit Zitat Zum Seitenanfang

und nu nimm mal das leerzeichen zwichen 0 und px raus
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen Bilder im A-Element haben trotz border:none einen border
#CSS { border: problem; }
INLINE BORDER CSS
CSS BG-IMG über Border
CSS-Eigenschaft border-spacing und IE
glatte border ecken mit css?
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2, 3  Weiter
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.