nicht angemeldet
<ul> formatieren
guten Abend Forum ;-)
Ich versuche gerade ein paar Rätsel bei der Formatierung von Listen zu lösen. Es geht mir darum, daß ich für das Element <ul> ein paar Vorgaben machen möchte - zum Beispiel zur Einrückungstiefe. Dafür gibt es solche netten Anweisungen wie "list-style ...". Laut SELFHTML allerdings nur für numerierte Listen (<ol>). Immerhin steht in SELFHTML nicht explizit, daß es das für <ul> nicht geben dürfte.
Folge ich einem der Besipiele, die in http://edition-w3c.de/TR/1998/REC-CSS2-19980512/kap12.html#heading-12.6.2 stehen, so ist das aber für <ul> durchaus zuständig - funktioniert bei mir bloß nicht, in keinem Browser. Mit <ol> kriege ich alles so hin, wie ich es sehen möchte, aber ich tippe gewohnheitsmäßig immer erstmal <ul>.
Muß ich jetzt anstelle von <ul> tatsächlich immer <ol> einsetzen, wenn ich meine Listen mit CSS formatieren möchte? Hier im Forum gehts ja auch, die "forum.css" enthält sowas:
ol li,ul li,ul,ol,li {
margin-top:0px;
margin-bottom:0px;
white-space:nowrap;
list-style-type:none;
}
Und mindestens das "white-space:nowrap;" und "margin-left:xxx" möchte ich gerne auch für <ul> haben. Klappt bei mir aber in keinem Browser mit <ul>, hier im Forum scheints jedoch zu funktionieren. Wie kriege ich diese Formatierung nun dazu, daß sie auch bei mir die gewünschte Wirkung zeigt?
Grüße aus Berlin
Christoph S.
--
mailto:christoph.schnauss@berlin.de
http://www.christoph-schnauss.de
ss:| zu:) ls:& fo:) va:) sh:| rl:|
mailto:christoph.schnauss@berlin.de
http://www.christoph-schnauss.de
ss:| zu:) ls:& fo:) va:) sh:| rl:|
-
Hallo,
Ich versuche gerade ein paar Rätsel bei der Formatierung von Listen zu lösen. Es geht mir darum, daß ich für das Element <ul> ein paar Vorgaben machen möchte - zum Beispiel zur Einrückungstiefe.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Listen</title>
<style type="text/css">
<!--
ul.weit li{
padding-left:50px;
}
ul.nah li{
padding-left:0px;
}
-->
</style>
</head>
<body>
<ul class="weit">
<li>Listenpunkt</li>
<li>Listenpunkt länger</li>
<li>Listenpunkt</li>
</ul>
<ul class="nah">
<li>Listenpunkt</li>
<li>Listenpunkt länger</li>
<li>Listenpunkt</li>
</ul>
</body>
</html>viele Grüße
Axel
-
hallo Axel,
ul.weit li{
padding-left:50px;
}Ja, genau so etwas meine ich. Und genau das tut bei mir keiner - aber mit <ol> tun es alle Browser (dann bloß nicht mit "padding-left", sondern mit "margin-left").
Ich habe deine kleine Beispielseite als HTM-Dokument rauskopiert und mal fix durch mozilla und Opera und IE gejagt: das Ergebnis entspricht meiner Fragestellung. Die Pseudoklassen werden nicht realisiert. Anderen CSS-Kram können die Browser natürlich, nur <ul> wird irgendwie ignoriert.
Grüße aus Berlin
Christoph S.
--
mailto:christoph.schnauss@berlin.de
http://www.christoph-schnauss.de
ss:| zu:) ls:& fo:) va:) sh:| rl:|-
Hallo Christoph,
Die Pseudoklassen werden nicht realisiert.
Welche Pseudoklassen ???
Grüße
Thomas
-
-
-
Also die CSS-Eigenchaften müssten auch bei <ul>s funktionieren, wobei die Einrückung der Listenpunkte meist durch margin/padding der <li>s gesteuert wird.
Bitte mal einen Beispielcode oder eine URl posten, mit dem bisherigen kann man wenig anfangen...-
hallo Maximilian,
Bitte mal einen Beispielcode oder eine URl posten, mit dem bisherigen kann man wenig anfangen...
URL geht nicht, weil ich das nicht hochgeladen habe. Und "Beispielcode" ist schwieriger als du wahrscheinlich erwartest.
In meiner (zentralen) CSS steht unter anderem so etwas:
ol,li {
margin-top:0px;
margin-bottom:0px;
margin-left:1.7em;
white-space:nowrap;
list-style-position:inside;
/* list-style-image:url(grafik/iconk01.gif);*/
list-style-type:none;
}
ul {
padding-left:1.7em;
}Benötigt wird das in einer von einem PERL-Script erzeugten Bildschirmausgabe, also nicht in einem statischen Dokument. Das PERL-Script macht folgendes:
foreach (...) {
if (...) {
$link = "<li><a href="$baseurl/$name">$name</a></li>\n";
push(@links, $link);
}
}
Es füllt mir also einen Array mit je nach Bedingung unterschiedlich vielen Listenpunkten. Das ganze passiert zweimal mit verschiedenen Variablen/Arrays.
Ausgegeben werden die Arrays dann (schematisch) in dieser Form:
print <<ENDE;
<table cellspacing="0" cellpadding="3" width="100%"><tr>
<td width="50px"><ul>@links</ul></td><td><ul>@titel</ul></td>
</tr></table>
ENDEDie Scriptausgabe befolgt die restlichen in meiner zentralen CSS vorgegebenen Anweisungen (die ich hier jetzt nicht gepostet habe), nur das für <ul> nicht. Schreibe ich stattdessen <ol>, wird alles das, was in der CSS steht, brav ausgeführt.
ok, du könntest jetzt noch anmerken, daß in meiner CSS ja
ol,li {
...
}
steht, und ich damit zwar li formatieren möchte, aber das eventuell unbeachtet bleibt, weil ich darunter nur
ul {
...
}
notiert habe. Den Einwand kann ich entkräften. Das hab ich natürlich durchgespielt. Und mein PERL-Script arbeitet fehlerfrei.Grüße aus Berlin
Christoph S.
--
mailto:christoph.schnauss@berlin.de
http://www.christoph-schnauss.de
ss:| zu:) ls:& fo:) va:) sh:| rl:|
-
-
Hallo,
Ich versuche gerade ein paar Rätsel bei der Formatierung von Listen zu lösen. Es geht mir darum, daß ich für das Element <ul> ein paar Vorgaben machen möchte - zum Beispiel zur Einrückungstiefe.
Ein generelles Problem ist damit, dass z.B. Das Bulletzeichen bei einigen Browser im <ul> steht bei anderen nicht.
Ausprobieren mit Opera/IE und dann Mozilla
ul {border:solid 1px red;}jetzt nimm dazu:
li {border:solid 1px blue;}Dann weisst du schon jetzt, dass du Probleme mit margin-left und padding-left bekommst:
ul {border:solid 1px red; margin-left:0px;}
bewirkt keine Änderung im Mozilla im Vergelich zum vorigen Bild, bei IE und Opera jedoch eine Menge.
Ein
li {border:solid 1px blue;margin-left:0px;}
Bewirkt im weitern keine Änderungen in den Browser.Mit:
ul {
border:solid 1px red;
padding-left:10px;
}
li {
border:solid 1px blue;
margin-left:0px;
}
erreichst zwar eine halbwegs ähnliche Darstellung, aber du muss vermutlich trotzdem noch ein <div> um deine Liste legen. (z.B. wenn deine Liste direkt im <body> steht.Grüße
ThomasPS:
Habe mit <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> gearbeitet, aber auch ohne ist das selbe.-
Hallo,
Ich habe hier als ergänzung noch zwei nette links wo das listenproblem auch nochmal erläutert wird:http://devedge.netscape.com/viewsource/2002/list-indent/
Consistent List Indentationhttp://www.subotnik.net/style/list-box-test.html
Subotnik: list box implementations in different browsersGruss, Jan aus Dresden
-
hallo Thomas,
PS:
Habe mit <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> gearbeitetIch bastle an
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
herum. Ich habe keine statischen Dokumente, sondern sie werden von einem PERL-Script erzeugt. Kann es da irgendwo daran hängen, daß ich meine Dokumente mit dem CGI-Modul erstellen lasse? (Das PERL-Script ist in Ordnung)Deine anderen Anmerkungen baue ich grade mal noch nach.
Grüße aus Berlin
Christoph S.
--
mailto:christoph.schnauss@berlin.de
http://www.christoph-schnauss.de
ss:| zu:) ls:& fo:) va:) sh:| rl:|-
Hallo Christoph,
Ich bastle an
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"Spielt hierfür keine Rolle. (siehe auch [pref:t=60029&m=338048] ff.)
Grüße
Thomas
-
-