Position eines Pulldownmenus

[Nel]

Guten Abend,

ich spiele ein bisschen mit folgendem Pulldown-Menu:
http://www.cssplay.co.uk/menus/final_drop.html

Das "Umstylen" stellt kein Problem da bist jetzt.
Denn jeglicher versuch es in der Mitte einer TD anzuzeigen scheitert.
Die Ursache dafür ist wohl: .menu li {float:left;position:relative;}.
Allerdings finde ich keine Lösung, die greift ohne das sie das Menu völlig ruiniert.
Ich bitte um Hilfe. :)

Danke!

Mfg
Nel

[Cyx23]

Hallo,

Denn jeglicher versuch es in der Mitte einer TD anzuzeigen scheitert.
Die Ursache dafür ist wohl: .menu li {float:left;position:relative;}.

Das mit der Mitte ist mir nicht ganz klar. Falls es dir dabei letztlich um seitlichen Abstand des Submenus geht ist wahrscheinlich an ähnlicher Stelle margin gefragt.

Falls du mehr umstricken möchtest, wäre mein Tipp, das Menu nach deinen Bedürfnissen komplett selbst zu entwickeln.

Sollen die Haupt-Menupunkte denn untereinander stehen, oder worum geht es dir?

Grüsse

Cyx23

--
CSS

[Nel]

Hi, also:

Das mit der Mitte ist mir nicht ganz klar. Falls es dir dabei letztlich um seitlichen Abstand des Submenus geht ist wahrscheinlich an ähnlicher Stelle margin gefragt.

Wie wäre das umzusetzen?

Falls du mehr umstricken möchtest, wäre mein Tipp, das Menu nach deinen Bedürfnissen komplett selbst zu entwickeln.

Naja, ich habe das ganze Menu in diverse Funktionen geschachtelt, weil die Ausgbae dynamisch aus eienr Textdatei heraus erstellt wird.
Wäre also eher unvorteilhaft, weil ich ja quasi schon fertig bin.Bis auf, dass das mit den Seitenabständen noch nicht so klappt.

Sollen die Haupt-Menupunkte denn untereinander stehen, oder worum geht es dir?

Nein, mir geht es nur allein darum die Ausgabe zentriert in einer td hinzubekommen.

Viele Dank.

Mfg
Nel

[Cyx23]

Hallo,

Wie wäre das umzusetzen?

Wo ist das Problem? margin-left ist nicht passend?

Nein, mir geht es nur allein darum die Ausgabe zentriert in einer td hinzubekommen.

Bei deinem Codebeispiel gibt es td nur für die alten IEs, geht es dir darum?
Was soll zentriert bedeuten, die Listen zentriert im entspr. Element? Wäre vmtl. auch wieder über margin zu regeln, ggf. noch schauen dass sich float nicht vererbt.

Grüsse

Cyx23

[Nel]

Also um es verständlicher zu machen:

ich will quasi folgende ausgabe erzwingen:

<td style="text-align:center">Link1 | Links 2 etc.</td>

oder auch:
________________________
|   Link1 | Link2 etc  |
------------------------

den momentane CSS Code des Menues kannst du aus dem ersten Post ersehen, ich habe nur einige Farbwerte geändert.

Meine "Marginversuche" haben leider uach nicht zum gewünschten ergebnis geführt.

Ich hoffe es ist klar was ich meine.

Es muss sich aber definitiv um eine Relative Positionierun handeln.
Sonst könnte ich auch einfach "left:" nutzen.

Danke soweit.

Mfg
Nel

[Cyx23]

Hallo,

<td style="text-align:center">Link1 | Links 2 etc.</td>

da mag es um die Eigenschaften von div.menu gehen, also z.B. margin. Ansonsten kannst du ja mal schauen, ob position oder float der Listen stören, und ob vielleicht ein zusätzlicher Container und Breitenangaben nötig sind oder ob div.menu dafür ausreicht.

Grüsse

Cyx23

[Nel]

Hallo,

<td style="text-align:center">Link1 | Links 2 etc.</td>

da mag es um die Eigenschaften von div.menu gehen, also z.B. margin. Ansonsten kannst du ja mal schauen, ob position oder float der Listen stören, und ob vielleicht ein zusätzlicher Container und Breitenangaben nötig sind oder ob div.menu dafür ausreicht.

Grüsse

Cyx23

Ja, das Problem liegt beim float.
Allerdings kann ich es nicht entfernen, da ansonsten das menu nichtm ehr funktioniert.
Ein weiter div container schafft da leider auch keine Abhilfe.
Und Margin scheint sich auch nicht wir gewünscht auszuwirken.
Schau dir bitte nochmal denn css Code des Menus an.
Wenn du es mal kopierst und in eine TD packst, verstehst du vlt eher wo das Problem ist.

Trotzdem vielen Dank.

Grüße
Nel

[Cyx23]

Hallo,

das td-Element benötigt eine Breitenangabe, darin ein Container mit einer kleineren Breite, die der Breite des "menu" entspricht.

Grüsse

Cyx23

[Nel]

Hallo,

das td-Element benötigt eine Breitenangabe, darin ein Container mit einer kleineren Breite, die der Breite des "menu" entspricht.

Grüsse

Cyx23

Hallo,

da das Menu dynamisch generiert wird und über ein crm editierbar ist, brauche ich aber eine relative Angabe, damit das Menu auch bei Veränderungen konstant zentrtiert bleibt...

Deshalb sollte der Container innerhalb der td schon der Kompletten td größe entsprechen.

Mfg
Nel

[Cyx23]

Hallo,

Deshalb sollte der Container innerhalb der td schon der Kompletten td größe entsprechen.

dann wäre der Container überflüssig, zentriert werden kann oder muß da ja auch nichts mehr. Vielleicht baust du dir erstmal eine einfache Navigation ohne Submenus auf, damit klar wird, was du zentrieren möchtest, vielleicht meinst du ja die einzelnen Menu-Punkte? Aber eigentlich egal, wir werden wohl wieder bei margin, ggf. auch text-align, landen.

brauche ich aber eine relative Angabe, damit das Menu auch bei Veränderungen konstant zentrtiert bleibt...

Kann ich nicht nachvollziehen, die Möglichkeiten von margin zum zentrieren mit CSS sind dir bekannt, vgl. Abstand? Ansonsten bliebe noch die stimmige Ausgabe irgendwelcher Abstände, dynamisch generiert vom "crm" (Customer Relationship Management?).

Andere Tricksereien über "position" oder a la Inhalt Zentrieren / zentriertes DIV bzw. Zentriertes Div für alle Browser sind auch noch möglich, aber nicht m.E. pauschal zu empfehlen.

Grüsse

Cyx23

[Nel]

Hallo,

Deshalb sollte der Container innerhalb der td schon der Kompletten td größe entsprechen.

dann wäre der Container überflüssig, zentriert werden kann oder muß da ja auch nichts mehr. Vielleicht baust du dir erstmal eine einfache Navigation ohne Submenus auf, damit klar wird, was du zentrieren möchtest, vielleicht meinst du ja die einzelnen Menu-Punkte? Aber eigentlich egal, wir werden wohl wieder bei margin, ggf. auch text-align, landen.

Genau.Jetzt hast du es. Sorry, dass ich nicht die richtige Formulierung gefunden habe.
Hier gehts es nicht um Position des Submenus sondern der Hauptmenupunkte...
Ich dachte das wäre du die schöne Zeichnung klar geworden.Mein Fehler...

»»Ansonsten bliebe noch die stimmige Ausgabe irgendwelcher Abstände, dynamisch generiert vom "crm" (Customer Relationship Management?).

Sorry ich meinte natürlich cms. :)

Ich hoffe das ist jetzt der Schlüssel zur Hilfe. :D

Mfg
Nel

[Cyx23]

Hallo,

Ich hoffe das ist jetzt der Schlüssel zur Hilfe. :D

abgesehen davon, dass das hier das _self_Forum ist, hast du vmtl. eh schon alle relevanten Informationen, "wir werden wohl wieder bei margin, ggf. auch text-align, landen.".

Also schauen, welche Elemente weiter Innen geeignet sind, ggf. Container einbauen. Z.B. .menu ul li a {text-align:center} sollte schon so Auswirkungen haben, ohne dass Maßnahmen wegen float oder Container nötig wären.

Grüsse

Cyx23

[Nel]

Hey,
ich habs ja bereits versucht aber ich bekomms nicht hin.Und abgesehn davon zeigt text-align gar keine Auswirkungen und margin die falschen.Vieleicht hab ich einfach shcon zu lange draufgeguckt und bin deshalb so Blind.
Vieleicht hilft es ja wenn ich dir mal den Code poste:

css auszug:

.menu { position:relative; z-index:100;width:100%;height:100%;text-align:center;}  
/* hack to correct IE5.5 faulty box model */  
* html .menu {width:746px; w\idth:745px;}  
/* remove all the bullets, borders and padding from the default list styling */  
.menu ul {padding:0;margin:0;list-style-type:none;}  
  
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */  
.menu li {float:left;position:relative;}  
/* style the links for the top level */  
.menu a, .menu a:visited {text-decoration:inherit; background:#FFF; color: #ff0000; padding-left:10px; line-height:29px;}  
/* a hack so that IE5.5 faulty box model is corrected */  
* html .menu a, * html .menu a:visited {width:149px; w\idth:138px;}  
  
/* style the second level background */  
.menu ul ul a.drop, .menu ul ul a.drop:visited {background:#d4d8bd url(http://www.cssplay.co.uk/menus/breadcrumbs/grey-arrow.gif) no-repeat 130px center;}  
/* style the second level hover */  
.menu ul ul a.drop:hover{background:#c9ba65 url(http://www.cssplay.co.uk/menus/breadcrumbs/blue-arrow.gif) no-repeat 130px center;}  
.menu ul ul :hover > a.drop {background:#c9ba65 url(http://www.cssplay.co.uk/menus/breadcrumbs/blue-arrow.gif) no-repeat 130px center;}  
/* style the third level background */  
.menu ul ul ul a, .menu ul ul ul a:visited {text-decoration: none;  
  color: #ff0000;}  
/* style the third level hover */  
.menu ul ul ul a:hover {text-decoration: none;  
  color: #ff0000;}  
  
  
/* hide the sub levels and give them a positon absolute so that they take up no room */  
.menu ul ul {visibility:hidden;position:absolute;height:0;top:31px;left:0; width:149px;border-top:1px solid #000;}  
/* another hack for IE5.5 */  
* html .menu ul ul {top:30px;t\op:31px;}  
  
/* position the third level flyout menu */  
.menu ul ul ul{left:149px; top:-1px; width:149px;}  
  
/* position the third level flyout menu for a left flyout */  
.menu ul ul ul.left {left:-149px;}  
  
/* style the table so that it takes no ppart in the layout - required for IE to work */  
.menu table {position:absolute; top:0; left:0; border-collapse:collapse;;}  
  
/* style the second level links */  
.menu ul ul a, .menu ul ul a:visited {text-decoration: none;  
  color: #ff0000; height:auto; line-height:1em; padding:5px 10px; width:128px;border-width:0 1px 1px 1px;}  
/* yet another hack for IE5.5 */  
* html .menu ul ul a, * html .menu ul ul a:visited {width:150px;w\idth:128px;}  
  
/* style the top level hover */  
.menu a:hover, .menu ul ul a:hover{text-decoration: none;  
  color: #ff0000;}  
.menu :hover > a, .menu ul ul :hover > a {text-decoration: none;  
  color: #ff0000;}  
  
/* make the second level visible when hover on first level list OR link */  
.menu ul li:hover ul,  
.menu ul a:hover ul{visibility:visible; }  
/* keep the third level hidden when you hover on first level list OR link */  
.menu ul :hover ul ul{visibility:hidden;}  
/* make the third level visible when you hover over second level list OR link */  
.menu ul :hover ul :hover ul{ visibility:visible;}

tpl. auszug:

 <tr>  
  <td width="" style="border:2px solid #000000;border-left:0px;border-right:0px;text-align:center" height="" colspan="3">  
   <? cl_sect("Navi"); ?>  
  </td>  
 </tr>

Funktionsauszug:

function cl_sect($list)  
{  
    $lang= handlelang();  
    $actlang= $_GET['lang'];  
    $lists="---$list"."tx---";  
    $links = "---$list"."links---";  
    $listres = array();  
 $linkres = array();  
 $listlinetoexp = array_search($lists, $lang);  
 $linklinetoexp = array_search($links, $lang);  
 $listres = explode("::", $lang[$listlinetoexp+1]);  
 $linkres = explode("::", $lang[$linklinetoexp+1]);  
 echo "<div class='menu'><ul>";  
    foreach($listres as $key => $resulttext) {  
      $result = "<li>&nbsp &#124<a class='red' href='index.php?lang=$actlang&site=$linkres[$key]'>$resulttext</a></li>";  
     if (preg_match("/-subs/i",$resulttext)) {  
         $searchsubtx= "---$resulttext---";  
         $searchsublinks = "---$resulttext"."-links---";  
      $resulttext= preg_replace("/-subs/i","",$resulttext);  
      $subtextline = array_search($searchsubtx, $lang);  
      $sublinksline = array_search($searchsublinks, $lang);  
      $subtextres = explode("::", $lang[$subtextline+1]);  
      $sublinkres = explode("::", $lang[$sublinksline+1]);  
      $result= "  
    <li>&nbsp &#124<a class='drop' href='index.php?lang=$actlang&site=$linkres[$key]'>$resulttext<small>&#9660;</small></a>  
    <ul>";  
      foreach($subtextres as $subkey => $subresulttext) {  
       $result = $result . "  
    <li><a style='display:block;' href='index.php?lang=$actlang&site=$linkres[$key]&cat=$sublinkres[$subkey]'>$subresulttext</a></li>  
    ";  
   }  
   $result= $result . "  
       </ul>  
    </li>";  
     }  
  if ($key==0) {  
     if (preg_match("/<li>/i",$result)) {  
       $result = preg_replace("/ &#124/i","",$result);  
     }  
  
        }  
     echo "$result";  
    }  
    echo"</ul></div>";  
}

So ich hoffe das hilft.Das ist jetzt nur der momentane Auszug. Habs schon mit allen möglichen Varianten durch...

Danke für die Hilfe.

Mfg
Nel

[Cyx23]

Hallo,

Vieleicht hilft es ja wenn ich dir mal den Code poste:

in dem Fall ist vielleicht einfacher wenn du ein Beispiel online hast. Beim Ausgangscode bzw. deiner menu-Vorlage reicht .menu a {text-align:center}, um den Menutext zu zentrieren. Falls das bei dir nicht klappt oder wenn du die menu-Breiten selbst verändern willst bleibt dir vmtl. noch die Breite der li-Elemente anzupassen.

Grüsse

Cyx23

[Nel]

Hallo,

Vieleicht hilft es ja wenn ich dir mal den Code poste:

in dem Fall ist vielleicht einfacher wenn du ein Beispiel online hast. Beim Ausgangscode bzw. deiner menu-Vorlage reicht .menu a {text-align:center}, um den Menutext zu zentrieren. Falls das bei dir nicht klappt oder wenn du die menu-Breiten selbst verändern willst bleibt dir vmtl. noch die Breite der li-Elemente anzupassen.

Grüsse

Cyx23

Das klappt nicht.
Und auch die <li> breit anzupassen macht keinen Unterschied...

Ich habe hier mal ein einfaches Beispiel ohne den php code hochgeladen.
test.html

Ich weiß, im Moment ein heilloses durcheinander im CSS Teil.
Aber das ist das Resultat etlicher erfolgloser Versuche. :)

Mfg
Nel

[Cyx23]

Hallo,

Ich weiß, im Moment ein heilloses durcheinander im CSS Teil.
Aber das ist das Resultat etlicher erfolgloser Versuche. :)

Da ist es doch naheliegend, alles nochmal sauber Stück für Stück selbst aufzubauen und auch zu schauen, dass der Code valide ist.

Aber vielleicht kommst du auch mit .menu ul a {width:200px;display:block} weiter.

Grüsse

Cyx23