CSS Menü, da is irgendwo der Wurm. Nur wo?

Mülla

Wunderschönen Guten Abend!

Hab für ne Page, die ich momentan versuche aufzubauen, ein CSS Menü gebastelt.
Nur jetzt hab ich folgendes Problem, im IE wird alles bestens angezeigt, nur im Firefox siehts absolut Murks aus.

hier der link:
http://www.komparis.de/test/

unterm IE sieht bei mir alles OK aus.

Der CSS Code:

Code

#navi {display:none;}
.menu {position:absolute;top:19px;left:auto;display:block;margin:0;padding:0;}
.menu ul{position:absolute;display:block;width:124px;margin:0;padding:0;}
.menu li ul{visibility:hidden;}
.menu li li ul{position:absolute;top:auto;left:auto;margin-left:117px;margin-top:-14px;}
.menu li{list-style:none;height:auto;display:inline;display/**/:block;float:none;float/**/:left;margin:0;padding:0;}
* html .menu li li{}
.menu a {text-align:center;background: url(link_bg.jpg);filter:Alpha(opacity=80);border:1px #FFFFFFsolid;color:#000000;font-size:11px;display:block;width:116px;text-decoration:none;padding:0px 0;margin:1px;font-weight:bold;}
.menu a:hover {background: url(hover_bg.jpg);border:1px #FFFFFFsolid;}
.menu a:focus {background-color: #aaf;}
.menu span {display:none;}
div[id="navi"]>.menu a {text-align:center;background: url(link_bg.png);border:1px #FFFFFFsolid;color:#000000;display:block;width:120px;text-decoration:none;padding:2px 0;margin:1px;}
div[id="navi"]>.menu a:hover {border:1px #FFFFFFsolid;background: url(hover_bg.png);}
#content p a:link, a:visited {}
#content a:hover {}

Alles anzeigen

Woran kanns liegen, dass im firefox das Menü zerrissen wird?
Weiß jemand Rat?

Danke für Hilfe im Voraus!

Schöne Grüße

Daniel

pindakaas

Code

#navi {display:none;}
.menu {position:absolute;top:19px;left:auto;display:block;margin:0;padding:0;}
.menu ul{position:absolute;display:block;width:124px;margin:0;padding:0;}
.menu li ul{visibility:hidden;}
.menu li li ul{position:absolute;top:auto;left:auto;margin-left:117px;margin-top:-14px;}
.menu li{list-style:none;height:auto;[color=red]display:inline;display/**/:block[/color];[color=red]float:none;float/**/:left[/color];margin:0;padding:0;}
* html .menu li li{}
.menu a {text-align:center;background: url(link_bg.jpg);filter:Alpha(opacity=80);border:1px #FFFFFFsolid;color:#000000;font-size:11px;display:block;width:116px;text-decoration:none;padding:0px 0;margin:1px;font-weight:bold;}
.menu a:hover {background: url(hover_bg.jpg);border:1px #FFFFFFsolid;}
.menu a:focus {background-color: #aaf;}
.menu span {display:none;}
div[id="navi"]>.menu a {text-align:center;background: url(link_bg.png);border:1px #FFFFFFsolid;color:#000000;display:block;width:120px;text-decoration:none;padding:2px 0;margin:1px;}
div[id="navi"]>.menu a:hover {border:1px #FFFFFFsolid;background: url(hover_bg.png);}
#content p a:link, a:visited {}
#content a:hover {}

Alles anzeigen

wieso funktioniert die rote schrift in den code tags nicht ?

Ivanman

Ich hab auch mal ne Frage zu dem Thema: Solch ein Menü, wie wirs auf der HP sehn is nur mit Java oder Flash zu realisieren, oder? Ich frag deswegen weil ich mir gern sowas basteln würd aber Java nicht verwenden will und Flash nicht kann. Gibts noch andere Möglichkeiten so ein Menü zu realisieren?

Sorry Mülla dass ich nicht zu Lösung deines Problems beitrage sondern selbst eine Frage stell!

pindakaas

nein geht nur mit flash oder java script
nun nochmal zu dir mülla

#navi {display:none;}
.menu {position:absolute;top:19px;left:auto;display:block;margin:0;padding:0;}
.menu ul{position:absolute;display:block;width:124px;margin:0;padding:0;}
.menu li ul{visibility:hidden;}
.menu li li ul{position:absolute;top:auto;left:auto;margin-left:117px;margin-top:-14px;}
.menu li{list-style:none;height:auto;display:inline;display/**/:block;float:none;float/**/:left;margin:0;padding:0;}
* html .menu li li{}
.menu a {text-align:center;background: url(link_bg.jpg);filter:Alpha(opacity=80);border:1px #FFFFFFsolid;color:#000000;font-size:11px;display:block;width:116px;text-decoration:none;padding:0px 0;margin:1px;font-weight:bold;}
.menu a:hover {background: url(hover_bg.jpg);border:1px #FFFFFFsolid;}
.menu a:focus {background-color: #aaf;}
.menu span {display:none;}
div[id='navi']>.menu a {text-align:center;background: url(link_bg.png);border:1px #FFFFFFsolid;color:#000000;display:block;width:120px;text-decoration:none;padding:2px 0;margin:1px;}
div[id='navi']>.menu a:hover {border:1px #FFFFFFsolid;background: url(hover_bg.png);}
#content p a:link, a:visited {}
#content a:hover {}

die roten sachen hab ich noch nie gesehen und zumindest bei background bin ich mir ziehmlich sicher das es as im css nicht gibt höchstens background-image

Ivanman

Schade aber auch! Habs mir aber fast gedacht! Trotzdem danke!

Mülla

Hi,

keiner von euch ne ahnung warum das nicht richtig hinhaut?

@pindakass:
man kann auch background schreiben, das funzt, guck mal auf http://www.w3schools.com (oben links auf "learn CSS"), da ist alles schön erklärt und man kanns sogar in nem Fenster jeden code testen.

vielleicht weiß jemand was da falsch ist? vlt was im javascript?

greetz

Mülla

Weiß keiner was falsch sein könnte? bin am verzweifeln ... der entwurf muss bis freitag stehen, und jetzt hab ich murks gemacht und im ie siehts auch murks aus

yeti66

Oh je,
zunächst behaupte ich einfach mal, das die Tabelle, die Du hier in den Navi-Code reingezaubert hast überflüssig ist:

Code

<div id="navi"> 
        <ul id="menu">
          <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr> 
              <td> [*] 
                  <div id="top">[img]images/komparis_05.gif[/img]</div>

Dann würde ich die Button gleich groß/breitmachen, da sie im CSS definiert sind. Unter der Voraussetzung (Navi von CSS Menü Generator) ist die Anpassung immer aufwendiger. Es sei denn man benutzt die vordefinierten Button-Größen.

Gruß yeti66

pindakaas

Zitat von Mülla

Hi,

keiner von euch ne ahnung warum das nicht richtig hinhaut?

@pindakass:
man kann auch background schreiben, das funzt, guck mal auf http://www.w3schools.com (oben links auf "learn CSS"), da ist alles schön erklärt und man kanns sogar in nem Fenster jeden code testen.

vielleicht weiß jemand was da falsch ist? vlt was im javascript?

greetz

oh und ich dacht ich wüsste alles über css tja man lernt nie aus

Mülla

Zitat von yeti66
Oh je,
zunächst behaupte ich einfach mal, das die Tabelle, die Du hier in den Navi-Code reingezaubert hast überflüssig ist:
Code
<div id="navi"> 
        <ul id="menu">
          <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr> 
              <td> [*] 
                  <div id="top">[img]images/komparis_05.gif[/img]</div>
Dann würde ich die Button gleich groß/breitmachen, da sie im CSS definiert sind. Unter der Voraussetzung (Navi von CSS Menü Generator) ist die Anpassung immer aufwendiger. Es sei denn man benutzt die vordefinierten Button-Größen.

Gruß yeti66

Hi

ne, die Tabelle ist nicht überflüssig, hatte die Buttons jede in einer Tabellen Zelle, wenn ich auf diese das Menü legen wollte, also diese mit "< div id="navi"> etc. klappte es nur beim 1. die anderen wurden alle nicht angezeigt, dann hab ich in eine zelle die tabelle gelegt, und nun werden schonmal alle angezeigt.

Du hast recht, CSS Generator war mit im Spiel. Hab auch schon versucht, die Breite an die Buttons anzupassen, macht der aber nicht, am anfang gings ja wenigstens noch im IE, aber jetzt gehts nirgends mehr,w eder IE noch FF.

bin da jetzt etwas ratlos.

@pindakass:
jap, von der Seite bin ich sehr begeistert.

schöne grüße

Daniel

yeti66

so geht es mit FF in die richtige Richtung- ansonsten setze doch mal alles (Pic,js,html)als gepackte Datei auf Deine Testseite zum runterladen.Samstag habe ich dann etwas Zeit und Sonntag bekommst Du Antwort.E-Mail adresse am besten in die .zip,.rar Datei legen oder in den header schreiben.
Gruß yeti66

Mülla

Hi,

wow, viele Dank für die Hilfe!

Hab alles in ne Rar gepackt und angehangen.. dat is ja super!!!

Greetz

Daniel

yeti66

So, wie versprochen bin ich wieder da!!
Wie schon gesagt sind die unterschiedlich breite Button im Zusammenhang mit dem css-code nicht geignet.
Deßhalb habe ich eine andere Lösung auf Layer-Basis gefunden. Die größten Probleme hatte/habe ich mit der Browsercompatibilität unter dem Explorer. Unter Firefox und Opera funktioniert es tadelos. Vielleicht sieht sich das ganze ja nochmal jemand an,dem es in den Fingern juckt. Ich sehe jetzt den Wald vor lauter Bäumen nicht mehr und dann soll man aufhören.
1.Trotz allem muß ich aber sagen, das das hier eher eine Notlösung unter der Vorgabe der scripte und des css-codes des MenuGenerators. Alles andere macht jetzt - neu Programmiert noch mehr Arbeit.
2.Ist die Wahl eines JS-Menüs eher schlecht, weil immer mehr User JS abschalten. Hier im Forum hatte sich schon mal jemand die Mühe gemacht und ein verschachteltes Menü auf reiner CSS-Basis ohne JS gebastelt.

Ich sehe Morgen noch mal rein. Es würde mich interessieren wo der Fehler lag.

Gruß yeti66

Mülla

Wow, ich bin begeistert!!!!

Vielen vielen Dank! Werd das dann direkt mal so in mein ding einbauen.
Ja, das mit dem Wald vor lauter bäumen kenn ich, hab da stunden lang vor gesessen, und nix hinbekommen.. jetzt gehts ja schonmal ein stückchen weiter

Vielen Dank! Werd mich mal umschaun nach dem CSS Menü ohne JS, hab schon gemerkt, der IE 6 meckert, dass der irgendwelche elemente freigeben will damit das angezeigt wird.

Greetz

yeti66

Hi,Mülla,
halbe Sachen lassen mir keine Ruhe. Hier also das Werk Browser-kompatibel mit IE,FF und Opera.

Viel Spaß Gruß yeti66

wow, ich bin begeistert!!! Beste Dank, werd das direkt heut abend sobald ich daheim bin testen.

Juhu!!!

Gruß Daniel

Mülla

Hi...

so habs eingebaut
http://www.komparis.de/test
im ff sieht super aus, aber im IE zieht sich der Layer nach links? Warum das denn? hab schon soweit alle positions angaben versucht die position zu ändern, macht er mir aber nicht

Gruß daniel

yeti66

Jepp,

Du hast unter

Code

body {
	scrollbar-face-color: #BCCFE6;
	scrollbar-highlight-color: #FFFFFF;
	scrollbar-shadow-color: #BFDBFB;
	scrollbar-3dlight-color: #D1D7DC;
	scrollbar-arrow-color:  #006699;
	scrollbar-track-color: #EFEFEF;
	scrollbar-darkshadow-color: #98AAB1;
	font-family:verdana,serif;
	margin-top:0px;
	text-align:left;
	color: #000000;
}

Alles anzeigen

text-align: center; ----in--> text-align:left; geändert. Der IE braucht aber zum zentrieren text-align: center;!!!!

Zusammenclicken birgt eben ein Risiko wie Vererbung in CSS aufheben o.ä.

Gruß yeti66

Mülla

oh, danke für die hilfe... jetzt hab ich wieder irgendwie murks gemacht, im ff gehts nit mehr, haha... wat mach ich da bloß, hab doch nix geändert ie läuft aber kein ff... jetzt is alles auf http://www.komparis.de

greetz

yeti66

Ja, ich würde sagen fang nochmal von vorn an mit dem Layout von mir als Basis und kommentiere in der Entwicklungsphase die .css und die .html Seiten. Helfen ist immer eine Seite aber eine Site......

Gruß yeti66

CSS Menü, da is irgendwo der Wurm. Nur wo?

Tags

Benutzer online in diesem Thema