• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Liste einrücken

M

MikeTheBike

Neues Mitglied
Hallo,
ich habe eine unsortierte hierarchische Liste, also List-items mit Unterpunkten (also geschachtelt). Die Unterpunkte werden bei mir nicht eingerückt, sondern erscheinen linksbündig mit den Items der Ebene darüber.
Also so:

* Hund
- Schäferhund
- Dogge
* Katze
* Maus

Statt:

* Hund
- Schäferhund
- Dogge
* Katze
* Maus

Woran kann das liegen? Daran, dass ich XHTML verwende?
Die CSS-Angabe list-style-position hat ja eine andere Aufgabe, wenn ich das richtig sehe. In Büchern und bei SelfHTML erscheint die Einrückung automatisch, aber bei mir nicht.

Danke im Voraus.
 
Es scheint tatsächlich am Doctype bzw. an der HTML Version zu liegen. Wenn ich den hier nehme:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"> ,

den auch Self-HTML an der Stelle nimmt (unter SELFHTML: HTML/XHTML / Elemente zur Textstrukturierung / Listen bzw. unter Verschachtelte Listen - ul, li ), dann klappt's auch bei mir. Wenn ich aber den hier nehme, den ich dem Buch (bzw. der beiliegenden CD) entnommen hab, mit dem ich lerne:

<!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" dir="ltr" lang="de-DE">
<head profile="http://gmpg.org/xfn/11">
<title>Liste</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-15" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
</head>

dann schreibt er mir alles linksbündig nebeneinander. Woran liegt das? Am XHTML?
Übrigens scheint auch das HTML 4 automatisch eine Art margin-left einzufügen, während ich bei XHTML alles ganz links habe.

Mal allgemein: isses OK, dass ich mit XHTML anfange zu lernen? Hab mir das Buch schon gekauft und würde ungern auf HTML 4 umsteigen. Irgendwann muss ich ja dann sowieso HTML 5 lernen.
 
HTML, egal welcher Standard, beeinflusst nicht das Design einer Seite. Das wird per CSS festgelegt. Wenn es bei dir zu Fehldarstellungen kommt, dann prüfe deinen HTML-Code auf Fehler. Das geht am Besten mit dem W3C Validator. Wenn dein HTML-Code fehlerfrei ist und dann immer noch etwas falsch dargestellt wird, solltest Du dir dein CSS anschauen.

Welchen HTML-Standard Du wählst ist dir überlassen. Heutzutage kannst Du alles von HTML4, HTML5 und auch XHTML nehmen - es macht in der Darstellung keine Unterschiede.

Und wie gesagt: solange du nicht den kompletten HTML- und CSS-Code zeigst können wir hier nur raten.
 
Also, dieser Code funktioniert:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Liste 2</title>
</head>
<body>

<ul>
<li>
Hund
<ul>
<li>
Schäferhund
</li>

<li>
Dackel
<ul>
<li>
Killerdackel
</li>

<li>
Weicheidackel
</li>

<li>
HalliGalliDackel
</li>
</ul>
</li>

<li>
Dogge
</li>


</ul>

</li>

<li>
Katze
</li>

<li>
Maus
</li>

</ul>

</body>
</html>

Und dieser Code funktioniert nicht:


<!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" dir="ltr" lang="de-DE">
<head profile="http://gmpg.org/xfn/11">
<title>Liste 3</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-15" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
</head>

<body>


<ul>
<li>
Hund

<ul>
<li>
Schäferhund
</li>

<li>
Dackel

<ul>
<li>
Killerdackel
</li>

<li>
Weicheidackel
</li>

<li>
HalliGalliDackel
</li>
</ul>
</li>

<li>
Dogge
</li>


</ul>

</li>

<li>
Katze
</li>

<li>
Maus
</li>

</ul>

</body>
</html>

Der CSS Code dazu lautet jeweils:

* {
font-size: 12px;
margin: 0px;
padding: 0px;
}

body {
background-color:#ffffff;
color:#000000;
font-family:Verdana, Arial, Helvetica, sans-serif;
/* margin-left:40px; */

}

p{
margin:18px 0px;
}

Der W3C Validator akzeptiert das alles.
 
Beim zweiten Code hast du *{margin:0px}. Das führt natürlich dazu, dass auch die Listenelemente keinen Abstand nach links mehr enthalten. Schreib' den Code entsprechend um, damit die Listenelemente wieder ein margin-left haben.
 
Genauer gesagt: beim 1. Code hast Du kein CSS, beim zweiten hast Du CSS dabei. Dadurch entstehen natürlich Darstellungsunterschiede. Dafür kann HTML wie gesagt nichts.
 
Ok, danke. Hatte nicht gesehen, dass bei dem ersten HTML-Code die CSS-Datei gar nicht eingebunden war. Dachte deshalb, am CSS kann's nicht liegen, ist ja für beide gleich.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben