Inhalt von :pre formatieren

[Biesterfeld]

Hej,

folgendes:

  
<style type="text/css">  
  a.in:pre{  
    content:url(in.png)" ";  
  }  
</style>  
<a class="in" href="#">Ein interner Link</a>

Vor jedes als "in" klassifizierte Link soll eine kleine Grafik gesetzt werden, die andeutet, dass es sich um einen internen Link handelt.

Zwei Fragen ergeben sich:
Wie kann ich die Höhe der Grafik an die Höhe des Linktextes anpassen?
Wie kann ich einen Zeilenumbruch zwischen Linkinhalt und Grafik verhindern?

Etwas in der Form führte zu nichts

  
a.in:pre{  
  height:1em;  
  content:url(in.png)" ";  
}

Die Höhe lässt sich so in keiner Weise manipulieren und die Entität wird als String ausgegeben und nicht interpretiert.

Bin für jeden Tip dankbar.

Beste Grüße
Biesterfeld

[Cheatah]

Hi,

a.in:pre{

die Pseudoklasse bzw. das Pseudoelement ":pre" kenne ich aus keinem CSS-Standard zwischen 1.0 und 3.0 (einschließlich).

Wie kann ich die Höhe der Grafik an die Höhe des Linktextes anpassen?

Sollte es sich um ein Pseudoelement handeln, müsste es anschließend ein Replaced Element sein, d.h. width und height greifen. Natürlich beziehen sie sich auf das gesamte Element, nicht nur auf den Teil der Grafik - wobei ich unterstelle, dass Du " " ohnehin nicht als Content hinzufügen möchtest.

Wie kann ich einen Zeilenumbruch zwischen Linkinhalt und Grafik verhindern?

Einen eventuellen? Soweit ich weiß gar nicht.

Die Höhe lässt sich so in keiner Weise manipulieren

Von wem?

und die Entität wird als String ausgegeben und nicht interpretiert.

Selbstverständlich. Wieso sollte CSS irgend welche Eigenarten einer fremden Technologie wie HTML beherrschen?

Cheatah

[Biesterfeld]

Hej,

a.in:pre{

die Pseudoklasse bzw. das Pseudoelement ":pre" kenne ich aus keinem CSS-Standard zwischen 1.0 und 3.0 (einschließlich).

Arrrgh, ich meinte natürlich :before. Steht aber auch so in meinem CSS. Sorry, da hab ich gepennt.

Wie kann ich die Höhe der Grafik an die Höhe des Linktextes anpassen?

Sollte es sich um ein Pseudoelement handeln, müsste es anschließend ein Replaced Element sein, d.h. width und height greifen. Natürlich beziehen sie sich auf das gesamte Element, nicht nur auf den Teil der Grafik - wobei ich unterstelle, dass Du " " ohnehin nicht als Content hinzufügen möchtest.

Öh, sorry den ganzen Absatz versteh ich nicht. Wer ist jetzt replaced-Element und wer ist pseudo? Und was spricht dagegen zwischen Grafik und Linkinhalt ein Leerzeichen zu setzen?

Wie kann ich einen Zeilenumbruch zwischen Linkinhalt und Grafik verhindern?

Einen eventuellen? Soweit ich weiß gar nicht.

Hmmm, das is doof

Die Höhe lässt sich so in keiner Weise manipulieren

Von wem?

Naja, durch das :before.

Beste Grüße
Biesterfeld

[Cheatah]

Hi,

Arrrgh, ich meinte natürlich :before. Steht aber auch so in meinem CSS.

tja, Copy & Paste regelt ... :-)

Öh, sorry den ganzen Absatz versteh ich nicht. Wer ist jetzt replaced-Element und wer ist pseudo?

Durch :before "erzeugst" Du ein Pseudoelement, also ein Element, welches nicht in der notierten Struktur ersichtlich ist. Replaced ist z.B. ein <img>-Element, weil sein Inhalt durch eine Fremdressource ersetzt wird.

Und was spricht dagegen zwischen Grafik und Linkinhalt ein Leerzeichen zu setzen?

a) Du willst ein Bild haben, kein Bild mit Leerzeichen.
b) Das Leerzeichen dient augenscheinlich der Produktion eines Abstandes. Und wie erzeugt man in CSS Abstände?

Wie kann ich einen Zeilenumbruch zwischen Linkinhalt und Grafik verhindern?
Einen eventuellen? Soweit ich weiß gar nicht.
Hmmm, das is doof

Dein Vorhaben ist eigentlich eines, welches üblicherweise nicht mit :before und content umgesetzt wird, sondern mit Mitteln, die selbst der IE (leidlich) beherrscht. Orlando hat sie angedeutet.

Die Höhe lässt sich so in keiner Weise manipulieren
Von wem?
Naja, durch das :before.

Ich meinte: Von welchen Browsern?

Cheatah

[Biesterfeld]

Hej,

Durch :before "erzeugst" Du ein Pseudoelement, also ein Element, welches nicht in der notierten Struktur ersichtlich ist. Replaced ist z.B. ein <img>-Element, weil sein Inhalt durch eine Fremdressource ersetzt wird.

Ok

a) Du willst ein Bild haben, kein Bild mit Leerzeichen.
b) Das Leerzeichen dient augenscheinlich der Produktion eines Abstandes. Und wie erzeugt man in CSS Abstände?

Ok

Dein Vorhaben ist eigentlich eines, welches üblicherweise nicht mit :before und content umgesetzt wird, sondern mit Mitteln, die selbst der IE (leidlich) beherrscht. Orlando hat sie angedeutet.

Ok, ich glaube ich habs jetzt so ungefähr:

  
a.in, a.ex, a.pdf, a.imp{  
  background:no-repeat left;  
  padding:0.3em 0.2em 0.2em 20px;  
  text-decoration:underline;  
}  
  
a.in {background-image:url( in.png);}  
a.ex {background-image:url( ex.png);}  
a.pdf{background-image:url(pdf.png);}  
a.imp{background-image:url(imp.png);}  

Vielen Dank euch beiden.

Beste Grüße
Biesterfeld

[Orlando]

Hallo Biesterfeld,

noch zwei Dinge:

1. Beim hover-Zustand verschwindet das Bild, weil du mit a:hover {background:#B2A384;} den Wert von background-image zurücksetzt. Ändere hier nur background-color.

2. IE bis Version 5.01 kennt hier leider kein padding-left, weswegen der Beginn der Verweise unlesbar wird. Dagegen hilft nur (mindestens) ein   in HTML selbst.

Die Seite gefällt mir übrigens sehr gut.

Grüße
 Roland

[Biesterfeld]

Hej Roland,

Ändere hier nur background-color.

Und ich hab mir den Kopf zerbrochen, wie ich das geflickt bekomme!

2. IE bis Version 5.01 kennt hier leider kein padding-left, weswegen der Beginn der Verweise unlesbar wird. Dagegen hilft nur (mindestens) ein   in HTML selbst.

Falls mein Projekt bald wachsen sollte, werd ich mir sowieso noch überlegen müssen, wie sehr ich auf in die Jahre gekommene Browser Rücksicht nehmen möchte. Für den Moment behalts ichs mal gerne im Hinterkopf.

Die Seite gefällt mir übrigens sehr gut.

Huch ... vielen Dank :)

Beste Grüße
Biesterfeld

[Orlando]

Hallo Biesterfeld,

Vor jedes als "in" klassifizierte Link soll eine kleine Grafik gesetzt werden, die andeutet, dass es sich um einen internen Link handelt.

Nutze http://de.selfhtml.org//css/eigenschaften/pseudoformate.htm#before_after@title=:before

Wie kann ich die Höhe der Grafik an die Höhe des Linktextes anpassen?

Mit generiertem Inhalt: Gar nicht. Das funktioniert nur per http://de.selfhtml.org//css/eigenschaften/hintergrund.htm#background_image@title=background-image, eventuell in Verbindung mit http://de.selfhtml.org//css/eigenschaften/pseudoformate.htm#first_line_letter_child@title=:first-line.

Wie kann ich einen Zeilenumbruch zwischen Linkinhalt und Grafik verhindern?

Mit

pre:before { content:"\A0" }

\A0 entspricht hier  .

Etwas in der Form führte zu nichts

a.in:pre{
  height:1em;
  content:url(in.png)"&nbsp;";
}

  
:pre ist kein Bestandteil von CSS. Du meinst vermutlich  
  
~~~css
  
a.in pre:before {  
  height:1em;  
  content:url(in.png)"\A0";  
}

Wobei <pre> in <a> nichts verloren hat. Wie sieht dein HTML-Quelltext aus?

Die Höhe lässt sich so in keiner Weise manipulieren und die Entität wird als String ausgegeben und nicht interpretiert.

Die CSS-Syntax, um beliebige generierte Zeichen einzufügen, ist der Backslash gefolgt vom Unicode-Wert.

Grüße
 Roland

[Biesterfeld]

Hej,

Nutze http://de.selfhtml.org//css/eigenschaften/pseudoformate.htm#before_after@title=:before

Grrr, das tue ich auch ;) Vergiss :pre, das war eine vorhin eine Fehlleistung.

Wie kann ich die Höhe der Grafik an die Höhe des Linktextes anpassen?

Mit generiertem Inhalt: Gar nicht. Das funktioniert nur per http://de.selfhtml.org//css/eigenschaften/hintergrund.htm#background_image@title=background-image, eventuell in Verbindung mit http://de.selfhtml.org//css/eigenschaften/pseudoformate.htm#first_line_letter_child@title=:first-line.

Das versteh ich nicht so ganz, wie mir das helfen kann.

a.in:before {
  height:1em;
  content:url(in.png)"\A0";
}

  

> Die CSS-Syntax, um beliebige generierte Zeichen einzufügen, ist der Backslash gefolgt vom Unicode-Wert.  
  
Hmmm, wieso führt das bei mir zu nichts? Verwende im Moment FF 1.07.  
<http://www-public.tu-bs.de:8080/~y0016496/ls/>  
  
Beste Grüße  
Biesterfeld

-- 
"Nein! ... Nein, schneller, leichter, verführerischer die dunkle Seite ist."

[Orlando]

Hallo Biesterfeld,

a.in:before {
  height:1em;
  content:url(in.png)"\A0";
}

  
Ok, das ist korrekt.  
  

> Hmmm, wieso führt das bei mir zu nichts? Verwende im Moment FF 1.07.  
> <http://www-public.tu-bs.de:8080/~y0016496/ls/>  
  
Bei mir funktionieren alle Verweise mit der Klasse „ex“ in Opera und Firefox wunderbar. Die mit der Klasse „in“ dagegen nicht. Es gibt nämlich keine …  
  
Grüße  
 Roland  

-- 
[SELFHTML-Community](http://community.de.selfhtml.org/) > [Visitenkarten](http://community.de.selfhtml.org/visitenkarten/) > [Orlando](http://community.de.selfhtml.org/visitenkarten/view.php?key=25)

[Biesterfeld]

Hej,

Hmmm, wieso führt das bei mir zu nichts? Verwende im Moment FF 1.07.
http://www-public.tu-bs.de:8080/~y0016496/ls/

Bei mir funktionieren alle Verweise mit der Klasse „ex“ in Opera und Firefox wunderbar. Die mit der Klasse „in“ dagegen nicht. Es gibt nämlich keine …

Das mag ja auch auf dieser konkret verlinkten Seite auch so sein. Es gibt aber grundsätzlich für jeden Verweiszieltyp eine Klasse: in, ex, pdf, imp. Alle habe ich wie von dir beschrieben ausgestattet.

  
a.XYZ:before{  
  content:url(XYZ.png)"\A0";  
}

Nur damit es kein Missverständnis gibt: Ich möchte dass zwischen dem pdf- (oder XYZ-) Symbol und dem Linkinhalt unter keinen Umständen umgebrochen wird.

Der Feuerfuchs tut es aber trotzdem (umbrechen). Der Opera macht es irgendwie nur, bis die Weite des Elementes im Verhältnis zur Schriftgröße zu klein wird. Am konsequentesten setzt hier mal wieder der IE das css um: Nämlich gar nicht!

Naja, wenns keine Lösung gibt, dann isses eben so. Dank euch trotzdem ganz herzlich.

Beste Grüße
Biesterfeld