Hallo,

Ich bin gerade dabei, ein CSS für eine ePub-Datei zu »tweaken« ;)
Dabei stolpere ich gerade über folgendes: Ich habe in meinem HTML,
das aus InDesign exportiert wurde, nun diese Zeile:

Code

<p class="rede">Va-t-il y avoir quelqu’un dans ma classe que je connais ? Qui sera mon régent de classe et sera-t-il gentil ? …</p> 

Ich möchte nun, dass alles, was mit der CSS-Klasse »rede« ausgezeichnet
ist, mit hängendem Einzug versehen wird, mit einem Gedankenstrich vorne
dran. So wie ich das sehe, ließe sich das mit einem <ul><li> lösen,
nur muß ich dann diese Tags ins HTML rein bekommen, da InDesign
hier leider nichts vorsieht (Suchen Ersetzen?). Bei <ul><li> ließe sich dann
der Punkt der normalerweise gesetzt wird, durch ein eigenes Zeichen (eben
Gedankenstrich) ersetzen ...

Siehe auch Attachment für ein Beispiel wie es aussehen soll.

Danke für Ideen.

Gruß,
Sacha

Hallo Sacha,

dafür gibt´s die CSS-Eigenschaften

list-style-type
http://de.selfhtml.org/...nschaften/listen.htm

und list-style-image
http://de.selfhtml.org/...htm#list_style_image

Für Deinem Fall brauchst Du
list-style-image

Hallo Sabine,

Ja, das mit list-style-type und list-style-image hab ich gefunden. Mein Problem
ist aber eher, die <ul> und <li> Tags ins Dokument zu bekommen.
D.h. kann ich nicht was definieren wie: Alles was mit CSS-Klasse »rede«
ausgezeichnet ist, soll eine Liste sein ...? Also die Liste komplett via
CSS erstellen?

Gruß,
Sacha

Hallo Sacha

Code

.rede {  
	padding-left: 30px; 
	background: transparent url('http://www.deinewebsite.lu/zeichen-vor-dem-text.gif') no-repeat 15px 5px; 
	} 

Das wäre eine Lösung ohne die von Dir verlangte Umstellung auf Listen.

Gruss
Martin

Hallo Martin,

Danke für den Tipp. Muß bei dieser Lösung mit einem Bild verfahren werden
oder kann ich auch ein Zeichen gebrauchen? Ich möchte in meinem Fall
ja den Gedankenstrich davor? Das wäre ja dann: &#8211;

Ich hab z.B. diesen Code gefunden um die Bullets zu ersetzen. Hier geht
man aber wieder von einem Listenelement aus (das ich ja nicht habe)

Code

#custom-gen ul li:before { 
	content: "\00BB \0020"; 
	} 

Doch wie kann ich den jetzt da kombinieren? Oder geht das nicht?

Gruß,
Sacha

Hallo Sacha

Ohne es jetzt ausprobiert zu haben, würde ich aber meinen, dass Deine Variante keine hängenden Einzüge produziert, sondern einfach einen Gedankenstrich vor den Text stellt, und diesen dann bei einem padding ebenfalls einrückt.

Gruss
Martin

So müßte es klappen:
.rede{text-indent:-1em;margin-left:1em}

http://aktuell.de.selfhtml.org/...tung.htm#text_indent

Hallo Sabine

text-indent lässt leider nur die erste Zeile einrücken.

Gruss
Martin

Hallo Sabine,

Yep, das funktioniert :-) Ich hab's ein wenig verändert. Da der Gedankenstrich
schon im HTML drin ist, funktioniert das so. Im Anhang ein Screenshot
aus Digital Editions. Mein CSS-Code sieht jetzt so aus:

Code

p.rede { 
	font-family: "serif"; 
	line-height: 1.21em; 
	font-size: 1.00em; 
	margin-bottom: 1.18em; 
	margin-top: 0.00em; 
	margin-right: 2.36em; 
	text-align: left; 
	font-weight: normal; 
	font-style: normal; 
	color: rgb(0,0,0); 
	text-indent: -0.8em; 
	margin-left: 3.36em 
} 

Danke!

Gruß,
Sacha

>> text-indent lässt leider nur die erste Zeile einrücken.
Hallo Martin,
schau Dir mal das dritte Beispiel an (dritter Absatz), ausrücken geht auch:
http://aktuell.de.selfhtml.org/...eige/text_indent.htm
Das dritte Beispiel hat mich erst auf diese Idee gebracht.

Ich lehrs wohl nie. Man soll Sabine nicht korrigieren wollen