[SOLVED] css: border-bottom: 1px dotted #bbb

[Thorsten]

Hi,

Du kennst dein eigenes System nicht?

nicht auswendig...

Ich schau mir das mal an...

bye
Thorsten

[Thorsten]

Hi,

die einzige Möglichkeit:

Eine Klasse wie

Code: Select all

a.noborder {border: 0;}

definieren und Links, die Bilder enthalten, dieser Klasse zuweisen.

Eine andere Möglichkeit besteht nicht, da CSS keine Rekursion kann.

bye
Thorsten

[yamyam]

Jupp .. es gibt anscheinend keine GUTE Lösung für das Problem

Das Problem ist, dass wir im style.css den border-bottom den a-Elementen zuweisen, mit der 2. Regel aber die img-Kindeselemente ansprechen. Wenn wir deren `border-bottom`-Eigenschaft auf 0/none setzen, hat dies keinerlei Auswirkungen auf den border-bottom des a-Elternelements.

Da CSS-2.1-Selektoren keine Möglichkeit bieten, Elternelemente anhand eventuell enthaltener Kindeselemente auszuwählen, bleibt uns also nur die Möglichkeit die du beschrieben hast oder Links der Bild mit style="border-bottom: none;" zu versehen (was ich aktuell mache) oder auf die bottom-line zu verzichten und mit text-decoration zu arbeiten.

Aber das du generall mit deinem ausgelieferten style.css alle Bilder mit unterbroderst hätte dir längt mal auffallen können
Wie gesagt, wundert mich das noch nie jemand darüber was gesagt hat.

[WSchn123]

Hallo

Vielen Dank für den Tipp (denke aber style="border-bottom: none;" ist besser als es auf 0 zu setzen) - Funktioniert.
Aber auch wenn das funktioniert ist das sicherlich aber nur eine temporäre Lösung, da es dem Sinn und Zweck von CSS komplett entgegenwirkt!

?? was heißt denn "dem Sinn und Zweck von CSS komplett entgegenwirkt" ??

Es handelt sich doch um eine Norm konforme CSS Angabe, die auch Norm korrekt eingebunden ist. Dein Problem ist ja, dass Du allgemein die Unterstreichung per "border-bottom" erhalten möchtest und diese nur an gezielten Stellen abstellen willst. Dann muß man eben an eben diesen gezielten Stellen, die entsprechende Angabe ändern.

Das geht entweder im HTML Code selbst (wir oben erwähnt) oder man muß dem Element, in welchem an der Stelle die Änderung gemacht werden soll, eine "class" oder "id" zuweisen und mann kann dann im Stylesheet z.B. mittels "#id a {border-bottom: none;} die notwendige Änderung vornehmen

Cheers,
Wolfgang

[WSchn123]

Hallo

Das Problem ist, dass wir im style.css den border-bottom den a-Elementen zuweisen, mit der 2. Regel aber die img-Kindeselemente ansprechen. Wenn wir deren `border-bottom`-Eigenschaft auf 0/none setzen, hat dies keinerlei Auswirkungen auf den border-bottom des a-Elternelements.

Das Problem hat nichts mit den img Elementen zu tun, sondern mit den <a href ....> Elementen.

Die Lösung für das Problem per CSS ist sehr einfach ... indem nämlich an den betroffenen Stellen per "class" (oder "id" .. je nachdem, wie die Sache gelagert ist) für das darin befindliche a Element die border-bottom Definition entsprechend abgeändert wird (vgl. auch den Vorschlag von Thomas in einem vorigen Beitrag).

Cheers,
Wolfgang

[yamyam]

Mag sein ... aber ich habe gerade was anderes festgestellt:

Das funktioniert zwar mit dem style="border-bottom: none;" , also die border-bottom ist weg, aber dafür sorgt:

Code: Select all

a:hover { color: #000; background: #e8c43e; }

im css file dafür, dass ich beim hovern von bildern unter den bildern die hoverfarbe habe für 1-2 pixel höhe!

Ist das bei dir auch so?

[yamyam]

Probleme alle gelöst!

hab ne Klasse angelegt, beide Probleme nun erledigt.
- Keine underline mehr (border-bottom)
- Kein Hintergrundhover meh

getestet mit IE 8 und FF 3.5.4

Code: Select all

a.images { border: 0; background-color: transparent !important; }