Unterschiede
Hier werden die Unterschiede zwischen zwei Versionen gezeigt.
html-css:3-column-layout [2013/06/03 15:22] nosch angelegt |
html-css:3-column-layout [2014/02/03 12:13] (aktuell) eva |
||
---|---|---|---|
Zeile 1: | Zeile 1: | ||
+ | [[html-css|html/css]] \\ | ||
====== 3-spaltiges Layout ====== | ====== 3-spaltiges Layout ====== | ||
+ | Hier ein dreisplaitges Layout mit Kopf- und Fußzeile:\\ | ||
+ | <code html> | ||
+ | <html> | ||
+ | <body> | ||
+ | <div id="header"> | ||
+ | Kopfzeile | ||
+ | </div> | ||
+ | <div id="left"> | ||
+ | Links | ||
+ | </div> | ||
+ | <div id="right"> | ||
+ | Rechts | ||
+ | </div> | ||
+ | <div id="middle"> | ||
+ | Mitte | ||
+ | </div> | ||
+ | <div id="footer"> | ||
+ | Fußzeile | ||
+ | </div> | ||
+ | </body> | ||
+ | </html> | ||
+ | </code> | ||
+ | Zu beachten ist hier, dass die mittlere Spalte nach der linken und rechten Spalte steht!\\ | ||
+ | \\ | ||
+ | <code css> | ||
+ | #header { | ||
+ | clear: both; | ||
+ | } | ||
+ | #left { | ||
+ | float: left; | ||
+ | width: 100px; | ||
+ | } | ||
+ | #right { | ||
+ | float: right; | ||
+ | width: 100px; | ||
+ | } | ||
+ | #middle { | ||
+ | padding: 0 100px 0 100px; | ||
+ | } | ||
+ | #footer { | ||
+ | clear: both; | ||
+ | } | ||
+ | </code> |