Dropdownmenu mit Ebenen immer an fixer Position

[oliveramberg]

Hallo
Habe mir selber ein Ei gelegt. Designentwurf gemacht, Kunde war begeistert und ich habe dann bemerkt, dass ich vielleicht ein wenig mehr an die Umsetzung hätte denken müssen nachdem er plötzlich auf ein zentriertes Design schwenken wollte

Das Design der Website soll immer zentriert sein. Es gibt eine grafische Navigation. Bei Anklicken eine Menupunktes soll das ein Dropdownmenu erscheinen. Das Problem ist nun, dass das Dropdown ja immer unter dem jeweiligen Menupunkt aufgehen muss. Da aber durch die Zentrierung das mal am Punkt X oder am Punkt Y sein kann, zerbreche ich mir den Kopf wie ich das am besten lösen könnte.

Würde mich über Tipps und Anregungen freuen!

[oliveramberg]

Scheint niemand eine Lösung zu kennen

[Mich@el]

Da aber durch die Zentrierung das mal am Punkt X oder am Punkt Y sein kann, zerbreche ich mir den Kopf wie ich das am besten lösen könnte.

Ich kapier diesen Satz nicht!?

Kannst Du das vielleicht noch mal anders beschreiben?

Grüße
Michael

[oliveramberg]

Nun wenn ich im Dreamweaver ein solches Dropdown in einem Layer anlege kann ich zwar eine Postion bestimmen die ist aber fix. Da das Design ja zentriert ist und je nach Bildschirmgrösse irgendwo hängt, kann es sein, dass das Drowdown dann irgendwo aufgeht, aber nicht unter dem eigentlichen Menupunkt.

[321]

Kannst Du im DW nicht bestimmen, dass es center sein soll?

Das Prob dürfte aber sein, dass es sich von den Schaltflächen links und rechts entfernt und zugeht, wenn Du 'rüberfährst' mit der Maus.
Evt. hilft es, wenn Du es entspr. breiter machst und die Auswahlliste darin zentrierst.

[Mich@el]

Nun wenn ich im Dreamweaver ein solches Dropdown in einem Layer anlege kann ich zwar eine Postion bestimmen die ist aber fix. Da das Design ja zentriert ist und je nach Bildschirmgrösse irgendwo hängt, kann es sein, dass das Drowdown dann irgendwo aufgeht, aber nicht unter dem eigentlichen Menupunkt.

Vielleicht reden wir noch einander vorbei! Ich habe das jetzt eben mal an einer Navigation in DW getestet. Ist jetzt keine Dropdown sondern ein Flyout Menü. Aber das dürfte jetzt nicht das Problem sein.
Ich habe mir folgende Navi in HTML angelegt:

<div id="Layer1"><P><div class="menu">
<ul>
<li><a href="../index.html">Start</a></li>
<li><a href="#nogo">solar-exklusiv</a></li>
<li class="sub"><a href="#nogo">Wissenswertes »<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
    <li><a href="../index.html">Varianten</a></li>
    <li><a href="../index.html">Förderung</a></li>
    <li><a href="../index.html">Module</a></li>
    <li><a href="../index.html">Modultypen</a></li>
    <li class="sub"><a href="#nogo">Wechselrichter »<!--[if IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul>
            <li><a href="../index.html">Powador 1501xi</a></li>
            <li><a href="#nogo">Powador 2500xi</a></li>
            <li><a href="#nogo">Powador 3500xi</a></li>
            <li><a href="#nogo">Powador 4000xi</a></li>
            <li><a href="#nogo">Powador 4500xi</a></li>
            <li><a href="#nogo">Powador 5000xi</a></li>
        </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]--><li><a href="#nogo">F.A.Q.</a></li>
    <li><a href="#nogo">Downloads</a></li>
    </ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
<li><a href="#nogo">Leistungsprofil</a></li>
<li><a href="#nogo">Produktpalette</a></li>
<li><a href="#nogo">Referenzen</a></li>
<li class="sub"><a href="#nogo">Kontakt »<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
    <li><a href="../index.html">Impressum</a>
    </li>
    </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#nogo">hier sind wir</a></li>
<li><a href="#nogo">Partner</a></li>
<li><a href="#nogo">Termine</a></li>
<li><a href="#nogo">Presse</a></li>
</ul>
</div>&nbsp;</P></div> 

Und dann mit CSS den nötigen Schliff verpasst:

.menu {
z-index:1000;
font-size:90%;
}

.menu ul {
padding:0;
margin:0;
list-style-type:none;
width:150px;
}
* html .menu ul {margin-left:-16px; margin-left:0;}
.menu li {
position:relative;
background:#FFFF0A;
height:26px;
}

.menu table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em;}

.menu a, .menu a:visited {
border-left:0px solid #fff; border-right:1px solid #fff; border-top:0px solid #fff; border-bottom:1px solid #fff; display:block; 
font-family: arial,verdana,helvetica,sans-serif;
text-decoration:none;
height:25px;
line-height:25px;
width:149px;
color:#000;
text-indent:5px;

}

* html .menu a, * html .menu a:visited {background:#FF8C1A; width:150px; w\idth:149px;}
/* style the link hover */
* html .menu a:hover {color:#fff; background:#0A0AFF;}

.menu :hover > a {
color:#fff; 
background:#949e7c;
}

.menu ul ul {
visibility:hidden;
position:absolute;
top:0;
left:150px; 
}
.menu ul :hover ul{
visibility:visible;
}
.menu ul :hover ul ul{
visibility:hidden;
}
.menu ul :hover ul :hover ul ul{
visibility:hidden;
}
.menu ul :hover ul :hover ul{ 
visibility:visible;
}
.menu ul :hover ul :hover ul :hover ul { 
visibility:visible;
}
</style>
<!--[if IE 7]>
<style type="text/css">
.menu li {float:left;} 

Und dann verstehe ich Dein Problem nicht. Die Links gehen da auf, wo sie auch aufgehen sollen?! Unter dem Menüpunkt an dem ich´s auch eingestellt habe.
Bin ich jetzt Deinem Problem ein wenig näher gekommen?

Grüße
Michael

[321]

Ich verstand es so wie im Anhang ...

[Mich@el]

Im ersten Anhang (Screenshot) von oliveramberg sind die Dropdown Menüs nicht verschoben!?

[Presssack]

Hi

kurze zwischen Frage:
Warum musst du im IE 6 eine Tabelle drumhängen

<!--[if lte IE 6]></td></tr></table></a><![endif]-->

- habs nicht bei mir getestet vielleicht hätt ichs da dann schon gesehen.

und was hat es mit dem Tag für IE 7 auf sich?

Gruß
Presssack

[oliveramberg]

Danke Euch für Eure Inputs. Das Problem ist ja auch, dass ein Ebenenkonstrukt machen wollte und ich nicht weiss, wie ich der Ebene sagen kann, dass sie sich immer unter den entsprechenden Menupunkt zu klemmen hat, egal wo der steht.

[Mich@el]

Jetzt verstehe ich, was Du meinst. Da ich allerdings einen anderen Weg zum Erstellen einer Navigation gehe, bin ich hier überfragt.
Ist aber eine sehr interessante Frage! Und ich hoffe, wir erfahren die Lösung!

Grüße
Michael

[oliveramberg]

Ich werde mir wahrscheinlich dieses Paket anlachen.

[Mich@el]

Ich werde mir wahrscheinlich dieses Paket anlachen.

Das hört sich gut an! Hat einer von Euch die Software schon im Gebrauch?