Länge von "border-bottom" im Dropdownmenü bestimmen

Khazra · 31. März 2018

Hallo Leute,

Ich habe das Drop-Down-Menü unserer Homepage (http://www.feuerwehr-suedost.de) verändert. Neben einer neuen Farbe und einer anderen Transparenz

habe ich via CSS die Eigenschaft "border-bottom: 1px solid #eeeeee;" eingefügt um eine untere Linie im Menü zu haben. Nun ist das Problem das

sämtliche Linien länger sind als das Menüfenster selber. Ich habe im CSS unter "navigation" sämtliche Änderungen einzelner Werte getestet. Leider

hatte ich keinerlei Erfolg. Wie bekomme ich die Linien kürzer?

Anbei der betreffende CSS-Abschnitt für das Drop-Down-Menü:

CSS-Code

Vielen Dank im voraus!

Re:Later · 31. März 2018

Entweder:

Statt den a den border zu geben den umschließenden li den border geben.

Oder:

den a eine zusätzliche Anweisung:

box-sizing: border-box;

hinzufügen.

Bei zweitem hast aber vermutlich größeren Rattenschwanz, da die paddings dann anders dargestellt werden. Manchmal gefällt einem das aber eh besser

Khazra · 31. März 2018

Hallo Re:Later,

Vielen Dank, das hat wunderbar geklappt. Hab das Menü jetzt weiter angepasst und nun taucht ein neues Problem auf.

Wenn ich über einen Menüpunkt fahre und sich das jeweilge Untermenü aufklappt habe ich zwischen beidem einen Spalt.

Dieser verändert sich wenn ich in dem nachfolgenden Script "margin-top: 0px" auf z.b. 10 px ändere. Dann wird auch der Spalt größer.

.navigation {

float:left;

width: 100%;

background:transparent;

margin-top: 0px;

}

Standardmäßig hab ich "margin-top" auf 0 px gelassen. Wie bekomme ich diesen Spalt weg? CSS ist das gleiche wie oben.

togo · 1. April 2018

Hallo,

Code

.navigation ul li a {
    padding: 15px 16px 0 16px;
    margin: 0;
    display: block;
    font-weight: bold;
    font-size: 12px;
    text-transform: uppercase;
    background: transparent;
    color: #fff;
    text-shadow: 1px 1px 1px #000;
    height: 30px; <--- von 40px auf 30 ändern
}

Alles anzeigen

Khazra · 1. April 2018

Hallo togo,

Funktioniert leider nicht, es wird die Höhe verringert aber leider bleibt der "Spalt".

Viele Grüße,

Khazra

anka · 1. April 2018

Hier musst du die Höhe auch noch anpassen (tdefaut.css, ab Zeile 280):

Code

.navigation ul li a:hover {
    color: #fff;
    background: #cc0000;
    height: 40px;   <--- ebenfalls auf 30px ändern
    opacity: 0.92;
    -moz-opacity: 0.92;
    -ms-filter: "alpha(opacity=70)";
    filter: alpha(opacity=70);
}

Und hier übrigens auch gleich (Z. 297):

Code

.navigation ul li.active a {
    color: #fff;
    height: 40px;   <--- ebenfalls auf 30px ändern
    opacity: 0.92;
    -moz-opacity: 0.92;
    -ms-filter: "alpha(opacity=70)";
    filter: alpha(opacity=70);
}

Khazra · 1. April 2018

Hallo anka,

Vielen Dank, es hat funtioniert!

Viele Grüße und schöne Ostern!

Khazra