Größe für Link festlegen

[Chris]

Hi!

Ich hab ein kleines Hintergrund-gif für einen Link erstellt. Wenn ich das per:

a.zehn:link {color:#000000; text-decoration:none; background-image:url(../grafics/navibutton.gif); }
a.zehn:visited {color:#000000; text-decoration:none; background-image:url(../grafics/navibutton.gif); }
a.zehn:hover {color:#ffffff; text-decoration:none; background-image:url(../grafics/navibutton.gif); }
a.zehn:active {color:#000000; text-decoration:none; background-image:url(../grafics/navibutton.gif); }

einbinde, wird das gif nur zur Hälfte angezeigt, also genauso lang, wie der eingefügte Text (auf dem Link). Kann ich per CSS die Größe der Grafik vorbestimmen, sodass jeder Button gleich groß ist?

Danke für die Hilfe,

Chris

[Gunnar Bittersmann]

Hello out there!

a.zehn:link {color:#000000; text-decoration:none; background-image:url(../grafics/navibutton.gif); }
a.zehn:visited {color:#000000; text-decoration:none; background-image:url(../grafics/navibutton.gif); }
a.zehn:hover {color:#ffffff; text-decoration:none; background-image:url(../grafics/navibutton.gif); }
a.zehn:active {color:#000000; text-decoration:none; background-image:url(../grafics/navibutton.gif); }

Warum gibst du Gleichlautendes viermal an?

[code lang=css]a.zehn {text-decoration:none; background-image:url(../grafics/navibutton.gif)}
a.zehn:link {color:#000000}
a.zehn:visited {color:#000000}
a.zehn:hover {color:#ffffff}
a.zehn:active {color:#000000}[/code[

einbinde, wird das gif nur zur Hälfte angezeigt, also genauso lang, wie der eingefügte Text (auf dem Link).

Klar, 'a' ist ein Inline-Element. „Die Breite der Boxen für ein nicht ersetztes inzeiliges Element ist die des in ihnen dargestellten Inhalts“ [CSS2 §10.2]

Kann ich per CSS die Größe der Grafik vorbestimmen, sodass jeder Button gleich groß ist?

Wenn 'a' kein solches, sondern ein Block-Element ist (zu erreichen über die 'display'-Eigenschaft), wirkt die 'width'-Eigenschaft. [ebenda]

Diese solltest du aber nicht verwenden, sondern 'min-width', da du ja die beim Nutzer verwendete Schriftgröße nicht kennen kannst.

(Weil alte IEs 'min-width' nicht kennen, 'width' aber fehlerhafterweise als Mindestbreite interpretieren, ist für diese (und nur diese! – conditional comments) 'width' einzusetzen.)

See ya up the road,
Gunnar

[Michael]

"jain" - das Bild ist ja nur Dein Hintergrundbild für das <a>-Element.
Drum mußt Du dafür sorgen, daß <a> die Größe des Bildes bekommt.

Drum Vorschlag:

  
a.zehn{  
 color: #000;  
 text-decoration: none;  
 text-align: center;  
 background-image:url(../grafics/navibutton.gif);  
 display: block;  
 width: 150px;  
 height: 30px; //(oder wie groß dein button auch immer sein mag)  
 }  
 

Und direkt dazu einen weiteren Vorschlag:
Zu den Angaben Deiner Pseudoklassen: Schreib dort nur die

Veränderungen<< zum Standardbutton hin - nicht sämtliche

Angaben, die stets die gleichen sind.

Schönen Gruß!

Michael