Eigenes Aufzählungszeichen

[Lena]

Hallo zusammen :o)

ich möchte gerne ein eigenes Aufzählungszeichen für Listen benutzen.
Da ich dafür kein Bild benutzen möchte und dabei auch auf Tabellen verzichten möchte, habe ich etwas mit CSS rumgespielt:

<div class="rowl">~~</div>
<div class="rowr">Viel Text, damit es einen Zeilenumbruch gibt. Hier sollte das ja dann eingerückt sein, wie als würde das Aufzählungszeichen in einer eigenen Spalte stehen</div>

mit folgenden CSS-Angaben funktioniert es nicht, wie es ja auch im SelfHTMl beschrieben wurde:

.rowl {
 float:left;
}

.rowr {
}

Gebe ich jetzt der rowl einen border funktioniert es wie gewünscht. Warum? Ist dann das Element zu groß um den Umbruch zu machen?

Ich verstehe es nicht ganz und weiss nun nicht, ob ich es so einsetzen kann (ich kann den Rahmen ja in der Hintergrundfarbe machen...)

Gruß
die Lena

[Ole]

hi Lena

Zumindest für nicht "IE"-Browser gibt es eine einfachere Lösung.

1. Benutze weiter Listen zum definieren von Listen
2. dann list-style-type:none;
3. für oben erwähnte Browser: Pseudoelemente für automatisch generierten Inhalt

Optional:
4) Mittels Conditional Comments kannst du außerdem dem IE auch noch wieder ein Listen-Icon geben

so long
Ole
(8-)>

[Lena]

4. Mittels Conditional Comments kannst du außerdem dem IE auch noch wieder ein Listen-Icon geben

danke für Eure Antworten.
Macht man das denn? Speziell für Browser etwas hinzufügen?
Was ist, wenn sich ein andere Browser als IE ausgibt?
selbst schuld?

ist ja bloss fürs layout wichtig...
ggf würde die person dann folgendes sehen:
~~ ~~ erstes element
~~ ~~ zweites element

hmm ich bin unschlüssig...

[Ole]

Hi

Macht man das denn? Speziell für Browser etwas hinzufügen?

Ich für meinen Teil nutze die Möglichkeiten von CCs um die Unzulänglichkeiten des IEs erträglich zu machen. Pauschal zu sagen "Ja" oder "Nein" wäre das falsche.

Was ist, wenn sich ein andere Browser als IE ausgibt?
selbst schuld?

Ich würde sagen: Ja
Allerdings entstehen ja keine größeren Nachteile. Um bei dem Beispiel zu bleiben würden dem User halt "nur" die standard Aufzählungszeichen angezeigt werden und nicht deine besonderen.

ist ja bloss fürs layout wichtig...
ggf würde die person dann folgendes sehen:
~~ ~~ erstes element
~~ ~~ zweites element

viele nicht IE würden
~~ element
sehen

der IE würde
o element
sehen (wobei "o" das standard Listensymbol sybolisieren soll :))

so long
Ole
(8-)>

[Ashura]

Hallo Ole.

Was ist, wenn sich ein andere Browser als IE ausgibt?
selbst schuld?

Ich würde sagen: Ja
Allerdings entstehen ja keine größeren Nachteile. Um bei dem Beispiel zu bleiben würden dem User halt "nur" die standard Aufzählungszeichen angezeigt werden und nicht deine besonderen.

Warum sollte sich die Rendering Engine verändern, wenn sich ein UserAgent als ein anderer ausgibt? (Netscape 8 ausgenommen.)

Einen schönen Mittwoch noch.

Gruß, Ashura

[Cyx23]

Hallo,

4. Mittels Conditional Comments kannst du außerdem dem IE auch noch wieder ein Listen-Icon geben

danke für Eure Antworten.
Macht man das denn? Speziell für Browser etwas hinzufügen?
Was ist, wenn sich ein andere Browser als IE ausgibt?

Die Conditional Comments sind da noch am sichersten, also erstmal kein Problem,
und nötig sind irgendwelche Klimmzüge für bestimmte Browser ja öfter mal.

Dabei würde ich solche Anpasungen möglichst auf CSS-Code und ggf. nötige Einträge
im Head beschränken. Andererseits wären ja selbst Einträge im Body immer noch -als
Kommentar- keine HTML-Fehler.

Grüsse

Cyx23

[dey]

Hallo,

Hallo zusammen :o)

ich möchte gerne ein eigenes Aufzählungszeichen für Listen benutzen.
Da ich dafür kein Bild benutzen möchte und dabei auch auf Tabellen verzichten möchte, habe ich etwas mit CSS rumgespielt:

<div class="rowl">~~</div>
<div class="rowr">Viel Text, damit es einen Zeilenumbruch gibt. Hier sollte das ja dann eingerückt sein, wie als würde das Aufzählungszeichen in einer eigenen Spalte stehen</div>

mit folgenden CSS-Angaben funktioniert es nicht, wie es ja auch im SelfHTMl beschrieben wurde:

.rowl {
float:left;
}

.rowr {
}

Gebe ich jetzt der rowl einen border funktioniert es wie gewünscht. Warum? Ist dann das Element zu groß um den Umbruch zu machen?

Ich denke der Rahmen begrenzt deine rowl eindeutiger als ohne

Ich verstehe es nicht ganz und weiss nun nicht, ob ich es so einsetzen kann (ich kann den Rahmen ja in der Hintergrundfarbe machen...)

so, wie es bei dir aussieht fehlt da was. wenn du <li> simulieren willst musst due dir über die zerlegte struktur im klaren und die in etwa wie folgt aus
<div class="li" style="overflow:auto">
<span class="anführungszeichen" height="100%" width="?">~~</span>
<span class="inhalt" height="100%" width="?">text</span>
</div>

ich denke das könnte auch ohne Rahmen funktionieren

bydey

[Lena]

Dein Vorschlag funktioniert bei mir nicht
(nicht im IE, Opera, FireFox)
hast du es getestet?

[dey]

Hallo,

Dein Vorschlag funktioniert bei mir nicht
(nicht im IE, Opera, FireFox)
hast du es getestet?

Ehrlich gesagt nein.
Ich wollte dir bur anzeigen, wo du nicht weit genug gedacht hast, als du mit <div> <li> simulieren wolltest.
Die Sache mit dem float ist schon im Namen enthalten: fliessen.
Alles was fliesst muss du einmauern, sonst sucht es sich den eigenen Weg.
Dein border ist ein Teil der Mauer. Ich denke aber nicht ausreichend. Das umgebende <div>, welches ich als <li>-Ersatz angebe begrenzt deine <li> nach oben und unten eindeutig (wichtig wg. float)
Alles nur ein Gedankenansatz. Ungetestet, weil von mir so nie gebraucht. Sereienreife ist durch den Poster des Ursprungs-posts zu erstellen.
Es sei denn du gehtst doch Richtung Bild. Das wäre vermutlich das einfachste!

bydey

[Andreas Dölling]

Hallo,

für Listen solltest Du auch die entsprechenden HTML-Elemente benutzen, also ul + li, ol + li oder dl + dt + dd.
Und was die Formatierung der Listen angeht: wirf mal einen Blick auf http://css.maxdesign.com.au/listutorial/. Da wird alles sehr gut Schritt für Schritt erklärt.

Ciao,
Andreas