Depot43-Unterlagen - Position Relative

HTML Elemente

            
            



<!doctype html>
<html lang="de">
<head>
	<meta charset=utf-8>
	<title>HTML5 / CSS - Position Relative</title>
	<style>
		div {
			border:1px solid #000;
			background-color:#dedede;
			padding:12px;
		}
		div.box1 {
			background-color:#fff;
		}
	</style>
</head>
<body>
	<div class="container">
		<h1>Haupttitel</h1>
		<div class="box1">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. <a href="/unterlagen/css-basic/position/#">Voluptate veritatis</a>, cum sapiente. Expedita at, quia debitis consequatur sed dolores molestiae et ut inventore tempore officiis non, esse reprehenderit rem tempora.</p>
		</div>
	</div>
</body>
</html>


 

            

Aufgabe 17 > weiter

Wenn ein Container eine maximale Breite hat, der Aussenabstand links und rechts gleich gross ist, befindet er sich immer zentriert. Du benötigst dazu: Position "relative", Maximale Breite, Aussenabstand "margin" links und rechts.

Untersuche die HTML-Elemente im Editor: "body", div class="container", "h1", div class="box1".
Erkenne ihre Verschachtelung. Titel und Box sind umgeben vom Container, dieser liegt im body-Element.
Der Container soll immer eingemittet im Body erscheinen.
Erstelle eine Regel für den Container."div.container { }"
Setze die Position auf "position:relative;".
Gib ihm eine Breite "width: X00px;".

Gib ihm den gleichen Aussenabstand für links und rechts: "margin:auto;" Beispiel:

        div.container {
            position:relative;
            width: 600px;
            margin:auto;
        }

Untersuche das Ergebnis im HTML-Editor. Variere die Breite deines Browserfensters.
Ersetze die Eigenschaft "width" durch "max-width", so hat der Container eine Maximalbreite, kann aber schmaler werden.
Untersuche das Ergebnis im HTML-Editor. Variere die Breite deines Browserfensters.