Beispiel:CSS-Anw-Flexfooter-3.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche 
<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Feste Breite mit flexiblem padding</title>
<style>
body {
	margin: 0;
	font: 1.25em Calibri, sans-serif;
    display: flex;
    min-height: 100vh;
    margin: 0 auto;
    flex-direction: column;
  }

body > * {
	padding: 0.5em;
	padding-left: calc((100% - 30em) / 2);
	padding-right: calc((100% - 30em) / 2);
}

header,
footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	background: hsl(0, 0%, 95%);
}

#logo
{
	width: 3em;
	margin: 0 2em 0 0.5em;
	fill: hsl(13, 96%, 39%);  /*SELF-red */
}

#logo use
{
	fill: hsl(0, 0%, 30%);
}

nav ul
{
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
}

nav a
{
	padding: 0.25em 0.5em;
	text-decoration: none;
	color: hsl(13, 96%, 39%);
}

nav a:focus,
nav a:hover {
	background: hsl(13, 96%, 39%);
	color: white;
}

main {
	background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Golden_Gate_Bridge_and_San_Francisco_skyline_from_Hawk_Hill_at_Blue_Hour_dllu.jpg/1280px-Golden_Gate_Bridge_and_San_Francisco_skyline_from_Hawk_Hill_at_Blue_Hour_dllu.jpg);
	background-size: cover;
	background-color: #fdfcf3;
	min-height: 10em;
    flex: 1;
	color: #dfac20;
}

footer {
	background-color: #ebf5d7; 
	border: 1px solid #8db243;
}

section img {
	width: 100%;
}


</style>

</head>

<body>
<header>
	<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" id="logo" viewBox="-2 -1 4 2">
		<path id="logo-part" d="m-2,-1 1,0 1,1 -1,1 -1,0 1,-1z"/>
		<use xlink:href="#logo-part" transform="scale(-1 1)"/>
	</svg>
	<nav>
		<ul>
			<li><a href="">eene</a></li>
			<li><a href="">meene</a></li>
			<li><a href="">muh</a></li>
		</ul>
	</nav>
</header>

<main>
<h1>Feste Breite mit flexiblem padding</h1>
</main> 

<footer>
<a href="#">Impressum</a>
<a href="#">Kontakt</a>
</footer>


</body>

</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:CSS-Anw-Flexfooter-3.html&oldid=65230“