nicht angemeldet
dynamisches Menü auf CSS Basis
Hallo,
hab eine Frage zu dem Code unten. Könnt ihr mir kurz erläutern wie ich es am besten hinbekomme, das die Listenunterpunkte nichtmehr eingerückt werden.
Bitte nicht einfach nur die Lösung. Eine kurze Erläuterung wäre super damit ich die Lösung auch verstehe.
<html>
<head>
<style type="text/css">
ul.Navigation li
{
list-style: none;
}
ul.Navigation li ul
{
display: none;
}
ul.Navigation li:hover ul
{
display: block;
}
ul.Navigation a:hover
{
background-color: red;
}
</style>
</head>
<body>
<ul class="Navigation">
<li>
<a href="#Beispiel">Seite 1</a>
<ul>
<li><a href="#Beispiel">Seite 1a</a></li>
<li><a href="#Beispiel">Seite 1b</a></li>
</ul>
</li>
</ul>
</body>
</html>
-
Bitte nicht einfach nur die Lösung. Eine kurze Erläuterung wäre super damit ich die Lösung auch verstehe.
jedes element hat vordefinierte eigenschaften - zu diesen gehört unter anderem der http://de.selfhtml.org/css/eigenschaften/randabstand.htm@title=aussen- und http://de.selfhtml.org/css/eigenschaften/innenabstand.htm@title=innenabstand
diesen möchtest du wahrscheinlich (besonders den auf der linken, seite der die einrückung bewirkt) entfernen
im übrigen solltest du dich für konsequente kleinschreibung bei klassen und id-namen beschränken, da diese case-sensitive sind
in case-sensitiven systemen ist es meistens einfacher alles klein zu schreiben, da man so weniger flüchtigkeitsfehler begeht und mal eine gross und kleinschreibung verdreht
-
Wie suit schon erwähnte, haben alle Elemente vordefinierte margin und padding. Ich habe mir angewöhnt am Anfang des Stylesheets sämtliche Einstellungen auf 0 zustellen. Erstens stolpert man dann nicht über irgendwelche Abstände die nicht mal von allen Browsern gleich definiert sind und füge dann die Abstände die ich möchte wieder explizit ein.
* {
margin: 0;
padding: 0;
border: none;
}ul hat in der Grundeinstellung schon ein margin und die li auch wieder. Könnte bei li auch padding sein, das weiss ich jetzt grad nicht auswendig. Die * Variante um sämtliche Abstände auf Null zu stellen wird in diversen Artikeln auch behandelt. Hier gibts auch viel ausführlichere Varianten und es gibt auch Stimmen die sagen, dass nur mit dem * heikel sei. Ich hatte auf jeden Fall noch nie ein Problem damit.
Übrigens ist ul schon ein Block-Element. Dies musste also nicht mehr extra definieren.
Hoffe das hilft
Pierre-
Wie suit schon erwähnte, haben alle Elemente vordefinierte margin und padding.
nein, ich sagte dass jedes element vordefinierte eigenschaften hat - nicht dass jedes element mit vordefinierten padding und margin ausgestattet ist ;) - die meisten inline-elemente haben keinen padding oder margin
Hier gibts auch viel ausführlichere Varianten und es gibt auch Stimmen die sagen, dass nur mit dem * heikel sei. Ich hatte auf jeden Fall noch nie ein Problem damit.
naja, der haken daran ist, du musst sämtliche formatierungen die du für gewöhnlichen fließtext benötigst nochmal nachbauen - das firefox 2 default-css hat zb. 482 zeilen - alleine die listenformatierung besteht aus über 1500 zeichen
auch wenn manche "css gurus" dazu raten, reset-stylesheets zu verwenden, halte ich das ganze für extrem unsinnig, man erleichtert sich die arbeit auf einer seite (beim formatieren von seitenkopf, fuss und menü) - also dort wo entsprechende elemente nicht zum darstellen von "echtem" fliesstext verwendet werden, gräbt sich aber auf der anderen seite ein ungleich tieferes loch, nämlich dort wo der normale text formatiert wird
-
-