td background-image und a:hover

[portraitfee]

Ich komme nicht weiter...
Ich habe hier eine Navigationsleiste, die listenmässig aufgebaut ist. Jeder Listenpunkt soll mit einer Grafik unterlegt sein.
Jeder Listenpunkt ist ausserdem ein Link.
Als Hover-Effekt soll nun die Grafik gegen eine andere ausgetauscht werden.

Besondere Aufgabe:
Dynamik. Ich möchte ungern für 10 Links 10 verschiedene Grafiken mit entsprechender Beschriftung (Link 1 - 10) und dazu die entsprechenden Hover-Grafiken bauen. Momentan läuft das per DB-Abfrage, die Grafiken sind entsprechend neutral (orange bzw. gelb mit kleinem Logo seitlich).

Momentane Lösung:
Tabelle angefertigt, jede Zelle hat die Grafik als Hintergrund. Per table-layout: fixed und empty-cells: show auch auf einheitliche Breite festgezurrt. Soweit kein Problem.
Text wird in die Tabelle eingefügt. Kein Problem.
Hover-Effekt über td.meineclass a:hover{background-image: url(hover-grafik.png)} versucht einzufügen. Großer Mist, denn: alle Linkbezeichnungen haben verschiedene Längen. Durch padding und margin bekomme ich die a:hover-Grafik zwar in der Höhe deckungsgleich mit der
td-background-Grafik, beide fangen auch beim gleichen Punkt an, aber die Grafik orientiert sich in der Breite am eingegebenen Text.

Fragestellung:
Wie schaffe ich es, daß die gesamte Breite der Grafik angezeigt wird und nicht nur soviel, wie der Text lang ist? Ich kann ja schlecht ausrechnen, wie lang jeweils der Text ist, das von der Länge der Grafik subtrahieren und dynamisch als padding-right in die style-Angabe einfusseln?

Ich danke für alle Hilfsversuche,

portraitfee

[Siechfred]

Ich habe hier eine Navigationsleiste, die listenmässig aufgebaut ist. Jeder Listenpunkt soll mit einer Grafik unterlegt sein. Jeder Listenpunkt ist ausserdem ein Link.

Wie sieht das relevante HTML aus?

Als Hover-Effekt soll nun die Grafik gegen eine andere ausgetauscht werden.

Die Pseudoklasse a:hover kann genau dies leisten.

Tabelle angefertigt, jede Zelle hat die Grafik als Hintergrund. Per table-layout: fixed und empty-cells: show auch auf einheitliche Breite festgezurrt. Soweit kein Problem.

Warum eine Tabelle? Eine ungeordnete Liste benötigt bei gleichem Ergebnis die Hälfte an HTML.

Hover-Effekt über td.meineclass a:hover{background-image: url(hover-grafik.png)} versucht einzufügen.

Meines Wissens nach gibt das im IE Probleme, der nichts außer A-Elemente hovern möchte.

Ich danke für alle Hilfsversuche,

Bitte poste das relevante HTML und das dazugehörende CSS. Noch besser wäre allerdings der Link zu einer Testseite.

Siechfred

[portraitfee]

Wie sieht das relevante HTML aus?

Siehe nachgereichten Post.

Die Pseudoklasse a:hover kann genau dies leisten.

Ich glaube, aus genau diesem Grunde hab ich sie auch ausgesucht.

Warum eine Tabelle? Eine ungeordnete Liste benötigt bei gleichem Ergebnis die Hälfte an HTML.

...weil ich bei Tabellen die feste Breite einstellen kann, so daß das Hintergrundbild garantiert zu sehen ist.

Meines Wissens nach gibt das im IE Probleme, der nichts außer A-Elemente hovern möchte.

Wenn ich das Problem der nur teilweisen Anzeige beim Hovern lösen kann, kann ich es sicher analog auch für ein a:link lösen. Dann brauch ich mich um den IE weiter nicht zu sorgen.

Ich danke für alle Hilfsversuche,

Bitte poste das relevante HTML und das dazugehörende CSS. Noch besser wäre allerdings der Link zu einer Testseite.

Siechfred

Nicht möglich.

Denise

[Patrick Andrieu]

Hallo portraitfee!

Dann brauch ich mich um den IE weiter nicht zu sorgen.

Trugschluß. Um den IE muss man sich immer sorgen, ist er doch das Sorgenkind unter den Browsern (und der IE 7 verdient immer noch nicht das Prädikat »moderner Browser«).

Aber Siechfreds Aussage:

Meines Wissens nach gibt das im IE Probleme, der nichts außer A-Elemente hovern möchte.

muss ich hier revidieren, gilt sie doch nur für den 6er (Der 7er kann angeblich alles hovern)... Nur? Nein, ein kleines Dorf, äh, ein kleines Team unfähiger Entwickler leistet immer noch Widerstand.

Denise

Denise, Denise...

Viele Grüße aus Frankfurt/Main,
Patrick

[portraitfee]

Relevante tpl-Datei:
-----------
{if $is_form}
<form id="serendipity_category_form" action="{$form_url}" method="post">
{/if}
<table class="serendipity_categories_list">
<tr><td class="serendipity_categories_list"><div class="serendipity_categories_list" id="serendipity_category_form_content"></td></tr>

{foreach from=$categories item="plugin_category"}
    <tr>
        <td class="serendipity_categories_list">
        {if $is_form}
            <input type="checkbox" name="serendipity[multiCat][]" value="{$plugin_category.categoryid}" />
        {/if}

{if !empty($category_image)}
            <a class="serendipity_xml_icon" href="{$plugin_category.feedCategoryURL}"><img src="{$category_image}" alt="XML" style="border: 0px" /></a>
        {/if}

<a style=" whitespace: nowrap;" href="{$plugin_category.categoryURL}" title="{$plugin_category.category_description|escape}">{$plugin_category.category_name|escape}</a>

</td>
       <td class="serendipity_categories_list"><div align="right"><img src="./templates/kigaJohann/img/Trein-normal.png"></div></td>
       </tr>
{/foreach}
   </table>

{if $is_form}
    <div class="category_submit"><input type="submit" name="serendipity[isMultiCat]" value="{$CONST.GO}" /></div>
{/if}

<div class="category_link_all"><a href="{$form_url}" title="{$CONST.ALL_CATEGORIES}">{$CONST.ALL_CATEGORIES}</a></div>

{if $is_form}
    </div>
</form>
{/if}
-----------------
Dazugehöriger CSS-Schnipsel:
------------------
#serendipityLeftSideBar {
    width: 180px;
    border-right: 1px solid #f09810;
    padding: 10px;
    vertical-align: top;
  background-color: #4f48af;
  color: #eedf00;
  font-weight: bold;
 whitespace: nowrap;
}

table.serendipity_categories_list{
 position: absolute;
 table-layout: fixed;
 empty-cells: show;
 border: 0px;
 spacing: 10px;
 width: 180px;
 height: 52px;
 margin-top: -10px;
 margin-left: 5px;
 margin-right: 5px;
}

div.serendipity_categories_list{
 height: 48px;
 width: 180px;
 background-color: #f09810;
 background-image: url(./templates/kigaJohann/img/Trein-normal.png);
 background-repeat: no-repeat;
 background-position: bottom right;
 text-align: left;
 vertical-align: middle;
 padding-left: 5px;
 spacing: 10px;
}

img.serendipity_categories_list{
 background-color: #f09810;
}

td.serendipity_categories_list{
 position: relative;
 height: 52px;
 width: 180px;
 background-color: #f09810;
/* background-image: url(./templates/kigaJohann/img/Trein-normal.png);
 background-repeat: no-repeat;
 background-position: bottom right; */
 text-align: left;
 vertical-align: middle;
 padding-left: 5px;
 table-layout: fixed;
 empty-cells: show;
 border: 0px;
 spacing: 10px;
}

td.serendipity_categories_list a:hover,
td.serendipity_categories_list a:focus{
 position: relative;
 top: 0px;
 left: 0px;
 background-color: #eedf00;
 background-image: url(./templates/kigaJohann/img/Trein-light.png);
 background-repeat: no-repeat;
 background-position: bottom right;
 height: 52px;
 width: 180px;
 right: 0px:
/* padding-top: 15px;
 padding-bottom: 15px;
 padding-left: 5px;
 margin-left: -5px;
 margin-right: 180px;*/
}
-------------------------------

Denise