Auflistung: Zeilenumbruch verhindern + Aufzählungszeichen

[meisle]

Hallo,

ich will Aufzählungszeichen im Fließtext haben, wobei die Aufzählungen in <li>irgendwas</li> enthalten sein sollen.
Mit "li {display: inline;}" bekommt man ja schon mal die Zeilenumbrüche aber auch die Aufzählungszeichen weg. Und gerade die Aufzählungszeichen sollen bleiben.

Es soll dann ungefähr so aussehen (# = Aufzählungszeichen):
#listeneintrag1 #listeneintrag2 #listeneintrag3

... anstatt so:
#listeneintrag1
#listeneintrag2
#listeneintrag3

... mit display: inline;
listeneintrag1 listeneintrag2 listeneintrag3

Freue mich auf Eure Hilfe :)
meisle

[Gernot Back]

Hallo meisle,

ich will Aufzählungszeichen im Fließtext haben, wobei die Aufzählungen in <li>irgendwas</li> enthalten sein sollen.
Mit "li {display: inline;}" bekommt man ja schon mal die Zeilenumbrüche aber auch die Aufzählungszeichen weg. Und gerade die Aufzählungszeichen sollen bleiben.

Dann arbeite doch mit padding-left und einer Hintergrundgrafik bei deiner Inline-Liste!

Gruß Gernot

[meisle]

Hi,

danke erst einmal für eure Vorschläge :) .

@Quapla: Dein Vorschlag mit li:before {content: "#"} habe ich leider nicht zum Laufen gebracht.
Der zweite Vorschlag ist gut. Wie Matthias(apsel) schon sagte ist das "#" stellvertretend für ein Aufzählungszeichen. Dieses wird aber ein eigenes Bild sein, das ist ja auch möglich soweit ich weiß, oder?. Nur weiß ich jetzt nicht wie ich das hier gehen soll... Normalerweise geht es ja mit
li {list-style-image:url(aufzählungspunkt.gif);}
Und habe ich das jetzt richtig verstanden, dass beim 2. Vorschlag der Browser Java unterstützen muss?

Dann arbeite doch mit padding-left und einer Hintergrundgrafik bei deiner Inline-Liste!

@Gernot: Könntest du das bitte etwas ausführen, wie du das genau meinst. Ich kenn mich in html & co noch nicht so aus...

Freu mich auf eure weitere Hilfe
meisle

[apsel]

Om nah hoo pez nyeetz, meisle!

Dann arbeite doch mit padding-left und einer Hintergrundgrafik bei deiner Inline-Liste!
@Gernot: Könntest du das bitte etwas ausführen, wie du das genau meinst. Ich kenn mich in html & co noch nicht so aus...

Das Listenelement bekommt ein padding-left von etwas mehr als der Breite des Hintergrundbildes.

li{  
padding-left:          20px;  
background-image:      url(....);  
background-position:   0 0;  
background-repeat:     no-repeat;  
background-attachment: scroll;

}
ungetestet

Matthias

[meisle]

li{

padding-left:          20px;
background-image:      url(....);
background-position:   0 0;
background-repeat:     no-repeat;
background-attachment: scroll;

> }  
> ungetestet  
  
li {  
display:		      inline;  
padding-left:          39px;  
background-image:      url(punkt.gif);  
background-position:   0px 0px;  
background-repeat:     no-repeat;  
background-attachment: scroll;  
}  
  
  
Wenn ich das mache, kommt eine Aufzählungszeichen nur, wenn der Listentext nicht über die Zeile hinaus geht. Ansonsten kommt die Aufzählungsgrafik immer. An was kann das liegen?  

[apsel]

Om nah hoo pez nyeetz, meisle!

Wenn ich das mache, kommt eine Aufzählungszeichen nur, wenn der Listentext nicht über die Zeile hinaus geht. Ansonsten kommt die Aufzählungsgrafik immer. An was kann das liegen?

Kannst du ein Beispiel online stellen?

Matthias

[meisle]

Kannst du ein Beispiel online stellen?

geht schlecht, bin grad bei der Arbeit. Da sind die Seiten blockiert ...
Den Code kann ich ja mal reintun. Das einzige was fehlt ist das Aufzählungszeichen (Name: punkt.gif):

<style type="text/css">
#rahmen {
  border-width:2px;
  border-style:solid;
  border-color:blue;
  align: center;
  width: 758;

ul {
margin: 0;
padding: 0px 0px 0px 16px;
}

li {
display:        inline;,
padding-left:          39px;
background-image:      url(punkt.gif);
background-position:   0px 0px;
background-repeat:     no-repeat;
background-attachment: scroll;
}
</style>

<div id="rahmen">

<table width="750" border="0" cellspacing="0" cellpadding="0">
<tr>
<ul><font size="2" face="Helvetica, Geneva, Arial, SunSans-Regular, sans-serif">
<li>test test</li>
<li>Test test test test test test test test test test</li>
<li>Bei texten, die über eine Zeile hinausgehen, kommt leider keine Aufzählungsgrafik, wie man hier sehr gut sehen kann ...</li>
<li>test test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</font>
</ul>
</tr>
</table>

</div>

[Der Martin]

Hallo,

Den Code kann ich ja mal reintun. Das einzige was fehlt ist das Aufzählungszeichen (Name: punkt.gif):

naja, im vorhandenen Code stecken aber schon genug Fehler sowie "schlechte Angewohnheiten".

#rahmen {
  border-width:2px;
  border-style:solid;
  border-color:blue;
  align: center;
  width: 758;

ul {
margin: 0;
padding: 0px 0px 0px 16px;
}

Böser Fehler: Die schleißende Klammer nach den Regeln für #rahmen fehlt. Damit dürfte ein normal arbeitender Browser den nachfolgenden Selektor für ul nicht korrekt interpretieren.
Außerdem gibt es keine CSS-Eigenschaft align (meintest du vielleicht text-align?), und bei der width-Eigenschaft fehlt die Einheit.

<div id="rahmen">

<table width="750" border="0" cellspacing="0" cellpadding="0">
<tr>
  <ul><font size="2" face="Helvetica, Geneva, Arial, SunSans-Regular, sans-serif">
   <li>test test</li>
   <li>Test test test test test test test test test test</li>
   <li>Bei texten, die über eine Zeile hinausgehen, kommt leider keine Aufzählungsgrafik, wie man hier sehr gut sehen kann ...</li>

Fehler: tr darf kein ul als Kindelement haben, da fehlt das td-Element.
Kritik: Wozu überhaupt die Tabelle drumherum? Die hat hier überhaupt keinen Sinn.
Fehler: ul darf kein font als Kindelement haben.
Kritik: Formatierungen bitte ins Stylesheet, nicht mit veralteten HTML-Attributen.

Erst wenn du die HTML/CSS-Fehler ausgebessert hast, lohnt es sich überhaupt, über Fehldarstellungen nachzudenken.

So long,
 Martin

[meisle]

Böser Fehler: Die schleißende Klammer nach den Regeln für #rahmen fehlt.

--> falsch kopiert

Außerdem gibt es keine CSS-Eigenschaft align (meintest du vielleicht text-align?), und bei der width-Eigenschaft fehlt die Einheit.

--> ja ok ich kenn mich da ehrlich gesagt nicht so aus- ausgebessert- Danke.

Fehler: tr darf kein ul als Kindelement haben, da fehlt das td-Element.

--> ok, ausgebessert. Danke.

Kritik: Wozu überhaupt die Tabelle drumherum? Die hat hier überhaupt keinen Sinn.

--> Hierbei handelt es sich nur um ein Beispiel. In der Datei wo ich es brauche sind mehrere Tabellen. Außerdem muss ich wegen der Tabelle weniger Text schreiben, damit man den Fehler mit dem Text über mehr als eine Zeile sieht.

Fehler: ul darf kein font als Kindelement haben.

--> Wie dann? <font> davor?

Kritik: Formatierungen bitte ins Stylesheet, nicht mit veralteten HTML-Attributen.

--> Das Stylesheet würde sich nur auf die Datei beziehen. Also bitte über den "Fehler" wegsehen. :)

Erst wenn du die HTML/CSS-Fehler ausgebessert hast, lohnt es sich überhaupt, über Fehldarstellungen nachzudenken.

--> Hoffe so passt es:
<style type="text/css">
#rahmen {
  border-width:2px;
  border-style:solid;
  border-color:blue;
  width: 758px;

ul {
margin: 0;
padding: 0px 0px 0px 16px;
}

li {
display:    inline;,
padding-left:          39px;
background-image:      url(punkt.gif);
background-position:   0px 0px;
background-repeat:     no-repeat;
background-attachment: scroll;
}
</style>

<div id="rahmen">

<table width="750" border="0" cellspacing="0" cellpadding="0">
<tr>
    <td>
    <ul><font size="2" face="Helvetica, Geneva, Arial, SunSans-Regular, sans-serif">
<li>test test</li>
<li>Test test test test test test test test test test</li>
<li>Bei texten, die über eine Zeile hinausgehen, kommt leider keine Aufzählungsgrafik, wie man hier sehr gut sehen kann ...</li>
<li>test test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</font>
</ul>
</td>
</tr>
</table>

</div>

[apsel]

Om nah hoo pez nyeetz, meisle!

Fehler: ul darf kein font als Kindelement haben.
--> Wie dann? <font> davor?

Garnicht: ins CSS, so wie Martin schrieb.

Kritik: Formatierungen bitte ins Stylesheet, nicht mit veralteten HTML-Attributen.

Matthias

[Gunnar Bittersmann]

@@meisle:

nuqneH

Mit "li {display: inline;}" bekommt man ja schon mal die Zeilenumbrüche aber auch die Aufzählungszeichen weg. Und gerade die Aufzählungszeichen sollen bleiben.

Dann mach sie wieder hin:
li:before { content: "#" }

Für IE < 8 mit CSS-Expression:

li  
{  
  display: inline;  
  display: expression( [code lang=javascript](new Function('e', '[code lang=javascript]e.innerHTML = "#" + e.innerHTML; e.style.display = "inline";
~~~'))(this)[/code] );  
}[/code]  
  
Qapla'

-- 
Volumen einer Pizza mit Radius z und Dicke a: pi z z a

[apsel]

Om nah hoo pez nyeetz,

Dann mach sie wieder hin:
li:before { content: "#" }

Ich glaube, dass # sollte nur stellvertretend für die Aufzählungszeichen (square, circle, disc) stehen. Insofern ist der Vorschlag mit der Hintergrundgrafik der bessere.

Matthias

[Gunnar Bittersmann]

@@apsel:

nuqneH

Ich glaube, dass # sollte nur stellvertretend für die Aufzählungszeichen (square, circle, disc) stehen.

Du sagst es: _Zeichen_: ■, ○, •.

Insofern ist der Vorschlag mit der Hintergrundgrafik der bessere.

Nicht dafür.

Qapla'

[suit]

Nicht dafür.

Wenn du Kunden mit IE6 ohne JavaScript hast - die noch dazu im 30-Minuten-Takt anrufen, wirst du deine Aussage nochmal überdenken :)

[Gunnar Bittersmann]

@@suit:

nuqneH

Wenn du Kunden mit IE6 ohne JavaScript hast - die noch dazu im 30-Minuten-Takt anrufen, wirst du deine Aussage nochmal überdenken :)

Wie jetzt? Du sagst deinen Kunden alle halbe Stunde, dass sie sich endlich vernünftige Browser installieren sollen, und die machen’s einfach nicht?

IEs < 8 mit deaktiviertem JavaScript kann man immer noch mit den Grafiken versorgen. Das ist aber kein Grund, allen Browsern die zusätzlichen, für sie unnützen Ressourcen aufzuzwingen.

Qapla'

[apsel]

Om nah hoo pez nyeetz,

was hat

Dann arbeite doch mit padding-left und einer Hintergrundgrafik bei deiner Inline-Liste!

denn mit Javascript zu tun?

Matthias

[Gunnar Bittersmann]

@@apsel:

nuqneH

was hat

Dann arbeite doch mit padding-left und einer Hintergrundgrafik bei deiner Inline-Liste!
denn mit Javascript zu tun?

Warum zitierst du [Gernot], antwortest aber auf mein Posting?

Was genau wolltest du wissen?

Qapla'

[apsel]

Om nah hoo pez nyeetz,

Es wurden 2 Lösungsmöglichekeiten vorgestellt, die grafische von Gernot und deine.

Folgendes wurde darauf geantwortet:

Insofern ist der Vorschlag mit der Hintergrundgrafik der bessere. [apsel]

Nicht dafür. [Gunnar Bittersmann]

Wenn du Kunden mit IE6 ohne JavaScript hast - die noch dazu im 30-Minuten-Takt anrufen, wirst du deine Aussage nochmal überdenken :) [suit]

nach sorgfältigem Lesen: Ie-Expressions funktionieren also nur bei eingeschaltetem Javascript?

Matthias

[Der Martin]

Hallo,

nach sorgfältigem Lesen: Ie-Expressions funktionieren also nur bei eingeschaltetem Javascript?

natürlich, denn CSS-Expressions sind nichts anderes als in CSS eingebettetes Javascript.

Ciao,
 Martin