Probleme mit em

[Rolf b]

Hallo bleumi,

ich habe mir das mal in ein Fiddle kopiert, und der entscheidende Punkt ist: eine Höhe von 1em auf dem a Element wird nicht exakt akzeptiert. Chrome zeigt mir 16px Margin/Padding an, und 17px Zeilenhöhe für das a. Besser wird es, wenn du für die Parent-Elemente der Links überhaupt keine Höhe angibst, dann passt sich alles den Links an und gut ist.

Und dann finde ich, dass Du viele redundante Margins setzt. Ich habe das html mal so umgestaltet wie von Matthias vorgeschlagen (nav Element ohne class, main Element statt section id="main"; Gunnar hat parallel zu mir gepostet, dieses Optimierungspotential kannst Du dann selbst nutzen ;-) ) und schlage dieses CSS vor:

/* Einmal zentral die Margins und Paddings für die randfrei gewünschten Elemente löschen */
body, nav ul, main {
	margin: 0; padding: 0;
}
body {
	background:#ccc;
	padding:0 15%;     /* Randbereich per Padding setzen, danach nirgends mehr nötig */
}

nav {
	background: red;
	margin-top: 2em;
	border-bottom: 0.5em solid black;
}

nav ul li {
	list-style: none;      /* inline-block scheint das zu implizieren, aber wer weiß... */
	display:inline-block;
	margin-right: 0.3em;
	border-radius: 1em 1em 0 0;
	background:green;
}

nav ul li a {
	display:inline-block;  /* wichtig, damit das a Element das ganze li ausfüllt */
	line-height:3em;       /* sorgt für vertikale Zentrierung und legt Höhe des a fest */
	padding: 0em 1em;      /* sorgt für Abstand vom Menütext zum LI Rand */
	text-decoration:none;
	color:black;
}
nav ul li a:hover {              /* Effektanzeige wenn Maus den Link berührt */
	background-color: #ff7;
}

main {
	background:white;
}

Dadurch, dass nav, ul und li keine Höhenangabe haben, ist die Höhe auto, und damit die Höhe der a Elemente.

Ich würde dir aber noch eine Border unterhalb des Menüs empfehlen, um eine Absetzung von Menü und Inhalt zu bekommen. Ich habe mal eine hingeschrieben, und als Gag noch die oberen Ecken der Menüs abgerundet.

Falls Du das Menü zentrieren willst, kannst Du ein text-align:center in das nav Element setzen, solltest dann aber den margin-right: 0.3em aus dem li entfernen und statt dessen einen neuen Style machen der nur zwischen den li einen Margin setzt, denn sonst hat das rechteste Menüitem auch einen Margin und die Zentrierung ist eine Spur daneben. Sicher, das ist Mikrodesign, aber mich stört sowas :)

nav ul li+li {         /* margin-left erst ab dem 2. li */
   margin-left: 0.3em 
}

Hoffe, dass dir das etwas geholfen hat.

Rolf