nicht angemeldet
Gernot Back
apsel
apsel
Der Martin
apsel
Gunnar Bittersmann
apsel
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
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
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
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.
suitli{
padding-left: 20px;
background-image: url(....);
background-position: 0 0;
background-repeat: no-repeat;
background-attachment: scroll;
}
ungetestet
Matthias
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?
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
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>
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
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>
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
@@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
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
@@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'
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 :)
@@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'
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
@@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'
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
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