Hallo
Ich suche eine Möglichkeit mit CSS bei einem Link ein Bild anzeigen zu lassen. Dabei soll das Bild einmal ganz angezeigt werden (auch wenn es zu gross ist).
Wenn ich nun ein zu grosses Bild habe, zeigt es mir nur einen kleinen Teil davon an.
Kann man dagegen etwas machen?
Danke
MfG Joel
Seite 1 von 1
Background-image
Anzeige
#2
geschrieben 23. Januar 2006 - 17:41
hm, schon mal versucht den z-index zu erhöhen?
z.b
a:hover{z-index:99;}
z.b
a:hover{z-index:99;}
#3
geschrieben 23. Januar 2006 - 17:54
Der z-index ist mir bis jetzt unbekannt
Werd mal bei Selfhtml suchen...
Danke
Werd mal bei Selfhtml suchen...
Danke
#4
geschrieben 23. Januar 2006 - 18:12
Ich bin ganz sicher, ob ich das richtig verstanden habe.
Hier mal ein Beispiel:
Das Bild 'navi.png' ist 159 * 25 Pixel gross (also grösser als der Link). Es wird also nicht ganz dargestellt. Wie kann ich das nun ganz darstellen lassen?
Hier mal ein Beispiel:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Test</title> <style> <!-- a:link { background-image:url(navi.png); background-repeat:no-repeat; } a:hover { } //--> </style> </head> <body> <a href="www.test.de">Test</a> </body> </html>
Das Bild 'navi.png' ist 159 * 25 Pixel gross (also grösser als der Link). Es wird also nicht ganz dargestellt. Wie kann ich das nun ganz darstellen lassen?
#6
geschrieben 23. Januar 2006 - 18:19
OK, und wie kann ich den Link vergrössern? mit margin?
#7
geschrieben 23. Januar 2006 - 18:21
Zitat
Ohne dass du den Link vergrößerst gar nicht.
Das bild würde doch mit z-index auf eine ebene höher gelegt und dargestellt oder?
#8
geschrieben 23. Januar 2006 - 18:24
Aber falls das klappen sollte würde man ja den Text des Linkes gar nicht mehr sehen, oder?
#9
geschrieben 23. Januar 2006 - 18:45
Da wäre eine Lösung (habe ich von Joomla kopiert):
a.mainlevel:link, a.mainlevel:visited { display: block; background: url(../images/menu_bg.png) no-repeat; vertical-align: middle; font-size: 11px; font-weight: bold; color: #ccc; text-align: left; padding-top: 5px; padding-left: 18px; height: 20px !important; height: 25px; width: 100%; text-decoration: none; }
#10
geschrieben 23. Januar 2006 - 18:54
Zitat (Flo: 23.01.2006, 18:21)
Das bild würde doch mit z-index auf eine ebene höher gelegt und dargestellt oder?
Nicht das Hintergrundbild, sondern das ganze Element.
Zitat
a.mainlevel:link, a.mainlevel:visited {
display: block;
background: url(../images/menu_bg.png) no-repeat;
vertical-align: middle;
font-size: 11px;
font-weight: bold;
color: #ccc;
text-align: left;
padding-top: 5px;
padding-left: 18px;
height: 20px !important;
height: 25px;
width: 100%;
text-decoration: none;
}
display: block;
background: url(../images/menu_bg.png) no-repeat;
vertical-align: middle;
font-size: 11px;
font-weight: bold;
color: #ccc;
text-align: left;
padding-top: 5px;
padding-left: 18px;
height: 20px !important;
height: 25px;
width: 100%;
text-decoration: none;
}
Mit vernünftigem Doctype könnte man sich den CSS Hack hier ersparen. Auch andere Dinge kommen mir etwas unlogisch vor...aber wenn es so funktioniert dann reicht es wohl.
Dieser Beitrag wurde von Floele bearbeitet: 23. Januar 2006 - 18:55
- ← Anfänger Hat Ein Paar Fragen
- Skript/Web-Programmierung
- Suche Einen Guten E-shop, Mit Leichter Verwaltung →
Thema verteilen:
Seite 1 von 1