nicht angemeldet
Netscape und Listenformatierung mit CSS
Ich versuche als Anfänger mein erstes Website-Lehrstück mit Hilfe von SelfHTML korrekt mit HTML und CSS aufzubauen. Gemäss W3C-Validator stimmt bis anhin (fast) alles. Nun habe ich die Listen mit Stylesheets so formatiert, dass die Auflistungspunkte links nicht mehr eingerückt sind, sondern linksbündig mit dem normalen Text beginnen. Der entsprechende Eintrag im .css-File lautet :
ul { margin-left: 18px }
Alles schön und gut, der IE 6.0 und der Opera 6.05 schaffen das auch, jedoch der Netscape 6.2.3 rückt die Listenpunkte nach wie vor weit ein, was speziell störend ist, da ich an einigen Stellen zwei Listen ineinander verschachtelt habe.
Was mache ich falsch resp. was muss ich ändern, um auch mit dem Netscape ein ansprechendes Result zu erhalten?
Übrigens, die entsprechende Website ist zur Zeit noch zu erreichen unter http://www.remuen.ch/nak. Bitte die Hauptseite (www.remuen.ch) nicht unter die Lupe nehmen, da sie als mein Erstlingswerk noch vor Fehlern strotzt und ich bisher keine Zeit fand, sie zu überarbeiten ;-))).
Übrigens, ich weiss, dass ich an meiner Lehrstück-Website noch einige Stunden zu arbeiten habe, da wohl noch einiges verbeserungswürdig ist wie z.B. der Einsatz des <p>-Tags an manchen Orten anstelle des <div>-Tags kombiniert mit <br> etc.
-
Nun habe ich die Listen mit Stylesheets so formatiert, dass die Auflistungspunkte links nicht mehr eingerückt sind, sondern linksbündig mit dem normalen Text beginnen. Der entsprechende Eintrag im .css-File lautet :
ul { margin-left: 18px }
Alles schön und gut, der IE 6.0 und der Opera 6.05 schaffen das auch, jedoch der Netscape 6.2.3 rückt die Listenpunkte nach wie vor weit ein, was speziell störend ist, da ich an einigen Stellen zwei Listen ineinander verschachtelt habe.
Was mache ich falsch resp. was muss ich ändern, um auch mit dem Netscape ein ansprechendes Result zu erhalten?
Du musst mit 'margin' (und 'padding'?) sowohl für 'ul' als auch für 'li' spielen. Tut mir leid, ich müsste selbst erst eine Lösung erarbeiten, habe aber gerade nicht viel Zeit. http://www.subotnik.net/style/list-box-test.html sollte dir allerdings weiterhelfen.
MI
--
: Michael Jendryschik : michael@jendryschik.de : http://jendryschik.de/ :
: Einführung in XHTML, CSS und Webdesign http://jendryschik.de/wsdev/ :
: Monatlich das Beste aus de.alt.netdigest http://best-of-netdigest.de/ :-
Hallo,
ul { margin-left: 18px }
Alles schön und gut, der IE 6.0 und der Opera 6.05 schaffen das auch, jedoch der Netscape 6.2.3 rückt die Listenpunkte nach wie vor weit ein
Du musst mit 'margin' (und 'padding'?) sowohl für 'ul' als auch für 'li' spielen.
Folgendes sieht recht hilfreich aus:
ul {margin-left:0; padding-left:20px;}
li {margin-top:0; margin-bottom:0;}Die Styles für li sind lediglich für den Opera nötig, soweit ich es überblicken kann, siehe »This makes Opera behave like Mozilla«. Siehe auch http://home.t-online.de/home/dj5nu/fanhost/css-liststyle.html.
Sicherlich lässt sich die Liste damit nicht auf allen Browsern pixelgenau perfekt gleich gestalten, deshalb könnte erwogen werden, eventuell den Browsern verschiedene Styles zu liefern.
Am einfachsten wäre natürlich, die Marker selbst zu erstellen, da sich diese komplett gestalten lassen:
ul {list-style-type:none;}
li:before {display:marker; content:"\2022"; padding:0 0.5em; font-weight:bold;}
Dies funktioniert jedoch nur im Gecko und im Opera 7, wobei es sich im Gecko nur bei ungeordneten Listen lohnt, da dieser keine Counter versteht. Die obigen Deklarationen müssten natürlich vor den anderen Browsern versteckt werden. Gibt es einen CSS-Hack, welcher Styles nur für Opera 7 vergibt? html:root würde mir für Gecko einfallen.Grüße,
Mathias--
»Im Kampf zwischen Dir und der Welt, sekundiere der Welt.
Man darf niemanden betrügen, auch nicht die Welt um ihren Sieg.«
Franz Kafka - http://www.kafka.org/projekt/nachlass2/ohg.html-
Folgendes sieht recht hilfreich aus:
ul {margin-left:0; padding-left:20px;}
li {margin-top:0; margin-bottom:0;}Die Styles für li sind lediglich für den Opera nötig, soweit ich es überblicken kann, siehe »This makes Opera behave like Mozilla«. Siehe auch http://home.t-online.de/home/dj5nu/fanhost/css-liststyle.html.
Hallo Mathias
Herzlichen Dank für die Startwerte und die ergänzenden Erklärungen. Wie eben auch gepostet, werde ich da mal üben!
Gruss
René
-
Folgendes sieht recht hilfreich aus:
ul {margin-left:0; padding-left:20px;}
li {margin-top:0; margin-bottom:0;}Die Styles für li sind lediglich für den Opera nötig, soweit ich es überblicken kann, siehe »This makes Opera behave like Mozilla«. Siehe auch http://home.t-online.de/home/dj5nu/fanhost/css-liststyle.html.
Hallo Mathias
Was Du hier gepostet hast, sieht nicht nur hilfreich aus - es ist es auch! Eine leichte Korrektur und schon stellt der IE, der Opera und der Netscape die Listen ohne Einrückungen dar. Das sind in meinem Fall die Werte:
ul {margin-left:0; padding-left:16px;}
li {margin-top:0; margin-bottom:0;}Nochmals vielen Dank!!
Grüsse
René
-
Hallo, René,
Was Du hier gepostet hast, sieht nicht nur hilfreich aus - es ist es auch! Eine leichte Korrektur und schon stellt der IE, der Opera und der Netscape die Listen ohne Einrückungen dar. Das sind in meinem Fall die Werte:
ul {margin-left:0; padding-left:16px;}
li {margin-top:0; margin-bottom:0;}20px war ein von mir willkürlich gesetzter Wert - der exakte Wert des jeweiligen Browsers hängt von der im Browser eingestellten Schriftgröße ab beziehungweise meines Wissens nach der pixelgenauen Schriftgröße, welche dem ul-Element nachträglich zugewiesen wurde (font-size).
Die genauen relativen Werte findest du auf der von Michael genannten Seite - da sie sich von Browser zu Browser unterscheiden, kannst du höchstens einen Mittelwert finden, zumindest haben das meine Tests gezeigt. Wenn 16px dieser Mittelwert für deinen spezielle Schriftschnitt ist, dann kannst du damit sicher gute Resultate erzielen.
Grüße,
Mathias--
»Im Kampf zwischen Dir und der Welt, sekundiere der Welt.
Man darf niemanden betrügen, auch nicht die Welt um ihren Sieg.«
Franz Kafka - http://www.kafka.org/projekt/nachlass2/ohg.html
-
-
-
Du musst mit 'margin' (und 'padding'?) sowohl für 'ul' als auch für 'li' spielen. Tut mir leid, ich müsste selbst erst eine Lösung erarbeiten, habe aber gerade nicht viel Zeit. http://www.subotnik.net/style/list-box-test.html sollte dir allerdings weiterhelfen.
Herzlichen Dank! Hab mir das kurz angeschaut und dann sind mir ein paar Lichter aufgegangen. Ich werd mal ein bisschen üben, aber wenn ich mir so anschaue, wie das Verhältnis IE zu Netscape ist ... aber ich will ja schliesslich etwas lernen dabei, das rechtfertigt den Aufwand dann doch wieder ;-))
Gruss
René
-