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> | ||
