Depot43-Unterlagen - Position Fixed

HTML Elemente

            
            



<!doctype html>
<html lang="de">
<head>
	<meta charset=utf-8>
	<title>HTML5 / CSS - Position Fixed</title>
	<style>
		body {
			margin:0;
			padding:0;
		}
		div.container {
			padding:24px;
		}
		nav {
			border:1px solid grey;
			background-color:grey;
		}
		nav ul {
			list-style-type:none;
			padding:0px;
		}
		nav ul li {
			padding:0px;
			display:inline-block;
		}
		nav ul li a {
			display:block;
			font-family:sans-serif;
			font-size: 2em;
			text-decoration:none;
			background-color: #cccccc;
			padding:5px 24px;
			color: #900;
			margin: 6px;
		}
		nav ul li a:hover {
			color: #f00;
			background-color: #dedede;
		}
	</style>
</head>
<body>
	<nav>
		<ul>
			<li><a href="/unterlagen/css-basic/display/inline-und-block-elemente/#"> Seite 1 </a></li>
			<li><a href="/unterlagen/css-basic/display/inline-und-block-elemente/#"> Seite 2 </a></li>
			<li><a href="/unterlagen/css-basic/display/inline-und-block-elemente/#"> Seite 3 </a></li>
		</ul>
	</nav>
	<div class="container">
		<h1>Haupttitel</h1>
		<p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A facere eligendi quis repellat quos veritatis autem quibusdam quisquam necessitatibus? Nihil sit nemo, aspernatur ea at ut porro architecto inventore quibusdam libero vel, ab, ullam nostrum facere. Ut, illo minus atque iste! Delectus doloremque veniam minus reprehenderit veritatis officia eveniet eligendi earum quo aperiam expedita distinctio repellat perferendis dolorum harum molestias odio, natus adipisci praesentium asperiores ipsum neque, minima aut magnam. Laborum nemo tempora atque nostrum sequi, nobis perspiciatis expedita ut, amet quas beatae consequatur autem sunt? Veniam tenetur delectus perspiciatis aliquid minus optio saepe nesciunt, ex reprehenderit possimus sunt obcaecati voluptas magni, corporis odio iste repellat dolores rem ipsam! Natus at, fugit necessitatibus praesentium. In eligendi, suscipit. Mollitia enim quibusdam minus, eligendi modi, doloribus incidunt tempore debitis voluptates, aliquid quo quisquam dignissimos natus nihil recusandae. Excepturi rem doloribus sint ut, porro quis ipsam, id pariatur, aliquid fuga iusto eos? Animi ab blanditiis vero recusandae, quod, est perspiciatis, deserunt deleniti necessitatibus numquam perferendis quibusdam provident ipsum architecto reprehenderit nobis officia illo ducimus vel nostrum repellat quas. Doloribus aut reprehenderit, animi. Qui at soluta atque commodi alias eum voluptate, totam distinctio, saepe perferendis deserunt! Illo impedit, dolores inventore tenetur voluptates blanditiis cupiditate?</p>
		<h2>Untertitel</h2>
		<p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A facere eligendi quis repellat quos veritatis autem quibusdam quisquam necessitatibus? Nihil sit nemo, aspernatur ea at ut porro architecto inventore quibusdam libero vel, ab, ullam nostrum facere. Ut, illo minus atque iste! Delectus doloremque veniam minus reprehenderit veritatis officia eveniet eligendi earum quo aperiam expedita distinctio repellat perferendis dolorum harum molestias odio, natus adipisci praesentium asperiores ipsum neque, minima aut magnam. Laborum nemo tempora atque nostrum sequi, nobis perspiciatis expedita ut, amet quas beatae consequatur autem sunt? Veniam tenetur delectus perspiciatis aliquid minus optio saepe nesciunt, ex reprehenderit possimus sunt obcaecati voluptas magni, corporis odio iste repellat dolores rem ipsam! Natus at, fugit necessitatibus praesentium. In eligendi, suscipit. Mollitia enim quibusdam minus, eligendi modi, doloribus incidunt tempore debitis voluptates, aliquid quo quisquam dignissimos natus nihil recusandae. Excepturi rem doloribus sint ut, porro quis ipsam, id pariatur, aliquid fuga iusto eos? Animi ab blanditiis vero recusandae, quod, est perspiciatis, deserunt deleniti necessitatibus numquam perferendis quibusdam provident ipsum architecto reprehenderit nobis officia illo ducimus vel nostrum repellat quas. Doloribus aut reprehenderit, animi. Qui at soluta atque commodi alias eum voluptate, totam distinctio, saepe perferendis deserunt! Illo impedit, dolores inventore tenetur voluptates blanditiis cupiditate?</p>
	</div>
</body>
</html>


 

            

Aufgabe 18 > weiter

Ein typisches Beispiel für eine fixe Positionierung ist eine Navigation am oberen Rand des Browsers zu platzieren. Die Navigation wird so aus dem Fluss der HTML-Elemente entfernt und oben platziert. Wenn sie zudem als vordestes Element formatiert wird, wird beim scrollen der Inhalt hinter der Navigation veschoben. Diese bleibt immer sichtbar.

Für dieses Beispiel wurde die Navigation aus Aufgabe 13 (Inline-Block) verwendet und die "body"-Werte mit "box-sizing" und "margin" auf 0 gesetzt.

Untersuche die Ausgabe im HTML-Editor. Richte dein Browserfendter so ein, dass du diesen Bereich scrollen kannst. Du siehst, dass Navigation und Inhalt sich gemäss der Position des Scrollbalkens nach oben/unten verschieben.

Ergänze die CSS-Eigenschaften von "nav" mit "position:fixed;" und "width:100%;". Beispiel:

        nav {
            border:1px solid grey;
            background-color:grey;
            position:fixed;
            width:100%;
        }

Untersuche das Ergebnis in der HTML-Ausgabe.
Die Navigation wurde aus dem Fluss entfernt, sie bleibt jetzt oben fixiert. Der Inhalt ist daher nach oben gerutscht. Füge dem Container einen angepassten Innenbstand darüber ein, entsprechend der Höhe der Navigation. Beispiel (Kurszschreibweise):
```
        div.container {
            padding: 124px 24px 6px 24px;
        }
```
Untersuche das Ergebnis in der HTML-Ausgabe.

DB-Table: cssbasic18