Beiträge von ColdFire

  • Menü - Schaltflächen fixieren

    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.

  • Menü - Schaltflächen fixieren

    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++ //