Beispiel:CSS-fixer-footer-1.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<style>
			body {
				margin: 10px auto;
				max-width: 60em;
				font-family: sans-serif;
				color: #333333;
				padding-bottom:3em;
			}

			header, nav, nav a, main, article, section, aside {
				border-radius: 0px 0.5em 0.5em;
				border: 1px solid;
				padding: 10px;
				margin: 10px;
			}

			header {
				background: #F1F3F4;
				border-color: #d5d5d5;
			}

			header img {
				width: 13em;
				margin-right: 50px;
				float:left;
			}

			nav {
				font-size: 0.91em;
				float: left;
				width: 15em;
				padding: 0;
				background: #fffbf0;
				border-color: #e7c157;
			}

			nav ul {
				padding: 0;
			}

			nav li {
				list-style: none;
				margin: 0;
				padding: 0.5em;
			}

			nav a {
				display: block;
				padding: 0.2em 10px;
				font-weight: bold;
				text-decoration: none;
				background-color: #e7c157;
				color: #333;
			}

			nav ul a:hover,
			nav ul a:active  {
				color: #fffbf0;
				background-color: #dfac20;;
			}

			main {
                                display: block;
				background: #c4ced3;
				border-color: #8a9da8;
				margin-left: 15em;
				min-width: 16em; /* Mindestbreite (der Ueberschrift) verhindert Anzeigefehler in modernen Browsern */
			}

			article {
				background: #ffede0;
				border-color: #df6c20;
				margin-right: 15em;
			}

			article p {
				margin-bottom: 10em;
			}

			aside {
				background: #ebf5d7;
				border-color: #8db243;
				float: right;
				width: 12em;
			}

			footer {
				position:fixed;
				padding: 10px;
				bottom:0;
				left: 0;
				right:0;
				background: #c32e04;
				border-color: #8a9da8;
			}

			footer p {
				float:right;
				margin: 0;
			}
		</style>
		<title>Bsp.1 - fixer footer</title>
	</head>

	<body>
		<header>
			<img src="/images/9/99/Selfhtml-beispiel-logo.png" alt="logo">
			<h1>Seitentitel</h1>
		</header>

		<nav>
			<ul>
				<li><a href="#link_1.html">Startseite</a></li>
				<li><a href="#link_2.html">Unterseite 1</a></li>
				<li><a href="#link_3.html">Unterseite 2</a></li>
				<li><a href="#link_4.html">Kontakt</a></li>
			</ul>
		</nav>

		<main>
			<aside id="info">
				<h2>Info-Box</h2>
				<p>Mittels position:fixed wird das footer-Element als feststehendes
					Element definiert, mittels bottom:0px; wird es 0 Pixel von der
					Unterkante des Darstellungsbereiches entfernt, also ganz unten
					positioniert.
				</p>
			</aside>

			<article>
				<h2>CSS-basierte Layouts</h2>
				<h3>feststehender Footer</h3>
				<p>Dieser Absatz ist nur dafür da, damit Sie etwas zum Scrollen haben.</p>
				<p>Dieser Absatz ist nur dafür da, damit Sie etwas zum Scrollen haben.</p>
				<p>Dieser Absatz ist nur dafür da, damit Sie etwas zum Scrollen haben.</p>
			</article>
			<article>
				<h2>CSS-basierte Layouts</h2>
				<h3>feststehender Footer</h3>
				<p>Dieser Absatz ist nur dafür da, damit Sie etwas zum Scrollen haben.</p>
				<p>Dieser Absatz ist nur dafür da, damit Sie etwas zum Scrollen haben.</p>
				<p>Dieser Absatz ist nur dafür da, damit Sie etwas zum Scrollen haben.</p>
			</article>
			<article>
				<h2>CSS-basierte Layouts</h2>
				<h3>feststehender Footer</h3>
				<p>Dieser Absatz ist nur dafür da, damit Sie etwas zum Scrollen haben.</p>
				<p>Dieser Absatz ist nur dafür da, damit Sie etwas zum Scrollen haben.</p>
				<p>Dieser Absatz ist nur dafür da, damit Sie etwas zum Scrollen haben.</p>
			</article>
		</main>

		<footer>
			<a href="#kontakt.html">Kontakt</a>
			<p>© 2014 by selfHTML</p>
		</footer>

	</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:CSS-fixer-footer-1.html&oldid=43775“