Listen mit speziellen Anführungszeichen

mad · 6. September 2007, 09:56

Hallo,

ich habe für einen Kunden eine html-Seite anzufertigen. Nun habe ich eine word-Vorlage :thumbdown:

...
In dieser Vorlage sind Listen mit Bindestrichen (Minus) als Anführungsstrichen drin.
Nun frag ich mich, wie ich das in html umsetze. Ich kann mit Kanonen auf Spatzen schießen und die Zeichen als Bilder mithilfe von Stylesheets den Listeneinträgen voranstellen. Allerdings denke ich, dass es doch auch eine andere Möglichkeit geben muss.

Momentan versuch ich es mit Absätzen <p> und inline-Elementen <span>. Nur klappt das nicht bei langen Texten.

Beispiel:

Quellcode

<p style="margin-left: 30px;">
<span style="margin: 0px 10px;">-</span>Nach derzeitigem Planungsstand werden zwei
verschiedene große Fallstudien angeboten. Ein Schwerpunkt liegt im Bereich
Kosten, Erlöse und Prozesse, der zweite im Bereich Beschaffungscontrolling.</p>

Was ich möchte ist, dass der Bindestrich wie list-style-position:outside behandelt wird.
Kann mir da vielleicht jemand helfen?

Danke im Voraus

Torben Brodt · 6. September 2007, 10:52

Ich würds ja mit einer echten Liste machen. Und den Strich mit list-style-image einbinden.
Oder eben einfach so lange auf den Kunden einreden bis er von der Idee abkommt

mad · 6. September 2007, 11:18

Naja ich würds auch gern mit einer echten Liste machen. Wobei ich versuche einfache Zeichen Bildern vorzuziehen.
Dem Kunden ausreden, naja das muss ich nochmal besprechen...
Ich machs erstmal mit Bild und Liste, falls jemand ne andere Idee hat, kann er sie ja posten.
Ich dachte man kann vielleicht auch Zeichen als "Bild" einfügen, aber das scheint nicht zu funktionieren.

cya

Marcus Gnaß · 6. September 2007, 11:33

Du kannst duch auch einen echten Absatz verwenden dem du ein Minus oder einen Gedankenstrich (dafür gibts ne Entity) voranstellst und die erste Zeile nach links ausrückst.
Siehe css4you.de/Texteigenschaften/text-indent.html
"Auch eine „Textausrückung“ nach links ist möglich, dann muß man einen negativen Wert für »text-indent« verwenden."

mad · 6. September 2007, 11:48

Klingt interessant. Hab es jetzt erstmal anders gemacht, schaue mir aber die Lösung mit text-indent nochmal an!

meine momentane Lösung:

Quellcode

<p>
<div class="floatlinks1">-</div><div class="abstandlinks1">Nach derzeitigem Planungsstand werden zwei
verschiedene große Fallstudien angeboten. Ein Schwerpunkt liegt im Bereich
Kosten, Erlöse und Prozesse, der zweite im Bereich Beschaffungscontrolling.</div></p>

Quellcode

div.abstandlinks1{
margin-left: 50pt;
}
div.floatlinks1{
float: left;
margin-left:30pt;
}

//EDIT:

hier nochmal schnell eine bessere Lösung (von Marcus angeregt)

Quellcode

<p class="rein">Nach derzeitigem Planungsstand werden zwei
verschiedene große Fallstudien angeboten. Ein Schwerpunkt liegt im Bereich
Kosten, Erlöse und Prozesse, der zweite im Bereich Beschaffungscontrolling.</p>

Quellcode

p.rein:before {
content: "-";
margin-right:2em;
}
p.rein{
text-indent:-2.4em; /* +0.4 em vom Wert oben p.rein:before */
margin-left:5em;
}

Danke Marcus!

Danke euch beiden für die Antworten!

Marcus Gnaß · 7. September 2007, 01:40

mad schrieb:

Quellcode

p.rein:before {

content: "-";

margin-right:2em;

}

Geil! Daran hatte ich nicht gedacht! Magst du dazu ein kleines Recipe erstellen und ins Wiki stellen?

mad schrieb:

Danke Marcus!

Gern geschehen!

mad · 7. September 2007, 15:56

Wenn du mir sagst, was du mit Recipe meinst und wie ich das reinstelle, gern. Wollte schon immer mal als Autor fungieren

Ich weiß nur noch nicht, ob die 0.4em Unterschied dem einen Zeichen entsprechen, aber das lässt sich sicherlich rausbekommen...

cya

Torben Brodt · 7. September 2007, 17:06

Ich habe dir mal einen Link angelegt. Einfach auf folgende Seite gehen und bearbeiten.
[coderwiki]HowTos/HTML-Aufzaehlungsliste-mit-einfach-Strich[/coderwiki]

Du kannst dich auch von anderen Wiki Einträgen inspirieren lassen.
Schau dir die Übersicht an [coderwiki]HowTos/HTML-CSS-JavaScript[/coderwiki], wähle eine Seite aus und klick dann auf Bearbeiten. Dann siehst du den Wiki-Code.
Das Syntax-Highlighting ist etwas anders... siehst du aber in den anderen Wiki Einträgen.

mad · 7. September 2007, 18:45

So, hab mal was reingestellt.
Bei Kritik, einfach ändern, ist mein "erstes Mal".

Ich hoffe, es ist ok so.

Die Sache mit dem 0,4em muss ich noch prüfen, basiert bisher nur auf Tests. Wenn da jemand Informationen hat, dann immer her damit

.

cya

Torben Brodt · 7. September 2007, 19:41

wunderbar so

Viel Text ist gut... ich bin oft wortkarger.

Marcus Gnaß · 8. September 2007, 09:50

Klasse und vielen Dank!

mad · 20. September 2007, 23:48

Kein Problem, aber ich habe leider soeben festgestellt, dass das ganze nicht im Internetexplorer funktioniert, da er :before nicht interpretiert.

Wenn jemand ne Lösung hat, einfach rein damit ins Wiki und vor allem: mir bescheid sagen

Ich schreib nen Hinweis ins Wiki...

cya

Listen mit speziellen Anführungszeichen

Listen mit speziellen Anführungszeichen

Quellcode

Quellcode

Quellcode

Quellcode

Quellcode

mad schrieb:

Quellcode

mad schrieb:

Teilen

Tags