Link-Unterstreichung

[Kaethe]

Hi!

Ich bin Autodidakt und bastele gerade an meinem CSS rum.
Nun brauche ich Hilfe und es wäre toll, wenn ihr mir helfen könntet!

Ich würde gerne vor jeden externen Link auf meiner Seite ein kleines Icon setzen. Das Icon sollte auch anklickbar sein. Nun wird der Text ja unterstrichen (soll er auch), das Icon hätte ich aber gerne Nicht unterstrichen.

Mein CSS code zu dem Icon sieht bis jetzt so aus:

#col2o2 #col2o2content p a img {
padding-top: 1px;
padding-right: 1px;
padding-bottom: 1px;
padding-left: 1px;
margin-top: 1px;
margin-right: 1px;
margin-bottom: 1px;
margin-left: 1px;
clear: none;
float: none;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;

}

Wie schaffe ich es nun, da zu definieren, dass keine Unterstreichung statt findet. Einfach text-decoration: none funktioniert leider nicht. Wird ja wohl von der "Links-immer-unterstreichen-Definition, die ja für die gesamte Seite gilt, überschrieben. Wie schalte ich die aus?

Ich hoffe, ich habe jetzt nicht allzuviel unqualifizierten Blödsinn verzapft und ihr versteht, was ich meine...

Danke!
:-))

[suit]

Du benötigst ein zusätzliches Element welches du unterstreichst

gekürzt:

<a>  
 <img />  
 <span>foo</span>  
</a>

a = nicht unterstrichen
img = nicht unterstrichen
span = unterstrichen

Bei vernünftigen Browsern kannst du dir das aber sparen und mit Pseudoelementen arbeiten - :before oder :after ist eine Möglichkeit.

[Kaethe]

Du benötigst ein zusätzliches Element welches du unterstreichst

gekürzt:

<a>

<img />
<span>foo</span>
</a>

>   
> a = nicht unterstrichen  
> img = nicht unterstrichen  
> span = unterstrichen  
  
  
Okay, zusätzliches Element heißt, dass ich jedes Bildchen extra in die Hand nehmen muss und das nicht im CSS definieren kann?  
-> das wäre sehr aufwändig  :-(  
  
  

> Bei vernünftigen Browsern kannst du dir das aber sparen und mit Pseudoelementen arbeiten - :before oder :after ist eine Möglichkeit.  
  
Pseudoelemnete kenne ich gar nicht. \*blush\*  
Kannst du das bitte noch etwas ausführen?

[suit]

Okay, zusätzliches Element heißt, dass ich jedes Bildchen extra in die Hand nehmen muss und das nicht im CSS definieren kann?
-> das wäre sehr aufwändig  :-(

Eine andere Lösung wäre, das Bild als Hintergrundbild des Links zu definieren, das löst dein Problem aber auch nicht (zumindest nicht ohne ein pseudo-Element wie etwa ::outside - zudem erfordert es sehr moderne Browser.

Pseudoelemnete kenne ich gar nicht. *blush*
Kannst du das bitte noch etwas ausführen?

Sicher könnte ich das - aber lassen wir erst mal <http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm@title=SELFHTML arbeiten> :)

[Kaethe]

<a>

<img />
<span>foo</span>
</a>

>   
> a = nicht unterstrichen  
> img = nicht unterstrichen  
> span = unterstrichen  
  
  
Hmm, das verstehe ich nicht. Wieso soll a da nicht unterstrichen sein, wenn das CSS doch vorschreibt, dass alle a unterstrichen sind?  
  
  
Mein HTML sieht so aus:  
  
<a href="http://www.blabla.de"><img src="/icon.gif" width="11" height="14"/>TTEXT</a>  
  
Da ist sowohl der Text, als auch das Icon unterstrichen.

[suit]

<a>

<img />
<span>foo</span>
</a>

> >   
> > a = nicht unterstrichen  
> > img = nicht unterstrichen  
> > span = unterstrichen  
>   
>   
> Hmm, das verstehe ich nicht. Wieso soll a da nicht unterstrichen sein, wenn das CSS doch vorschreibt, dass alle a unterstrichen sind?  
  
Die 3 Zeilen beschrieben das, was du im CSS "vorschreiben" sollst :)  
  

> Mein HTML sieht so aus:  
>   
> <a href="http://www.blabla.de"><img src="/icon.gif" width="11" height="14"/>TTEXT</a>  
  
Für beispiele gibt es Domains wie example.com, example.net oder example.org (siehe [RFC 2606](http://www.faqs.org/rfcs/rfc2606.html)).  
  

> Da ist sowohl der Text, als auch das Icon unterstrichen.  
  
Dann sagt vermutlich das Default-Stylesheet des Browsers, dass alle a-Elemente unterstrichen sind.

[Kaethe]

Für beispiele gibt es Domains wie example.com, example.net oder example.org (siehe RFC 2606).

Sorry, wusste ich nicht!

Dann sagt vermutlich das Default-Stylesheet des Browsers, dass alle a-Elemente unterstrichen sind.

Genau! Das ist ja mein Problem. Das soll auch weiter so sein, nur eben bei dem kleinen Icon nicht.

Ich habe mir das mit den Pseudoelementen angeschaut. Danke für den Hinweis!
Wenn ich das richtig verstanden habe, könnte ich damit definieren, dass vor jedem externen Link das Icon erscheinen soll, richtig?
Das wäre schon praktisch, verhindert aber doch immer noch nicht, dass das Icon (wenn es verlinkt ist) unterstrichen wird, oder?

[Gunnar Bittersmann]

@@Kaethe:

nuqneH

Wenn ich das richtig verstanden habe, könnte ich damit [mit Pseudoelementen] definieren, dass vor jedem externen Link das Icon erscheinen soll, richtig?

Richtig. Das wäre die bevorzugte Variante, nicht haufenweise 'img'-Elemente im Markup.

Das wäre schon praktisch, verhindert aber doch immer noch nicht, dass das Icon (wenn es verlinkt ist) unterstrichen wird, oder?

Auch richtig. Allerdings lassen sich in modernen Browsern auch Pseudoelemente relativ positionieren.

Qapla'

[Peter Pan]

Hi!

Du benötigst ein zusätzliches Element welches du unterstreichst

gekürzt:

<a>

<img />
<span>foo</span>
</a>

  
Das funktioniert, ja!  
  

> Bei vernünftigen Browsern kannst du dir das aber sparen und mit Pseudoelementen arbeiten - :before oder :after ist eine Möglichkeit.  
  
Mein erster Gedanke war so etwas:  
  
[code lang=css]  
.extLink:before {  
   content: url(pic.png);  
}[/css]  
  
Allerdings wird dann das PNG im Fx 3.5.8 (ausgerechnet in meinem Lieblings-UA!) auch unterstrichen (auch margin und padding helfen nix)  aber: mit Opera 10.10 und MSIE 8.0.600 geht's.... alles in WIN XP SP3 getestet.  
  
off:PP  
  
  

-- 
"You know that place between sleep and awake, the place where you can still remember dreaming?" (Tinkerbell)  

[Peter Pan]

Hi Ingrid!

Mein erster Gedanke war so etwas:

[code lang=css]
.extLink:before {
   content: url(pic.png);
}[/css]

Allerdings wird dann das PNG im Fx 3.5.8 (ausgerechnet in meinem Lieblings-UA!) auch unterstrichen

In http://www.w3.org/TR/css3-box/ heißt es:

"Pseudo-elements and anonymous boxes are treated as *descendants* in the appropriate places. For example, an outside list marker comes before an adjoining ‘:before’ box in the line box, which comes *before* the content of the box, and so forth."

Somit hat der Fx hier doch wohl einen Bug, oder wer kann mir auf den Sprung helfen?

off:PP

[Jens Holzkämper]

Tach,

Somit hat der Fx hier doch wohl einen Bug, oder wer kann mir auf den Sprung helfen?

Firefox macht es richtig, :before und :after sind innerhalb des Elements für das sie definiert werden: http://www.w3.org/TR/CSS2/generate.html#before-after-content.

mfg
Woodfighter

[Peter Pan]

Hi!

Somit hat der Fx hier doch wohl einen Bug, oder wer kann mir auf den Sprung helfen?

Firefox macht es richtig, :before und :after sind innerhalb des Elements für das sie definiert werden: http://www.w3.org/TR/CSS2/generate.html#before-after-content.

Super, danke! Na da gibt es wohl zum Thema CSS noch einiges zu lesen für mich!

off:PP

[Gunnar Bittersmann]

@@Peter Pan:

nuqneH

Super, danke! Na da gibt es wohl zum Thema CSS noch einiges zu lesen für mich!

CSS3 Generated and Replaced Content Module bietet sich an.

In §4.3.1 finden wir auch die Lösung:

a::outside(1) { display: inline }  
a::outside(1)::before { content: url(foo.png) }

Dumm nur, dass sich das mangels Browserunterstützung noch nicht nutzen lässt. Könnte es sein, dass dies damit zusammenhängt, dass der Autor dieser Spec (deren letzter Working Draft vom 2003-05-14 stammt) sich seither eher um die Implementierung von allerlei Schnickschack in die Browser sorgt?

Qapla'

[Peter Pan]

Hi Gunnar!

Super, danke! Na da gibt es wohl zum Thema CSS noch einiges zu lesen für mich!

CSS3 Generated and Replaced Content Module bietet sich an.

In §4.3.1 finden wir auch die Lösung:

a::outside(1) { display: inline }

a::outside(1)::before { content: url(foo.png) }

  
Danke dafür! Zum Glück lese ich gerne;)  
  

> Dumm nur, dass sich das mangels Browserunterstützung noch nicht nutzen lässt.  
  
Ja, wie immer!  
  

>  Könnte es sein, dass dies damit zusammenhängt, dass der Autor dieser Spec (deren letzter Working Draft vom 2003-05-14 stammt) sich seither eher um die Implementierung von allerlei Schnickschack in die Browser sorgt?  
  
Zum Beispiel bei Chrome? Er (Ian Hickson) ist doch jetzt bei Google oder was meinst Du?  
  
Mit 'Schnickschack' meinst Du hoffentlich nicht HTML 5, oder?  
  
Das schätze ich sehr, seit ich mich damit auseinder gesetzt habe - und ich hoffe, dass jetzt niemand im Archiv kramt und meine sehr dummen Aussagen dazu hervor kramt - ich war damals dem Irrtum aufgesessen, XHTML(2) sei die Zukunft!  
  
  
  
off:PP  
  
  

-- 
"You know that place between sleep and awake, the place where you can still remember dreaming?" (Tinkerbell)  

[suit]

Mit 'Schnickschack' meinst Du hoffentlich nicht HTML 5, oder?

Doch, meint er - und er hat recht.

Hixie hätte bei seiner Baustelle bleiben sollen.

Das schätze ich sehr, seit ich mich damit auseinder gesetzt habe - und ich hoffe, dass jetzt niemand im Archiv kramt und meine sehr dummen Aussagen dazu hervor kramt - ich war damals dem Irrtum aufgesessen, XHTML(2) sei die Zukunft!

XHTML 2.0 war ein zu radikaler Schritt - HTML5 ist ein zu dämlicher Schritt.

Sinnvoll wären ein paar notwendige Ergänzungen zu XHTML 1.0 bzw. XHTML 1.1 gewesen. Ein Unsinniger radikalumbau wie HTML5 ist in meinen Augen etwas seltsam.

[Peter Pan]

Hi suit!

Mit 'Schnickschack' meinst Du hoffentlich nicht HTML 5, oder?

Doch, meint er

hatte ich befürchtet - ich lese ja gelegentlich hier mit;)

• und er hat recht.

Mhm - diese Aussage kann ich so nicht stehen lassen, denn:

Hixie hätte bei seiner Baustelle bleiben sollen.

Man darf einen Irrtum einsehen und zurück rudern, finde ich!

Das schätze ich sehr, seit ich mich damit auseinder gesetzt habe - und ich hoffe, dass jetzt niemand im Archiv kramt und meine sehr dummen Aussagen dazu hervor kramt - ich war damals dem Irrtum aufgesessen, XHTML(2) sei die Zukunft!

XHTML 2.0 war ein zu radikaler Schritt - HTML5 ist ein zu dämlicher Schritt.

Da wird hier im Thread zu sehr OT - gerne können wir das in einem neuen bequatschen, denn ich teile Gunnars und Deine Meinung _hierzu_ *gar nicht*!

Sinnvoll wären ein paar notwendige Ergänzungen zu XHTML 1.0 bzw. XHTML 1.1 gewesen.

Ok: das ist aber nicht geschehen und HTML5 war bereits (auch deshalb) unterwegs.

Ein Unsinniger radikalumbau wie HTML5 ist in meinen Augen etwas seltsam.

Warum unsinnig? Wenn HTML 5 fertig ist (und die Browser es ausreichend unterstützen) hat es alles, was ich mir für das Web erhoffe - das 'semantic web' /könnte/ Realität werden.

off:PP

[Gunnar Bittersmann]

@@Peter Pan:

nuqneH

Warum unsinnig? Wenn HTML 5 fertig ist (und die Browser es ausreichend unterstützen) hat es alles, was ich mir für das Web erhoffe

Ich würde mir mehr erhoffen.

Mit XHTML 2 wäre es für Webautoren einfach geworden: Jedes Element hätte alternativen Inhalt haben können; jedes Element hätte Link sein können:

<h href="http://example.net" src="http://example.net/images/exampledotnet-logo.svg">example dot net</h>

Und wo ist das 'di'-Element in HTML5 (zur Gruppierung von 'dt' und 'dd')?

das 'semantic web' /könnte/ Realität werden.

HTML hat mit dem Semantischen Web nichts zu tun. Auch HTML5 nicht.

Qapla'

[Peter Pan]

Hi Gunnar!

Warum unsinnig? Wenn HTML 5 fertig ist (und die Browser es ausreichend unterstützen) hat es alles, was ich mir für das Web erhoffe

Ich würde mir mehr erhoffen.

Das kannst Du ja aktiv beeinflussen, denn HTML 5 ist noch nicht fertig - BTW: ich hatte mir erhofft und auch vorgeschlagen, dass wir das in einem anderen Thread fortführen.

off:PP

[Gunnar Bittersmann]

@@suit:

nuqneH

Du benötigst ein zusätzliches Element

Nein.

Das Markup zu ändern wegen irgendwelcher Darstellungswünsche ist generell pfui.

Und meist nicht nötig. Hier liegt kein Ausnahmefall vor.

Qapla'

[Gerch2003]

Hi,

Wie schaffe ich es nun, da zu definieren, dass keine Unterstreichung statt findet. Einfach text-decoration: none funktioniert leider nicht. Wird ja wohl von der "Links-immer-unterstreichen-Definition, die ja für die gesamte Seite gilt, überschrieben. Wie schalte ich die aus?

Schreib doch mal das "text-decoration:none;" direkt als Style in das Icon rein.

Also:
<img src="icon.jpg" style="text-decoration:none;" />

Meiner Meinung nach überschreiben interne CSS-Definitionen externe.

Meld dich mal obs ging.

Grüße

[suit]

Meiner Meinung nach überschreiben interne CSS-Definitionen externe.

Gut, dass die CSS-Spezifikation nicht auf Meinungen basiert :) was wie wo und warum überschrieben wird, ist genau geregelt.

[Gerch2003]

Gut, dass die CSS-Spezifikation nicht auf Meinungen basiert :) was wie wo und warum überschrieben wird, ist

Ich hatte mir darüber noch nie Gedanken gemacht. Ist mir nur letztens mal aufgefallen dass da durchaus doch einiges überschrieben wird.

Ist aber jetzt auch gut zu wissen, was alles überschrieben wird ;-)

[Gunnar Bittersmann]

@@Gerch2003:

nuqneH

Schreib doch mal das "text-decoration:none;" direkt als Style in das Icon rein.

Nei-en!! Inline-Styleangaben sind UNSINN.

Die Spezifität eines Selektors lässt sich auch anders erhöhen. Nicht zuletzt per '!important'.

Und außerdem würde das hier sowieso nichts bringen. Weil du eine Unterstreichung nicht mit einer Nicht-Unterstreichung überdecken kannst. „Weil, wenn man den String-Tange durch Luft abdeckt, immer noch ein String-Tanga zu sehen ist.“ [Beat]

Qapla'

[Gunnar Bittersmann]

@@Kaethe:

nuqneH

Einfach text-decoration: none funktioniert leider nicht. Wird ja wohl von der "Links-immer-unterstreichen-Definition, die ja für die gesamte Seite gilt, überschrieben.

Nein, das wird es nicht. Das würde auch nichts bringen.

Du könntest die Bilder per relativer Positionierung etwas nach unten schieben, so dass sie die Unterstreichung überdecken.

Qapla'

[Joachim]

Hi,

Nun wird der Text ja unterstrichen (soll er auch), das Icon hätte ich aber gerne Nicht unterstrichen.

Kannst Du nicht einfach den a-tag mit einem links-padding versehen und ein Hintergrundbild verwenden?

Gruesse, Joachim

[suit]

Kannst Du nicht einfach den a-tag mit einem links-padding versehen und ein Hintergrundbild verwenden?

Was würde das ändern?

[Gunnar Bittersmann]

@@suit:

nuqneH

Kannst Du nicht einfach den a-tag mit einem links-padding versehen und ein Hintergrundbild verwenden?

Ja!!1elf

Was würde das ändern?

Dass das Bild nicht unterstrichen ist.

Und dass kein zusätzliches Element erforderlich ist.

Qapla'

[Joachim]

Hi,

Ja!!1elf

ist das was gutes...?

Gruesse, Joachim

[Gunnar Bittersmann]

@@Joachim:

nuqneH

ist das was gutes...?

„Das Posting wurde 1 mal als fachlich hilfreich bewertet.“

Hm, das steht unter suits Posting auch. Aber die Positiv-Bewertung deines Postings stammt von _mir_! ;->

Wo ist eigentlich der „Nicht-hilfreich“-Button abgeblieben? >;->

Qapla'

[Joachim]

Hi,

Aber die Positiv-Bewertung deines Postings stammt von _mir_! ;->

Wow, das kreuz ich mir Rot im Kalender an: Gunnar hat mich gelobt ;-)

Gruesse, Joachim

[Joachim]

Hi,

Was würde das ändern?

War nicht das Ziel einen unterstrichenen Link mit einem nicht-unterstrichenem Bild davor zu bekommen? Oder habe ich das flasch verstanden...?

Gruesse, Joachim

[Gunnar Bittersmann]

@@Joachim:

nuqneH

Oder habe ich das flasch verstanden...?

▲▲
Nein, du bist ein Blitzmerker.

Qapla'

[Kaethe]

Wow! So viel passiert, während ich nicht am Rechner war.
Ich kämpfe mich jetzt mal durch alle Beiträge! ;o)