CSS Container nicht ganz oben

[ClocxHD]

Hallo,

ich wollte ein Multilevel Dropdownmenü und habe mir dafür eins heruntergeladen.
Da jedoch nur ein kleiner Button oben links nicht so gut aussieht, habe ich dahinter einen Div-Container platziert.

Jedoch ist über dem Container noch Platz.
Wie bekomme ich diesen weg?
Screenshot:
http://clocxhd.de/downloads/div-container.png

Index.php:
http://pastebin.com/tqdMyAFu

menu.php:
http://pastebin.com/LkntH8H8 (Mein Container hat die ID "containermenu")

style.css:
http://pastebin.com/VSAj8J9u

LG,
ClocxHD

 

[Daaron]

<div id="containermenu"></div> <- Das sieht einfach falsch aus...
Schreib NIE leere Container.

Und was den Abstand über dem schwarzen Balken angeht: Das ist irgend ein wild gewordenes margin. Ich tippe auf die margin-top der <ul> des Menüs.

Und allgemein: Du hast einen HTML5-DOCTYPE, also mach auch was draus. Genieße die neue Freiheit, verwende <header> und vor allem <nav> woimmer es semantisch sinnvoll ist. Niemand mag <div>-Suppe.

 

[ClocxHD]

Hallo,

lag am Stylesheet vom Button.
Habe das Margin-Top: 5%; auskommentiert.

Aber warum sollte ich nie einen leeren Container erstellen?
Wie soll ich sonst einen schwarzen Balken hinbekommen?

LG,
ClocxHD

 

[Daaron]

HTML ist eine rein semantische Sprache. Leere Container sind semantischer Unsinn, Bandbreitenverschwendung und verzögern nur unnötig das Rendering.

Wenn du ein Pseudo-Element benötigst, das rein gestalterischen Zwecken dient, dann verwende CSS Pseudo Elemente.

 

[ClocxHD]

Und wie genau mache ich das?
Bin aus Google nicht ganz schlau geworden.

 

[Daaron]

Es kommt immer darauf an, was genau du machen willst. Daraus ergibt sich, wo du :before & :after einsetzen kannst.

Ich würde dir aber so oder so dazu raten, deinen Code noch einmal auf 0 zu drehen und semantisch korrekt komplett neu anzufangen.
Oder mach es wie die Profis: Schnapp dir ein gutes CMS (das schließt Wordpress ausdrücklich aus) und setz die Seite damit auf. Wenn du z.B. auf Contao setzt, hast du schon einmal von Haus aus semantisch durchaus anständiges HTML.