CSS - Blockelemente positionieren

573 views
475 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
573
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

CSS - Blockelemente positionieren

  1. 1. CSS Blockelemente positionieren
  2. 2. Verwendung von &quot;float&quot; (z.B. Bilder, divs) <ul><li>.info </li></ul><ul><li>{ </li></ul><ul><li>width : 300px; </li></ul><ul><li>border : 1px solid black; </li></ul><ul><li>background-color : silver; </li></ul><ul><li>padding : 4px; </li></ul><ul><li>margin : 4px; </li></ul><ul><li>float : right; </li></ul><ul><li>} </li></ul><ul><li>... </li></ul><ul><li><div class=&quot;info&quot;>Ich bin ein </li></ul><ul><li>Info-Text. Ich bin ein Info-Text. Ich bin ein Info-Text. </li></ul><ul><li>Ich bin ein Info-Text. </div> </li></ul>
  3. 3. Zweispaltiges Layout <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 : blue; </li></ul><ul><li>margin : 0px; } </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>

×