[Erledigt] LI nebeneinander

stefanjann · 29.10.2008, 15:38

Hallo,

ich habe eine Playlist von einer Band nach Anfangsbuchstaben sortiert. Mit Überschriften und Aufzählungslisten kann ich das auch schön gliedern.

Beispiel:

Code:

<h2>Buchstabe A</h2>
<ul>
 <li><span lang="en">A Hard Days Night</span></li>
 <li><span lang="en">Achy Breaky Heart</span></li>
 <li><span lang="en">Amazing Grace</span></li>
 <li><span lang="en">Annies Song</span></li>
 <li>Aus B&ouml;hmen kommt die Musik</li>
 <li>...</li>
</ul>
<h2>Buchstabe B</h2>
<ul>
 <li><span lang="en">Bad Moon Rising</span></li>
 <li><span lang="en">Breakfast at Tiffany&acute;s</span></li>
 <li>...</li>
</ul>

Mein Problem liegt jetzt darin, das die Seite so richtig lange wird, da es in der Zwischenzeit an die 100 Songs sind. Jetzt wollte ich die Liste am Besten nebeneinander anzeigen lassen.

Code:

li {
  float: left;
  margin-left: 3em;
}

Im Mozilla und Opera klappt das super, nur im IE sind die "Bommel" weg. Auch mit "list-style: disk;" ändert sich nicht. Somit stehen alle Titel nebeneinander und man erkennt nicht mehr, wann ein Titel beginnt und wann einer endet.

Welche Möglichkeiten habe ich, damit meine Listen kürzer dargestellt werden? Ich habs schon mit "display: inline", "contain" und ":after" oder ":bevor" probiert. Auch das klappt im IE nicht wirklich. Selbst im strict-Mode!

Hilfe!
Danke für euere Gedanken.
Stefan

Andreas · 29.10.2008, 16:35

Code:

ul {
   list-style-type:none;
}

li {
  float: left;
  margin-left: 3em;
  display:inline;
}

Code:

<h2>Buchstabe A</h2>
<ul>
 <li><span lang="en">A Hard Days Night</span></li>
 <li><span lang="en">Achy Breaky Heart</span></li>
 <li><span lang="en">Amazing Grace</span></li>
 <li><span lang="en">Annies Song</span></li>
 <li>Aus B&ouml;hmen kommt die Musik</li>
 <li>...</li>
</ul>
<h2>Buchstabe B</h2>
<ul>
 <li><span lang="en">Bad Moon Rising</span></li>
 <li><span lang="en">Breakfast at Tiffany&acute;s</span></li>
 <li>...</li>
</ul>

Vielleicht trennste die Elemente dann mit nem eigens erstellten "Bommel" (*lol* geiles Wort), ne grafik oder so.

nikosch · 29.10.2008, 16:42

Scheint ein verbreitetes und nicht lösbares Problem bei IE und Opera zu sein: li float list-items - Google-Suche

stefanjann · 29.10.2008, 17:14

Zitat:

Zitat von Andreas

Vielleicht trennste die Elemente dann mit nem eigens erstellten "Bommel" (*lol* geiles Wort), ne grafik oder so.

Stichwort Barierefreiheit: Grafiken deaktiviert? "Bommel" sind auch be deaktivierten Grafiken sichtbar (schon getestet).

Die Homepage ist mein Versuchskaninchen für Barierefreiheit. Ich wills 1000%-tig.

nikosch · 29.10.2008, 17:15

Es gibt auch das • Zeichen (Entity). Bzw. alternativ: •
[edit:] Oh, sorry - interessant - & #8226;

Leider noch nicht browserübergreifend:

li:before { content:"•"; }
li:before { content:url(list_style_image.gif)" "; }

stefanjann · 04.11.2008, 17:12

Meine Lösung (nicht die Beste, aber es geht...)

Code:

ul.pro {
  margin: 0;
  padding: 0;
}
li.pro {
  list-style: none outside none;
  display: inline;
  padding: 0;
  margin-left: 0.4em;
}

Code:

<h2>Buchstabe A</h2>
 <ul class="pro">
  <li class="pro">&bull; <span lang="en">A Hard Days Night</span></li>
  <li class="pro">&bull; <span lang="en">Achy Breaky Heart</span></li>
  <li class="pro">&bull; <span lang="en">Amazing Grace</span></li>
  <li class="pro">&bull; <span lang="en">Annies Song</span></li>
  <li class="pro">&bull; Aus B&ouml;hmen kommt die Musik</li>
  <li class="pro">&bull; und vieles mehr...</li>
 </ul>
 <h2>Buchstabe B</h2>
 <ul class="pro">
  <li class="pro">&bull; <span lang="en">Bad Moon Rising</span></li>
  <li class="pro">&bull; <span lang="en">Breakfast at Tiffany&acute;s</span></li>
  <li class="pro">&bull; und vieles mehr...</li>
 </ul>

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[Erledigt] CSS: Elemente nebeneinander anordnen		HTML, Usability und Barrierefreiheit	21	29.08.2011 08:05
Merhere Daten Auslesen und nebeneinander ausgeben, wenn Bedingung erfüllt ist	AJ79	PHP Tipps 2008	4	23.09.2008 10:39
Div Container nebeneinander anordnen	tomtaz	HTML, Usability und Barrierefreiheit	10	04.06.2008 12:45
3 divs nebeneinander mit dynamisch gleicher Höhe		HTML, Usability und Barrierefreiheit	19	18.01.2006 22:05
div nebeneinander	spoi	HTML, Usability und Barrierefreiheit	16	05.01.2006 23:22
2 Tabellen nebeneinander		PHP Tipps 2007	3	04.11.2005 21:24
block elemente nebeneinander		HTML, Usability und Barrierefreiheit	2	30.07.2005 12:12
Tabellen Inhalt nebeneinander auslesen ?		PHP Tipps 2005-2	6	01.07.2005 14:21
Daten auslesen und nebeneinander wiedergeben		PHP Tipps 2005-2	4	28.06.2005 13:44
Bild mit Link aus Tabelle nebeneinander ausgeben		PHP Tipps 2005	3	25.04.2005 12:19
DIVs nebeneinander	freitz	HTML, Usability und Barrierefreiheit	4	21.04.2005 22:47
[Erledigt] 2 divs nebeneinander		HTML, Usability und Barrierefreiheit	8	12.01.2005 17:27
[Erledigt] drei divs nebeneinander		HTML, Usability und Barrierefreiheit	5	10.01.2005 20:27
div bereiche nebeneinander		HTML, Usability und Barrierefreiheit	4	23.10.2004 16:29
Tabellen nebeneinander?		HTML, Usability und Barrierefreiheit	24	14.06.2004 16:17

29.10.2008, 15:38
stefanjann Erfahrener Benutzer Registriert seit: 02.08.2005 Beiträge: 252 PHP-Kenntnisse: Fortgeschritten	[Erledigt] LI nebeneinander Hallo, ich habe eine Playlist von einer Band nach Anfangsbuchstaben sortiert. Mit Überschriften und Aufzählungslisten kann ich das auch schön gliedern. Beispiel: Code: <h2>Buchstabe A</h2> <ul> <li><span lang="en">A Hard Days Night</span></li> <li><span lang="en">Achy Breaky Heart</span></li> <li><span lang="en">Amazing Grace</span></li> <li><span lang="en">Annies Song</span></li> <li>Aus Böhmen kommt die Musik</li> <li>...</li> </ul> <h2>Buchstabe B</h2> <ul> <li><span lang="en">Bad Moon Rising</span></li> <li><span lang="en">Breakfast at Tiffany´s</span></li> <li>...</li> </ul> Mein Problem liegt jetzt darin, das die Seite so richtig lange wird, da es in der Zwischenzeit an die 100 Songs sind. Jetzt wollte ich die Liste am Besten nebeneinander anzeigen lassen. Code: li { float: left; margin-left: 3em; } Im Mozilla und Opera klappt das super, nur im IE sind die "Bommel" weg. Auch mit "list-style: disk;" ändert sich nicht. Somit stehen alle Titel nebeneinander und man erkennt nicht mehr, wann ein Titel beginnt und wann einer endet. Welche Möglichkeiten habe ich, damit meine Listen kürzer dargestellt werden? Ich habs schon mit "display: inline", "contain" und ":after" oder ":bevor" probiert. Auch das klappt im IE nicht wirklich. Selbst im strict-Mode! Hilfe! Danke für euere Gedanken. Stefan __________________ SELECT * benutze ich nur um den Post kurz zu halten.


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

29.10.2008, 16:42
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Scheint ein verbreitetes und nicht lösbares Problem bei IE und Opera zu sein: li float list-items - Google-Suche __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

29.10.2008, 17:15
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Es gibt auch das • Zeichen (Entity). Bzw. alternativ: • [edit:] Oh, sorry - interessant - & #8226; Leider noch nicht browserübergreifend: li:before { content:"•"; } li:before { content:url(list_style_image.gif)" "; } __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. -- Geändert von nikosch (29.10.2008 um 17:19 Uhr).