Menumatic Menu "versetzt" und abgeschnitten

**d3x84** · 07.11.2011, 14:16

Hi zusammen,
auf eine Empfehlung hin habe ich mein Standard Suckerfish durch ein Menumatic ersetzt.
Funktioniert soweit auch gut bis auf 2 Dinge:

1. Die Aufklappenden Menüs sind recht weit auseinander...
2. Die 3 Untermenuebene ist unten immer etwas abgeschnitten um ein paar pixel...

weis jemand rat?

Thx 4 help

link www.reneboehres.de

**d3x84** · 07.11.2011, 18:38

hi ich habe es mithilfe von css nun geschafft die menüs so halbwegs hin zu setzen
in der klasse submenucontainer bzw sm0w konnte ich das richten

allerdings ist das level3 menu noch immer nach rechts versetzt...

Code:

#nav
{
    height:37px;
    left:-20px;
    top:200px;
    position:absolute;
    overflow:hidden;
    list-style-type:none;
}

#nav li
{
    width:229px;
    float:left;
    border:1px solid #fff;
    background: #94b7b6;
    background: -moz-linear-gradient(top,  #94b7b6 0%, #6dbbba 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#94b7b6), color-stop(100%,#6dbbba));
    background: -webkit-linear-gradient(top,  #94b7b6 0%,#6dbbba 100%);
    background: -o-linear-gradient(top,  #94b7b6 0%,#6dbbba 100%);
    background: -ms-linear-gradient(top,  #94b7b6 0%,#6dbbba 100%);
    background: linear-gradient(top,  #94b7b6 0%,#6dbbba 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#94b7b6', endColorstr='#6dbbba',GradientType=0 );
}

#nav li a,
#nav li span
{
    display:block;
    padding:12px 5px 12px 10px;
    font-size:14px;
    line-height:14px;
    font-weight:bold;
    text-decoration:none;
    color:#fff;
}

#nav li span
{
    font-weight:bold;
    color:#ffffff;
}

#nav li a:hover,
#nav li a.mainMenuParentBtnFocused,
#nav li a.trail
{
    font-weight:bold;
    color:#ffffff;
    background: #b2b2b2;
    background: -moz-linear-gradient(top,  #b2b2b2 0%, #999999 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b2b2b2), color-stop(100%,#999999));
    background: -webkit-linear-gradient(top,  #b2b2b2 0%,#999999 100%);
    background: -o-linear-gradient(top,  #b2b2b2 0%,#999999 100%);
    background: -ms-linear-gradient(top,  #b2b2b2 0%,#999999 100%);
    background: linear-gradient(top,  #b2b2b2 0%,#999999 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b2b2b2', endColorstr='#999999',GradientType=0 );
}

#nav li.first a
{
    border: none;
}

.smOW
{
    position:absolute;
    overflow:hidden;
    display:none;
    padding:0 0 20px;
}

#subMenusContainer a
{
    min-width:225px;
    display:block;
    padding:7px 10px 7px 15px;
    font-weight:bold;
    color:#fff;
}

#subMenusContainer a:hover,
#subMenusContainer a:focus,
.subMenuParentBtnFocused
{
    font-weight:bold;
    text-decoration:none;
    color:#fff;
    background: #b2b2b2;
    background: -moz-linear-gradient(top,  #b2b2b2 0%, #999999 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b2b2b2), color-stop(100%,#999999));
    background: -webkit-linear-gradient(top,  #b2b2b2 0%,#999999 100%);
    background: -o-linear-gradient(top,  #b2b2b2 0%,#999999 100%);
    background: -ms-linear-gradient(top,  #b2b2b2 0%,#999999 100%);
    background: linear-gradient(top,  #b2b2b2 0%,#999999 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b2b2b2', endColorstr='#999999',GradientType=0 );
}

#subMenusContainer a.trail,
#subMenusContainer li.active a
{
    font-weight:bold;
    text-decoration:none;
    color:#fff;
}

#subMenusContainer ul.level_2
{
    list-style-type:none;
    background: #94b7b6;
    background: -moz-linear-gradient(top,  #94b7b6 0%, #6dbbba 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#94b7b6), color-stop(100%,#6dbbba));
    background: -webkit-linear-gradient(top,  #94b7b6 0%,#6dbbba 100%);
    background: -o-linear-gradient(top,  #94b7b6 0%,#6dbbba 100%);
    background: -ms-linear-gradient(top,  #94b7b6 0%,#6dbbba 100%);
    background: linear-gradient(top,  #94b7b6 0%,#6dbbba 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#94b7b6', endColorstr='#6dbbba',GradientType=0 );
}

#subMenusContainer ul.level_3
{
    list-style-type:none;
    background: #94b7b6;
    background: -moz-linear-gradient(top,  #94b7b6 0%, #6dbbba 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#94b7b6), color-stop(100%,#6dbbba));
    background: -webkit-linear-gradient(top,  #94b7b6 0%,#6dbbba 100%);
    background: -o-linear-gradient(top,  #94b7b6 0%,#6dbbba 100%);
    background: -ms-linear-gradient(top,  #94b7b6 0%,#6dbbba 100%);
    background: linear-gradient(top,  #94b7b6 0%,#6dbbba 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#94b7b6', endColorstr='#6dbbba',GradientType=0 );
}

#subMenusContainer
{
    width:100%;
    left:1px;
    top:-31px;
    position:absolute;
    overflow:visible;
    display:block;
    z-index:1000000000;
}

#nav li ul
{
    display:none;
}

* + html .smOW
{
    margin-top:-2px;
    margin-left:-2px;
}

* + html #subMenusContainer ul.level_3
{
    margin-top:2px;
}

jemand ne idee was schief läuft?

**d3x84** · 08.11.2011, 10:54

keiner der mir helfen kann?
ich habe nun schon zig stunden in die suche verwendet...

ich hab keine ahnung obs an den css oder am js oder am tpl hängt...

evtl ist es auch ne andere css anweisung aus dem anderen bereich die mir das verkloppt?

ich hab echt keine ahnung... :/

***Nina*** · 08.11.2011, 11:06

Ich denke, du hast dir da dein CSS schon völlig zerschossen und solltest in Bezug auf das Menü nochmal neu anfangen. Wenn du wahllos irgendwas darin umstellst, kann der Rest nicht mehr funktionieren, da die Berechnungen für die Abstände und Ausrichtungen nicht mehr passen. Meine Empfehlung ist, dass du alle Anweisungen zum Menü nochmal löschst, sauber die MenüMatic-Anweisungen in genau der Reihenfolge wie im Original vorgegeben rein nimmst und uns dann nochmal das Ergebnis zeigst. Dann können wir dir Stück für Stück helfen. So müssten wir jetzt erst rausfinden was du am Originalaufbau geändert hast und dann helfen. Das ist zumindest mir zu anstrengend

Falls du es noch nicht kennst: MenuMatic-Anleitung im Contao-Wiki

**trilobit** · 08.11.2011, 11:13

Hallo,

das Problem (mit einer einfachen Lösung) ist, soweit ich das feststellen konnte, dass nicht das CSS "schuld" an der Positionierung der 3. Navi-Ebene ist. Die ULs liegen in DIV-Containern (class="smOW"), und die werden vom JavaScript positioniert (left & top). Die Faktoren, die diese Werte beeinflussen kommen wahrscheinlich aus'm CSS, aber sicher bin ich mir da nicht, dazu habe ich mich zu wenig mit dem verwendeten Script beschäftigt

.

Was du grundsätzlich mal probieren könntest ist, für die level-3-Listen das Margin und Padding auf 0 zu setzen:

Code:

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

ul.level_3 li {
  padding: 0;
}

Vielleicht (ich betone: vielleicht!) behebt das dein Problem bereits. Probier's mal aus...

Cheerio, Alex

**ciaobello** · 08.11.2011, 11:42

Hallo d3x84

Ich empfehle Dir das Theme4 zu installieren auf einer lokalen Umgebung. Der Autor hat das CSS wunderschön dokumentiert. Menumatic total ;-). Dann kannst rumspielen und Du wirst den Fehler rasch finden. Vielleicht hilft es auch schon wenn Du bei der Demo im Quellcode/CSS schmökerst.

**d3x84** · 08.11.2011, 12:01

Zitat von Nina

Ich denke, du hast dir da dein CSS schon völlig zerschossen und solltest in Bezug auf das Menü nochmal neu anfangen. Wenn du wahllos irgendwas darin umstellst, kann der Rest nicht mehr funktionieren, da die Berechnungen für die Abstände und Ausrichtungen nicht mehr passen. Meine Empfehlung ist, dass du alle Anweisungen zum Menü nochmal löschst, sauber die MenüMatic-Anweisungen in genau der Reihenfolge wie im Original vorgegeben rein nimmst und uns dann nochmal das Ergebnis zeigst. Dann können wir dir Stück für Stück helfen. So müssten wir jetzt erst rausfinden was du am Originalaufbau geändert hast und dann helfen. Das ist zumindest mir zu anstrengend

Falls du es noch nicht kennst: MenuMatic-Anleitung im Contao-Wiki

das problem mit der höhe und den abständen bestand von anfang an egal welche menumatic version die so kusieren (original, mackp etc) ich verwendet habe
kommt wie ich vermute eher aus dem js...
ich habe schon sämtliche templates js versionen css bla bla ausprobiert (ich eier ja schon 1,5 tage hier rum)

ich habe

Code:

#subMenusContainer ul.level_3

auf margin padding 0 gesetzt

das behebt das problem nicht...

hmm meine javascript künste halten sich in grenzen aber vielleicht finde ich in dem script den fehler...

EDIT:
ich muss mich korrigieren

das margin padding 0 hat immerhin das level 3 untermenü wieder korrekt an die obere kante rutschen lassen...
fehlt noch der versatz nach links *g*

***Nina*** · 08.11.2011, 12:11

Ich kann mir vorstellen, dass dein Problem auch daher kommt, dass du die Anweisung für #nav so abgeändert hast. Irgendwie bilde ich mir ein, dass sich das dann direkt auf die Berechnungen im JS auswirkt.

Momentan schreibst du im CSS:

Code:

#nav {
    height: 37px;
    left: -20px;
    list-style-type: none;
    overflow: hidden;
    position: absolute;
    top: 200px;
}

Ich denke, da liegt der Haken mit der JS-Berechnung. Stelle also für #nav wieder die Originalanweisungen von MenuMatic ein und platziere stattdessen dein Menü lieber über die Box von #header .mod_navigation (wichtig ist, dass diese Anweisung dann ein position: relative hat, damit die absoluten Positionsberechnungen davon ausgehen).

Aber ich bleibe dabei: Du solltest dringend wieder die Ureinstellungen von MenuMatic ins CSS packen, denn sonst wird jetzt die Fehlersuche noch anstrengender, weil wir auch noch eventuelle Fehleinstellungen von dir ausbügeln müssten.

**d3x84** · 08.11.2011, 12:22

EDIT:

jetzt ist wieder alles auf original einstellungen -> keine änderung

ich dreh echt noch durch mit dem sch*.....

***Nina*** · 08.11.2011, 12:52

Hm, ich sehe da immer noch nicht die exakten Originalanweisungen. Füge mal wirklich das Original-Stylesheet von MenuMatic ein (siehe Anhang) und blende alle eigenen Anweisungen rund um das Menü aus.

**d3x84** · 08.11.2011, 13:00

ok ich habe eine leicht abgeänderte version genutzt (es gibt ja mittlerweile verschiedene menumatic versionen)

ist jetzt drauf (muss gerade noch den header ausblenden)

ok ich hab die verantwortliche css datei gefunden...

ist diese datei ausgeblendet funktioniert es...

es ist meine screen.css

die datei ist mittlerweile etwas chaotisch sry ^^

Code:

/** mod_suchen **/
#wrapper
{
    margin-top:30px;
    margin-bottom:30px;
}

#header
{
    background-color:#ffffff;
    border-top:1px solid #d0d0d0;
    border-right:1px solid #d0d0d0;
    border-left:1px solid #d0d0d0;
}

#container
{
    background-color:#ffffff;
    border-right:1px solid #d0d0d0;
    border-left:1px solid #d0d0d0;
}

#left .inside
{
    width:240px;
    margin-left:15px;
}

#right .inside
{
    width:240px;
    margin-left:15px;
}

#main .inside
{
    width:650px;
    margin-left:20px;
}

#footer
{
    border-right:1px solid #d0d0d0;
    border-bottom:1px solid #d0d0d0;
    border-left:1px solid #d0d0d0;
    border-spacing:10px;
    background: #fcfff4; /* Old browsers */
    background: -moz-linear-gradient(top,  #fcfff4 0%, #dfe5d7 40%, #d1d1d1 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcfff4), color-stop(40%,#dfe5d7), color-stop(100%,#d1d1d1)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #fcfff4 0%,#dfe5d7 40%,#d1d1d1 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #fcfff4 0%,#dfe5d7 40%,#d1d1d1 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #fcfff4 0%,#dfe5d7 40%,#d1d1d1 100%); /* IE10+ */
    background: linear-gradient(top,  #fcfff4 0%,#dfe5d7 40%,#d1d1d1 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#d1d1d1',GradientType=0 ); /* IE6-9 */
}
.mod_headerLogo
{
    width:260px;
    height:100px;
    left:15px;
    top:20px;
    position:absolute;
}
.mod_headerImage
{
    left:280px;
    top:20px;
    position:absolute;
}

.mod_article .pdf_link
{
    left:-22px;
    right:10px;
    top:-100px;
    position:absolute;
}

img
{
    margin-right:auto;
    margin-left:auto;
    text-align:center;
    vertical-align:middle;
    border:1 #000000;
}


.mod_article p
{
    margin-top:10px;
}
.mod_socialshareprivacy
{
    width:595px;
    height:207px;
    left:435px;
    top:65px;
    position:absolute;
    padding:110px 0 0;
}

.datum
{
    left:20px;
    top:162px;
    position:absolute;
    font-weight:bold;
    color:#999999;
}

.img_black img
{
    float:left;
    margin-top:10px;
    margin-right:30px;
    margin-bottom:10px;
    border:1px solid #000000;
}
.img_green img
{
    float:left;
    margin-top:10px;
    margin-right:30px;
    margin-bottom:10px;
    border:1px solid #6dbbbe;
}

.copyright p
{
    margin-right:auto;
    margin-left:auto;
    text-align:center;
    vertical-align:bottom;
}

.copyright
{
    left:20px;
    position:absolute;
    font-size:11px;
    color:#666666;
    top : 70px;
}

.mod_slider
{
    left:290px;
    top:20px;
    position:absolute;
}

div.error,
p.error
{
    margin:0;
    padding:2px 0 0;
    font-size:9px;
    color:#ff0000;
}

.mod_article .pdf_link a
{
    margin-right:5px;
}

.ce_table
{
    margin-top:24px;
    margin-bottom:24px;
    border-left:1px solid #cccccc;
}

.ce_table td
{
    padding:2px 8px;
    border-right:1px solid #cccccc;
    border-bottom : 1px solid #cccccc;
}

.ce_table th
{
    padding:2px 8px;
    background-color:#e6e6e6;
    border-top:1px solid #cccccc;
    border-right : 1px solid #cccccc;
    border-bottom : 1px solid #cccccc;
}

.ce_table th a
{
    color:#000000;
}

Edit: ich versuche die datei gerade mal von ein paar altlasten zu befreien...

**bizon** · 08.11.2011, 13:24

Die Reihenfolge der eingebundenen Stylesheets ist für die Darstellung im FE mit entscheidend. Setze das MenuMatic.css ganz nach unten

basic.css
screen.css
...
MenuMatic.css