✔ css bild und text als link

[leon_20v]

hallo,

habe ein problem mit css.

und zwar habe ich ein bild folgendermaßen als link eingefügt

<a class="hauptthemen" href="?inc=themen"><img src="Buttons/themenn.gif" width="170" height="25" /></a>

hier die css dazu:

a {font-size: 13px;}
a {color: #000;}
a:visited {color:#000;}
a:hover {color: #fff;}
a:active {color:#16558D;}

a.hauptthemen {background: url('navigation_php/Buttons/themenn.gif') center no-repeat;}
a.hauptthemen:hover {background: url('navigation_php/Buttons/themenh.gif') center no-repeat;}
a.hauptthemen img {visibility: hidden;}

das bild bekommt jetzt irgendwie immer einen weißen rand und wird nicht konplett dargestellt. nur ein stück das so groß ist wie ein buchstabe. was ist falsch?
das muss irgendwie was mit der front-sitze zu tun haben oder****

 

[SpiceLab]

Klemmt die Shift-Taste deiner Tastatur?

In diesem Forum wird Wert auf Anwendung der deutschen Rechtschreibung gelegt, zu der auch die Groß- und Kleinschreibung zählt - siehe Netiquette #15.

Zu deinem Problem: Vermutlich fehlen dem Inline-Element <a> sog. Block-Level-Eigenschaften, um das Hintergrundbild in seiner kompletten Breite und Höhe anzuzeigen, also die Eigenschaft display:block für untereinander, und float:left (o. right) für nebeneinander angeordnete Elemente, zuzüglich den beiden Eigenschaften width:170px und height:25px.

 

[leon_20v]

Die Eigenschaften width:170px und height:25px habe ich hinzugefügt, ohne Erfolg.

Ich weiß nicht warum das Bild immer so komisch angezeigt wird. Also irgendwie wird das CSS für den Text auf das Bild verwendet. Irgendwas stimmt nicht.

 

[SpiceLab]

Die Eigenschaften width:170px und height:25px habe ich hinzugefügt, ohne Erfolg.

Ich hatte eine weitere als erstes genannt, die für diese beiden erforderlich ist, damit sie bei dem genutzten Elementtyp <a> überhaupt Anwendung finden, denn sog. "Inline-Elemente" besitzen gegenüber den "Block-Elementen" zunächst mal keine Breiten- und/oder Höheneigenschaft.

Ich weiß nicht warum das Bild immer so komisch angezeigt wird. Also irgendwie wird das CSS für den Text auf das Bild verwendet. Irgendwas stimmt nicht.

Ich weiß es noch weniger wie du, denn einen Link zu deinem Problemkind hast du hier nicht erwähnt, damit es auch mal direkt unter Augenschein genommen werden kann

 

[leon_20v]

okay okay,

Also das ich das Bild garnicht angezeigt bekommen habe, lag daran, dass ich den Ordner falsch verlinkt hatte. Jetzt ist das Bild da nur viel zu klein:

http://veritas-fluctuare.de/


die seite ist aber absolut noch im aufbau.

hier der css code:

a.hauptthemen {background: url("navigation_php/Buttons/themenn.gif") center no-repeat;}
a.hauptthemen:hover {background: url("navigation_php/Buttons/themenh.gif") center no-repeat;}
a.hauptthemen img {visibility: hidden;}
a.hauptthemen img {width:170; height:25;}

<a class="hauptthemen" href="?inc=themen"><img src="navigation_php/Buttons/themenn.gif" />

es ist noch zum verzweifeln

 

[SpiceLab]

Dass das Bild garnicht angezeigt wird bzw. wurde, hast du anfangs so nicht vorgestellt, sondern, dass es nicht komplett erscheint.

Von dem <img>-Element habe ich hier mit keiner Silbe geredet.

Außerdem fehlt neben meiner richtig vermuteten display:block-Eigenschaft deinen beiden Wertangaben die zugehörige Maßeinheit.

 

[leon_20v]

die stehen im CSS auch wenn ich die dort einfüge, ist das bild zu klein

 

[SpiceLab]

Lies dir bitte meine Antworten richtig und in aller Ruhe durch, bevor du dich überstürzt an die Arbeit machst. Dann klappt die Hilfestellung hier auch auf Anhieb, und kommt mit weniger Forenbeiträgen und dem verbundenen Zeitaufwand aus ;-)

die stehen im CSS

Tatsächlich? Dann wohl lokal, denn trotz Leerung meines Browsercaches, finde ich noch immer das fehlerhafte Stylesheet von eben vor.

 

[leon_20v]

dann kapiere ich es nicht was du meinst irgendwie

ich check garnichts mehr, egal wo ich das einfüge und egal wie, des wird immer so bescheuert angezeigt

 

[SpiceLab]

Für den aufmerksamen Leser meiner allerersten Antwort:

Vermutlich fehlen dem Inline-Element <a> sog. Block-Level-Eigenschaften, um das Hintergrundbild in seiner kompletten Breite und Höhe anzuzeigen, also die Eigenschaft display:block für untereinander, und float:left (o. right) für nebeneinander angeordnete Elemente, zuzüglich den beiden Eigenschaften width:170px und height:25px.

ergibt sich dieses CSS:

a.hauptthemen {
/* deine best. Regeln */
display:block;
width:170px;
height:25px;
}

Und was ist daran für dich nun so schwer zu verstehen?

Achja, vor lauter Verwirrung und Hektik, beim Beitragtippseln nicht die Shift-Taste vergessen!