nicht angemeldet
Problem mit Listen, die ein Element umfließen (float und li)
Hallo, ich habe ein kleines Problem, zu dem ich bis jetzt noch keine Lösung gefunden wurde. Anscheinend wurde eine ähnliche Problematik schonmal im Forum angesprochen, allerdings ohne eine Lösung.
Deswegen schildere ich es hier nochmals:
Ich habe eine Navigation, die vom Haupttext rechts umflossen werden soll. In diesem Haupttext kommt auch eine Liste vor.
Dummerweise rücken weder Opera 9, noch IE 6 oder Firefox 1.0 die Aufzählungs- bzw. Nummerierungszeichen ein, statt dessen wird der Beginn des Textes als Ausrichtungs-Kriterium verwendet. Mir margin oder padding lässt sich auch nichts ändern, da diese ja den rechten Rand als Ausrichtungskriterium verwenden. Die einzige Lösung, die ich bis jetzt gefunden habe, ist die Verwendung list-style-position:inside, allerdings wäre mir eine Lösung ohne diesen Trick
lieber.
Hier nochmal ein kurze Beispiel-Seite, die das Problem verdeutlichen soll.
Kennt jemand eine Lösung?
Quelltext:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Test-Ausgabe</TITLE>
<META http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<META http-equiv="content-style-type" content="text/css">
</HEAD>
<BODY>
<DIV style="float:left; margin-right:10px; border: 1px solid #000; width:200px;">
<P>Hier ist die Navigation, die der Text rechts umließen soll.</P>
<UL>
<LI>Link 1</LI>
<LI>Link 2</LI>
<LI>Link 3</LI>
<LI>Link 4</LI>
<LI>Link 5</LI>
</UL>
usw.
</DIV>
<DIV>
<H1>Problem mit float und li</H1>
<P>Auf dieser Seite gibt es folgendes Problem:</P>
<P>Hier steht der Text, in dem es u.A. auch am Beginn des Dokuments eine Liste geben soll.</P>
<UL>
<LI>Listenelement 1</LI>
<LI>Listenelement 2</LI>
<LI>Listenelement 3</LI>
</UL>
<P>
Dummerweise rücken weder Opera 9, noch IE 6 oder Firefox 1.0 die Aufzählungs- bzw.
Nummerierungszeichen ein, statt dessen wird der Beginn des Textes als Ausrichtungs-Kriterium
verwendet. Mir margin oder padding lässt sich auch nichts ändern, da diese ja den rechten Rand
als Ausrichtungskriterium verwenden. Die einzige Lösung, die ich bis jetzt gefunden habe, ist die
Verwendung list-style-position:inside, allerdings wäre mir eine Lösung ohne diesen Trick
lieber.
</P>
<P>Zum Vergleich nochmal die gleiche Liste nach Ende der Navigation:</P>
<UL>
<LI>Listenelement 1</LI>
<LI>Listenelement 2</LI>
<LI>Listenelement 3</LI>
</UL>
</DIV>
</BODY>
--
selfcode ie:% fl:( br:< va:) ls:} fo:| rl:( n4:° ss:) de:] js:| ch:] sh:( mo:| zu:(
<< Life is just a moment in eternity, yet every life echoes there >>
selfcode ie:% fl:( br:< va:) ls:} fo:| rl:( n4:° ss:) de:] js:| ch:] sh:( mo:| zu:(
<< Life is just a moment in eternity, yet every life echoes there >>
-
Hi,
Dummerweise rücken weder Opera 9, noch IE 6 oder Firefox 1.0 die Aufzählungs- bzw. Nummerierungszeichen ein, statt dessen wird der Beginn des Textes als Ausrichtungs-Kriterium verwendet. Mir margin oder padding lässt sich auch nichts ändern, da diese ja den rechten Rand als Ausrichtungskriterium verwenden.
Ja, das Problem hatte ich auch schonmal. Weiß aber nicht mehr genau, wie ich es gelöst habe.
Hier nochmal ein kurze Beispiel-Seite, die das Problem verdeutlichen soll.
Dummerweise rücken weder Opera 9, noch IE 6 oder Firefox 1.0 die Aufzählungs- bzw.
Nummerierungszeichen ein, statt dessen wird der Beginn des Textes als Ausrichtungs-Kriterium
verwendet.Mir margin oder padding lässt sich auch nichts ändern, da diese ja den rechten Rand
als Ausrichtungskriterium verwenden.
Ja, das ist bei floatenden Boxen normalerweise so.
Die einzige Lösung, die ich bis jetzt gefunden habe, ist die
Verwendung list-style-position:inside, allerdings wäre mir eine Lösung ohne diesen Trick
lieber.Vielleicht geht's mit overflow:auto oder overlow:hidden für das Listenelement. Dann geht die Box nicht mehr über die Navi. allerdings ist der IE zu doof dafür. dort erreichst du den gewünschten Effekt, indem du dem Block "Layout" gibts. Das passiert z.B. duch eine Breiten- oder Höhenangabe.
Oder du gibtst einen ausreichenden margin (was aber nicht immer optimal ist, vor allem nicht bei deinen Vorhaben, das ich im übrigen sehr begrüßen muss!).Oder du setzt die Liste IMMER unter die Navi mit clear:left.
Einen schönen Montag noch!
-
Hallo DeWitt.
Die einzige Lösung, die ich bis jetzt gefunden habe, ist die Verwendung list-style-position:inside, allerdings wäre mir eine Lösung ohne diesen Trick
lieber.Wieso „Trick“? Diese Eigenschaft ist genau für diesen Zweck geschaffen worden.
Alternativ könntest du dem Inhaltsbereich auch einen passenden Wert für margin-left verpassen.
Einen schönen Montag noch.
Gruß, Ashura
PS: Firefox ist dämlich. Aus „http://www.drsnet.de/~david/public/float_li.html“ macht er „http://www.drsnet.de//home/ashuradavid/public/float_li.html“, nur weil „~“ für mein Heimverzeichnis steht.
--
sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
„It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
[HTML Design Constraints: Logical Markup]-
Hallo David,
eine wirklich überzeugende Lösung habe ich auch nicht gefunden.
Bei mir gabs dann hinterher eine Lösung mit:
Firefox*: ul {display: table}
IE: ul {zoom: 100%;}Probier mal zur not damit rum. Das ganze wird dann "zweispaltig", also ohne richtiges umfließen.
Liebe Grüße,
Bernd
-
Hi,
Die einzige Lösung, die ich bis jetzt gefunden habe, ist die Verwendung list-style-position:inside, allerdings wäre mir eine Lösung ohne diesen Trick
lieber.Wieso „Trick“? Diese Eigenschaft ist genau für diesen Zweck geschaffen worden.
Woher willst du das wissen?
Alternativ könntest du dem Inhaltsbereich auch einen passenden Wert für margin-left verpassen.
Wäre in diesem Fall aber äußerst unpraktisch. Overflow:(nicht visible) tut's auch (zumindest in gescheiten Browsern)
[...]
PS: Firefox ist dämlich. Aus „http://www.drsnet.de/~david/public/float_li.html“ macht er „http://www.drsnet.de//home/ashuradavid/public/float_li.html“, nur weil „~“ für mein Heimverzeichnis steht.
Na du hast vielleicht Probleme. Viel schlimmer finde ich, dass der IE aus #Textmarke, %25Textmarke macht :-)
Einen schönen Montag noch!
-
Danke für alle Antworten. Schade, dass overflow:auto beim IE nichts nützt. Sonst wäre das die ideal Lösung, aber ich kann ja schlecht den am weitest verbreitesten Browser benachteiligen ;(.
Ich denke ich werde gezwungenermaßen auf list-style-positon:inside zurückgreifen müssen, auch wenn mir das eigentlich nicht wirklich recht ist.
"Genau für diese Situation" ist es sicherlich nicht geschaffen - es rückt ja einfach nur die Auführungszeichen in den Text ein.
Das alleine wäre noch nicht so schlimm, aber leider kann ich auf diese Weiser immer noch nicht das padding der Liste beinflussen. Wenn man eine Liste neben der Float-Box und darunter vergleicht, sieht man immer noch signifikante Unterschiede beim Randabstand.Naja, hoffen wir auf neue CSS-Versionen und Browser, die diese auch richtig interpretieren >:-)
--
selfcode ie:% fl:( br:< va:) ls:} fo:| rl:( n4:° ss:) de:] js:| ch:] sh:( mo:| zu:(
<< Life is just a moment in eternity, yet every life echoes there >>-
Hallo DeWitt.
Naja, hoffen wir auf neue CSS-Versionen und Browser, die diese auch richtig interpretieren >:-)
Korrektur: Hoffen wir auf neue CSS-Versionen und IEs, die diese auch richtig interpretieren.
Einen schönen Montag noch.
Gruß, Ashura
--
sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
„It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
[HTML Design Constraints: Logical Markup] -
Hi,
Danke für alle Antworten. Schade, dass overflow:auto beim IE nichts nützt. Sonst wäre das die ideal Lösung, aber ich kann ja schlecht den am weitest verbreitesten Browser benachteiligen ;(.
Musst du auch nicht...
Ich denke ich werde gezwungenermaßen auf list-style-positon:inside zurückgreifen müssen, auch wenn mir das eigentlich nicht wirklich recht ist.
"Genau für diese Situation" ist es sicherlich nicht geschaffen - es rückt ja einfach nur die Auführungszeichen in den Text ein.
Das alleine wäre noch nicht so schlimm, aber leider kann ich auf diese Weiser immer noch nicht das padding der Liste beinflussen. Wenn man eine Liste neben der Float-Box und darunter vergleicht, sieht man immer noch signifikante Unterschiede beim Randabstand.Naja, hoffen wir auf neue CSS-Versionen und Browser, die diese auch richtig interpretieren >:-)
Probier mal folgendes:
* html ul {height:1em;}
html>body ul {overflow:auto;}Hier werden 2 Hacks verwendet. Der IE bekommt eine kleine Höhenangabe, die er sowieso streckt (damit wird der gew. Effekt aber erzeilt). Alle anderen Browser bekommen overflow:auto. Eine Kombination beider Angaben wurde nämlich zu Scrollbalken führen.
Einen schönen Dienstag noch!
-
Hi,
Kurze Ergänzung:
Wenn du das in dein Stylesheet schreibst funktioniert's (hab's ausprobiert!):
* html ul {height:1em; padding-left:2em; margin-left:0;}
html>body ul {overflow:auto;}evtl. ist es sinnvoll ul in Verbindung mit einer Klasse oder einer ID zu verwenden.
Einen schönen Dienstag noch!
-
Probier mal folgendes:
* html ul {height:1em;}
html>body ul {overflow:auto;}Perfekt! Ich wusste doch, dass mich die eifrige SELFHTML-Gemeinde nicht enttäuschen würde :)
--
selfcode ie:% fl:( br:< va:) ls:} fo:| rl:( n4:° ss:) de:] js:| ch:] sh:( mo:| zu:(
<< Life is just a moment in eternity, yet every life echoes there >>
-
-
-
-
-
Hi,
Dummerweise rücken weder Opera 9, noch IE 6 oder Firefox 1.0 die Aufzählungs- bzw. Nummerierungszeichen ein, statt dessen wird der Beginn des Textes als Ausrichtungs-Kriterium verwendet. Mir margin oder padding lässt sich auch nichts ändern, da diese ja den rechten Rand als Ausrichtungskriterium verwenden.
Das kann ich nicht nachvollziehen.
Hier nochmal ein kurze Beispiel-Seite, die das Problem verdeutlichen soll.
Blöde Testseite zum experimentieren. Mit
h1+p+p+ul li {margin-left:1em; }
oder größeren Werten sieht es im Fiefox jedenfalls nicht schlecht aus.freundliche Grüße
Ingo-
Hi,
Dummerweise rücken weder Opera 9, noch IE 6 oder Firefox 1.0 die Aufzählungs- bzw. Nummerierungszeichen ein, statt dessen wird der Beginn des Textes als Ausrichtungs-Kriterium verwendet. Mir margin oder padding lässt sich auch nichts ändern, da diese ja den rechten Rand als Ausrichtungskriterium verwenden.
Das kann ich nicht nachvollziehen.Was genau denn? Ich dachte eigentlich, dass die Erklärung in Verbindung mit der Beispiel-Seite verständlich wäre?
Erläuterung, falls du dich auf "Mit margin oder padding lässt sich auch nichts ändern" beziehst: Da müsste ich ja als Wert margin-left:210px o.ä. eingeben, was bei Listen nach der Float-Box natürlich Blödsinn wäre...Hier nochmal ein kurze Beispiel-Seite, die das Problem verdeutlichen soll.
Blöde Testseite zum experimentieren.Wieso?
Mit h1+p+p+ul li {margin-left:1em; }
Die ganzen Selektoren sind doch eigentlich irrelevant?
oder größeren Werten sieht es im Fiefox jedenfalls nicht schlecht aus.
Naja, aber will nunmal mehr als ca. 30% (?) der Surfer eine korrekte Seite bieten...
Aber egal, inzwischen wurde ja schon eine ideale Lösung gefunden :).
--
selfcode ie:% fl:( br:< va:) ls:} fo:| rl:( n4:° ss:) de:] js:| ch:] sh:( mo:| zu:(
<< Life is just a moment in eternity, yet every life echoes there >>-
Hi,
Erläuterung, falls du dich auf "Mit margin oder padding lässt sich auch nichts ändern" beziehst: Da müsste ich ja als Wert margin-left:210px o.ä. eingeben, was bei Listen nach der Float-Box natürlich Blödsinn wäre...
nö. In meinem Firefox reichte wie gesagt bereits 1em - für li!.
Blöde Testseite zum experimentieren.
Wieso?Weil man keine Selektoren hat, um dran rumzuspielen.
Mit h1+p+p+ul li {margin-left:1em; }
Die ganzen Selektoren sind doch eigentlich irrelevant?In Ermangelung anderer Selektoren zum Ausprobieren durchaus nicht. Ich habe doch keine Lust, den HTML-Code erst zu speichern und Selektoren einzufügen...
freundliche Grüße
Ingo
-
-