nicht angemeldet
CSS zur Unterdrückung von Link-Unterstreichung
Der MartinHallo,
habe eine kleine Button-Bibliothek für den OSCommerce geschrieben.
Eine Button-Routine von insgesamt drei baut dabei nur den Button als Grafik auf, zunächst ohne Verlinkung oder Form-Bezug. Man kann da nachher noch ein <a href="..."><?= "Button" ?></a> rumbauen und schon kommt ein grafischer Link raus, wie er im OSCommerce ja an einigen Stellen gebraucht wird.
Habe jetzt einen CSS wie folgt definiert:
.button_text_26 { text-decoration:none; font-family : Arial, sans-serif; font-size : 11px; color: #aa9966; font-weight: bold; }
Dieser CSS wird in der Routine über <span class="button_text_26">...</span> auf den Buttontext angewandt. Schaut im Grundzustand zwar aus wie gewünscht, beim Drüberfahren erscheint der Text jedoch unterstrichen, was nicht sein soll.
Habe schon einen CSS
A.button_text_26:hover { text-decoration:none; font-family : Arial, sans-serif; font-size : 11px; color: #aa9966; font-weight: bold; }
ausprobiert, der aber noch nicht bewirkt, dass der Link nicht unterstrichen wird.
Es handelt sich wie oben beschrieben um keinen direkten Link, sondern um eine kleine Sammlung von Komponenten, die erst später in ein <a href=""></a> gepackt wird:
<a href="">
_________________________________________________________
Der Code wird von der Funktion aufgebaut:
_________________________________________________________
<table ...>
<tr>
<td>linker Teil des Buttons</td>
<td><span class="button_text_26">text</span></td>
<td>rechter Teil des Buttons</td>
</tr>
</table>
_________________________________________________________
Ende des Codes von der Funktion
_________________________________________________________
</a>
Wie müsste der CSS zur Unterdrückung der Unterstreichung des Textes im Mittelteil aussehen?
Gruß Michi
-
Hi,
Eine Button-Routine von insgesamt drei baut dabei nur den Button als Grafik auf, ...
insgesamt drei was? Personen? Zeilen? Altreifen?
.button_text_26 { text-decoration:none; font-family : Arial, sans-serif; font-size : 11px; color: #aa9966; font-weight: bold; }
Die Schriftgröße in px anzugeben, ist umstritten; ansonsten sieht diese Definition plausibel aus, wenn sie auf ein a-Element angewendet wird.
Dieser CSS wird in der Routine über <span class="button_text_26">...</span> auf den Buttontext angewandt. Schaut im Grundzustand zwar aus wie gewünscht, beim Drüberfahren erscheint der Text jedoch unterstrichen, was nicht sein soll.
Natürlich. Im span hast du normalerweise sowieso keine Unterstreichung; das darin enthaltene oder außen darumgeschachtelte a-Element bringt aber seine eigenen Eigenschaften mit.
<a href="">
_________________________________________________________
Der Code wird von der Funktion aufgebaut:
_________________________________________________________
<table ...>
<tr>
<td>linker Teil des Buttons</td>
<td><span class="button_text_26">text</span></td>
<td>rechter Teil des Buttons</td>
</tr>
</table>
_________________________________________________________
Ende des Codes von der Funktion
_________________________________________________________</a>
Auaaaa! Ein Link darf keine Blockelemente und erst recht keine Tabelle enthalten! Dieser Code ist invalid. Außerdem wird auch hier deine CSS-Definition entweder nur auf das innenliegende span-Element angewendet (erster Versuch), oder gar nicht (zweiter Versuch), weil es kein a-Element mit der Klasse "button_text_26" gibt.
Abgesehen davon meine ich mich zu erinnern, dass Unterstriche in Klassennamen nicht erlaubt sind - da bin ich aber nicht ganz sicher.
Wie müsste der CSS zur Unterdrückung der Unterstreichung des Textes im Mittelteil aussehen?
1. Sorge dafür, dass das zugrundeliegende HTML korrekt ist.
2. Wende die CSS-Regel text-decoration:none; auf das a-Element an, nicht auf irgendein anderes.
So long,
Martin-
Hi Martin, bin inzwischen auch zum Ergebnis gekommen, dass der Code (Tabelle als Link) invalide ist, also ist klar, wo ich mal ansetzen werde. ;) Danke! Michi
-