LI -> weiter runter

[Nina]

hallo,

habe meine navigation als liste eingebaut:
#navi li {
 list-style-type:none;
 border-left:11px solid black;
 border-bottom:2px solid black;
 width:183px;
 height:20px;
 margin-bottom:5px;
}

<ul id="navi">
<li>a</li>
<li class="runter">b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li class="runter">f</li>
</ul>

nun wäre es toll, wenn die mit runter versehenen felder zum darüberliegenden z.b. einen abstand von 20px hätten.
habe es mit padding und margin bereits versucht -> vergeblich :(
wie bringe ich die listenelemente weiter runter und noch dazu ohne, dass der border(bottom) sich streckt.

soll ja so aussehen:
| a

| b
| c
| d
| e

| f

und _nicht_ so:
| a
|
| b
| c
| d
| e
|
| f

habt Ihr einen guten ratschlag, wie sich das nach unten versetzen lässt?

danke und schönen sonntag noch

[Tim Tepaße]

Hallo,

nun wäre es toll, wenn die mit runter versehenen felder zum darüberliegenden z.b. einen abstand von 20px hätten. habe es mit padding und margin bereits versucht -> vergeblich :(

Was hast Du denn genau ausprobiert? Im Prinzip sollte man nämlich die li.runter-Elemente problemlos mit margin-top:20px; ausstatten können.

wie bringe ich die listenelemente weiter runter und noch dazu ohne, dass der border(bottom) sich streckt.

Hm? border-bottom ist horizontal – das sollte sich eigentlich nicht mit vertikaler  Änderungen strecken. Hast Du vielleicht die CSS-Eigenschaft margin mit nur einem Wert verwendet – so: margin:20px – dass den Aussenabstand auf alle vier Seiten anwendet? Man wendet den Wert eigentlich nur auf die einzelne Seite an, für den oberen Aussenabstand also so:

margin-top:20px

oder so:

margin:20px 0 0 0;

Siehe auch die Beschreibung der margin*-Eigenschaften in SELFHTML, insbesondere die der zusammenfassenden Eigenschaft margin[/code.

und _nicht_ so:
| a
|
| b
| c
| d
| e
|
| f

Das dürfte wiederum ein Resultat durch die Anwendung von padding sein – dieses ist ja für den Innenabstand zuständig und der Rahmen befindet sich ausserhalb diesses Innens. Also: margin(-*) ist die Eigenschaft, die Du suchst.

Tim

[Nina]

hallo,

hab es soeben nocheinmal mit  margin-top:20px; versucht. doch das einzige ergebnis, was zu sehen ist, ist, dass der gesamte block (also die gesamte listenbox/nicht nur das listenitem mit der id) um 20px nach unten rutscht, wenn ich die id dem obersten li gebe.
gebe ich sie dem 2. oder einem anderen li, so tut sich gar nichts. keine verschiebung :(

[Hopsel]

Hi Nina!

hab es soeben nocheinmal mit  margin-top:20px; versucht.

Kannst du Quellcode posten?

Weißt du, wie du die Klasse 'runter' richtig selektierst?

MfG H☼psel

[Nina]

...
unabhängig davon geht das mit dem abstand immer noch nicht :(
auch, wenn ich es mit style="" festlege.

[Hopsel]

Hi Nina!

unabhängig davon geht das mit dem abstand immer noch nicht :(
auch, wenn ich es mit style="" festlege.

Ohjemine. Davon habe ich doch kein Wort gesagt. Du musst uns den gesamten Quellcode oder einen Link zur Problemseite geben. Anders können wir dir bei deiner Fehlerbeschreibung nicht helfen.

MfG H☼psel

[wahsaga]

hi,

hab es soeben nocheinmal mit  margin-top:20px; versucht. doch das einzige ergebnis, was zu sehen ist, ist, dass der gesamte block (also die gesamte listenbox/nicht nur das listenitem mit der id) um 20px nach unten rutscht, wenn ich die id dem obersten li gebe.
gebe ich sie dem 2. oder einem anderen li, so tut sich gar nichts. keine verschiebung :(

Wieso ist denn jetzt von der ID die Rede, du wolltest doch die LI über ihre Klassen formatieren?

gruß,
wahsaga

[Nina]

bin auf das prob gestoßen, dass die li's schon mit einer klasse versehen sind.
daher muss ich wohl eine id verwenden.
unabhängig davon geht das mit dem abstand immer noch nicht :(
auch, wenn ich es mit style="" festlege.

[wahsaga]

hi,

bin auf das prob gestoßen, dass die li's schon mit einer klasse versehen sind.
daher muss ich wohl eine id verwenden.

Wieso das?
In deinem beispielcode hatten zwei LI die Klasse "runter".

Davon abgesehen kann ein Element auch mehreren Klassen angehören. Die Klassennamen werden dann im class-Attribut durch Whitespace, normalerweise benutzt man Leerzeichen, getrennt.
Aber vermtulich ist das gar nicht mal nötig in deinem Fall.

gruß,
wahsaga

[MudGuard]

Hi,

Was hast Du denn genau ausprobiert? Im Prinzip sollte man nämlich die li.runter-Elemente problemlos mit margin-top:20px; ausstatten können.

wobei noch zu beachten ist, daß vertikale margins kollabieren, ggf. ist also auch noch eine Anpassung des Wertes (wenn es 20px mehr sein sollen als bei den anderen) vorzunehmen oder (wenn die anderen keinen Abstand haben sollen) margin-bottom für alle li auf 0 zu setzen.

cu,
Andreas

[Bud]

Hi.

habt Ihr einen guten ratschlag, wie sich das nach unten versetzen lässt?

#navi li.runter { margin-top: 100px }

Du hast es sicher so geschrieben:

#navi li .runter { margin-top: 100px }

Ciao, Bud