Menü - Schaltflächen fixieren

ColdFire · 1. Mai 2016

Hallo liebe html-seminar.de,

ich mach gerade meine ersten Gehversuche mit HTML & CSS und habe folgendes Problem. Und zwar habe ich ein einfaches Menü erstellt, welches als Header dienen soll. Es ist horizontal ausgerichtet und hat einen soll einen kleinen "Hover"-Effekt kriegen. Funktioniert auch soweit, allerdings bewegen entweder sich die Buttons oder die Container Größe springt etwas. Sind zwar nur ein paar Pixel, würde ich aber trotzdem gerne beheben.

HTML-Source:

HTML

<html><head><title>Struktur</title><link href="stylesheet.css" type="text/css" rel="stylesheet"></head><body><div id="main">	<div id="kopfzeile">	<h1>Struktur</h1>	<nav>		<ul>			<li><a href="#">Erster</a>			<li><a href="#">Zweiter</a>			<li><a href="#">Dritter</a>			<li><a href="#">Vierter</a>			<li><a href="#">F&uuml;nfter</a>			<li><a href="#">Sechster</a>		</ul>	</nav>		</div>	<div id="content">		</div>	<div id="footer">		</div></div></body></html>

CSS-Source:

CSS

body {	border: 10px solid #000000;	height: 850px;	text-align: center;}
#kopfzeile {	height: 150px;	width: auto;	background-color: #33FF00;}
	h1 {	padding: 0.5em;		}		nav ul {	text-align: center;	margin: 0;	padding: 0.3em;	text-align: center;	}
	nav li {    display: inline-block;	}		nav a {	display: block;	width: 8em;	margin: 0.6em 0 0 0;	padding: 0.4em;	font-weight: bold;	border: 1px solid blue;	border-radius: 10px 10px 10px 10px;	background-color: #FFFF33;	}		nav a:focus,	nav a:hover,	nav span {	color: royalblue;	background-color: gold;	}
	nav a:focus,	nav a:hover {	margin-top: 0;	padding: 1em 0.4em 0.4em;	}	#content {	height: 600px;	width: auto;	background-color: #66FF00;}
#footer {	height: 100px;	width: auto;	background-color: #99FF00; 	}

// Leider verliert der Text immer die Zeilenumbrüche beim kopieren, jemand einen Tipp? Arbeite mit Notepad++ //

MrMurphy · 2. Mai 2016

Hallo

Zitat

... allerdings bewegen entweder sich die Buttons oder die Container Größe springt etwas. Sind zwar nur ein paar Pixel, ...

Das kann ich nicht bestätigen. Die Buttons werden zwar höher, aber das ist durch

Code

nav a:focus,
      nav a:hover {
         margin-top: 0;
         padding: 1em 0.4em 0.4em;
      }

wohl gewollt. Ansonsten müsstest du das padding auskommentieren oder löschen.

Es wäre auch sinnvoller wenn du gleich aktuelles HTML5 und CSS3 lernen und anwenden würdest. Dein Quelltext ist veraltet.

Zudem sollten Elemente wie das li-Element immer geschlossen werden. Es wird zwar immer wieder mal behauptet, das offene Elemente problemlos funktionieren sollen, bloß die Praxis sieht anders aus.

Gruss

MrMurphy

ColdFire · 2. Mai 2016

MrMurphy

Erstmal Danke für deine schnelle Antwort, funktioniert auch soweit ganz gut. Außer das die Buttons dann ja nicht mehr größer werden. Aber was mich mehr an deinem Beitrag interessiert hat ist, wieso mein Quelltext veraltet ist? Es könnte ja nichts durch HTML5 Elemente ersetzt werden oder sehe ich das falsch? Einige Beispiele wären nett.

MrMurphy · 2. Mai 2016

Hallo

Zitat

Es könnte ja nichts durch HTML5 Elemente ersetzt werden oder sehe ich das falsch?

Doch. Die HTML5-Richtlinien schreiben vor, das div-Elemente nur noch verwendet werden dürfen, wenn es keine geeigneteren gibt. Damit sollten div-Wüsten endgültig der Vergangenheit angehören. div-Seiten werden zwar problemlos auch zukünftig von den Browser angezeigt werden, aber sie sind sachlich trotzdem falsch.

Zitat

Einige Beispiele wären nett.

Code

<div id="main">

Solche umfassenden Container werden üblicherweise eher als wrapper bezeichnet - und sind komplett überflüssig. Also löschen.

Code

<div id="kopfzeile">

Dafür ist das header-Element besser geeignet.

Code

<ul>
<li>

Nach den Richtlinien von HTML / CSS sollen Inhalt und Gestaltung getrennt werden. Elementen und Container, die nur der Gestaltung deinen, sollten nur verwendet werden, wenn die technisch notwendig sind.

Eine der Folgen ist, dass auf unnötige Container und Elemente verzichtet werden sollte. Die Liste ist überflüssig und sollte gelöscht werden.

Code

F&uuml;nfter

Seit über 10 Jahren ist UTF-8 problemlos zu verwenden und inzwischen Standard geworden. Damit sind Maskierungen von Sonderzeichen und Umlauten überflüssig. Abgesehen von sehr wenigen Ausnahmen.

Code

<div id="content">

Dafür ist das main-Element besser geeignet.

Code

<div id="footer"

Dafür ist das footer-Element besser geeignet.

Aktuell könnte der HTML-Quellcode also folgendermaßen aussehen:

Code

<body>
   <header role="banner">
      <h1>Struktur</h1>
   </header>
   <nav role="navigation">
      <a href="#">Erster</a>
      <a href="#">Zweiter</a>
      <a href="#">Dritter</a>
      <a href="#">Vierter</a>
      <a href="#">Fünfter</a>
      <a href="#">Sechster</a>
   </nav>
   <main role="main">
      <h2>main</h2>
   </main>
   <footer role="contentinfo">
      <h2>footer</h2>
   </footer>
</body>

Alles anzeigen

Die Gestaltung erfolgt dann per CSS.

Gruss

MrMurphy

Basi · 2. Mai 2016

Zitat von ColdFire

// Leider verliert der Text immer die Zeilenumbrüche beim kopieren, jemand einen Tipp? Arbeite mit Notepad++ //

Das Problem ist uns bekannt. Welches Betriebssystem in welcher Version benutzt du? 32 oder 64 Bit?

Menü - Schaltflächen fixieren

Jetzt mitmachen!

Teilen