Probleme mit Horizontaler CSS Navigation

Hi zusammen,
ich habe vor meine Website mal wieder umzugestalten und möchte
daher ein Tablet / Smartphone / PC etc. konformes css menü bauen.
ich dachte erst das sei kein problem aber irgendwie drehe ich mich seit stunden im kreis

hier die entsprechende website: http://dev.reneboehres.de

ich will das das menü im oberen teil des bereiches wie der kopf bereich mit abgerundeten ecken sitzt.
wie z.b. hier -> http://static.livedemo00.template-help.com/wt_39454/#

im moment scheitert es aber an einem ganz anderen problem...

ich bekomme die 2/3 ebene nicht ordentlich eigeblendet und finde einfach nicht woran es liegt...

ich habe schon diverse umstellungen probiert...

hier mein grundgeschribsel...

Code:

---

.mod_navigation ul {
    margin:0;
    padding:0;
}

.mod_navigation ul li {
    position:relative;
    display:inline;
}

.mod_navigation ul ul, .mod_navigation ul ul ul {
    display:none;
}

.mod_navigation ul li:hover > ul {
    position:absolute;
    display:block;
}

---

weiterhin kann ich z.B. den links keine farben z.B. via .mod_navigation ul li a zuweisen

die farben bleiben so standard wie es zuvor festgelegt wurde...

hat jemand ne ahnung woran das liegen kann?

will ich die position z.B. um einige pixel via .mod_navigation > ul nach oben versetzen tut sich gar nichts....

Zitat:

---

weiterhin kann ich z.B. den links keine farben z.B. via .mod_navigation ul li a zuweisen

---

Das liegt wohl an "#main a" mit höherer Spezifität, du müsstest also beim Menü-Styling auch ein #main davor setzen.

und warum klappt das menü nicht richtig aus?
ich mein obwohl es sollte funktioniert da nix richtig...

Zitat:

---

Zitat von d3x84

ch bekomme die 2/3 ebene nicht ordentlich eigeblendet und finde einfach nicht woran es liegt...

---

Die block-Elemente, zu denen auch .mod_navigation gehört, haben bei Contao standardmäßig: overflow: invisible;
Wenn du die Dropdown-Navi sehen möchtest, muss overflow eingeschaltet werden.

Code:

---

#main .mod_navigation {
    overflow: visible;
}

---

Zitat:

---

Zitat von d3x84

will ich die position z.B. um einige pixel via .mod_navigation > ul nach oben versetzen tut sich gar nichts....

---

Deine Navi liegt im #main und ist dort ganz oben. Der weiße Freiraum darüber gehört dem #header. Schau dir das in Firebug an.

Zitat:

---

Zitat von d3x84

weiterhin kann ich z.B. den links keine farben z.B. via .mod_navigation ul li a zuweisen
die farben bleiben so standard wie es zuvor festgelegt wurde...

---

Kontrolliere auf Schreibfehler oder die CSS Regel wird an nachfolgender Stelle wieder zurückgeschrieben.

Zitat:

---

Zitat von bizon

Die block-Elemente, zu denen auch .mod_navigation gehört, haben bei Contao standardmäßig: overflow: invisible;
Wenn du die Dropdown-Navi sehen möchtest, muss overflow eingeschaltet werden.

---

Danke das muss man auch erstmal wissen

Zitat:

---

Zitat von bizon

Deine Navi liegt im #main und ist dort ganz oben. Der weiße Freiraum darüber gehört dem #header. Schau dir das in Firebug an.

---

Ja das weiss ich, es war quasi geplant die navigation um z.b. -35px nach oben zu ziehen aber es hat nicht funktioniert...

Die Ausnahmen die Contao hat, verwirren mich jedesmal wieder... zum kotzen

oki soweit so gut

ich hab nur noch eine frage...

woher kommt nun dieser versatz in den ul ul li menüs?
es hat sicher was mit der position zu tun?

Code:

---

#main .mod_navigation {
    width:960px;
    left:-6px;
    top:-35px;
    position:absolute;
    overflow:visible;
    background-color:#666;
    border-top:1px solid #666;
    border-right:1px solid #666;
    -moz-border-radius-topleft:5px;
    -webkit-border-top-left-radius:5px;
    border-top-left-radius:5px;
    -moz-border-radius-topright:5px;
    -webkit-border-top-right-radius:5px;
    border-top-right-radius:5px;
    behavior:url('plugins/css3pie/PIE.htc');
}

#main .mod_navigation ul {
    margin:0;
    padding:0;
}

#main .mod_navigation ul li {
    width:230px;
    position:relative;
    display:inline-block;
}

#main .mod_navigation ul > li {
    left:21px;
}

#main .mod_navigation ul ul, #main .mod_navigation ul ul ul {
    display:none;
}

#main .mod_navigation ul li:hover > ul {
    width:350px;
    top:25px;
    position:absolute;
    display:inline-block;
}

---

Frage 2:

wie bekomme ich so ein menü ordentlich smartphone konform so das es beim drauftippen nicht gleich klickt?

u.a. wenn ich doppel tippe um die seite automatisch anzupassen passt er auch das menü an... wie kann ich das verhindern?

Deine erste CSS-Regel beinhaltet width: 960px. Das ist eine statische Anweisung. Wie soll das im responsive Design funktionieren?

Du solltest mal nach CSS3 Navigationen googeln, da gibt es einiges herunterladen.

Zitat:

---

Zitat von d3x84

Die Ausnahmen die Contao hat, verwirren mich jedesmal wieder... zum kotzen

---

Das hat alles nichts mit Contao zu tun. Sondern sind html und CSS-Basics. Und für responsive Webdesign braucht es etwas mehr als Basics. Du wirst nicht umhin kommen, dich damit intensiv zu beschäftigen.

ich will ja nur das 1 menü fertig bekommen und nicht 20 o.O

PS:
Danke für die Hilfe hrhr :(

Vielleicht sollte ich auhc überlegen arrogante sätze in anderen foren von mir zu geben wenns z.B. um server probleme geht

sowas wie "Beschäftige dich doch erstmal 15 Jahre mit Windows und dann löse dein Problem selbst, dann wirst du auch selbst drauf kommen"

Du bist ziemlich ungerecht, denn ich erinnere mich an das Menü in deiner aktuellen Website, bei dem du auch viel Hilfe aus dem Forum beansprucht und bekommen hast - auch per PN.

Jetzt zeigst du dein CSS und sprichst davon, dass es kompatibel zu IPad, Smartphone & Co. werden soll. Wenn man sich deine Codezeilen anschaut, z.B. Platzierung der Navigation von #main in den #header mit absoluter Positionierung und negativen top- und left-Werten, dann ist es eben offensichtlich, dass Grundlagen fehlen und ein Tipp, sich intensiv mit CSS und HTML zu beschäftigen, hat dann nichts mit "arroganten Sätzen" zu tun, sondern ist durchaus ernst gemeint und unabdingbar.

Was du willst ist die CSS/CSS3-Oberklasse, wo es aber mit ein paar Hinweisen oder Korrekturen an deinem CSS nicht getan ist. Jedenfalls nicht, wenn man die vorhandenen Code-Zeilen berücksichtigt. Was nicht geht ist, dass dir hier ein fertiges, Browser übergreifendes Navigations-CSS geliefert wird, ohne dass du selbst daran arbeitest. So sehe ich das!

Nimm also Tipps an oder nicht.
Falls ja, dann helfe ich auch gerne weiter - ich war vorhin schon dabei, dir einige Links zusammenzustellen, dann aber hat mich dein letzter Post überrascht.
Falls nicht, dann lass es eben, aber hör auf zu jammern.

Natürlich streite ich die hilfe nicht ab
die hilfe hier im forum ist der grund warum ich bei contao geblieben bin
bei dem letzten menü habe ich auch verzweifelt dran gearbeitet
ich habe damals auch sehr viel über css gelesen und gelernt auch videos gekauft usw usw

das problem ist das ich halt selbständiger it mensch bin und das meiste seit dem einfach wieder vergessen habe
weil ich mich eher mit servern,hardware und kundenwünschen und die probleme meine kunden beschäftige.

z.B. warum hängt eine mehrere tausend euro teure software den sql server des server 2008 r2 auf?
der hersteller behauptet weiterhin der ram seit defekt obwohl ich es besser weiss...

oder wie z.B. zieht man ein unternehmen inkl. telefonanlage am besten um , ohne das die festplatten der server während dem umzug kalt werden
usw. usw. css steht da bei mir gzewungener maßen in der prioritätsliste sehr weit hinten

und angeignetes wissen geht schnell verloren wenn du es nicht immer wieder wiederholst
da ich seit 3 tagen an dem css menü sitze und keinen grünen zweig finde bin ich eben am durchdrehen (oder verzweifeln?)

ich könnte sowas wie weblica nutzen das im klicki klacki style mir die homepage zusammen bastelt
aber das wäre nicht meine art....

Ich habe heute zeit finden können und nocheinmal meine Bücher / DVD's mit den wichtigsten Sachen wiederholt...
dementsprechend habe ich einige sachen korrigiert bzw. verändert.

ich verwundere mich nur über eine sache

hier erstmal der code:

Code:

---

#mainmenu {
    width:100%;
    position:relative;
    overflow:visible;
    background-color:#666;
    border-top:1px solid #666;
    border-right:1px solid #666;
    -moz-border-radius-topleft:5px;
    -webkit-border-top-left-radius:5px;
    border-top-left-radius:5px;
    -moz-border-radius-topright:5px;
    -webkit-border-top-right-radius:5px;
    border-top-right-radius:5px;
}

#mainmenu ul {
    margin:0;
    padding:0;
    list-style-type:none;
}

#mainmenu ul.level_1 li {
    width:20%;
    display:inline-block;
}

#mainmenu ul.level_2 li, #mainmenu ul.level_3 li {
    width:100%;
    display:block;
}

#mainmenu ul.level_2, #mainmenu ul.level_3 {
    display:none;
}

#mainmenu ul.level_1 li:hover > ul.level_2 {
    width:100%;
    position:absolute;
    display:block;
}

#mainmenu ul li a, #mainmenu ul li a:hover, #mainmenu ul li a:active, #mainmenu ul li a:focus, #mainmenu ul li.active span {
    font-size:20px;
    line-height:25px;
    font-weight:bold;
    text-decoration:none;
    color:#6dbbba;
}

#mainmenu ul.level_1 li.first {
    padding-left:20px;
}

#mainmenu ul.level_2 li.first, #mainmenu ul.level_3 li.first {
    padding-left:0;
}

---

gibts eine methode die li in level_1 besser zu verteilen als width 100%?

/////
edit:
level 1 inline vergeben und mit padding arbeiten?
/////

wenn ich mit der maus über die navigation fahre ist sie manchmal einfach "weg"
ich glaube das liegt an leeren zwischenräumen
wie bekomme ich das weg?
///////////////////
edit:
der header in dem sich das menü befindet ist nur 35 px groß
ich möchte ihn nicht unbedingt vergrößern....
/////////////////

wie kann ich das ganze packet grundsätzlich so anpassen das es "touch fähig" ist?