CSS: Zweispaltige Layouts

1,253 views

Published on

Published in: Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,253
On SlideShare
0
From Embeds
0
Number of Embeds
13
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

CSS: Zweispaltige Layouts

  1. 1. CSS zweispaltige Layouts
  2. 2. Zweispaltiges Layout (vereinfacht) <ul><li>* { </li></ul><ul><li>margin : 0px; </li></ul><ul><li>padding : 0px; } </li></ul><ul><li>.navigation { </li></ul><ul><li>width : 200px; </li></ul><ul><li>background-color : silver; </li></ul><ul><li>float : left; } </li></ul><ul><li>.hauptbereich { </li></ul><ul><li>margin-left : 200px; </li></ul><ul><li>background-color : yellow; } </li></ul><ul><li>.footer { </li></ul><ul><li>background-color : fuchsia; </li></ul><ul><li>margin : 0px; </li></ul><ul><li>text-align : center; } </li></ul><div class=&quot;navigation&quot;> <!-- Navigationspunkte --> </div> <div class=&quot;hauptbereich&quot;> <!-- Text Text ... --> </div> <div class=&quot;footer&quot;> <!-- Footer-Inhalt --> </div>
  3. 3. links 200px mitte Rest, um 200px nach rechts verschoben
  4. 4. Problem: Bei unterschiedlichen Hintergrundfarben haben Spalten unterschiedliche Höhe.
  5. 5. Spalten in gleicher Höhe <ul><li>(Komplizierte) CSS-Tricks nötig: </li></ul><ul><li>http://www.positioniseverything.net/articles/onetruelayout/ </li></ul><ul><li>http://buildinternet.com/2009/07/four-methods-to-create-equal-height-columns/ </li></ul>
  6. 6. Zweispaltiges Layout mit &quot;Container&quot;/&quot;Wrapper&quot; w links mitte &quot;container&quot; header &quot;wrapper&quot; (optional) footer

×