Linkliste navigation CSS

krovka · 17.03.2005, 22:51

Hallo,

ich habe zwar schon alle mir bekannten Links zu dem Thema gewälzt, aber
ich schaffe es nicht. Vielleicht habe ich inzwischen auch nur einen Knoten im Hirn.
Ich möchte per Liste und Css so ziemlich genaudiese Navigation hinbekommen:
(nur ganz kleine Änderungen Farbe...)
http://www.schillerjahr2005.de/index.html

Gut, da ist wohl auch php im Spiel, das Inhalte versteckt, so wie hier:
http://www.grassegger.at/xperimente/...gation.php?s=1

ich bekomme aber das CSS und HTML -Teil nicht wirklich hin...
hat jemand ein Beispiel dafür???
Ich kenne übriegens den CSS ZenGarden...irgendwie schaffe ich es trotzdem nicht.
Bin jetzt aber auch müde. Ich hoffe es liegt nur daran.
Für Hilfe bin ich dankbar.

Gruß

Terry · 17.03.2005, 23:01

Schau dir mal dieses PHP-Script vom HoRnominatoR an (ganz unten): http://www.traum-projekt.com/forum/s...stennavigation
Vielleicht ist das ja was für dich. Gestaltung dann per CSS...

Boris · 18.03.2005, 09:24

Bei http://wengorz.de/ hab ich sowas auch umgesetzt ... grab Dich einfach mal durch den Code durch

krovka · 18.03.2005, 11:09

Vielen Dank erstmal für die Antworten!
Den php-Teil muß ich in diesem Fall nicht realisieren.
Werde ich mir aber demnächst anschauen, denn diese art zu navigieren gefällt mir sehr.

Mein Problem liegt Zur Zeit eher im CSS
Das ist was ich jetzt habe:
HTML
CSS

Naja, fast! Aber eben nur fast, fehlt eben doch noch einieges
Also:
Über "Für Piloten" sollte noch ein Strich sein.
Verein soll aktiv sein: Roter Untergrund, fette weiße Schrift
vor der chidnav hätte ich gerne immer " » "
Kann ich das im CSS bestimmen oder muß ich ein Bild dafür nehmen
( list-style-image: ....)?
Das ganze soll ganz links und ganz oben sitzen.
Der Text von parentnav links 15px eingerückt, childnav 20px

Ach ja, mein CSS ist bestimmt etwas chaotisch... mußmich wohl mal aufräumen.
Unsinn im CSS bitte anmerken.

Gruß

steffenk · 18.03.2005, 11:25

Beachte auf jeden Fall den li-Bug im IE -> Du hast unsinnige Abstände im IE.
fix 1: Spaces oder Umbrüche im li

Zitat:

siehe: http://www.css-faq.de/index.php?sid=...&id=46&lang=de

fix 2: http://www.hicksdesign.co.uk/journal/546/

Terry · 18.03.2005, 11:31

Zitat:

Zitat von krovka

Über "Für Piloten" sollte noch ein Strich sein.

Wird schwierig, du kannst das schlecht selektiv bestimmen - die anderen haben ja immer nur einen Unterstrich.

Zitat:

Verein soll aktiv sein: Roter Untergrund, fette weiße Schrift

Das CSS-Pseudoelement :active bedeutet etwas anderes: Es ist der Moment des Anklickens. Um einen Punkt herauszuheben, brauchst du eine Klasse. Damit immer der richtige Punkt eine Klasse hat, brauchst du PHP oder ähnliches. (s. Script HoRnominatoR - da ist das drin).
Sorry - sehe grad, du hast schon eine id dafür. Ja - dann bestimm das doch! - Wo ist das Problem?

Zitat:

vor der chidnav hätte ich gerne immer " » "
Kann ich das im CSS bestimmen oder muß ich ein Bild dafür nehmen
( list-style-image: ....)?

Entweder schreibst du das vor jeden Punkt dazu oder du machst ein Bild und definierst es per CSS (besser, da die Doppelpfeile ja nur ein Dekorative, keine semantische Bedeutung besitzen). Für richtige Browser (alle modernen außer IE) könnte man sowas auch per CSS machen, mit :before . Aber der Marktführer spielt da leider nicht mit.

Zitat:

Das ganze soll ganz links und ganz oben sitzen.

Dann nimm das top:142px aus #back raus... - wieso überhaupt dieser #back-Container? Dessen Sinn kapier ich gar nicht...

Zitat:

Der Text von parentnav links 15px eingerückt, childnav 20px

Setze oben erstmal ul,li {margin:0; padding:0} und dann formatier halt neu und so, wie du willst...

krovka · 18.03.2005, 11:46

Fix 1 angewendet... ahh.. macht es besser!
Fix 2 macht es nicht besser...?!

steffenk · 18.03.2005, 11:52

fix 2 ist auch nicht immer relevant. Hier kommt halt wieder der (scheussliche) Umgang mit float vom IE zum tragen. Wenn es bei Dir keinen Unterschied macht, brauchst Du es auch nicht, sollte nur ein genereller Hinweis sein.

@Terry - Der Artikel zu fix1, ist der von Dir ?

Terry · 18.03.2005, 12:09

Zitat:

Zitat von St@eff.en

@Terry - Der Artikel zu fix1, ist der von Dir ?

Ja.

krovka · 18.03.2005, 17:31

Hallo Zusammen,

die Links oben (HTML, CSS) sind aktualisiert.
(jetzt z.B. mit Pfeilen)
Der back Container ist schon ok es soll ja in dem ganz oben sitzen.
Um meine Navi kommt ja schließlich noch ne Seite.
Es sitzt zur Zeit nur im IE ganz oben.
In anderen Browsern nicht, und ganz links sitzt es gar nie.
Habe überall padding 0 und margin 0!

#aktiv soll auch eigentlich weiße Schrift haben.
darüber habe ich aber deb fehelenden weißen Strich bekommen.

Ach ja, zum besseren Verständnis:
So soll s aussehen:

Weiß jemand, wo der oder die Fehler stecken?

|23| · 21.03.2005, 09:10

@krovka hast den Fehler schon gefunden !?

krovka · 21.03.2005, 11:43

Nein, leider nicht.
Ich habe die navi jetzt ganz anders gemacht.
Aber ich würde schon gerne wissen, wie es richtig geht.

Boris · 21.03.2005, 11:50

Dazu wäre es für Dich hilfreich zu verstehen, bzw. zu wissen, wie das Boxmodel funktioniert - schau mal:

http://www.redmelon.net/tstme/box_model/

Das gilt für alle Elemente (DIVs, Ps, UL, LI usw) ...

krovka · 21.03.2005, 12:09

Das Prinzip ist mir klar.
Doch funktioniert meine Umsetzung nicht.
Ich weiß nicht warum... da muß eben ein Fehler drin stecken....
und den finde ich nicht.

hero-master · 21.03.2005, 12:49

Zitat:

Zitat von krovka

Es sitzt zur Zeit nur im IE ganz oben.
In anderen Browsern nicht, und ganz links sitzt es gar nie.
Habe überall padding 0 und margin 0!

MAch doch überall das margin:0px; padding:0px weg, ist bei einigen Dingen sogar überflüssig und schreibe stattdessen:

HTML-Code:

* {margin:0; padding:0}

Zitat:

Zitat von krovka

#aktiv soll auch eigentlich weiße Schrift haben.
darüber habe ich aber deb fehelenden weißen Strich bekommen.

DAzu musst du nicht dem LI die id="aktiv" verpassen, sonderm dem Link