Hey liebes Forum,

ich sitze zurzeit an einem Projekt und komme bei einem Problem mit einem DropDown Menü nicht weiter.

Es ist hier eingebunden in die Homepage zu sehen. Der Link "Über uns" sollte mit Drop Down sein.

Das CSS der Navigation ist folgendes:

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71

ul#rightnav {     margin-top: 151px;     text-align: left; }   ul#leftnav {     margin-top: 65px;     text-align: right; }   ul#rightnav, #leftnav {     margin: 0;     padding: 0;     list-style-type: none;     font-family: Arial, Helvetica, sans-serif;     font-size: 12px;     line-height: 25px;     font-weight: bold;     color: #CECFD0;     text-decoration: none;     border: 0;     position: relativ;     display: block;     width: 200px;     height: 25px; }   ul#rightnav, #leftnav a {     text-decoration: none;     display: inline-block;     width: 100%;     color: #A0A0A0;     border: 0;     border-bottom: 5px solid #C10A0A; }   ul#rightnav, #leftnav a:hover {     color: #A0A0A0;     text-decoration: none;     background-color: #FFFFFF;     border: 0;     border-bottom: 5px solid #FFFFFF; }   ul#rightnav, #leftnav li {     margin: 0;     position: relative;     width: auto;     padding: 0 7px 0 7px;     display: inline; }   ul#rightnav, #leftnav li>a {     width: auto; }   ul#rightnav, #leftnav li ul {     z-index: 1000;     margin: 0;     padding: 0;     list-style-type: none;     visibility: hidden;     position: absolute;     left: 0px;     top: 25px; }   ul#rightnav, #leftnav li>li {     float: none; }

Ein weiteres Problem was aufgetreten ist, seit ich das Drop Down einbinden möchte ist, dass Rechts neben dem Inhaltsbereich auch Zwei Links sein sollte, die seitdem nicht mehr zu sehen sind.

Ich hoffe ihr könnt mir helfen und das die Seite ansonsten in allen Browsern läuft.

Liebe Grüße.

Daniel

Hi,

dass das Untermenü nicht eingeblendet wird, liegt am folgenden fehlenden Selektor:

Code css:

1 2 3

#leftnav li:hover ul {         visibility: visible; }

Und dann schau dir mal diesen Selektor genauer an, weshalb das rechte Menü in der Seite überhaupt nicht erscheint:

Code :

1 2 3 4 5 6 7 8 9 10

[B]ul#rightnav[/B], #leftnav li ul {         z-index: 1000;         margin: 0;         padding: 0;         list-style-type: none;         [B]visibility: hidden;[/B]         position: absolute;         left: 0px;         top: 25px; }

Desweiteren sollte für das rechte Menü anstelle von left:0 die Startposition right:0 lauten.

mfg Maik

Hey Maik,

habe die Änderungen nun vorgenommen, jedoch hängt nun die Rechte Navi zu weit oben. Ebenfalls denke ich, dass sich auf der Seite Fehler eingeschlichen haben, die dazu führen können, dass die Seite nicht richtig dargestellt wird, insbesondere in den verschiedenen Browsern.

Liebe Grüße.

Daniel

Moin.

Code css:

1 2 3 4

ul#rightnav {         top: 151px;         text-align: center; }

Und korrigiere hier mal den Tippfehler:

Code :

1 2 3 4 5

ul#rightnav, #leftnav {         ...         position: relativ[B][COLOR="Red"]e[/COLOR][/B];         ... }

mfg Maik

Danke für die wiedermal schnelle und gute Hilfe Maik
Habe nur noch eine kleine VErständnisfrage, wieso funktioniert denn bei der leftnav "margin-top" und in der rightnav nur "top"?

Liebe Grüße und einen schönen Sonntag.

Daniel

Das hängt kurioserweise mit den unterschiedlich gewählten Selektoren (Elementtyp + ID-Bezeichner vs. ID-Bezeichner) zusammen - margin-top würde in dieser Konstellation ebenso funktionieren:

Code css:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

ul#rightnav {         margin-top: 151px;         text-align: center; }   ul#leftnav {         margin-top: 65px;         text-align: center; }   #rightnav, #leftnav {         margin: 0;         padding: 0;         list-style-type: none;         font-family: Arial, Helvetica, sans-serif;         font-size: 12px;         line-height: 25px;         font-weight: bold;         color: #CECFD0;         text-decoration: none;         border: 0;         position: relative;         display: block;         width: 200px;         height: 25px; }

mfg Maik

Ok, Danke, sehr kurios

Guten Morgen Forum

ich muss da doch nochmal stören
Ich habe das Menü jetzt soweit an das Design angepasst und mit den richtigen Linknamen gefüllt und bin auf folgendes Problem gestoßen:

ul#rightnav li>a, ul#leftnav li>a {
padding: 0 8px 0 8px;
margin: 0;
width: auto;
}

Die Dowpdownlinks werden nicht mittig unter dem Hauptlinks dargestellt, da diese je nachdem verschieden breit sind, ich kann aber nicht mit einer festen Breite arbeiten, da sonst nicht jeder Linkname möglich ist. Ebenfalls ist es nicht möglich die Dropdownlinks mit text-align: left zu deklarieren.

Ich hoffe ihr könnt mir weiterhelfen.

Liebe Grüße.

Daniel

P.S. Die Seite liegthier.

Ich kann auf Wunsch auch den vollständigen CSS Code posten.

Moin,

bei mir werden die Sublinks sehr wohl horizontal zentriert unter den Hauptlinks ausgerichtet, ausschlaggebend sind dafür diese Regeln:

Code css:

1 2 3 4 5 6 7 8 9

ul#rightnav {         top: 152px;         text-align: center; }   ul#leftnav {         top: 66px;         text-align: center; }

Zitat von KingOfRap

Ebenfalls ist es nicht möglich die Dropdownlinks mit text-align: left zu deklarieren.

Aber sicher ist das möglich:

Code css:

1 2 3 4 5 6 7

ul#rightnav ul {         text-align: left; }   ul#leftnav ul {         text-align: left; }

mfg Maik

Hey,

Danke Dir, das mit dem text-align: left; funktioniert auch, jedoch läuft das mit dem center bei mir nicht.

Ich habe mal einen Screenshot hochgeladen, wie ich das meine
Das Problem ist, dass z.B. die Unterlinks von Produkte Rechts weit über dieser Wort hinauslaufen.

Liebe Grüße.

Daniel

Edit: Desweiteren ist das Dropdown Links nicht so breit, wie sein Inhalt, da er zwischen "Über" und "CarryPlotter" einen Zeilenumbruch macht, was er jedoch Rechts macht

Schau dir mal A variable width drop-down definition list an.

mfg Maik

Hey,

liegt meine vermutung da richtig, dass ich das Design mit

em

erstellen sollte sprich die Schriftgröße etc. damit regeln?

Liebe Grüße.

Daniel

Nö, mit der relativen em-Maßeinheit hat das recht wenig zu tun.

Vielmehr werden in diesem Beispiel die Untermenüs absolut positioniert, und die Leerzeichen in den Links mit   ausgezeichnet.

mfg Maik

Achso, also empfielst Du mir, das Menü neu zumachen?
Wie sieht das rechtlich denn aus, wenn ich das Menü nehme und an mein Design anpasse, muss ich trotzdem noch einen Link zu der Seite setzen?

Mein Englisch ist leider nicht so gut

Danke Dir.

Edit: Ok, für eine kommerzielle Webseite darf ich es leider nicht nutzen.
Trotzdem Danke für die Hilfe

Zitat von KingOfRap

Edit: Ok, für eine kommerzielle Webseite darf ich es leider nicht nutzen.

Wo steht das?

Du sollst dir in diesem Fall per Email eine Zustimmung einholen, und eine Spende leisten.

mfg Maik