Link um mehrere Elemente

[Dr.House]

Hallo,

wenn ich um mehrere Elemente (z.B. ein Bild und ein Div-Container mit Fließtext) einen Link lege, damit der gesamte Block anklickbar ist, dann zerhaut mir der Link teilweise das Layout der Child-Elemente. Wie kann ich den Link per CSS so resetten (nicht global), dass er die Kind-Elemente nicht beeinflusst?

Ich nutze HTML5, CSS3 und Bootstrap 3.0.

Danke!

[Gunnar Bittersmann]

@@Dr.House:

nuqneH

dann zerhaut mir der Link teilweise das Layout der Child-Elemente.

Erzähl bloß nichts Genaueres! Und verlinke um Himmels Willen nicht die problematische Seite! Sonst könnte dir am Ende noch geholfen werden.

Qapla'

[Dr.House]

dann zerhaut mir der Link teilweise das Layout der Child-Elemente.

Erzähl bloß nichts Genaueres! Und verlinke um Himmels Willen nicht die problematische Seite! Sonst könnte dir am Ende noch geholfen werden.

Es geht mir um eine allgemeine Lösung, nicht um ein spezielles Projekt. Ich würde gerne erreichen, dass ein Link nicht seine Child-Elemente beeinflusst, z.B. einen eingeschlossenen Text-Block, der im Normalfall dann plötzlich eine andere Schriftgröße, oder Farbe von dem Link erbt. Es kann auch gerne eine CSS3 Lösung sein, falls es das vorher noch nicht gab.

[Gunnar Bittersmann]

@@Dr.House:

nuqneH

Es geht mir um eine allgemeine Lösung, nicht um ein spezielles Projekt. Ich würde gerne erreichen, dass ein Link nicht seine Child-Elemente beeinflusst

Das tut er im Allgemeinen nicht. Problem gelöst.

Qapla'

[M.]

Das tut er im Allgemeinen nicht. Problem gelöst.

YMMD ;)

[1UnitedPower]

Meine Herren,

Es geht mir um eine allgemeine Lösung, nicht um ein spezielles Projekt. Ich würde gerne erreichen, dass ein Link nicht seine Child-Elemente beeinflusst

Das tut er im Allgemeinen nicht. Problem gelöst.

Naja, er kann zum Beispiel einen Teil seiner Eigenschaften auf seine Nachfahren vererben.

Außerdem kann unvorsichtiges Umschließen in a-Tags dazu führen, dass manche CSS-Regeln auf die inneren Elemente nicht mehr angewandt werden, weil der Selektor nicht mehr matcht.
Im Gegenzug können plötzlich andere Selektoren passen und die Kind-Elemente beeinflussen.

Eine "allgemeine" Lösung für dieses Problem gibt es nicht, man kann sich nur an einer Todo-Liste entlang arbeiten, wenn man Änderungen im Markup vorgenommen hat, die ungewollt das Aussehen der Seite verändert haben.

[Dr.House]

Das tut er im Allgemeinen nicht. Problem gelöst.

Naja, er kann zum Beispiel einen Teil seiner Eigenschaften auf seine Nachfahren vererben.

Außerdem kann unvorsichtiges Umschließen in a-Tags dazu führen, dass manche CSS-Regeln auf die inneren Elemente nicht mehr angewandt werden, weil der Selektor nicht mehr matcht.
Im Gegenzug können plötzlich andere Selektoren passen und die Kind-Elemente beeinflussen.

Eine "allgemeine" Lösung für dieses Problem gibt es nicht, man kann sich nur an einer Todo-Liste entlang arbeiten, wenn man Änderungen im Markup vorgenommen hat, die ungewollt das Aussehen der Seite verändert haben.

Danke, wenigstens einer, der hier nicht klugscheißt! Ich habe es bisher so gelöst, dass ich z.B. Farbe und Schriftgröße mit 'inherit' versehe und nicht mehr angewandte Selektoren abändere, aber ich dachte mit CSS3 gibt es eine bequemere Lösung.

[1UnitedPower]

Meine Herren,

Ich habe es bisher so gelöst, dass ich z.B. Farbe und Schriftgröße mit 'inherit' versehe und nicht mehr angewandte Selektoren abändere, aber ich dachte mit CSS3 gibt es eine bequemere Lösung.

Der Wiki-Artikel über Vererbung könnte dir nützlich sein, inbesondere der Teil über den #Standardwert wiederherstellen.

[molily]

Hallo,

Ich würde gerne erreichen, dass ein Link nicht seine Child-Elemente beeinflusst, z.B. einen eingeschlossenen Text-Block, der im Normalfall dann plötzlich eine andere Schriftgröße, oder Farbe von dem Link erbt.

Wenn ein a-Element z.B. mit color: blue formatiert ist, so vererbt es diese Eigenschaft natürlich auf seine Kindelemente.

Viele CSS-Eigenschaften vererben sich auf diese Weise. »inherit« ist der Standardwert einer ganzen Reihe an Eigenschaften.

Das kannst du nur dadurch verhindern, indem du dem Link keine color-Eigenschaft zuweist. Oder explizit wieder den Standardwert »inherit« setzt. Dadurch wird die Farbe des Elternelements an die Kindelemente vererbt, angenommen diese verwenden ebenfalls color: inherit.

Mathias

[molily]

Beispiel:

a:link {  
  color: blue;  
  text-decoration: none;  
}  
a:hover {  
  text-decoration: underline;  
}  
  
/* Färbe Blocklinks nicht blau */  
a.blocklink {  
  color: inherit;  
}  
/* Kein Hover-Effekt beim ganzen Link */  
a.blocklink:hover {  
  text-decoration: none;  
}  
  
/* Nutze eine als Link erkennbare besondere Formatierung für die Überschrift */  
a.blocklink h2 {  
  color: navy;  
}  
/* Hover-Effekt bei der Überschrift */  
a.blocklink:hover h2 {  
  text-decoration: underline;  
}

<a href="…">Blau</a>  
  
<a href="…" class="blocklink">  
  <h2>Nicht blau</h2>  
  <p>Nicht blau</p>  
</a>

[1UnitedPower]

Meine Herren,

Viele CSS-Eigenschaften vererben sich auf diese Weise. »inherit« ist der Standardwert einer ganzen Reihe an Eigenschaften.

Deine Links sind in letzter Zeit manchmal fehlkonfiguriert. Ist das technischer Natur oder Vergesselichkeit ;) ?

[molily]

Hallo,

Deine Links sind in letzter Zeit manchmal fehlkonfiguriert. Ist das technischer Natur oder Vergesselichkeit ;) ?

Da ich einst das Script hier mitgeschrieben habe, das beim Anklicken vom [Link]-Button ausgeführt wird, kann ich mich mit »technischer Natur« nicht einmal herausreden… ;)

Gemeint war übrigens http://www.w3.org/TR/CSS21/propidx.html.

Und im anderen Posting http://molily.de/js/css.html#werte-auslesen.

Mathias