Dropdown Menü Layoutproblem

[ditho76]

Hallo liebe Community,

nachdem ich durch Eure Hilfe rausgekriegt habe, was falsch lief damit mir mein Dropdown überhaupt angezeigt wird haben sich jetzt neue Fragen bzw. Probleme ergeben. Da ich das auf meiner produktiven Website so nicht stehen lassen kann, habe ich eine andere selten besuchte Seite als Testseite eingesetzt und mit dem selben CSS versehen.

Meine Fragen:
1. Wie kriege ich die Dropdowns linksbündig unter den übergeordneten Menüpunkt (Mitglieder)?
2. Wie beseitige ich die Transparenz in der Schrift der Menüpunkte (der 2. Menüpunkt im Dropdown ist schlecht lesbar?
3. Was fehlt, damit ich das Dropdown auch wirklich benutzen kann? Momentan blendet es aus sobald ich mit der Mouse da hin will.

Sind es Fehler im Quellcode oder möglicherweise Einstellungsprobleme? Ich habe diverse CSS Seiten im Netz angesurft, bin aber zu keiner Lösung gekommen.

Danke und viele Grüße
Dirk

Website: http://www.artabana-igel.de

CSS Code

.mod_navigation.mainmenu {
width:800px;
height:28px;
left:0;
top:145px;
position:absolute;
overflow:visible;
float:none;
display:block;
margin-right:auto;
vertical-align:middle;
text-align:center;
white-space:normal;
background-color:#4D4F54;
font:10px sans-serif;
color:#FFF;
}

.mod_navigation.mainmenu ul {
margin-top:0;
padding-top:0;
}

.mod_navigation.mainmenu ul:after {
clear: both;
content: " ";
display: block;
font-size: 0;
height: 0;
visibility: hidden;
}

.mod_navigation.mainmenu ul li {
float:left;
list-style-type:none;
}

.mod_navigation.mainmenu ul li a {
text-decoration: none;
display: block;
}

.mod_navigation.mainmenu ul li:hover > ul {
visibility: visible;
}

.mod_navigation.mainmenu ul li ul {
display: inline;
position: absolute;
padding:0px;
visibility: hidden;
}

.mod_navigation.mainmenu ul li ul li {
float: none;
}

.mod_navigation.mainmenu ul li ul li a:hover {
background-color:#930;
}

.mod_navigation.mainmenu a {
display:block;
padding-right:10px;
padding-left:10px;
vertical-align:middle;
text-align:center;
white-space:nowrap;
background-color:#4D4F54;
border-right:2px solid #FFF;
font:12px/30px sans-serif,Verdana,Arial,Helvetica;
font-weight:bold;
text-decoration:none;
color:#FFF;
list-style-type:none;
}


.mod_navigation.mainmenu a:hover {
background-color:#930;
text-decoration:none;
}

.mod_navigation.mainmenu .active {
display:block;
padding-right:10px;
padding-left:10px;
vertical-align:middle;
text-align:center;
background-color:#FFF;
border-right:2px solid #FFF;
font:12px/30px sans-serif,Verdana,Arial,Helvetica;
font-weight:bold;
text-decoration:none;
color:#4D4F54;
list-style-type:none;
}

[Socki]

Hallo, der container liegt über dem Untermenü, deswegen der "z-index", und ".mod_navigation.mainmenu ul li ul:hover" damit es beim hovern auch angezeigt bleibt.

.mod_navigation.mainmenu ul li:hover > ul ,
.mod_navigation.mainmenu ul li ul:hover {
visibility: visible;
}

.mod_navigation.mainmenu ul li ul {
z-index: 1000;
left:0;
}

.mod_navigation.mainmenu ul li {
position: relative;
}

Gruß Socke :-)

[kos]

Sind es Fehler im Quellcode oder möglicherweise Einstellungsprobleme? Ich habe diverse CSS Seiten im Netz angesurft, bin aber zu keiner Lösung gekommen.

Warum orientierst du dich nicht einfach am CSS der Contao-Demo?

Hier ist mit wenigen Anweisungen eine funktionierende Lösung geschaffen worden.

[ditho76]

Hallo Socke,

danke für Deinen prima Tipp.

Jetzt funzt es vollständig. Hab das Theme gleich auf meine produktive Seite portiert und funktioniert astrein. Und es ist absolut schlüssig. Leider bin ich über andere Beispiele nicht an diese letzten paar Kleinigkeiten rangekommen. Aber jetzt ist es endlich gelöst.

Liebe Grüße
Dirk

Hallo Karl,

danke für Deinen Tipp, allerdings findet man auf der Demo-Seite leider keine CSS Texte (außer mit Firebug) und ich hatte ja schon eine Menüleiste die mir optisch gut gefiel. Da ich nicht unbedingt der HTML/CSS-Profi bin, war es ein Trial and Error versuchen und ich glaube erst jetzt so langsam verstanden zu haben wie das mit ul li ul a ... usw. schlüssig zu handhaben ist.

Liebe Grüße
Dirk

[kos]

...
danke für Deinen Tipp, allerdings findet man auf der Demo-Seite leider keine CSS Texte (außer mit Firebug) ...

Hallo Dirk,

da hättest du auch mal im Backend nachsehen müssen.
Unter
demo.contao.org/contao => Back end modules => Layout => Themes => Edit style sheets
findest du das Stylesheet navigation mit allen Anweisungen.

Die Demo ist ja auch als Erweiterung auf contao.org vorhanden, damit man sie auch auf einem eigenen Server installieren kann.
Die Datei Contao_official_demo_xxxx.zip herunterladen. In der gezippten Datei findest du die Quelltexte aller für die Demo verwendeten Stylesheets im Verzeichnis
=> Contao_official_demo_xxx.zip\TL_ROOT\files\contaod emo\theme\css

[Socki]

Hallo Dirk , ja kein Ding, freut mich das es dir geholfen hat!
Ab und an sieht man den Wald vor lauter Bäumen nicht :-)

Als Tipp, kann ich dir little-boxes empfehlen, zb. bei Video2brain als Video oder bei Amazon findest du auch das Buch.

Peter Müller bringt wie ich finde, das Thema CSS und HTML sehr humorvoll und interessant rüber.
Ich bilde mir auch ein, das er unter anderem das Thema Navigation behandelt.

Es gibt sicherlich schon neuere Werke von Ihm, einfach mal googeln.

Viel Erfolg noch!

Gruß Socke :-)