zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Navigationsfrage mit CSS

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 14.11.2007, 14:14
TILT!
neuer user
Thread-Ersteller
 
Registriert seit: 26.09.2007
Beiträge: 50
SickofSociety befindet sich auf einem aufstrebenden Ast
Standard Navigationsfrage mit CSS

Hallo Leute,
ich habe mal eine Verständnisfrage zu Navigationen mit CSS.
Folgendes Szenario:

- Ich möchte eine horizontale Navigation mit 8 Feldern erstellen
- In jedem dieser 8 Felder, soll eine eigene Grafik liegen.
- Alle 8 Felder sollen gehovert werden (Ebenfalls mit eigenen Grafiken)
- Die Felder sollen deshalb eine feste Höhe und Breite haben.

Zu meinem Problem.
Ich finde einfach keine Beispieldateien im Internet. Zwar hab ich schon Navis erstellen können, in denen ein Hintergrundbild liegt, aber immer nur eins.
Ich floate die festen Navifelder und habe es auf display:block stehen, aber wie kann ich jetzt jedem <li> eine eigene Grafik und Hover-Grafik geben?
Ist das überhaupt möglich?
Ich kann das extrem schlecht erklären, aber ich hoffe ihr versteht was ich meine.
Beispiele wären grandios, damit ich so eine Navigation realisieren kann. Mit Javascript weiss ich wie es geht, aber in CSS wäre es natürlich viel schöner.

Danke schonmal im Vorraus

Gruß
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 14.11.2007, 14:22
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Jedes li bekommt seine eigene ID, über die a sowie a:hover etc. angesprochen werden.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 14.11.2007, 15:47
TILT!
neuer user
Thread-Ersteller
 
Registriert seit: 26.09.2007
Beiträge: 50
SickofSociety befindet sich auf einem aufstrebenden Ast
Standard

Also mit den verschiedenen Bildern, inklusive Mouseover-Bildern hab ich nun hinbekommen. Allerdings floatet jetzt nichts mehr. Ich fürchte ich habe noch irgendwo nen Denkfehler drin.

Hast du nicht irgendwo ein Beispiel, wo ich mir Anregungen holen kann?

Gruß
Mit Zitat antworten
  #4 (permalink)  
Alt 14.11.2007, 15:50
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Grundsätzlich: li bekommt float und width, und a display: block; und height. Den Text von a läßt Du per text-indent: -9999px; verschwinden.

Wenn's nicht klappt, poste einen Link (denn ohne diesen sieht niemand Deine Grafiken).
Mit Zitat antworten
  #5 (permalink)  
Alt 12.12.2007, 15:02
TILT!
neuer user
Thread-Ersteller
 
Registriert seit: 26.09.2007
Beiträge: 50
SickofSociety befindet sich auf einem aufstrebenden Ast
Standard

Entschuldige, das ich erst jetzt antworte, aber ich hatte in letzter Zeit keine Zeit um weiterzubasteln.
Ich habe jetzt mal nochmal ganz von vorne begonnen.

Wenn ich, wie du geschrieben hast, die li's floate, passiert gar nichts.
Ich habe jetzt die a's gefloatet und es geht. Allerdings ist die Navigation völlig aus der Struktur. Ich habe jetzt mal die Testseite hochgeladen, damit man sehen kann, was ich erreichen möchte. Aus Faulheitsgründen habe ich nur den ersten Button mit Grafiken hinterlegt, aber das funktioniert soweit, wie ich das möchte. Allerdings sollte das ganze natürlich nahtlos an den header und den Content anschliessen.
Was mache ich falsch?

Link zur Testseite:
Testseite

Link zur CSS-Datei
CSS-Datei

Danke schonmal im Vorraus

EDIT:

Nach stundenlangem Suchen habe ich jetzt endlich gefunden was ich gesucht habe.
Ich lasse die li einfach weg und gebe nur den a's IDs.
Ist das evtl. falsch? Es wird zumindest in allen Browsern korrekt dargestellt und macht genau das was ich möchte.
ich habe jetzt 4 Blöcke a 200px die ein Rollover mit Grafiken machen und klickbar sind. Kein js und keine listen und es funktioniert.

Würde mich aber trotzdem interessieren, was nun der Vorteil von Listen wäre.

Beispiel hier
Testseite

Geändert von SickofSociety (12.12.2007 um 21:10 Uhr)
Mit Zitat antworten
  #6 (permalink)  
Alt 12.12.2007, 20:53
Benutzerbild von Crizzo
der mit dem Editor kämpft
XHTMLforum-Kenner
 
Registriert seit: 17.10.2006
Ort: Ost-Hessen
Beiträge: 4.828
Crizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer Mensch
Standard

Ja, dass ist falsch - semantisch. Setze es genau so um, wie dir Heiko geraten hat.

Hier sind auch solche Navigationen: Cascading Style Sheets { Tutorials : Site-Navigation mit Listen } (Sechs Teile!)
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen!
Foren-FAQ
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Redesign für Steiner Cycling Team pkipper Site- und Layoutcheck 11 09.02.2011 13:25
Einbindung von frei erhältlichen Scripten - CSS Problem DonL CSS 1 22.01.2011 17:09
MYspace mehr als nur CSS oder ? Vinceone CSS 0 12.07.2007 03:21
Eric Meyer's CSS Petty Ressourcen 0 21.11.2005 09:18
Mozilla ignoriert externes css DarkWanderer CSS 9 22.09.2005 12:39


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:11 Uhr.