• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Drop-Down-Menü funktioniert nicht, wie es sollte

Status
Für weitere Antworten geschlossen.

Keyno

Neues Mitglied
Hallo Profis/Anfänger von html.de !

Ich bin gerade dabei eine Seite für die Firma meines Vaters zu "kreieren".
Sieht auch mit 'nem fertigen Template von styleshout.com nicht 'mal so schlecht aus :wink:, leider schaff ich's aber nicht, dieses Drop-Down-Menü zum Funktionieren zu bringen :?:

Hier der Inhalt der index.html:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">    
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="images/style.css" type="text/css" />
<title>Finanz- Beratungs- und Vermittlungs GmbH</title>
</head>
<body>
<div id="wrap"> 
    <div id="header">
        <h1 id="logo"><a href="index.html" alt="Startseite"><b>F</b>inanz- Beratungs- und Vermittlungs <span>GmbH</span></a></h1>
        <h2 id="slogan">Wir bringen Sie zum Erfolg!</h2>
    </div>
    <div id="menu">
        <ul id="navi">
            <li id="current"><a href="index.html">Startseite</a></li>
            <li><a href="index.html">Das Unternehmen</a>
                <ul> 
                    <li><a href="index.html">Geschichte</a></li>
                </ul>
            </li>
            <li><a href="index.html">Produkte</a></li>
            <li><a href="index.html">Termine</a></li>
            <li><a href="index.html">Kontakt</a></li>
        </ul>
    </div>
    <div id="content-wrap">      
              <div id="main" align="center"><br><br><br>
                <p>Jeder bezahlt in seinem Leben ein Haus, leider nicht das <b>Eigene</b><br />
                Diese Pr&auml;sentation zeigt Ihnen wie Sie Ihre W&uuml;nsche nach Wohneigentum erf&uuml;llen k&ouml;nnen. </p>
                <p><h2><b><a href="./immobilienerwerb/index.html">Pr&auml;sentation starten</b></a></p></h2><br><div id=strich></div>
                <p>Auch für die Weiterfinanzierung Ihrer Immobilie bieten wir Ihnen eine Möglichkeit,<br>
                das <h2><b><a href="./forwarddarlehen/index.html">Forward-Darlehen</b></h2></p><br><div id=strich></div>
                <p><h2><b><a href="./immobilienerwerb/immorechner.xls">Hier k&ouml;nnen Sie den FBV Immobilienrechner downloaden!</b></h2></a></p>
                <p><a href="./immobilienerwerb/immorechner.xls"><img src="./immobilienerwerb/immorechner.JPG" alt="FBV Immobilienrechner"></a>
              </div>
    </div>
</div>
        <div id="footer">
            <p>
            &copy; Copyright 2009 <strong>Finanz- Beratungs- und Vermittlungs GmbH</strong> Design by <a href="http://styleshout.com">styleshout.com</a>&nbsp;&nbsp;  
            </p>        
        </div>    
</body>
</html>
Hier der Inhalt der CSS-Datei:
Code:
body { margin: 0; padding: 0;font: 71%/1.5em  Verdana, 'Trebuchet MS', Arial, Sans-serif;background: url(headerbg.gif) repeat-x;color: #666666;text-align: center;    }

a {color: #CCC; text-decoration: none;}
a:hover {color: #CCC;}

h1, h2, h3 {font: 1em 'Trebuchet MS', Tahoma, Sans-serif;color: #555;}
h1 { font-size: 1.5em; }
h2 { font-size: 1.3em; }
h3 { font-size: 1.2em; }
p, h1, h2, h3 { margin: 10px 15px; }

#wrap {margin: 0 auto;width: 850px;text-align: left;    background: #FFF;}
#header {position: relative;background: url(headerbg.gif) repeat-x 0% 0%;height: 84px;}
#header a {background-color: none;}
#header h1#logo {position: absolute;margin: 0; padding: 0;font: bolder 4.1em 'Trebuchet MS', Arial, Sans-serif;letter-spacing: -3px;color: #CCC;top: 0; left: 5px;right: -5px;}
#header h2#slogan {position: absolute;margin: 0; padding: 0;font: bold 1em 'Trebuchet MS', Arial, Sans-serif;text-transform: none;color: #FFF;top: 48px; left:65px;}
#main {padding: 0;width: 100%;}
#main a {color: #808080;}
#main a:hover {color: #000000; background-color: #F3F3F3; }
#strich {border-bottom: 4px solid #808080;}
#footer {clear: both;background: #FFF url(footerbg.gif) repeat-x left top;border-top: 1px solid #F2F2F2;text-align: center;    height: 50px;}
#footer a {text-decoration: none;font-weight: bold;}
#menu {clear: both;margin: 0; padding: 0;}
#menu a {color: #CCC; text-decoration: none;}
#menu ul {position: relative; bottom: 4px;float: left;font: bold 1.4em 'Trebuchet MS', Tahoma, Arial, Sans-serif;width: 850px;border: 1px solid #808080;border-width: 0 0 4px 0;    list-style: none;}
#menu ul li a{position: relative; bottom: -4px;float: left;color: #808080;padding: 0px 10px;text-decoration: none;background: white url(menudivide.gif) repeat-y right top; border-bottom: 4px solid #808080;}
#menu ul li a:hover{color: black; background-color: #F3F3F3; border-bottom: 4px solid #FFA600;}
#menu ul li#current a{color: #333; background-color: #F3F3F3; border-bottom: 4px solid #FFA600;}

#navi, #navi ul { list-style-type:none; margin:0; padding:0; }
#navi li ul { display:none; }
#navi li:hover ul { display:block; }
Das Problem ist jetzt, dass wenn man darüber geht, sich das Menü zwar öffnet, doch leider schiebt es die, die danach kommen nach unten, die Schrift ist noch viel größer :-D und irgendwie stimmt's einfach nicht ;-)

Vielleicht kann mir ja jemand helfen8)

Grüsse
Keyno
 
Naja, was erwartest Du, wenn Du den ausklappenden Menüpunkt zum Verhalten eines Block-Element zwingst? Dann gibts über und unter dem Element natürlich einen Zeilenumbruch.

Und die Schriftgröße ist 1.4em im oberen ul und im unteren davon 1.4em, also 1.4 mal größer als im einschließenden ul. Denn em bezieht sich immer auf die Schriftgröße des Elternelements. "#menu ul" trifft aber auf beide Ebenenen zu, sowohl auf "#menu > ul", als auch auf "#menu > ul > ul".

P.S.: Gut, dass Du die Site hochgeladen hast. Das hat Dir meine Antwort eingebracht :-)
 
Ok, das mit der Schrift habe ich dann wohl verstanden, aber wie kann mir vielleicht doch jemand ein bisschen ärger erklären, wie ich das jetzt hinbekomme?

Ich hab's nämlich nicht so kapiert, wie ich das jetzt behebe :)

Wäre echt super nett ;Jump

Danke schon 'mal für eine Antwort :-D

MfG Keyno
 
Naja, Du solltest wissen, was ein Block-Element ist und wie es sich verhält. Wenn jemand Deinen Menüpunkt überfährt, machst Du aus der auszuklappenden Liste ein Block-Element. Das Verhalten von Block-Elementen ist, dass drüber und drunter ein Zeilenumbruch ist und die Elemente sich über die komplette Breite erstrecken.
Ein Inline-Element kannst Du nicht draus machen, weil Du dann keine Größen mehr festlegen kannst.

Also bleibt nur noch eines: Du musst das Element aus dem normalen Textfluss nehmen. Welche Möglichkeiten gibts da? Richtig, float und position. float bringts hier nicht wirklich, also nimmst Du position:absolute.
 
Danke!
Leider hänge ich immer noch:evil:

Ich habe jetzt
Code:
#menu ul {position: relative; bottom: 4px;float: left;font: bold 1.4em 'Trebuchet MS', Tahoma, Arial, Sans-serif;width: 850px;border: 1px solid #808080;border-width: 0 0 4px 0;    list-style: none;}
#menu ul li a{position: relative; bottom: -4px;float: left;color: #808080;padding: 0px 10px;text-decoration: none;background: white url(menudivide.gif) repeat-y right top; border-bottom: 4px solid #808080;}
in
Code:
#menu ul {position: absolute; font: bold 1.4em 'Trebuchet MS', Tahoma, Arial, Sans-serif;width: 850px;border: 1px solid #808080;border-width: 0 0 4px 0;}
#menu ul li a{position: absolute; color: #808080;text-decoration: none; background: white url(menudivide.gif) repeat-y right top; border-bottom: 4px solid #808080;}
geändert.

Aber irgendwie stimmt das noch lange nicht:-D (guckt auf die Page :D)


MfG Keyno
 
Natürlich stimmt das nicht. Jetzt weist Du ja auch den Menüpunkten der obersten Ebene position:absolute zu. Das sollst Du aber nur bei denen machen, die ausklappen!
 
Achso! Danke!!
Ich versuchs gleich mal :P

Edit:
Ok, funktioniert teilweise schon, die andern verschiebt's nicht mehr, leider geht das von links nach rechts und die hängen nicht untereinder, sondern nebeneinander..

Ich bin noch nicht so erfahren, dass ich jetzt wüsste, was dagegen zu machen :)
Also bitte ich wieder um Hilfe.

[
Ich habe geändert:
Code:
#navi li ul { display:none;}
zu
Code:
#navi li ul { display:none; position:absolute; bottom: -35px;}
]
 
Zuletzt bearbeitet:
ergänzend zu deiner sache kannst du noch das bei #navi li:hover ul
einfügen ...

#navi li:hover ul {display:block; width:140px; margin-left:93px;}

Leider weis ich nicht ob das sauber ist, aber bei mir hats funktioniert...

Liebe Grüße
icon12.gif


iplay
 
Klappt fast :)
Dadurch wird aber irgendwie wohl meine Angabe bei
Code:
#navi li ul {bottom: -35px;}
zu "Müll".
Jetzt müsste das nämlich für jedes einzigste Menü angepasst werden.
Könnte ich auch machen, wäre aber äußerst umständlich, ich aktualisier' mal wieder die online Page (Finanz- Beratungs- und Vermittlungs GmbH).

Also, wer ein Tipp hat, immer gerne her damit :-D

Danke schon 'mal für die Hilfe!

Edit: mir fiel grade auf, dass der IE auch so einige Bugs bringt :(
 
Zuletzt bearbeitet:
ALso was ich jetzt noch sehe ist, dass die Links sowohl "float" als auch "position" haben. Das beißt sich. Schmeiß das float raus.
 
*seufz*

Entweder alles oder gar nichts, oder?

Bisher war immer Dein Problem, dass Du alles, was Du für die erste Ebene des Menüs einstellst, auch immer für alle anderen Ebenen einstellst. Wie jetzt auch wieder. Die erste Ebene ist natürlich was ganz anderes als die anderen Ebenen.
Ich mag mich nicht klar ausgedrückt haben und meinte natürlich die "ul#navi li ul li a", nicht aber die "ul#navi li a".
Die oberste Ebene muss floaten und darf kein position haben. Die anderen Ebenen dürfen nicht floaten, sondern brauchen position.

Lies doch mal nach, was float uns position machen, dann hättest Du selber drauf kommen können, dass ich die oberste Ebene des Menüs gar nicht gemein haben kann.
 
Ok, das ist ja eigentlich auch nicht das große Problem, wie ich das gerade sehe.
Ich habe mal das float von #menu ul rausgenommen, beim Andern kommt so was wie ichs gerade eben hatte raus.
Aber das Problem ist eigentlich, dass die Hover Effekte sich nicht unter dem aktuellen Link befinden.

Außerdem müsst ihr das mal mit dem IE angucken --> reinstes Chaos :D
Trotzdem schon 'mal ein Danke von mir !!
 
Irgendwo hast Du doch noch "bottom" drin bei den Menüs, oder? Das macht ja nun auch nicht wirklich Sinn. "bottom" beschreibt den Abstand vom unteren Rand. Ich wüsste ehrlich gesagt nicht, von wo er das in diesem Falle misst. Wenn, dann musst Du den Abstand vom oberen Listenelement mit "top" definieren.

Das mit der Position von links hab ich bisher noch nicht gefunden, aber da muss irgendwo ein "left" oder "margin-left" oder sowas sein. Oder Du hast ein "position:absolute" in Verbindung mit einem "left" drin, und das für alle Menüs der zweiten Ebene definiert, so dass sie alle am selben Fleck stehen.

Ich habs...wieder das alte Problem!

Dein "#menu ul li a" gilt natürlich sowohl für die erste Ebene als auch für die andere Ebene. Du musst den Selektor ändern. Denn wie schon gesagt, werden die beiden Ebenen nicht gleich formatiert. Die oberste Ebene bekommt float, die darunter position:relative.

Die Reihenfolge machts. Für die oberste Ebene brauchst Du ein "#menu ul li a" oder "ul#navi li a", danach im Stylesheet muss noch ein "#menu ul li ul ..." oder "ul#navi li ul ..." folgen, in dem Du die Werte für die darüberliegende Ebene überschreibst.
 
Zuletzt bearbeitet von einem Moderator:
Ok, das hab ich kapiert, danke !! Hat sich auch schon verbssert
Doch:
Leider hängt's jetzt rechts daneben, nicht darunter..
Das Chaos im IE bleibt immer noch erhalten :D

Ich hasse M$ :[
Bald kommt mein Mac^^

Gibt's eigentlich auch so 'was, wo man die Seite auf unterschiedliche Browser überprüfen kann? Ich wotte auch gerne wissen, wie die Seite mit FF 2 oder IE 6 aussieht..
FF 2 wird schließlich auch noch häufig verwendet :)
 
Leider hängt's jetzt rechts daneben, nicht darunter..
Na, das findest Du jetzt sicher auch selber!?
Installier Dir für den Firefox das Firebug-Plugin, damit lässt sich sowas wunderschön suchen, finden und austesten.

Das Chaos im IE bleibt immer noch erhalten
Mal gucken...
Nimm mal das float UND das position aus "#menu ul" raus, die brauchst Du eh nicht.
Zumindest nicht auf oberster Ebene. Auf den unteren brauchst Du das position natürlich.

Ich hasse M$ :[
Bald kommt mein Mac
Das ändert auch nichts dran, dass Websites auch im IE funktionieren müssen.

Gibt's eigentlich auch so 'was, wo man die Seite auf unterschiedliche Browser überprüfen kann?
Ja. Check Browser Compatibility, Cross Platform Browser Test - Browsershots

FF 2 wird schließlich auch noch häufig verwendet :)
Nicht, dass das übermäßig wichtig wäre, ich hab hier auch noch nen FF1.5, manch einer nutzt lieber Lynx usw...
 
Na, das findest Du jetzt sicher auch selber!?
Installier Dir für den Firefox das Firebug-Plugin, damit lässt sich sowas wunderschön suchen, finden und austesten.
Firebug will, dass ich die Hälfte von der CSS Datei lösch' :D

Mal gucken...
Nimm mal das float UND das position aus "#menu ul" raus, die brauchst Du eh nicht.
Zumindest nicht auf oberster Ebene. Auf den unteren brauchst Du das position natürlich.
Ne, will nicht klappen^^

Das ändert auch nichts dran, dass Websites auch im IE funktionieren müssen.
Ich hasse M$ trotzdem :)

Danke !

Nicht, dass das übermäßig wichtig wäre, ich hab hier auch noch nen FF1.5, manch einer nutzt lieber Lynx usw...
"Cool"
 
Mal gucken...
Nimm mal das float UND das position aus "#menu ul" raus, die brauchst Du eh nicht.
Zumindest nicht auf oberster Ebene. Auf den unteren brauchst Du das position natürlich.
Ne, will nicht klappen^^

Hallo Keyno,

ich sitze selbst gerade an einem Dropdown-Menü in ungefähr der gleichen Art.
Hab mir Deinen Code nicht weiter angeschaut - ich habe bei mir nur:
Code:
#menu ul {
    margin:0;
    padding:0;
    list-style-type:none;
 }
#menu ul li {
    position:relative;
    margin:0;
    padding:0;
    display:block !important;
    display:inline;
}
Der IE braucht das display:inline, beim Firefox schießt mir das das Layout, daher
das !important, denn das wird vom IE ignoriert. Alternative wären Conditional Comments.


Browsershots hilft hier nur bedingt, da man damit das Ausklappen nicht testen kann...

Du wirst auf jeden Fall etwas wie Whatever:hover brauchen...
(damit kämpfe ich gerade, da es im IE für den es gemacht ist, trotzdem nicht funktioniert)

Grüße
Bernhard
 
Hallo Keyno,

ich sitze selbst gerade an einem Dropdown-Menü in ungefähr der gleichen Art.
Hab mir Deinen Code nicht weiter angeschaut - ich habe bei mir nur:
Code:
#menu ul {
    margin:0;
    padding:0;
    list-style-type:none;
 }
#menu ul li {
    position:relative;
    margin:0;
    padding:0;
    display:block !important;
    display:inline;
}
Der IE braucht das display:inline, beim Firefox schießt mir das das Layout, daher
das !important, denn das wird vom IE ignoriert. Alternative wären Conditional Comments.



Browsershots hilft hier nur bedingt, da man damit das Ausklappen nicht testen kann...

Du wirst auf jeden Fall etwas wie Whatever:hover brauchen...
(damit kämpfe ich gerade, da es im IE für den es gemacht ist, trotzdem nicht funktioniert)

Grüße
Bernhard
Nett von dir, leider bringt mir dein CSS Code auch nichts :(
 
Status
Für weitere Antworten geschlossen.
Zurück
Oben