grösse des hintergrundbildes (von einem link) festlegen

[brandy]

hi,

jeder navigationspunkt hat ein hintergrundbild mit einer bestimmten grösse. bei hover soll sich hintergrundbild ändern.

ich schaffs nur dass das hintergrundbild genau so gross ist wie der link:

code:

<span id="mainLinks">

<a href="">Punkt1</a>
   <a href="">Punkt2</a>

</span>

css:

#mainLinks {
 height:21px;
 width: 236px;
 font-size: 12px;
}
#mainLinks a{
 height:21px;
 width: 236px;
 background-image: url(../img/button1.jpg);
 background-repeat: no-repeat;
 border: solid 1px #666666;
 boder-collapse:collapse;

}
#mainLinks a:hover{
 background-image: url(../img/button1o.jpg);
 background-repeat: no-repeat;
 border: solid 1px #666666;
 boder-collapse:collapse;

}

weiss nicht warum er mir die width und height nicht nimmt???

kann mir wer helfen???

thx & lg brandy

[wahsaga]

hi,

weiss nicht warum er mir die width und height nicht nimmt???

weil width und height für (nicht-positionierte oder gefloatete, non-replaced) inline elemente nicht definiert sind.

gruß,
wahsaga

[MudGuard]

Hi,

(nicht-positionierte oder gefloatete, non-replaced) inline elemente

das "nicht-positionierte" und das "gefloatete" hättest Du Dir sparen können, da positionierte oder gefloatete Elemente immer display:block haben und somit keine inline-Elemente mehr sind.

http://www.w3.org/TR/REC-CSS2/visuren.html#q24

cu,
Andreas

[Ingo Turski]

Hi,

weiss nicht warum er mir die width und height nicht nimmt???

weil diese Eigenschaften nicht für inline-Elemente definiert sind.

freundliche Grüße
Ingo

[Cheatah]

Hi,

ich schaffs nur dass das hintergrundbild genau so gross ist wie der link:

_höchstens_ so groß, um genau zu sein, ja. Die Größe des Links veränderst Du nicht, da width und height bekanntermaßen nicht für Non-Replaced Inline Elements gelten und Du nichts gegen die Tatsache unternommen hast, dass es sich bei Deinen <a>-Elementen um solche handelt.

<span id="mainLinks">
   <a href="">Punkt1</a>
   <a href="">Punkt2</a>
</span>

Das ist übrigens ein extrem klassisches <ul>.

#mainLinks a{

[...]

boder-collapse:collapse;

Ähm, ein table-Element ist ebenfalls keiner Deiner Links.

Cheatah