immer ein gleiches Symbol vor einem Link

[Christian]

Servus!

Ich arbeite gerade an einem Projekt und bin auf ein kleines Problem gestoßen: Und zwar sollen bei meinen Links vorher immer ">>" stehen. Dies soll genau so aussehen:

Link

Wie bekomme ich das mit CSS hin, dass dies genau so erscheint, ohne dass ich immer ">>" vor den Link schreiben muss. Außerdem soll bei einem Zeilenumbruch der Link nicht unter dem ">>" stehen, sondern eingerückt sein. Übrigens soll ">>" nicht als Grafik eingefügt werden. Ist dies möglich?
Vielen Dank für eure Hilfestellung.

Liebe Grüße
Christian

[shev]

Sers

Probier mal so etwas in der Art, wichtig ist das
content: element. Bin mir aber nicht 100% sicher ob
das auch das ist was du willst... probiers mal aus
und schau auf einer CSS Seite zu content: nach

effect                     { display:block; }
effect:before              { content: ">>";}

[wahsaga]

hi,

Wie bekomme ich das mit CSS hin, dass dies genau so erscheint, ohne dass ich immer ">>" vor den Link schreiben muss.

:before

Außerdem soll bei einem Zeilenumbruch der Link nicht unter dem ">>" stehen,

Du meinst, dass zwischen dem Link und dem davorgesetzten ">>" kein Umbruch stattfinden darf? Dann regle noch das Textumbruch-Verhalten entsprechend.

sondern eingerückt sein.

Das verstehe ich nicht ganz.

gruß,
wahsaga

[Auge]

Hallo

Außerdem soll bei einem Zeilenumbruch der Link nicht unter dem ">>" stehen, sondern eingerückt sein.

Das verstehe ich nicht ganz.

Es soll aussehen, wie in einer Liste:

Dies ist ein Link

mit Umbruch

Tschö, Auge

[Christian]

jupp, genau so!

[Gunnar Bittersmann]

Hello out there!

Es soll aussehen, wie in einer Liste:

Dies ist ein Link
   mit Umbruch

jupp, genau so!

Äh, Moment mal. _Hast_ du all diese Links untereinander in einer Liste?

Dann sollten sie so ausgezeichnet sein:

<ol>  
  <li><a href="foo">foo</a></li>  
  <li><a href="bar">bar</a></li>  
  <li><a href="baz">baz</a></li>  
</ol>

Und du benutzt die CSS-Eigenschaft 'list-style-image'.

See ya up the road,
Gunnar

[Mathias Brodala]

Hallo Auge.

Es soll aussehen, wie in einer Liste:

Dies ist ein Link
   mit Umbruch

Dies kann man wohl nur mit float bzw. display:inline-block erreichen. Aber da letzteres nur von Opera verstanden wird, kommt es wohl leider nicht in Frage. Beim Floating besteht damit das Problem, dass der Link aus dem Fluß des umliegenden Textes genommen wird …

Einen schönen Donnerstag noch.

Gruß, Mathias

[Mathias Brodala]

Hallo nochmal.

Es soll aussehen, wie in einer Liste:

Dies ist ein Link
   mit Umbruch

Dies kann man wohl nur mit float bzw. display:inline-block erreichen.

Hier einmal umgesetzt.

Einen schönen Donnerstag noch.

Gruß, Mathias

[Auge]

Hallo

Es soll aussehen, wie in einer Liste:

Dies ist ein Link
   mit Umbruch

Dies kann man wohl nur mit float bzw. display:inline-block erreichen. Aber da letzteres nur von Opera verstanden wird, kommt es wohl leider nicht in Frage. Beim Floating besteht damit das Problem, dass der Link aus dem Fluß des umliegenden Textes genommen wird …

Mit padding-left sollte es doch wohl auch gehen, oder?

Tschö, Auge

[Mathias Brodala]

Hallo nochmal.

Es soll aussehen, wie in einer Liste:

Dies ist ein Link
   mit Umbruch

Dies kann man wohl nur mit float bzw. display:inline-block erreichen. Aber da letzteres nur von Opera verstanden wird, […]

Hm, könnte es sein, dass es eigentlich anders herum war? Geckos kennen diesen Wert für die display-Eigenschaft nicht. Im Konqueror und sogar im IE sieht der erste Absatz in meinem eben verlinkten Beispiel wie gewünscht aus …

Einen schönen Donnerstag noch.

Gruß, Mathias

[D.R.]

Hallo,

Hm, könnte es sein, dass es eigentlich anders herum war? Geckos kennen diesen Wert für die display-Eigenschaft nicht. Im Konqueror und sogar im IE sieht der erste Absatz in meinem eben verlinkten Beispiel wie gewünscht aus …

Der Vollständigkeit halber:
Der FF unterstützt "display:-moz-inline-box" (bewirkt das Gleiche wie display:inline-block)

Und ja, ich finde es auch schade, dass er den standardisierten Wert nicht kennt :-(

mfg. Daniel

[Mathias Brodala]

Hallo Daniel.

Hm, könnte es sein, dass es eigentlich anders herum war? Geckos kennen diesen Wert für die display-Eigenschaft nicht. Im Konqueror und sogar im IE sieht der erste Absatz in meinem eben verlinkten Beispiel wie gewünscht aus …

Der Vollständigkeit halber:
Der FF unterstützt "display:-moz-inline-box" (bewirkt das Gleiche wie display:inline-block)

Hm, bist du dir sicher, dass dieser Wert äquivalent zu „inline-block“ ist?

Ich habe mein Beispiel nun einmal aktualisiert und mein Firefox zeigt „-moz-inline-box wie „inline“ an.

Einen schönen Donnerstag noch.

Gruß, Mathias

[D.R.]

Hallo,

Hm, bist du dir sicher, dass dieser Wert äquivalent zu „inline-block“ ist?

Ja, hier mal ein Beispiel

Ich habe mein Beispiel nun einmal aktualisiert und mein Firefox zeigt „-moz-inline-box wie „inline“ an.

Bei mir nicht.

mfg. Daniel

[Mathias Brodala]

Hallo Daniel.

Hm, bist du dir sicher, dass dieser Wert äquivalent zu „inline-block“ ist?

Ja, hier mal ein Beispiel

Nicht sonderlich nützlich, da die Darstellung in Firefox und Opera in deinem Beispiel identisch ist.

Ich habe mein Beispiel nun einmal aktualisiert und mein Firefox zeigt „-moz-inline-box wie „inline“ an.

Bei mir nicht.

Bei dir sieht mein Beispiel also nicht wie folgt aus?

Opera:

Firefox:

Der Link im zweiten Absatz sieht für mich eindeutig nach display:inline aus, obwohl es nicht so formatiert wurde. (Sogar der Zeilenumbruch wurde unwirksam gemacht.)

Einen schönen Freitag noch.

Gruß, Mathias

[D.R.]

Hallo,

Der Link im zweiten Absatz sieht für mich eindeutig nach display:inline aus, obwohl es nicht so formatiert wurde. (Sogar der Zeilenumbruch wurde unwirksam gemacht.)

Ah stimmt, ich hab mal noch ein bisschen am Beispiel rum-experimentiert. Und ja, man kann zwar width und height-Angaben auf den inline-Block loslassen, aber anscheinend werden Umbrüche ignoriert und alles, was über eine evtl. gesetzte width-Angaben geht, wird halt über den nachfolgenden Inhalt geschoben.

Naja, ich hatte das mit der -moz-inline-box halt mal irgendwo gelesen...als Alternative

mfg. Daniel

[Orlando]

Hallo Christian,

Wie bekomme ich das mit CSS hin, dass dies genau so erscheint, ohne dass ich immer ">>" vor den Link schreiben muss.

Mit <http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#before_after@title=generiertem Inhalt>.

a:before { content:">> "; }

Das funktioniert zwar selbst im IE 7 nicht, doch es gibt einen Workaround.

Grüße
 Roland

[Marian]

Hallo Christian,

Ich arbeite gerade an einem Projekt und bin auf ein kleines Problem gestoßen: Und zwar sollen bei meinen Links vorher immer ">>" stehen. Dies soll genau so aussehen:

Link
Wie bekomme ich das mit CSS hin, dass dies genau so erscheint, ohne dass ich immer ">>" vor den Link schreiben muss. Außerdem soll bei einem Zeilenumbruch der Link nicht unter dem ">>" stehen, sondern eingerückt sein. Übrigens soll ">>" nicht als Grafik eingefügt werden. Ist dies möglich?

Ja. CSS 2.0 bietet hierzu :before und :after. Leider interpretiert der IE das nicht (IIRC auch IE7 nicht).

Wenn es im IE auch funktionieren soll, musst du Grafiken verwenden (einfach als Hintergrundbild einbinden und padding geben). Du kannst auch für standardkonforme Browser :before verwenden und nur für den IE das Bild. (mittels einer Browserweiche)

Viele Grüße aus Freiburg,
Marian

[Christian]

Servus Marian!

Erst einmal danke an alle für die schnellen Antworten!
Also, das mit dem :before taugt mir nicht so wirklich. Zwar sieht das im FF klasse aus, aber der IE hat mal wieder ne Extrawurst....
Najaa, ich habe das jetzt mal mit einem Backgroundimage gelöst. Allerdings kommt es hier zu einem kleinen Problem:
Wenn ich einen Padding-Left setze, ist lediglich die erste Zeile eingerückt und bei einem Zeilenumbruch die zweite nicht mehr.
Wenn ich ein Margin-left setze, habe ich die gleiche Situation wie beim Padding. Außerdem ist mein Image ebenfalls eingerückt.
Wie könnte ich das lösen?

Grüße
Christian

[Auge]

Hallo

Also, das mit dem :before taugt mir nicht so wirklich. Zwar sieht das im FF klasse aus, aber der IE hat mal wieder ne Extrawurst....

Letzteres wurde dir ja mehrfach mitgeteilt.

Wenn ich einen Padding-Left setze, ist lediglich die erste Zeile eingerückt und bei einem Zeilenumbruch die zweite nicht mehr.

Dann machst du irgendwas falsch. Das padding gilt für das ganze Element, nicht nur für dessen erste Zeile des Inhalts.

Tschö, Auge

[Christian]

Servus

Mmmh, Fehler?
Schau dir mal bitte folgende Seite an.
Testseite
Siehst du da einen Fehler?
Vielen Dank

Grüße
Christian

[MudGuard]

Hi,

Wenn ich einen Padding-Left setze, ist lediglich die erste Zeile eingerückt und bei einem Zeilenumbruch die zweite nicht mehr.
Dann machst du irgendwas falsch. Das padding gilt für das ganze Element, nicht nur für dessen erste Zeile des Inhalts.

When an inline box is split, margins, borders, and padding have no visual effect where the split occurs (or at any split, when there are several).
(siehe http://www.w3.org/TR/CSS21/visuren.html#inline-formatting)

cu,
Andreas

[Christian]

Servus!

Also, ich habe das jetzt hingebracht, so wie ich mir das gewünscht habe. Allerdings zieht es mir jetzt die Zeilen auseinander!
Schaut euch mal die folgende Seite an:
Testseite
Wie schaffe ich es, dass ich nicht solch große Abstände zwischen den Links habe?
Vielen Dank!

Grüße
Christian

[Gunnar Bittersmann]

Hello out there!

Schaut euch mal die folgende Seite an:

Diagnose: schwerer Fall von Divitis. Gute Besserung. Und ein Rezept.

Wie schaffe ich es, dass ich nicht solch große Abstände zwischen den Links habe?

Indem du sie nicht angibst.

#post_main {  
 PADDING-TOP: 15px;  
 PADDING-BOTTOM: 15px;  
 PADDING-LEFT: 5px;  
 PADDING-RIGHT: 5px;  
 COLOR: #000000;  
 TEXT-DECORATION: none  
}

See ya up the road,
Gunnar

[Christian]

Servus Gunnar!

Mmmh, leider hat dieser CSS-Tag nix damit zu tun.
Wenn du dir nämlich die aktualisierte Testseite anschaust, siehst du, dass ich  der Abstand nicht beeinflusst wurde.
Wo liegt der Fehler?

Grüße
Chrisitan

[Gunnar Bittersmann]

Hello out there!

Wo liegt der Fehler?

<div id="post_main"><p><a id="float" href="" class="external">bla bla bla bla bla bla</a></p><br>
                                                                                                 ▲▲▲▲
Was soll das 'br' dort? Das erzeugt einen Zeilenumbruch _nach_ der Absatz-Box. Das dürfte der Abstand sein, der dich stört.

<p><a id="float" href="" class="external">bla bla […]</a></p><br>
                                  ▲▲▲▲▲
Fehler: Die ID 'float' war bereits vergeben. ID steht für Identität _genau eines_ Elements; muss also eindeutig sein. Zwei Personen können auch nicht dieselbe Personalausweisnummer haben (in einem Land).

Und du hast dich von deiner Divitis noch nicht erholt? (So, jetzt ist es auch ein Link. Dem solltest folgen.)

Frei nach [wahsaga]: „Ich möchte furchtbar gern eine Liste sein, bitte bitte lass mich doch ...!!!1“

See ya up the road,
Gunnar

[Christian]

Servus!

Uiuiuiuiui, das ist ja ein nicht-enden-wollendes Problem...
Die gute Nachricht: Im FF sieht mein Kasten genau so aus, wie ich mir das vorstelle!
Die schlechte Nachricht: Leider muss man auch auf die risikobereitschafte Bevölkerungsgruppe Rücksicht nehmen und den IE auch akzeptieren :(
Der aktuelle Stand ist auf der folgenden Testseite zu sehen. Schaut euch mal bitte diese Seite in beiden Browsern an. Das ist doch schrecklich, oder? Was kann man da denn machen?

Grüße
Christian

[Christian]

Ach übrigens: Ne, ich habe immer noch die Divitis!
Ich finde die eh viel besser als die "tableitis" muhahaa

Grüße
Christian

[Auge]

Hallo

Wenn du dir nämlich die aktualisierte Testseite anschaust, siehst du, dass ich  der Abstand nicht beeinflusst wurde.
Wo liegt der Fehler?

Über die Zeilenumbrüche zwischen den Absätzen (<p>...</p><br><p>...</p>) hat Gunnar bereits geschrieben. Und dass das Padding wirkt, liegt an float:left;, womit die Links zu Blockelementen werden.

Ob float:left; für deinen Anwendungsfall das Richtige ist, musst du am besten wissen.

Tschö, Auge

[Cheatah]

Hi,

Wenn ich einen Padding-Left setze, ist lediglich die erste Zeile eingerückt und bei einem Zeilenumbruch die zweite nicht mehr.

dann ist es ein Inline-Element. Verrate uns bitte, wie es im Falle eines Umbruchs aussehen soll:

Diese Zeile enthält einen >> Link, innerhalb
dessen sich ein Umbruch befinden kann.

Diese Zeile enthält einen >> Link, innerhalb
   dessen sich ein Umbruch befinden kann.

Diese Zeile enthält einen >> Link, innerhalb
                             dessen sich ein
                             Umbruch befinden
                             kann.

Cheatah

[Gunnar Bittersmann]

Hello out there!

Und zwar sollen bei meinen Links vorher immer ">>" stehen. […] Übrigens soll ">>" nicht als Grafik eingefügt werden. Ist dies möglich?

Ja*, mit dem <http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#before_after@title=Pseudoelemente :before>

Wie ein Unicode-Zeichen in CSS angegeben wird, findest du dort im Beispiel, no-break space ist U+00A0.

See ya up the road,
Gunnar

* Ein völlig veralteter Browser macht da nicht mit. Ist das wichtig? Ich denke, nein. Sein sich demnächst wie ein Virus verbreitender Nachfolger wird’s IIRC können.

[at]

Hallo.

Sein sich demnächst wie ein Virus verbreitender Nachfolger wird’s IIRC können.

YDNRC
MfG, at