Listen-Navigation, margin-left für erstes <li> Einstellungen

[Uliwe]

Hallo,

im XHTML-Forum wurde mir als Problemlösung auf eine meiner Fragen der Hinweis gegeben, in einer Liste ein "margin-left" nur für das erste <li> anzugeben. Wie kann ich das mit der Listennavi realisieren?

Versuche mich gerade an meiner ersten validen Seite (XHTML/CSS) und tue mich als Tabellengewöhnter noch etwas schwer...

Liebe Grüße,
Uli.

[MaZderMind]

Di
Du hast in der Listennavi die Möglichkeit die SeitenID per Variable ausgeen zu lassen. Du bast als in dein sowas ein wie <li id="navi{id}" /> (Ich weiß nich ob die Variable wirklich {id} heißt, einfach im Modul nachgucken!) und schon kannst du im CSS per #navi34 z.B. das erste Element direkt ansprechen.

Gruß, Peter

[Olaf]

Oder du nutzt das Feature {first}, oder .... neee mehr weiß ich auch nicht

[Uliwe]

Hallo, Ihr zwei Nacht-Experten,

habe in das Feld "Ordner" in der Listen-Navi mal folgendes eingetragen:

QUELLTEXT

<li id="navi{id}"><a href="{link}">{name}</a>{folder}</li>

In der css-Datei habe ich diese Zeilen für das erste <li>-Element hinzugefügt:

QUELLTEXT

#navi3 {
    margin-left: 40px;
}

Leider hat das keinerlei sichtbare Auswirkung. Ich vermute, dass sich da irgendetwas mit anderen css-Angaben widerspricht!? Deshalb hier mal die komplette css-Datei, vielleicht hat mal jemand Zeit und Lust, es sich anzusehen:

QUELLTEXT

body {
    font-family: "Lucida Grande", sans-serif;
    font-size: small;
    margin: 0;
    background: #fff;
    color: #105194;
}

#head {
    background: #1877D9 url(../../media/img/csslayout/head/head_bg.jpg);
    margin: 0;
    color: #fff;
}

#logo {
    display: block;
}

#navimain {
    margin: 0;
    list-style: none;
    background: #1877D9 url(../../media/img/csslayout/navimain/nav_bg.gif) repeat-x bottom left;
    float: left;
    width: 100%;
    color: #fff;
}

#navimain li {
    float: left;
    margin: 0;
    padding: 0;
    font-family: "Lucida Grande", sans-serif;
    font-size: 90%;
}

#navi3 {
    margin-left: 40px;
}

#navimain a {
    float: left;
    display: block;
    margin: 0 2px 0 0;
    padding: 4px 8px;
    color: #fff;
    text-decoration: none;
    border: 1px solid #105194;
    border-bottom: none;
    background: #1877D9 url(../../media/img/csslayout/navimain/bg_off.gif);
}

#navimain a.aktiv {
    padding-bottom: 5px;
    color: #105194;
    text-decoration: none;
    border-color: #105194;
    background: #fff url(../../media/img/csslayout/navimain/bg_on.gif);
}

#navimain a:hover {
    color: #105194;
    text-decoration: none;
    border-color: #105194;
    background: #fff url(../../media/img/csslayout/navimain/bg_on.gif);
}

#content {
    clear: left;
}

Mit dem Feature {first} kann ich momentan noch gar nichts anfangen, werd's mir aber natürlich ansehen!

Danke Euch schonmal für die schnelle Hilfe,
Uli.

Der Beitrag wurde von Uliwe bearbeitet: Fri. 8. December 2006, 01:18

[Olaf]

Jep da beist sich was, die ID von navimain hat Vorrang, so sollte es klappen, wenn die "3" stimmt!!!

QUELLTEXT

#navimain li {
    float: left;
    margin: 0;
    padding: 0;
    font-family: "Lucida Grande", sans-serif;
    font-size: 90%;
}

#navimain li#navi3 {
    margin-left: 40px;
}

{first}class="first"{/first} da wo du jetzt das mit der ID hast.

N8

[Uliwe]

Danke, Olaf. Es tut sich was:

Im IE6 ist die horizontale Bildlaufleiste inzwischen verschwunden, der linke Rand vor der Navi beträgt aber nicht 40px (margin-left: 40px) sondern genauso wie im FF2 80px! Im FF2 ist außerdem die Bildlaufleiste noch da, die Seite ist um genau 40px zu breit! Zum Mäuse melken...

Edit:

Wenn ich jetzt den linken Rand der Liste auf "-40px" setze, sieht die Seite im FF2 so aus, wie ich mir das vorstelle, im IE6 rutscht die Liste auch an die richtige Stelle (40px Rand) aber der Hintergrund läßt am rechten Rand 40px weiß. Schade.

QUELLTEXT

#navimain {
    margin: 0 0 0 -40px;
    list-style: none;
    background: #1877D9 url(../../media/img/csslayout/navimain/nav_bg.gif) repeat-x bottom left;
    float: left;
    width: 100%;
    color: #fff;
}

Der Beitrag wurde von Uliwe bearbeitet: Fri. 8. December 2006, 01:57

[MaZderMind]

Hi
Um die Scrollbar zu vermeiden solltest du nur 99.9% höhe i, body benutzen.
Wir machen aber meistens genau gas gegenteil um "Spreingen" zu vermeiden wenn bei einer langen Seite ein Scrollbalken auftaucht, der bei einer kutzen nicht da war. Dazu setzen wir die body height: 100.05%.

Gruß, Peter

[hylli]

Ich zitiere hier auch nochmal die Moduldoku zur Listen-Navigation:

{first}...{/first} und {last}...{/last}:

Das erste und das letzte Listenelement kann durch die bedingt ausgewerteten Konstrukte "{first}...{/first}" und "{last}...{/last}" besonders gekennzeichnet werden.

Ab der Version 0.9.3-dev wurde die Funktionalität erweitert. Es kann jetzt ein "else-Fall" angegeben werden. Bsp.: {first}class="first"{else}class="linker_rand"{/first}. Damit können jetzt auch "Link1 | Link2 | Link3"-Navigationen erzeugt werden.

Bsp.: <li{first} class="first"{/first}> wird beim ersten Listenelement zu <li class="first"> und sonst zu <li>

Um eine Navigation der Art: Menü1 | Menü2 | Menü3 hinzubekommen kann also auch folgendes in das Feld Ordner oder aktiver Ordner eingetragen werden. "{first}<li><a title="{name}" href="{link}">{name}</a></li>{else} | <li><a title="{name}" href="{link}">{name}</a></li>{/first}"

Gefunden: hier.

Edit: Mist, ist ja schon im WIKI hier?!?

Hylli

Der Beitrag wurde von hylli bearbeitet: Fri. 8. December 2006, 08:28

[Olaf]

@Uliwe
ab jetzt nur noch mit URL, das kann so keiner nachvollziehen, wieso hat die Navi 40px nach links Luft z.B.!?

@Peter
noch etwas Breit?

[Uliwe]

@Olaf:
OK, sorry: Link zur "Problem-Seite". Wenn's hilft, rücke ich natürlich auch gerne meine Zugangsdaten heraus.

@MaZderMind
Mir geht es hier um eine horizontale Scrollbar (meine Generation spricht noch von "Bildlaufleiste" ) während Dein letzter Post sich auf die vertikale bezieht!? Siehe auch:

@Peter
noch etwas Breit?

@hylli
Danke nochmal für den Hinweis zu {first}...{/first}. Werde das jetzt auch mal probieren. Denke allerdings, dass der Effekt ja der gleiche sein müsste wie bei der Zuweisung der IDs (siehe MaZderMinds Posting weiter oben):

Du hast in der Listennavi die Möglichkeit die SeitenID per Variable ausgeen zu lassen. Du bast als in dein sowas ein wie <li id="navi{id}" /> (Ich weiß nich ob die Variable wirklich {id} heißt, einfach im Modul nachgucken!) und schon kannst du im CSS per #navi34 z.B. das erste Element direkt ansprechen.

Danke Euch,
Uli

PS: Gibt's hier irgendwo eigentlich eine Spendenspardose?

[Olaf]

Schmeiß das inlinestyle und den ganzen ID-Krempel wieder raus und versuch es so:

QUELLTEXT

#head {
    background: #1877D9 url(../../media/img/csslayout/head/head_bg.jpg);
    margin: 0;
height:13.6em;
    color: #fff;
}

#logo {
    display: block;
}

#navimain {
    margin:-1.9em 0 0 0;
padding-left:40px;
    list-style: none;
    float: left;
}

#navimain li {
    float: left;
    margin: 0;
    padding: 0;
    font-family: "Lucida Grande", sans-serif;
    font-size: 90%;
}

Danach wäre,
#navimain {
padding-left:40px;

der Punkt wo du den Abstand nach links einstellst.

[Uliwe]

Leider haben alle Hinweise noch nicht zum gewünschten Erfolg geführt. Ist mir dann jetzt doch etwas peinlich, dass ich Eure Zeit und Energie mit solchen Problemen in Anspruch nehme. Deshalb werde ich jetzt noch mal komplett neu anfangen und step-by-step vorgehen, um zu sehen, wo das Problem zuerst auftaucht und mich dann nochmal melden. Dann wird's vielleicht für alle (und besonders für mich ) etwas übersichtlicher.