Suche

[Webfan]

Hallo,
es wäre wirklich nett wenn mir jemand einen Tipp geben könnte.
Es geht um das Drop Down Menü http://schmeckts.at/ oben grau (Home, Artikel, Benutzerverwaltung, ...)

Das Problem ist, besonders deutlich beim Menüpunkt "Lokale", das das Drop Down Menü nach rechts verschoben wird, ich hätte gerne das Menü direkt unter dem Mouseover-Hauptmenü-Punkt möglichst direkt darunter mittig/bündig.

Code:

Code Auswählen Erweitern

function theme_get_navbars()
{
    global $themesetting;
    foreach ($themesetting['headnav'] as $title => $menue) {
        if (empty($current) && in_array(1, $menue['case'])) {
          //  $current = ' class="current"';
          $current = ' ';
        } else {
            $current = '';
        }
        $p = '<li' . $current . '><a href="' . $menue['link'] . '">' . $title . '</a>';
         if(isset( $menue['subs']) && is_array($menue['subs']) )
          {
           $id = 'UL_'.mt_rand(10000, 9999999999999999);
           $p.= '<ul id="'.$id.'">';
            foreach($menue['subs'] as $title => $link)
             {
               $p .= '<li><a href="'.$link.'">'.$title.'</a></li><br />';
             }
            $p.= '</ul>';

          }

        $p .='</li>';
        $part[] = $p;
    }
    // mxDebugFuncVars($themesetting, $part);
    //return implode("\n", $part);
    $part = implode(" ", $part);

    //drop down
    $r = '
<style type="text/css">
    nav2 {
    width: 100%;
-khtml-border-radius:6px;
-webkit-border-radius: 6px;
-moz-border-radius:6px;
border-radius: 6px;
border-left-radius: 6px;
z-Index:1000;
text-align: left;
}
nav2 ul {

-khtml-border-radius:6px;
-webkit-border-radius: 6px;
-moz-border-radius:6px;
border-radius: 6px;
border-left-radius: 6px;
z-Index:1000;

text-align: left;
}
nav2 ul:after {
    display: block;
    font-size: 0;
    height: 0;
    visibility: hidden;
    z-Index:1000;
    text-align: left;
}
    nav2 ul,nav2 ul li{
    background-color: lightgray;
-khtml-border-radius:6px;
-webkit-border-radius: 6px;
-moz-border-radius:6px;
border-radius: 6px;
border-left-radius: 6px;
z-Index:1000;
text-align: left;
}
    nav2 ul li {
    list-style: none;
    text-align: left;
    display: block;

    background-color: lightgray;
    z-Index:1000;
}
nav2 ul li a {
    text-decoration: none;

    color: #333;
    padding: 1px 2px 1px 2px;
    z-Index:1000;
    text-align: left;
}
nav2 ul li:hover > ul {
    visibility: visible;
    z-Index:1000;
    text-align: left;
}
nav2 ul li:hover  {
    background-color:lightgreen;
    text-align: left;
}
nav2 ul li ul{

    visibility: hidden;
    position: absolute;
    padding:0px;
    z-Index:1000;
    text-align: left;
}
nav2 ul li ul li{
   display:block;
    z-Index:1000;
    text-align: left;
}
</style>

';
    $r.= '<nav2>
            <ul>';
            $r.= $part;
    $r.='   </ul>
        </nav2>
        ';

    return $r;
}

Wie man sieht wurde das Menü aus themesettings.php bei einigen Punkten um das subs Array ergänzt.

Hier der Code als HTML Ausgabe:

Code Auswählen Erweitern

              <div id="nav">
                <div id="nav-main">
                  <a id="page-navigation" class="noscreen noprint" name="page-navigation"></a>
                <div class="languages">
                 
                </div>
                 
<style type="text/css">
    nav2 {
    width: 100%;
-khtml-border-radius:6px;
-webkit-border-radius: 6px;
-moz-border-radius:6px;
border-radius: 6px;
border-left-radius: 6px;
z-Index:1000;
text-align: left;
}
nav2 ul {

-khtml-border-radius:6px;
-webkit-border-radius: 6px;
-moz-border-radius:6px;
border-radius: 6px;
border-left-radius: 6px;
z-Index:1000;

text-align: left;
}
nav2 ul:after {
    display: block;
    font-size: 0;
    height: 0;
    visibility: hidden;
    z-Index:1000;
    text-align: left;
}
    nav2 ul,nav2 ul li{
    background-color: lightgray;
-khtml-border-radius:6px;
-webkit-border-radius: 6px;
-moz-border-radius:6px;
border-radius: 6px;
border-left-radius: 6px;
z-Index:1000;
text-align: left;
}
    nav2 ul li {
    list-style: none;
    text-align: left;
    display: block;

    background-color: lightgray;
    z-Index:1000;
}
nav2 ul li a {
    text-decoration: none;

    color: #333;
    padding: 1px 2px 1px 2px;
    z-Index:1000;
    text-align: left;
}
nav2 ul li:hover > ul {
    visibility: visible;
    z-Index:1000;
    text-align: left;
}
nav2 ul li:hover  {
    background-color:lightgreen;
    text-align: left;
}
nav2 ul li ul{

    visibility: hidden;
    position: absolute;
    padding:0px;
    z-Index:1000;
    text-align: left;
}
nav2 ul li ul li{
   display:block;
    z-Index:1000;
    text-align: left;
}
</style>

<nav2>
            <ul><li><a href="home.html">Home</a></li> <li><a href="Stories_Archive.html">Artikel</a>
            <ul id="UL_1128743113958766"><li><a href="/Stories_Archive.html">Artikel Archiv</a></li><br />
            <li><a href="/Submit_News.html">Artikel schreiben</a></li><br /></ul></li>
             <li><a href="/Your_Account.html">Benutzerverwaltung</a><ul id="UL_6852213530804384">
             <li><a href="/mydata.html">Einstellungen</a></li><br /><li><a href="/Newsletter.html">Email-Abbonements</a></li><br />
             <li><a href="/Lokale-op-myEntries.html">Ihre Lokaleintr&auml;ge</a></li><br />
             <li><a href="/Lokale-op-myRatings.html">Ihre Bewertungen</a></li><br />
             <li><a href="/Userinfo.html#auszeichnungen">Ihre Auszeichnungen</a></li><br />
             <li><a href="/Userinfo.html#merkliste">Ihre Merkliste</a></li><br />
             <li><a href="/Lokale-op-ratgeber-task-myRG.html">Ihre Ratgeber</a></li><br />
             <li><a href="http://schmeckts.at/24R51.l">Ihr Stammgastbuch</a></li><br />
             <li><a href="/Schedule-act-myevents.html">Meine Termine</a></li><br />
             <li><a href="/Private_Messages.html">Private Nachrichten</a></li><br />
             </ul></li> <li><a href="Downloads.html">Download</a></li>
              <li ><a href="eBoard.html">Forum</a></li>
              <li><a href="Lokale.html">Lokale</a>
              <ul id="UL_9183405702934486">
              <li><a href="/Lokale-op-addEntry.html">Lokal anlegen</a></li><br />
              <li><a href="/Lokale-op-ratgeber.html">Ratgeber</a></li><br />
              <li><a href="/Lokale-op-ratgeber-task-add.html">Ratgeber hinzuf&uuml;gen</a></li><br />
              <li><a href="/kategorien/">Kategorien</a></li><br /><li><a href="/Top50.html">Top 50 Lokale</a></li><br />
              <li><a href="/zertifikate/">Zertifikate</a></li><br /></ul></li>
               <li><a href="recipes.html">Rezepte</a></li>
               <li><a href="Reviews.html">Testberichte</a></li>   </ul>
        </nav2>
       
           
                </div>
              </div>

Vielen Dank!

mfg

------------------------------------------------------------------------------------------------------------------------------
Demnächst gibt es neue Module!
Vorab-Test (Installer): http://www.webfan.de/Downloads-lid-Webfan-PragmaMx-Module-63.html
------------------------------------------------------------------------------------------------------------------------------

[cihan]

Hallo,
die Verschiebung nach rechts kommt von das hier:


layout.css, Zeile 392

Code Auswählen Erweitern

#nav-main ul {
   display: inline; /* (en|de) Bugfix: IE - Doubled Float Margin Bug */
   float: left;
   /* (de) Abstand des ersten Buttons vom linken Rand  */
   margin: 0 0 0 50px;
   padding: 0;
}

Da ist das margin von 50px nach links...

Ich würde so machen:

Code Auswählen Erweitern

#nav-main ul {
   display: inline; /* (en|de) Bugfix: IE - Doubled Float Margin Bug */
   float: left;
   /* (de) Abstand des ersten Buttons vom linken Rand  */
   margin: 0 0 0 0px;
   padding: 0;
}

und dann noch zusätzlich:

Code Auswählen Erweitern

#nav-main {
   padding-left: 50px;
}

Das sollte es sein.

Viele Grüße

[Webfan]

Hallo cihan,
mh, das wars leider nicht ganz, verschiebt sich noch nach rechts.
Nichtsdestotrotz, vielen herzlichen Dank für Deine Hilfe!

Der Kunde hat sich nun für ein modifiziertes emplode Theme entschieden.

Viele Grüße
Till

[bambussprosse]

Hallo cihan!

Wie bereits Webfan geschrieben hatte, hat es leider nicht so funktioniert wie wir es uns vorgestellt haben. Auch ein modifiziertes emplode Theme hat nicht meinen Vorstellungen entsprochen und so bin ich nun wieder bei meinen alten Theme gelandet, mit der fast perfekten CSS-Menü-Navigationsleiste.

Würde mich sehr freuen wenn man uns hier weiter helfen könnte. Denn das Untermenü sollte selbstverständlich genau darunter sein und nicht rechts davon. Wir benutzen übrigens das mx-defaul theme.

Weiß jemand Rat?

mfg Bambussprosse

[Andi]

Der Lösungsweg von Cihan war schon richtig...

Aber mal ehrlich, dieses olle Theme passt doch überhaupt nicht zu der Seite

[cihan]

Hallo,
ihr habt noch das hier in der layout.css:

layout.css, Zeile 392

Code Auswählen Erweitern

#nav-main ul {
   display: inline; /* (en|de) Bugfix: IE - Doubled Float Margin Bug */
   float: left;
   /* (de) Abstand des ersten Buttons vom linken Rand  */
   margin: 0 0 0 50px;
   padding: 0;
}

Das ganze einfach entfernen, dann sollte es ok sein... Und wolltet ihr das aufgeklappte Menü weiter nach links verschieben, dann müsstet ihr mit negativen margin machen.

lg

[Webfan]

Hallo, halllo,
vielen Dank Euch beiden!!!
Leider hat es nichts geholfen.
#nav-main ul habe ich auskommentiert.

Code Auswählen Erweitern

#nav-main {
   padding-left: 50px;
}
wurde geänder nach:

Code Auswählen Erweitern

#nav-main {
   padding-left: 0px;
}


Code Auswählen Erweitern

         if(isset( $menue['subs']) && is_array($menue['subs'])  )
          {
           $id = 'UL_'.mt_rand(10000, 9999999999999999);
           $p.= '<ul id="'.$id.'">'."\n";
geändert nach:

Code Auswählen Erweitern

         if(isset( $menue['subs']) && is_array($menue['subs']) && count($menue['subs']) > 0 )
          {
           $id = 'UL_'.mt_rand(10000, 9999999999999999);
           $p.= '<ul id="'.$id.'">'."\n";

Selbstsammerweise habe ich das meißte auf display:block gesetzt, trotzdem erscheinen die Untermenuepunkte neben- statt untereinander, wenn ich nach dem li den br Umbruch entferne!?

Code Auswählen Erweitern

             <div id="nav">
                <div id="nav-main">
                  <a id="page-navigation" class="noscreen noprint" name="page-navigation"></a>
                <div class="languages">
                 
                </div>

         
                             
<style type="text/css">
    nav2 {
    width: 100%;

-webkit-border-radius: 6px;
-moz-border-radius:6px;
border-radius: 6px;
border-left-radius: 6px;
z-Index:1000;

}
nav2 ul {


-webkit-border-radius: 6px;
-moz-border-radius:6px;
border-radius: 6px;
border-left-radius: 6px;
z-Index:1000;

text-align: left;
}
nav2 ul:after {
    display: block;
    font-size: 0;
    height: 0;
    visibility: hidden;
    z-Index:1000;

}
    nav2 ul,nav2 ul li{
    background-color: lightgray;

-webkit-border-radius: 6px;
-moz-border-radius:6px;
border-radius: 6px;
border-left-radius: 6px;
z-Index:1000;
text-align: left;  display:block;
}
    nav2 ul li {
    list-style: none;
    text-align: left;
    display: block;

    background-color: lightgray;
    z-Index:1000;
}
nav2 ul li a {
    text-decoration: none;
  display:block;
    color: #333;

    z-Index:1000;
    text-align: left;
}
nav2 ul li:hover > ul {
    visibility: visible;
    z-Index:1000;
    text-align: left;
}
nav2 ul li:hover  {
    background-color:lightgreen;
    text-align: left;
}
nav2 ul li ul{

    visibility: hidden;
    position: absolute;
    padding:0px;
    z-Index:1000;
    text-align: left;
       display:block;
}
nav2 ul li ul li{
   display:block;
    z-Index:1000;
    text-align: left;
}
</style>

<nav2>

            <ul>
<li><a href="home.html">Home</a>
</li>
<li><a href="Stories_Archive.html">Artikel</a>
<ul id="UL_8419168768452199">
<li><a href="/Stories_Archive.html">Artikel Archiv</a></li><br />
<li><a href="/Submit_News.html">Artikel schreiben</a></li><br />
</ul>
</li>
<li><a href="/Your_Account.html">Benutzerverwaltung</a>
<ul id="UL_5890608197082218">
<li><a href="/mydata.html">Einstellungen</a></li><br />
<li><a href="/Newsletter.html">Email-Abbonements</a></li><br />
<li><a href="/Lokale-op-myEntries.html">Ihre Lokaleintr&auml;ge</a></li><br />
<li><a href="/Lokale-op-myRatings.html">Ihre Bewertungen</a></li><br />
<li><a href="/Userinfo.html#auszeichnungen">Ihre Auszeichnungen</a></li><br />
<li><a href="/Userinfo.html#merkliste">Ihre Merkliste</a></li><br />
<li><a href="/Lokale-op-ratgeber-task-myRG.html">Ihre Ratgeber</a></li><br />
<li><a href="http://schmeckts.at/24R51.l">Ihr Stammgastbuch</a></li><br />
<li><a href="/Schedule-act-myevents.html">Meine Termine</a></li><br />
<li><a href="/Private_Messages.html">Private Nachrichten</a></li><br />
</ul>
</li>
<li><a href="Downloads.html">Download</a>
</li>
<li><a href="eBoard.html">Forum</a>
</li>
<li ><a href="Lokale.html">Lokale</a>
<ul id="UL_8390471516178668">
<li><a href="/Lokale-op-addEntry.html">Lokal anlegen</a></li><br />
<li><a href="/Lokale-op-ratgeber.html">Ratgeber</a></li><br />
<li><a href="/Lokale-op-ratgeber-task-add.html">Ratgeber hinzuf&uuml;gen</a></li><br />
<li><a href="/kategorien/">Kategorien</a></li><br />
<li><a href="/Top50.html">Top 50 Lokale</a></li><br />
<li><a href="/zertifikate/">Zertifikate</a></li><br />
</ul>
</li>
<li><a href="recipes.html">Rezepte</a>
</li>
<li><a href="Reviews.html">Testberichte</a>
</li>

   </ul>

        </nav2>

         
                </div>
     </div>     



Viele Grüße
Till

[Webfan]

...außerdem scheinen da html tags nicht wohlverschachtelt,...

[cihan]

Hallo,
wenn ich die Änderungen in meinem ersten Beitrag vornehme, dann passiert genau das, was ihr wollt... Andi hat das schön an Hand von Screenshots gezeigt... Wollt ihr das, was man auf den Screenshots sieht?

ihr habt noch immer das hier drin:

layout.css, Zeile 393

Code Auswählen Erweitern

display: inline; /* (en|de) Bugfix: IE - Doubled Float Margin Bug */
float: left;
/* (de) Abstand des ersten Buttons vom linken Rand  */
margin: 0 0 0 50px;
padding: 0;

Macht mal folgendes:

Ändere layout.css, Zeile 393 so:

#nav-main ul {
display: inline; /* (en|de) Bugfix: IE - Doubled Float Margin Bug */
float: left;
/* (de) Abstand des ersten Buttons vom linken Rand  */
margin: 0 0 0 0px;
padding: 0;
}

und dann dahinter das hier:

#nav-main {
padding-left: 50px;
}

Dann bekommt ihr das, was ihr auf den Screenshots sieht.

lg

[Webfan]

Hallo cihan,
ja jetzt weiß ich auch wo das Problem liegt:
Hatte den Abschnitt zwar auskommentiert, nav-main ul war jedoch in der layout.css doppelt vorhanden, weiter unten in der Datei war der selbe Abschnitt nochmal aus irgendwelchen Gründen, das hatte ich übersehen.
Peinlich.

Super, vielen Dank!
Ich bin zu Dank verpflichtet, Du erhälst in Kürze eine PM...

Viele Grüße
Till