css navigation

T

tchibo

New member
Hallo!
nachdem ich zuerst für die lösung meines problems nach einer javascript navi suchte, wurde ich schnell von euch aufgeklärt, dass eine css navigation um einiges klüger ist. hab eine gefunden (mit hilfe von dkdenz, danke noch mal!).

Mir wurde auch gesagt ich kann mich wieder hier melden wenn was nicht funktioniert ^^ tja und so is es jetzt auch :


Stu Nicholls | CSSplay | A cross browser vertical sliding menu using only css

bitte im IE betrachten!

style anweisung dazu findet ihr unter:

http://rmachrei.rm.funpic.de/css-navi/test/vertical_test.css





ich finde einfach in der css-anweisung die zeile nicht in der ich es "ausschalten" kann, dass die anderen buttons nach unten wegrutschen, wenn man über einen button kommt bei dem sich untermenüs öffnen!

kann mir irgendwer helfen?

mfg
 
Ich versteh nicht was du willst?!

Wenn du keine Untermenüs brauchst... dann brauchst du auch kein Stu-Menü!

1.) Brauchst du Untermenüs?
2.) Solls so aussehen wie im IE oder wie im FF?

... Ich kann dir dann kurz eins basteln... ohne Grafiklinks...
 
ich entschuldige mich falls ich mich nicht klar ausgedrückt habe.

ich BRAUCHE untermenüs und es soll auf den IE angepasst sein.


ich will nur nicht das die anderen buttons nach unten wegklappen wenn sich ein untermenü öffnet.
Also wenn man über "aktuelles" fährt, sich zwar das untermenü (rechts neben der navigation) öffnet, aber das die restlichen buttons (links, kontakte, impressum) nicht nach unten verschoben werden, sondern bleiben wo sie sind.

Deswegen bräuchte ich (aber wahrscheinlich ist es nicht so einfach ^^ ) die zeile des css sheets in der steht das die anderen buttons nach unten verschoben werden. finde diese zeile bzw. diese anweisung aber nicht.

mfg
 
Zuletzt bearbeitet:
hehe...

wieso nimmst du dann das "vertikal sliding menu" und nicht einfach eines von diesen:
Stu Nicholls | CSSplay | Cross browser flyout menu examples using only css
????????????????????????????????

Achja... Du solltest trotzdem keine Bilderlinks verwenden, weil diese google nicht (gut) lesen kann (fast so schlimm wie JS Menüs). Deinen Runden Grünen Button kannst du auch als Hintergrundbild der Links definieren und den Text ganz Normal in den Link schreiben.

Ich hoff das hilft, bubu

***EDIT: Das Problem mit dem Runterschieben hat wahrscheinlich was mit der positionierung zu tun.
UND: Du musst beide Css anpassen... für IE und FF
 
also dan mal danke bubu-der-uhu (übrigens geiler name ^^)
bin schon beim ausprobiern!!

ok danke für den tipp mit den bilderlinks! werd das mal ausprobiern!
 
Versuch mal das:

Ohne Bilderlinks: http://5mt.uttx.net/test/tchibo/index.htm

...so hätts ich gemacht, wenns schon so Grün sein muss ;)

- Ich weis nicht welches Menü du von cssplay verwendet hast - aber du MUSST dir noch das stylesheet für den IE runterladen und es anpassen, sonst funzt das Menü im IE nicht (meins geht im IE ebenfalls nicht richtig da ich bei deinem Menü kein css für den IE gefunden hab).
 
Hallo!

also im ie funktionierts doch eh oder ? ... siehe:

Willkommen beim Fuchsienverein!

mein einziges problem ( wo ich noch hilfe brauche) -->
die hauptbuttons lade ich jetzt mit einem javascript preloader vor!
wenn ich das nicht mache, passiert das gleiche als wen man über die "untermenü buttons" fährt --> sie verschwinden kurz und tauchen wieder auf, aber nur einmal...

warum?

mfg
 
Die Fehlerkonsole im Firefox (2.x) ist immer noch nicht leer, du hast noch einen Haufen falscher Werte oder Schreibfehler in dem CSS Code.

Warum die Buttons verschwinden? Weil es einen kurzen Augenblick dauert bis die Hover Bilder geladen werden. Daher ist deine Wahl, Bilder zu verwenden auch nicht die Beste (zusätzlich ist auch hier eine Suchmaschinenbarriere drin, diese lesen keine Bilder)

Ausserdem ist wohl ein kleiner Fehler im CSS Code, wenn man das erste Mal auf das Untermenü kommt "springt" es leicht nach Links, evtl. deshalb:

.menu2 ul li:hover ul li a,
.menu2 ul li a:hover ul li a{
padding:5px 0 10px -20px;
}
 
Im IE6 funzt da garnix.... dur wirst um ein seperates Stylesheet nicht herum kommen.
Und BTW: Du benötigst keinen Preloader wenn du deine Links mit Hintergrundbild und Text machst (so wie ichs ja schon vorgekaut habe :rolleyes: ).

Das hüpfen der Links wie schlauer es beschrieben habe, habe ich durch vergrößern der Menübreite eliminiert :

.menu2{ width: 110px;}
.menu2 ul { width: 110px;}

... du hast scheinbar ein margin-left fürs submenü eingebaut, oder deine buttons zu breit gemacht.
 
im IE6 gehts nicht? ja gut ok das kann ich mir nicht wirklich anschaun ^^.. standalone IE6 hab ich nicht ...

und ich hab so gemacht, mit hintergrundbild! ok werd die menübreite erweitern, dann gehts sicher!

also vielen dank noch mal!
 
Ja... mit Hintergrundbild... aber:
Du hast für jeden Button ein einzelnes Hintergrungbild verwendet -> Du schreibst den Text wie "Home" oder "Wir über uns" in die Grafik und speichertst das dann... somit hast du den Bild+Text als Bild ... Bilder (auch nicht Bilder mit Text) können Suchmaschinen nicht lesen und: du hast ne menge Bilder, die man erst laden muss.

Sinnvolle Lösung:
Du machst nen leeren Button (Das Grüne Runde Ding) und nimmst diese Grafik als Hintergrund für alle Buttons
Dann machst du nen leeren Button fürs hovern und nimmst diese Grafik als Hintergrundbild für alle Hoverlinks.
Den Text wie "Home", etc. schreibst du dann in den Link zwischen <a> </a>!
So wie in meinem Beispiel http://5mt.uttx.net/test/tchibo/index.htm

...Der Button dort schaut nur so aus:
button.gif

Hoverbutton:
button-hover.gif


Für das Submenü, bzw. den Buttons mit Submenü hab Ich wieder andere Hintergrundgrafiken genommen:
button-hover-sub.gif

sub-first.gif

sub-last.gif


...alles klar? verstehst jetzt?


***EDIT: Achja: viele Leute nutzen noch IE6 - du solltest Ihn also für deine Seite berücksichtigen!
 
ahhh so war das gemeint =)

hmm wie ist das (hab ich zufällig beim umändern der navi gesehen) wenn ich beim hyperlink tag (<a href...) ein title="home" hineingebe?

hmm... das wird wieder mehr arbeit alles ie6 gerecht zu gestalten..
 
sooo hab zwar die css navi fertig (leider nocht nicht kompatibel für IE6) und ich hab ein problem (ja ja wie immer ^^)
die navi funktioniert im ie7 aber nicht im firefox (bis jetzt wars immer anders rum :D )

zu erreichen unter: Willkommen beim Fuchsienverein!

bitte um hilfe!

mfg
 
Also - ich will Dich nicht entmutigen und es soll auch nicht sarkastisch klingen, aber es gehört schon ein bisschen was dazu, ein funktionierendes crossbrowserfähiges CSS-Menü so umzubauen, dass es nur noch mit Mühe im IE7 läuft.

Was mir auf Anhieb auffällt: Was machen denn die Tabellen in Deinem HTML? Im Ursprungscode sind Tabellen lediglich als Conditinal Comments für den IE6 und kleiner vorgesehen. Der FF kommt bei dieser Art Konstruktion mit den vorgesehenen CSS-Angaben offensichtlich nicht zurecht.

Ich fürchte ein wenig, Du musst nochmal mit dem Ursprungscode anfangen. Lass die Styleangaben doch erst mal in der Seite und lagere sie erst aus, wenn's in den Browsern funktioniert.

Dass die Menüpunkte am Ende natürlich zu Deinen Stylevorstellungen passen sollen, ist klar.

Gruß Anna
 
Hab mir eben die Sache nochmal konkreter angesehen. Binde doch mal die CSS von der Stu Nicholls-Seite
PHP: 
<link rel="stylesheet" media="all" type="text/css" href="http://www.cssplay.co.uk/menus/h_menu2/menu2.css" />
zum Testen in Deinen Head ein. Dann werden schon mal auch im FF die Untermenüs eingeblendet. Am Style musst Du noch basteln und dann natürlich den Code in Dein .css einbasteln.

Gruß Anna
 
hallo erstmal =)!

danke anna, werd mich morgen gleich dran machen das ganze neu zu gestalten!
und entmutigend ist das ja nicht, man muss es halt so lange probiern bis es funktioniert :)!

Aber das mit den comments werd ich beim nächsten mal beachten, danke!

also vielen dank! aber ich bin zu 99% sicher das sicher das nächste mal wieder was nicht funktioniert... aber wenigstens lern ich immer was dazu =) irgendwann werd dann ich anderen tipps geben +g+!

und danke für den letzten tipp, schau ich mir morgen gleich mal an!

mfg
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben