<li>-Tag und linker Einzug

[Wolfgang G]

Hallo allerseits,

ich habe folgendes "Problem":

Ich will eine Liste per <ul> und <li></li> erstellen und dieser per CSS-Format einen linken Einzug geben.

Im IE 6 funktioniert das wunderbar, jedoch vergessen NS7 und Firebird beim Einzug die Aufzählungszeichen. Will sagen, meine Punkte bleiben am linken Rand kleben, während der Text korrekt eingezogen wird.

Hier der vewendete Code:

<ul>
  	<li class="Jahreszahl">1990 bis 1992
	<span class="vitapunkte">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Ausbildung zum Schriftsetzer</span></li>	
	<li class="Jahreszahl">1992 bis 1994	&nbsp;&nbsp;&nbsp;&nbsp;<span class="vitapunkte">Verlagsangestellter in der Druckvorstufe</span></li>
	<li class="Jahreszahl">1995 bis heute
        &nbsp;&nbsp;&nbsp;<span class="vitapunkte">Selbständiger Einzelunternehmer</span></li>
</ul>

Und die CSS-Definitionen:

.Jahreszahl {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	list-style-type: square;
	text-indent: 10%;
	line-height: 40px;

}
.vitapunkte {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-indent: 20pt;
	font-weight: normal;


}

Idee?

[prefix]

tja, sehe gerade, dass es da tatsächlich große abweichungen gibt.

versuch es mal wie in diesem beispiel!

gib der klasse ".Jahreszahl" mal folgendes noch mit:

list-style-position: inside;

[Wolfgang G]

Hallo Prefix,

erstmal danke für die schnelle Hilfe.

Mit der :inside-Anweisung klappt es zwar, jedoch ist diese Lösung eher sub-optimal, weil bei mehrzeiligen Absätzen der Blickfangpunkt nicht ausgerückt bleibt.

Ich werde den Textblock wohl auf eine separate Ebene (div) packen und diese entsprechend einrücken.

Aber wenigstens hab ich gelernt, dass <ul> und <ol> nicht mehr nötig sind.

Wolfgang

[prefix]

ul und nicht mehr notwendig??? wie meinst du das??

die brauchst du natürlich schon noch

[LANtastic]

Tja, wie du bereits sagst, werden die Texte bei text-ident eingerückt. Naja, irgendwo bietet sich das ja auch an. Daher vermutlich der Name

Ersetze doch mal das text-ident durch "margin". Sprich der CSS-Code sollte so aussehen :

.Jahreszahl {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	list-style-type: square;
	margin-left: 10%;
	line-height: 40px;

}
.vitapunkte {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	margin-left: 20pt;
	font-weight: normal;


}

Ich kann dir jetzt nicht genau sagen, wie der Opera Browser reagiert, aber ich glaube das müsste auch dort hinhauen. Der legt margin/padding & Co bei UL/LI/OL nämlich irgendwie anders aus.

Wie gesagt : text-ident rücjt auch Text ein. Sobald du von Abständen redest musst du immer überlegen, ob du nun innere oder äußere Abstände meinst. Demnach halt entsprechend padding oder margin einsetzen.

[Wolfgang G]

@prefix:
<ul><ol>: Stimmt natürlich, nur die Attribute kommen aus dem CSS ...

@LANtastic:
Mit der margin-Anweisung klappt es jetzt in beiden Browsern. Danke!

Wolfgang