grundgeruest-mit-footer-unten-ugne-flexbox-und-mit-float.php
Quell Code
<!DOCTYPE html> <html lang="de"> <head> <title>footer</title> <style> * { margin:0; padding:0; list-style:none; border:none; text-decoration:none; } html , body , #container { height:100% ; } body { text-align:center; width:100%; } #container { background:#ddd; } #container:before { content:""; margin-bottom:-100px; height:100%; float:left; display:inline-block; } #header { background:#09c; height:100px; color:#fff; } #content { width:100%; margin:0 auto; float:left; background:#ddd; } #content_innen { margin:0 auto; text-align:left; } #left { width:28%; float:left; } footer { height:100px; background:#09c; clear:both; } #header h1 { padding:32px; text-align:center; } #right h2 , #right p { padding:20px; } #right{ margin:20px; padding:10px; width:calc(70% - 67px); float:right; background:#ffa; border:1px solid #aaa; } #nav { margin:20px 0 0 10px; border:1px solid #aaa; } #nav li { margin-top:1px; } #nav li a { color:#000; display:block; padding:5px; background:#ffa; } #nav a:hover { color:#fff; background:#09c; } </style> </head> <body> <div id="container"> <div id="header"> <h1>Footer immer unten mit der Pseudoklasse :before</h1> </div> <div id="content"> <div id="content_innen"> <div id="left"> <ul id="nav"> <li><a href="">HTML Angaben </a></li> <li><a href="">CSS Angaben </a></li> <li><a href="../">Zur Anleitung </a></li> <li><a href="../">CSS Anleitungen </a></li> <li><a href="/">Startseite </a></li> </ul> </div> <div id="right"> bla text </div> </div> </div> <footer><h2>Footer</h2></footer> </div> </body> </html>
Comments (1)
Die Canvas Balken Uhr ist ja mal Fett