Hey,

ich bin gerade dabei für eine Hilfsorganisation eine neue Website aufzusetzen und stoße dabei an meine ziemlich beschränkten html / css fähigkeiten. Ich nutze dafür Joomla + angepasstes Template und blicke beim Menü überhaupt nicht durch, weil der code nicht von mir ist (O_o).

Ziel soll sein, die vertikale Ausrichtung der Menüitems zu korregieren (derzeit leicht überlappend) und die Hintergründe (+hoover) horizontal auf eine Länge zu bringen, damit das Menü weniger zerstückelt aussieht (momentan ist das ja nur ne Box mit padding, deren horizontale width sich über den darin befindlichen Text definiert. Kurzum: Es soll vernünftig aussehen.

Das Menü als solches definiert momentan auch den vertikalen Abstand zum Content darunter. Mir wäre eine fixe height Angabe lieber, damit das Banner sicher platziert werden kann und nicht über die Tiefe des Menüs verändert werden kann. Im Moment wird das nur korrekt dargestellt, weil ich im letzten Reiter zwei leere Menüelemente hab. Wären es mehr, würde sich der Abstand erhöhen.

Link: http://www.jlinker.de/LOG/

Position aus template.css
Quellcode:/* --- Top1 --- */
#top1{
    width: 940px;
    padding: 0px 5px;
    overflow: hidden;
    background: #FFF url(../images/banner/banner2.png) bottom no-repeat;
    -moz-border-radius-topright:5px;
}

#navbar{
    width: 900px;
    background: #FFF url(../images/navbar.jpg) top;
    height: 26px;
    padding: 0px 20px;
    margin-top: 5px;
}

#nav{
    width: 700px;
    display: inline;
    float: left;
    overflow: hidden;
}

#searchbox{
    width: 200px;
    display: inline;
    float: right;
    background: transparent url(../images/loupe.gif) no-repeat right center;
    overflow: hidden;
    text-align: right;
}
Parameter aus suffix.css
Quellcode:/*  navigation  */
#navbar #nav ul {
    list-style: none;    
    text-align: left;    
    margin: 0px 5px; padding: 0;    
}

#navbar #nav ul li {
    display:inline;
    margin: 0; padding: 0;    
}

#navbar #nav ul li a span, #navbar #nav ul li span span{
    padding: 7px 20px 7px 20px;
    color: #FFF;
    font: 10px/22px Arial, Helvetica, sans-serif;
    text-transform: uppercase;    
}

#navbar #nav ul li a span:hover,
#navbar #nav ul li a span:active {
    border: none;
    color: #fff;
    background: #333;
    text-decoration: none;    
}

#navbar #nav ul li#current a span{    
    background: #333;    
    color: #EEE;
}
Suckerfish Menu code
Quellcode:/* --- Suckerfish Dropdown Menu --- */
      .moduletable_topmenu{
       padding:0;
       height: 26px;
       margin: 0;
       width: 700px;
       font-size: 90%
    }

    .moduletable_topmenu h3 {
       padding:0 0;
       text-align:center;
       font-size:1.1em;
       margin:0;
    }

    .moduletable_topmenu ul{
       list-style: none;
       margin: 0;
       padding: 0;
    }

    .moduletable_topmenu li{
       margin: 0px 0px 0px 0px;
       float: left;
    }
    .moduletable_topmenu li ul {
       position: relative;
       width: 100%;
       left: -999em;
       border-bottom: none;

    }
    .moduletable_topmenu li:hover ul {
       left: auto;
    }
    .moduletable_topmenu li ul li {
       width: 100%;
       padding: 0;
    }

    .moduletable_topmenu li a{
       display: block;
       padding: 0px;
       font-weight: bold;
       text-decoration: none;
    }
    html>body .moduletable_topmenu li a {
       width: auto;
    }

    .moduletable_topmenu li ul li a {
       width: 25px;
       /* ---
       filter:alpha(opacity=80);
       -moz-opacity: 0.8;
       opacity: 0.8;*/
    }


    .moduletable_topmenu li a:hover,a#active_menu:link,a#active_menu:visited{
       text-decoration: none;
       /* ---
       filter:alpha(opacity=100);
       -moz-opacity: 1.0;
       opacity: 1.0;*/
    }

    .moduletable_topmenu li ul li a:hover {
    }

    .moduletable_topmenu li:hover ul, .moduletable_topmenu li.sfhover ul {
       left: auto;
    }


    .moduletable_topmenu ul li.active a {
       text-decoration: none;
    }
    .moduletable_topmenu li.parent.active a {
       text-decoration: none;
    }
    .moduletable_topmenu li.parent.active a:hover {
    }

    .moduletable_topmenu li.parent.active ul li a {
       text-decoration: none;
    }
    .moduletable_topmenu li.parent.active ul li a:hover {
       text-decoration: none;
    }
Ich weiss, völlig unkonventionelle Frage (...ok, fast schon verboten) bzw. Problemstellung aber es ist ja für ne gute Sache!

Danke Euch!

In der suffix.css wird festgelegt, wie die einzelnen Listen (ul) und deren Elemente (li) sich verhalten. Ich hab den Seitenquelltext jetzt nicht genau angeschaut, denke aber, dass du durch Drehen an diesen Parametern schon einiges erreichen kannst. Ggf sind die Elternelemente noch wichtig, da deren innenabstände etc. vllt gesetzt wurden.

in suffix.css:
Quellcode:#navbar #nav ul {
    list-style: none;    
    text-align: left;    
    margin: 5px; padding: 0; // Aussenabstände oben und unten auch setzen, damit die Unterelemente zusammen ein Stück tiefer platziert werden?
}

#navbar #nav ul li {
    display: block; // Und ggf noch width und height setzen.
    margin: 0; padding: 0;    
}
Hab jetzt nicht getestet, wie sich das genau auswirkt, aber probier's mal, vllt ist das ein Anfang!

Hey LeJean, danke dir für deine Antwort! Beim #nav ul habe ich mit Außenabständen vertikal das Problem, dass der hoover dann nicht mehr von der Höhe her genau in die navbar passt. Vielleicht ist das aber auch ein Problem von den padding-Einstellungen der einzelnen Items, hab ich noch nicht überprüft.

Height lässt sich wie von dir beschrieben schön fixieren, width geht aber völlig in die Hose. Optimal wäre, wenn ich keine fixe width bei den Dropdowns hätte, sondern jeweils eine, die durch das breiteste Element definiert wird.

Herumspielen an width zerfetzt das Layout, bei setzen von height verliere ich das halbe Menü (wird jeweils nur das oberste nav item angezeigt; vg. Link)

Hat jemand eine Idee, warum im Menü nun nur noch eine Reihe Items angezeigt wird?

Die suffix.css sieht nun so aus:

Quellcode:/*  navigation  */
#navbar #nav ul {
    list-style: none;    
    text-align: left;    
    margin: 0px 15px; padding: 5; }

#navbar #nav ul li {
    display: block; height: 185px;
    margin: 0; padding: 0;    
}
#navbar #nav ul li a span, #navbar #nav ul li span span{
    padding: 4px 20px 7px 20px;
    height: 26px;
    width: auto;
    color: #FFF;
    font: 10px/22px Arial, Helvetica, sans-serif;
    text-transform: uppercase;    
}

#navbar #nav ul li a span:hover,
#navbar #nav ul li a span:active {
    border-bottom: 2px solid #007EFF;
    color: #fff;
    background: #333;
    text-decoration: none;    
}
#navbar #nav ul li, #current a span{    
    color: #EEE;
}


Hab mich grad mal in Firebug hingesetzt und die folgende Lösung ausgetüfftelt. Die Sachen, die du angesprochen hast, sollten funktionieren. Darüber hinaus sind jetzt auch noch die Abstände zwischen den Menünamen gleich.

Änderungen in "Position aus template.css". Die beiden angegebenen Regeln ersetzen, die anderen beiden Regeln bleiben unverändert:
Quellcode:/* --- Top1 --- */
#top1{
    width: 940px;
    height: 190px;
    padding: 0px 5px;
    overflow: hidden;
    background: #FFF url(../images/banner/banner2.png) bottom no-repeat;
    -moz-border-radius-topright: 5px;
}

#nav{
    position: relative;
    left: 15px;
} Die zwei weiteren CSS-schnipsel hab ich vollkommen auseinander genommen. Was hier nicht steht, brauchst du auch nicht. Zumindest verändert es bei mir nicht da Ergebnis.

Den Abschnitt in suffix.css durch folgendes ersetzen:
Quellcode:/*  navigation  */
#nav a {
    color: #FFFFFF;
    font: 10px/22px Arial,Helvetica,sans-serif;
    padding-bottom: 2px;
    text-transform: uppercase;
}

#nav a:hover, #nav a:active {
    background: none repeat scroll 0 0 #333333;
    border-bottom: 2px solid #007EFF;
    color: #FFFFFF;
    padding-bottom: 0;
    text-decoration: none;
}

#nav ul li, #current a span {
    color: #EEEEEE;
} Den Suckerfish Menu code hierdurch ersetzen:
Quellcode:/* --- Suckerfish Dropdown Menu --- */
.moduletable_topmenu ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
}

.moduletable_topmenu > ul > li {
    float: left;
}

.moduletable_topmenu > ul > li > ul {
    margin-left: 20px;
    position: absolute;
    left: -999em;
}

.moduletable_topmenu a > span {
    padding: 0 20px;
}

.moduletable_topmenu a {
    display: block;
    height: 24px;
}

.moduletable_topmenu li:hover ul, .moduletable_topmenu li.sfhover ul {
    left: auto;
}

Großartig, ich danke dir! Funktioniert einwandfrei gut und ist ja auch viel schlanker. Das war auch mit der Grund, wieso ich da nicht durchgeblickt habe. War einfach irgendwie etwas (unnötig) viel Kram.