✔ Technische Umsetzung einer Navigation mit Submenü

[Fuu]

Guten Morgen an alle Frühaufsteher -^^-

ich hab ein kleines Problem und hoffe das ihr mir helfen könnt (könnt ihr sicher denn im Gegensatz zu mir habt ihr Ahnung )

Ich habe die Aufgabe eine Navigation zu machen (fiktiv ohne echten Kunden) die habe ich nun auch Fertig. zumindest als grafik :-( ich hab nämlich nicht bedacht, das ich das nun ja auch noch technisch umsetzen muss -.-

ich muss die Navigation einmal in CSS und einmal wie ich will umsetzen, das Problem ist: ich hab keine Ahnung wie ich anfangen soll. ich wüsste nichtmal wie ich das anständig slicen soll um es ganz billig mit html zu machen, da dort ja kein richtiges raster möglich ist

ich hab mal eine Übersicht in Photoshop gemacht damit ihr seht wie das ganze am Ende aussehen soll, evtl hat ja einer von euch ein Lösungsvorschlag (oder auch 2 )

liebe Grüße
Fuu

 

[Loomis]

Schau dir mal die "drop-line menus" bei Stu Nichols an. ( In der Spalte "Menus - Multi-Level CSS Only" )

 

[Fuu]

wahh das ist alles englisch und jedes 2te wort ein Fachbegriff wie soll man das denn verstehen

nochmal zur verständigung, ich möchte nun kein kompletten code gepostet bekommen sondern nur ein anreiz wie:
mach das doch mit (..) und mit dem Raster würde ich das so (..) versuchen umzusetzen

Weil ich die einzelnen Bilder nicht in Tabellen oder als Slices darstellen kann weil sie ja in ihren zuständen unterschiedlich Groß sind und sich dann überlappen. Hab mal ein weiteres Beispielbild geladen.

Gruß Fuu

 

[Maik]

Hi,

wenn du der englischen Sprache nicht mächtig, und ebenso wenig imstande bist, den HTML- und CSS-Code der Beispiele zu studieren, empfehle ich dir die beiden deutschsprachigen Tutorials:

• Hybride CSS Menüs
• CSS-basierte Navigationsleisten

 

[Fuu]

Danke für die Hilfe
ich komme vorran, wenn auch nur langsam

Ich hab nun die Bilder als normale und als aktive Bilder abgespeichert, die normalen Bilder als Liste eingefügt und mit CSS die Liste als inline festgelegt damit sie horizontal ist. Soweit so gut das Problem ist:
Wie kann ich nun mit css das Bild bei hover und "aktive" wechseln ?

alle Seiten die ich mir angeguckt hab hatten einfach nur Text und haben die Farbe gewechselt, aber ich hab kein befehl für bildwechsel gefunden

so sieht mein Quellcode im moment aus, ich weiß es ist noch nicht viel aber ich hab halt noch nie mit CSS gearbeitet -.-

Grüße Fuu

 

[Loomis]

Wenn du zum Beispiel als Vorlage den ersten Link von Maik hernimmst, könnest du statt der Hintergrundfarben: background:#000000 ein Hintergrundbild einbinden: background:url(...);

//edit: Ja das ist ein Blödsinn, das sollen ja Buttons als Links werden. Hier wäre onmouseover eine Lösung.

 

[Fuu]

super danke, das mit dem background versuch ich gleich mal

on mouse over ist java script (soweit ich weiß) ich muss die navi komplett in css machen ...

 

[Maik]

Hi,

on mouse over ist java script (soweit ich weiß) ich muss die navi komplett in css machen ...

in diesem Fall dürfte dir mein CSS-Tutorial CSS-Rollover weiterhelfen.

 

[Fuu]

das funktioniert bei mir irgentwie nicht

 

[Loomis]

Und was genau funktioniert nicht? Bzw. wie sieht dein Code bisher aus?