CSS: Link innerhalb einer Tabelle anders Formatieren

OP #4790136
Hallo,

ich baue gerade ein Webseiten-Template für das Typesetter-CMS.
Genaugenommen bin ich bis auf kleine Designfehler fertig.

Ich hänge nun am folgendem Problem:
Für eine Fotogallerie nutze ich Tabellen mit einer Zelle als Rahmen.

Diese formatiere ich so:
1
table.picture{
2
  float:      left;
3
  width:      200px;
4
  background-color:  #EEEEEE;
5
  margin-right:    20px;
6
  margin-bottom:    10px;
7
  border-radius:    5px;
8
  border-style:    solid;
9
  border-width:    1px;
10
  
11
}
Beim Aufbau des Inhalts gebe ich beim CMS der Tabelle die class 
"picture" an.
Das Funktioniert auch soweit.
Doch der Hyperlink, welcher auf dem Bild selbst liegt wird entsprechend 
meiner main-div-class formatiert. Das ist bei mir gestrichelt 
unterstrichen.
1
#main a {
2
  color:      #0101ba;
3
  text-decoration:  none;
4
  border-bottom:    1px dashed;
5
}


Nun möchte ich aber die Links innerhalb meiner picture-table ohne 
Unterstreichung fomatieren.

Nach endloser rumsucherei finde ich nur solche Lösungen:
1
table.picture a:link {border-bottom:none;}
Ich habe entsprechend die Unterstreichung so formatiert, aber ohne 
Erfolg.

Vermutlich funkt mir das CMS dazwischen.

Weiß jemand zufällig wie ich eine Link-Formatierung in den 
table.picture{} Bereich angebe?

Vg
Sebastian
https://jsfiddle.net/qbyat4gx/

Sebastian E. schrieb:
> Nach endloser rumsucherei finde ich nur solche Lösungen:table.picture
> a:link {border-bottom:none;}

Wenn man das :link weglässt, ist das eigentlich auch richtig so. Du hast 
ein Priorisierungsproblem. Selectoren mit IDs sind höher priorisiert als 
solche mit Klassen oder Tagnamen. Siehe: 
https://developer.mozilla.org/de/docs/Web/CSS/Spezifit%C3%A4t

Erstmal die nicht funktionierende Version:
https://jsfiddle.net/qbyat4gx/6/

Mögliche lösungen sind die verwendung von !important, wovon ich abraten 
würde:
https://jsfiddle.net/qbyat4gx/1/

Oder statt IDs Klassen oder Tagnames zu verwenden:
https://jsfiddle.net/qbyat4gx/5/
https://jsfiddle.net/qbyat4gx/4/

Ich empfehle, immer Klassen statt IDs in CSS Regeln zu verwenden.
OP
Aufgehoben ist nicht aufgeschoben...

Erstmal vielen Dank Daniel für die ausführliche  Erklärung.
Beim Versuch deinen Vorschlag umzusetzen gab's immer wieder Problemchen 
mit dem CMS.

Habe dann, da ich etwas Zeitdruck hatte, das Problem mit "important" 
gelöst. Vorübergehend.
Einen eleganten weg muss ich noch testen.

Vg
Sebastian

Antwort schreiben

Eine eigene Frage? Dieser Thread ist über 9 Jahre alt. Stell sie in einem eigenen Thread – dort lesen mehr Leute mit, und sie wird öfter und schneller beantwortet.

Neuen Thread starten

Eine Lösung, Ergänzung oder Rückmeldung zu diesem Thread? Dann antworte hier.

Formatierung
  • [c]C-Code[/c]
  • [code]Code in anderen Sprachen, ASCII-Zeichnungen[/code]
  • [math]Formel in LaTeX-Syntax[/math]
  • [[Titel]] – Link zu einem Artikel
  • Verweis auf einen anderen Beitrag: Rechtsklick auf dessen Beitrags-ID (#8078628), „Adresse kopieren“, in den Text einfügen

Mehr zur Formatierung

Längeren Sourcecode als Anhang, nicht in den Text. JPG nur für Fotos und Scans; Zeichnungen und Screenshots als PNG oder GIF. Siehe Bildformate.

Schon registriert? Anmelden

Wird nicht angezeigt. Wir schicken dir einen Link; sobald du damit bestätigst, erscheint dein Beitrag.

Mit dem Abschicken legst du einen kostenlosen Account an und erkennst die Nutzungsbedingungen und die Datenschutzerklärung an.