MenuMatic Darstellungsprobleme!!! Unterer Rand abgeschnitten!!!!

[fall2out]

Hallo, hab hier im Forum schon nach ähnlichen Problemen gesucht, konnte aber mit den bisherigen nix anfangen. Ich hab es dank des super Tutorials von MacKP die Navigation erstellt. Nur sieht es leider nicht so aus, wie es eigentlich sein sollte. Nun habe ich folgendes Problem: Im Anhang könnt ihr sehen das unten der Rand weg ist und auch die einzelnen Submenü ineinander gehen. Und zum andern wollte ich noch die Submenüeinträge vertikal Zentriert haben. Hab schon viel rumgetüfftelt aber nix hat geholfen. Hoffe ihr könnt es. Dankö

[soweit_ok]

Schaut nach CSS-Fehlern in der MenuMatic.css aus. Dieselben Probleme mit der Positionierung der Submenüpunkte und dem unteren Rand des umgebenden Containers hatte ich anfangs auch, aber man wenn man das Zusammenspiel der verschiedenen Selektoren richtig nachvollzieht, kriegt man es letztlich hin. Falls Du das Tool noch nicht hast, solltest Du Dir Firebug installieren, kann bei der CSS-Formatierung sehr helfen.

Auch das mit dem unteren Rand konnte ich beheben, daraus könnte sich dann allerdings auch bei Dir der unerwünschte Seiteneffekt ergeben, dass der Rahmen des äußeren Containers wegen des Fadings länger sichtbar bleibt als der Inhalt. Hab das Fading im Modul entsprechend weit heruntergesetzt, bis es optisch ok war. Na ja, ich kann diese schleppende Anzeige- u. Ausblendeverzögerung in Menüs sowieso nicht leiden. Genauso wie die Hintergrundtransparenz - ich finde, im Menü sieht das meistens unsauber aus.

Ohne Zugang zur Webseite kann ich Dir leider nicht konkret helfen, dafür ist das CSS zu komplex und meine eigene Anpassung ist inzwischen drei Monate her.

[fall2out]

Danke für die Antwort. Hab hier noch mal den Code eingefügt. Da muss entweder ein Fehler sein oder irgendwas anderes. Das war auf jeden Fall schon von Anfang an so. Und leider habe ich die Page nur lokal auf meinem Rechner, hoffe aber dass das hier weiterhilft.

/* Based partially on Matthew Carroll's keyboard accessible flavor of Suckerfish 
 * Dropdowns by Patrick Griffiths and Dan Webb. 
 * http://carroll.org.uk/sandbox/suckerfish/bones2.html
 */

/* ----[ LINKS ]----*/

/* all menu links */
#nav a, #subMenusContainer a{
	text-decoration:none;
	display:block;
	padding:10px 20px;
	background-color:#fff ;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
}

/* Just main menu links --[for non-javascript users this applies to submenu links as well]*/
#nav a{
	margin:0;
	float:left;	
}

/* Just sub menu links */
#subMenusContainer a, #nav li li a{
	text-align:left;
}

/* All menu links on hover or focus */
#nav a:hover, #nav a:focus, #subMenusContainer a:hover, #subMenusContainer a:focus, #nav a.mainMenuParentBtnFocused, #subMenusContainer a.subMenuParentBtnFocused{
	background-color:#F6C739 ;
	color:#FFF;
}

/* sub menu links on hover or focus */
#subMenusContainer a:hover, 
#subMenusContainer a:focus, 
#nav a.mainMenuParentBtnFocused, 
#subMenusContainer a.subMenuParentBtnFocused,
#nav li a:hover,
#nav li a:focus{
	background-color:#F6C739 ;
	color:#FFF;
}

/* Parent Sub Menu Links ---[javascript users only]*/
.subMenuParentBtn{ 
	background: url(../img/arrow_right.gif) right center no-repeat;  
}

/* Parent Sub Menu Links on hover or focus ---[javascript users only]*/
.subMenuParentBtnFocused{ 
	background: url(../img/arrow_right_over.gif) right center no-repeat;  
}

/* Parent Main Menu Links ---[javascript users only]*/
.mainMenuParentBtn{	
	 background: url(../img/arrow_down.gif) right center no-repeat; 
}

/* Parent Main Menu Links on hover or focus ---[javascript users only]*/
.mainMenuParentBtnFocused{	
	background: url(../img/arrow_down_over.gif) right center no-repeat; 
}

/* ----[ OLs ULs, LIs, and DIVs ]----*/

/* Submenu Outer Wrapper - each submenu is inside a div with this class - javascript users only */
.smOW{ 
	display:none; 
	position: absolute; 
	overflow:hidden; 
	/*the 2px left & right padding lets you have a 1px border 
	  on the ul or ol inside since overflow is set to hidden*/
	padding:0 2px;
	margin:0 0 0 -2px;
}


/* All ULs and OLs */
#nav, #nav ul, #nav ol, #subMenusContainer ul, #subMenusContainer ol { 
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 1em;
}

/* All submenu OLs and ULs */
#nav ol, #nav ul, #subMenusContainer ul, #subMenusContainer ol {	
	/*border around submenu goes here*/	 
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	background:#fff;	
	border:1px solid #C3D46A;
	left:0;
}


/* List items in main menu --[for non-javascript users this applies to submenus as well]  */
#nav li { 
	/*great place to use a background image as a divider*/
	display:block;
	list-style:none;
	position:relative;
	float:left;
}

#subMenusContainer li{
	list-style: none;
}

/* main menu ul or ol elment */
#nav{
	display:block;
	position: absolute;
	list-style:none;
	margin:0 0 0 0;
	z-index:5;
	top:15px;
	left:50%;
	text-align: center;
	display:block;
}

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


/* --------------------------[ The below is just for non-javscript users ]--------------------------*/
#nav li li{	float:none; }

#nav li li a{ /* Just submenu links*/	
	position:relative;
	float:none;
}

#nav li ul { /* second-level lists */
	position: absolute;
	width: 10em;
	margin-left: -1000em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
	margin-top:2.2em;
}

/* third-and-above-level lists */
#nav li ul ul { margin: -1em 0 0 -1000em; }
#nav li:hover ul ul {	margin-left: -1000em; }

 /* lists nested under hovered list items */
#nav li:hover ul{	margin-left: 0; }
#nav li li:hover ul {	margin-left: 10em; margin-top:-2.5em;}

/* extra positioning rules for limited noscript keyboard accessibility */
#nav li a:focus + ul {  margin-left: 0; margin-top:2.2em; }
#nav li li a:focus + ul { left:0; margin-left: 1010em; margin-top:-2.2em;}
#nav li li a:focus {left:0;  margin-left:1000em; width:10em;  margin-top:0;}
#nav li li li a:focus {left:0; margin-left: 2010em; width: 10em;  margin-top:-1em;}
#nav li:hover a:focus{ margin-left: 0; }
#nav li li:hover a:focus + ul { margin-left: 10em; }

[elwega]

hi,
das kennst Du? Das tolle Tut von MackP
Danach sollte es eigentlich sofort funktionieren.

[elwega]

MenuMatic

hallo nochmal,
hab mal Deinen obigen Code gerade so übernommen bei einer Installation von mir und der funktioniert tadellos, bis auf die Farben
Probier mal mit den line-height: Parametern, der Rest geht über die Margins bzw. Positionen.

[fall2out]

So, hab jetzt alles genauso gemacht wie es im Tutorial steht. Es kommt aber das gleiche ergebnis. siehe Anhang

[elwega]

hi,
wie weiter oben schon gesagt ist es rel. schwierig nachzuvollziehen ohne Link.
Das css von Dir funktioniert bei mir tadellos 1:1 kopiert.

<!-- Load the MenuMatic Class -->
<script src="Pfad-zu->/js/MenuMatic_0.68.3.js" type="text/javascript" charset="utf-8"></script>
<!-- Create a MenuMatic Instance -->
<script type="text/javascript" >
        window.addEvent('domready', function() {
        var myMenu = new MenuMatic();
        stretchMainMenu:true;
        matchWidthMode:true;
        });
</script>

[elwega]

hier mal Dein css 1:1 ohne Änderung in aktiver Webseite als Anhang

[fall2out]

So, hab jetzt mit Firebug die Seite nachgeschaut. Er sagt mir das irgendein fehler im JavaScript sein soll. Könnt ihr mir vielleicht eure nav_MenuMatic.tpl geben?

[fall2out]

Hab Contao neu installiert und alles noch mal gemacht und ihr werdet es kaum glauben, es ist immer noch das gleiche Problem.

[elwega]

Fehler im JS??

tpl

<ul <?php if ($this->level == 'level_1'): ?>id="nav"<?php endif; ?> class="vlist <?php echo $this->level; ?>">
    <?php foreach ($this->items as $item): ?>
    <?php if ($item['isActive']): ?>
    <li class="active<?php if ($item['class']): ?> <?php echo $item['class']; ?><?php endif; ?>"><a href="<?php echo $item['href']; ?>" title="<?php echo $item['pageTitle'] ? $item['pageTitle'] : $item['title']; ?>"<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?><?php if ($item['accesskey'] != ''): ?> accesskey="<?php echo $item['accesskey']; ?>"<?php endif; ?><?php if ($item['tabindex']): ?> tabindex="<?php echo $item['tabindex']; ?>"<?php endif; ?><?php if ($item['nofollow']): ?> rel="nofollow"<?php endif; ?><?php echo $item['target']; ?>><em><?php echo $item['link']; ?></em></a><?php echo $item['subitems']; ?></li>
    <?php else: ?>
    <li<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?>><a href="<?php echo $item['href']; ?>" title="<?php echo $item['pageTitle'] ? $item['pageTitle'] : $item['title']; ?>"<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?><?php if ($item['accesskey'] != ''): ?> accesskey="<?php echo $item['accesskey']; ?>"<?php endif; ?><?php if ($item['tabindex']): ?> tabindex="<?php echo $item['tabindex']; ?>"<?php endif; ?><?php if ($item['nofollow']): ?> rel="nofollow"<?php endif; ?><?php echo $item['target']; ?>><?php echo $item['link']; ?></a><?php echo $item['subitems']; ?></li>
    <?php endif; ?>
    <?php endforeach; ?>
    </ul>

lad mal das js von hier neu
es gibt zwei Varianten, horiz. und vertikal!
Wobei das Menue auch ohne JS funktioniert.

[soweit_ok]

Also, ich hab wie elwega ebenfalls mal Dein originales CSS bei mir zum Testen reingesetzt. Daran liegt es definitiv nicht, denn es sieht auch bei mir vollkommen korrekt aus. Nur mit FF4 getestet.

Falls es auch mit der orginalen .js immer noch nicht bei Dir funktioniert, kann ich mir höchstens noch einen Konflikt mit irgendeiner anderen Extension vorstellen. Was auch nicht unbedingt an der Extension liegen muss. Ich hatte z. B. mal einen Haufen JS-Fehler infolgedessen, dass ich in der Isotope Shopkonfiguration bei einem Produkttyp-Attribut versehentlich conditionalselect statt select verwendete. Der wohl nicht abgefangene Fehler wurde dadurch verursacht, dass ein nicht existierender Parent-Datensatz gesucht wurde.

Firebug zeigt mitunter nur den primären js-Fehler an und soweit ich weiß, nicht ggf. vorhandene Warnungen. Wenn Du alle ggf. vorhandenen js-Probs sicher sehen willst, ruf mal im FF unter "Extras" die Fehlerkonsole auf.

Wenn Dich das alles nicht weiterbringt, würde ich zur Eingrenzung der Ursache im BE mal alle Erweiterungen deaktivieren, gucken ob die js-Fehler dann weg sind und in dem Fall eine nach der anderen Erweiterung wieder aktivieren.

[fall2out]

Der Fall ist gelöst!!!

Hab den dummen Fehler von mir gefunden. Hatte die CSS Datei für IE6 ohne z.B.

<!--[if lte IE 7]><link rel="stylesheet" href="system/ MenuMatic-ie6.css.css" type="text/css" media="screen" /><![endif]-->

eingefügt und deswegen hatte er immer den Fehler angezeigt. War echt schon am verzweifeln.

Danke noch mal an alle die mir geholfen haben. Besonderer Dank an elwega der sich per E-Mail alle Mühe mit mir gemacht hat.

Jetzt bin ich glücklich!

[djo]

Hey Leute - ich liebe dieses Forum.
Hatte exakt das hier gelöste Problem - hatte nicht aufgepasst, als ich das Menu von einer auf eine andere Contao-Seite übertragen wollte.

Herzlichen Dank!

[Monic49]

Hab den dummen Fehler von mir gefunden. Hatte die CSS Datei für IE6 ohne z.B.

<!--[if lte IE 7]><link rel="stylesheet" href="system/ MenuMatic-ie6.css.css" type="text/css" media="screen" /><![endif]-->

eingefügt und deswegen hatte er immer den Fehler angezeigt. War echt schon am verzweifeln.

Ich bin jetzt auch zufrieden- danke an alle Helferlein. Nur wie teste ich nun IE6/IE7- habe den leider nicht mehr? Habe ich den Code richtig eingepflanzt(wo gehört der hin)??

Vielen Dank für euren Rat