liste zwar in div, bullets jedoch ausserhalb, wie einfangen
michaah
- css
Hi,
in einen div habe ich ul und li ( und h2, h3 ). Weder im div noch in sonsteinem enthaltenen element ist padding oder margin definiert. Erwartungsgemäß sollten dabei die listeneinträge am linken rand des div_s landen, wobei ich dachte, dass eigentlich die bullets der liste(n) vom umgebenden div "gefangen" würden. Mitnichten, am rand steht der listeneintrag, die bullets ausserhalb des divs?
Dass ich per margin-left die ganzen einträge wie gewünscht an die richtige stelle schieben kann ist mir klar.
Mich interessiert jedoch ob es auch anders geht, bzw. was an meiner vorstellung, dass das umgebende div die bullets fangen soll falsch ist? Bzw. lassen sich die bullets generell nicht von aussen anfassen?
Hallo michaah
in einen div habe ich ul und li ( und h2, h3 ). Weder im div noch in sonsteinem enthaltenen element ist padding oder margin definiert.
Bedenke, dass h2, h3, ul und/oder li, vom Browser Defaultwerte für margin und/oder padding bekommen.
Erwartungsgemäß sollten dabei die listeneinträge am linken rand des div_s landen, wobei ich dachte, dass eigentlich die bullets der liste(n) vom umgebenden div "gefangen" würden. Mitnichten, am rand steht der listeneintrag, die bullets ausserhalb des divs?
Wie, wo, was?
In welchem Browser?
Wie sieht der Quelltext genau aus?
Ist dieser valid?
Wie sieht das CSS?
Ist das Div irgendwie positioniert?
Wo gibt es ein Beispiel online, um dein Problem nachzuvollziehen?
Auf Wiederlesen
Detlef
Taag,
Bedenke, dass h2, h3, ul und/oder li, vom Browser Defaultwerte für margin und/oder padding bekommen.
alles per stylesheet überschrieben, wobei mir allerdings nicht ganz klar ist ob das auch wirklich für verschachtelte element gilt, es ist allgemein überschrieben (eben ausprobiert, ja die überschreibung ist wirksam).
In welchem Browser?
konqueror, FF, opera IE, wobei letzterer einfach keine bullets anzeigt. Da jedoch der listeneintrag am rand beginnt kommt das auf das selbe hinaus.
<html>
<style>
html, body, div, p, h1, h2, h3, ul, ol, span, a, table, td, form, img, li {
margin: 0;
padding: 0;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}
#navi { /* formatiert das Element mit id "navi" */ position: absolute; top: 0em; right:0%; background: #001058; width: 15%; height: 150%; color: #ffffff; padding-left: 0em; }
#navi h2 { /* formatiert alle Überschriften zweiter Ordnung, die sich in einem Element mit der id "navi" befinden */
font-size: 0.8em;
color: #fff;
margin: 0em 0em 0em 0em;
font-weight:bold;}
#navi h3 { /* formatiert alle Überschriften dritter Ordnung, die sich in einem Element mit der id "navi" befinden */
font-size: 0.7em;
color: #fff;
margin: 0em 0em 0em 0em;
font-weight:bold;}
#navi h4 { /* formatiert alle Überschriften vierter Ordnung, die sich in einem Element mit der id "navi" befinden */
font-size: 0.6em;
color: #fff;
margin: 0em 0em 0em 0em;
font-weight:bold;}
#navi ul { /* formatiert alle ungeordneten Listen, die sich in einem Element mit der id "navi" befinden */ font-size: 0.75em;
line-height: 1em;
color: #00FC9B;
margin: 0em 0em 0em 0em ;
font-weight:bold;}
#navi ul li { /* formatiert alle Listenpunkte, die sich in einer ungeordneten Liste, die sich in einem Element mit der id "navi" befindet, befinden */
font-size: 1em;
line-height: 0.75em;
color: #00FC9B;
margin: 0em 0em 0em 0em ;
font-weight:bold;}
#navi ul li a { /* formatiert alle Links, die sich in einem Listenpunkt, der sich in einer ungeordneten Liste, die sich in einem Element mit der id "navi" befindet, befindet, befindet :-) */
font-size: 0.75em;
line-height: 1em;
color: #00FC9B;
margin: 0em 0em 0em 0em ;
font-weight:bold;}
</style>
<body>
<div id=navi>
<h2>Rundreisen</h2>
<ul>
<li><a href="bla.html">bla</a></li>
<ul>
<li><h2>Allgemeines</h2></li>
<li><h2>Unterkünfte</h2></li>
- - -
<li><h2>Gruppenreise</h2></li>
<li><h2>Minigruppe</h2></a></li>
<li><h2>Selbstfahrer</h2></a></li>
<h3>betreut</h3>
<li><h2>Selbstfahrer</h2></a></li>
<h3>unbetreut</h3>
<li><h2>Mit Kindern</h2></a></li>
<!--<li><a href="./kinder.html">Schatz des Südens</a></li>--->
- - -
<li><h2>Individualreise</h2></a></li>
<!--Beratung<br>Vorschlag<br>Buchung<br>Ausarbeitung<br>Logbuch-->
</ul>
<li><a href="../bla1.html">bla1</a></li>
<li><a href="../bla2.html">bla2</a></li>
<li><a href="..bla3.html">bla3</a></li>
</li>
</ul>
<h2>Fotoreisen</h2>
<ul>
<li><a href="./foto/bla0X.index">bla0 200X</a></li>
<li><a href="./foto/bla30Y.index">bla3 200Y</a></li>
</ul>
</li>
<h2>Beratung</h2>
<ul>
<li><a href="./service">Individualreisen</a></li>
<li><a href="./Ortskenntnis">Vor Ort</a></li>
<li><a href="me.de">Über mich ←</a></li>
<li><a href="./kontakt">Kontakt</a></li>
<br><br>
<li><a href="./sitemap">Sitemap</a></li>
</ul>
</div>
</body>
</html>
Wie sieht der Quelltext genau aus?
Ist dieser valid?
Wie sieht das CSS?
Ist das Div irgendwie positioniert?Wo gibt es ein Beispiel online, um dein Problem nachzuvollziehen?
Auf Wiederlesen
Detlef
gruß
michaah
Hallo Micha
hast Du mal gesehn das Du etwas "frei" mit Deinen HTML Tags umgehst?
Also das Öffnen und Schließen nicht beachtest!
Suhonmal probiert?
<ul>
<li>
<ul>
<li></li>
</ul>
</li>
<ul>
statt:
<ul>
<li></li>
<ul>
<li></li>
</ul>
<ul>
etc.
Bernd
Taag,
Hallo Micha
hast Du mal gesehn das Du etwas "frei" mit Deinen HTML Tags umgehst?
hm, ich habe tatsächlich (noch) große schwierigkeiten mit verschachtelten elementen. Natürlich ist dein hinweis berechtigt, schließlich ist in html so ziehmlich alles verschachtelt.
gruß
michaah
[…]
<li><h2>Selbstfahrer</h2></a></li>
[…]
Das ist nie und nimmer gültiges HTML. Erstens bezweifele ich mal, dass Überschriften als Listenelemente besonders sinnvoll sind (ob die jetzt gültig sind will ich gar nicht wissen...), zweitens machst du da ein a-Element zu dass du nicht aufgemacht hast und drittens sind Überschriften in a-Elementen nicht erlaubt. (Ich gehe mal davon aus, dass du eigentlich <li><a><h2>Selbstfahrer</h2></a></li> meinst)
Hallo michaah
alles per stylesheet überschrieben, wobei mir allerdings nicht ganz klar ist ob das auch wirklich für verschachtelte element gilt, es ist allgemein überschrieben (eben ausprobiert, ja die überschreibung ist wirksam).
Wo soll der Browser ohne passendes margin oder padding die Bullets anzeigen?
Für list-style-position ist der Defaultwert outside.
<html>
Keine Dokumenttyp-Deklaration, damit schickst du die Browser in den ich-rate-mal-wie-es-gemeint-sein-könnte-Modus.
kein <head>
, kein <title>
, keine Angabe zur Zeichenkodierung
<style>
kein type-Attribut
...
</style><body>
...
</body>
</html>
Bitte validiere deinen Quelltext, bevor du mittels CSS das Aussehen bestimmst. Fehlerhaftes HTML führt dazu, dass du dich auf keinerlei Anzeigeverhalten verlassen kannst.
Auf Wiederlesen
Detlef
Taag,
Hallo michaah
Für list-style-position ist der Defaultwert outside.
Detlef
Danke, das war die gesuchte info!
Zu deinen weiteren anmerkungen: Du hast recht, ich hatte das mit dem Dokumentenype und der Validierung im eifer des gefechts verhudelt. Werde zukünftig darauf achten.
gruß
michaah