• Like
  • Save

Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Introduction to Layouts with CSS

  • 2,099 views
Uploaded on

Explains basic CSS concepts/properties used for describing layouts with Casacding Style Sheets: width, height, margin, border, padding, position, float, clear.

Explains basic CSS concepts/properties used for describing layouts with Casacding Style Sheets: width, height, margin, border, padding, position, float, clear.

More in: Design , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,099
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
8

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Layouts mit CSS
  • 2. display:block <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Formatierung mit der Eigenschaft display</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <style type="text/css"> html {border: 1px solid green;} body {border: 1px dashed blue;} p {border: 1px dotted red;} </style> </head> <body> <p>Dies ist Text innerhalb eines Paragraphen.t. </p> <p>Dies ist Text innerhalb eines Paragraphen. Der Text wird...</p> </body> </html>
  • 3. display:inline <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Inline-Boxen</title> <meta http-equiv="Content-Type" content="text/ html;charset=UTF-8"/> <style type="text/css"> html {border: 1px solid green;} body {border: 1px dashed blue;} p {border: 1px dotted red;} em, strong, code, acronym {border: 1px dashed red;} </style> </head> <body> <p>Dies ist Text <em>innerhalb eines Paragraphen</em>. Der Text ... <strong>Inline-Boxen</ strong> formatiert ....<code><acronym/></code>, das man z.B. für das Akronym...</p> </body> </html>
  • 4. display:inline statt display:block <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Formatierung mit der Eigenschaft display</ title> <meta http-equiv="Content-Type" content="text/ html;charset=UTF-8"/> <style type="text/css"> html {border: 1px solid green;} body {border: 1px dashed blue;} p {border: 1px dotted red; display:inline} </style> </head> <body> <p>Dies ist Text innerhalb eines Paragraphen...</p> <p>Dies ist Text innerhalb eines Paragraphen...</p> </body> </html>
  • 5. display.block statt display:inline <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Formatierung mit der Eigenschaft display</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <style type="text/css"> html {border: 1px solid green;} body {border: 1px dashed blue;} p {border: 1px dotted red;} em {display:block;} </style> </head> <body> <p>Dies ist Text innerhalb eines Paragraphen. Der <em>Text</em> wird qua Browservorgabe als Block formatiert. Dies ist <em>Text</em> innerhalb wird qua Browservorgabe als Block....</p> </body> </html>
  • 6. display:none <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Formatierung mit der Eigenschaft display</ title> <meta http-equiv="Content-Type" content="text/ html;charset=UTF-8"/> <style type="text/css"> html {border: 1px solid green;} body {border: 1px dashed blue;} p {border: 1px dotted red;} p#versteckt {display:none;} </style> </head> <body> <p>Dies ist Text innerhalb eines Paragraphen...</p> <p id="versteckt">Dies ist Text innerhalb eines Paragraphen....</p> </body> </html>
  • 7. Die Eigenschaft width <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Formatierung mit der Eigenschaft width</ title> <meta http-equiv="Content-Type" content="text/ html;charset=UTF-8"/> <style type="text/css"> html {border: 1px solid green;} body {border: 1px dashed blue;} p {border: 1px dotted red; width: 300px; } </style> </head> <body> <p>Dies ist Text innerhalb eines Paragraphen. Die Breite eines Abschnitts beträgt 300 Pixel....</p> </body> </html>
  • 8. Die Eigenschaft height <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/ xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Formatierung mit der Eigenschaft width</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <style type="text/css"> html {border: 1px solid green;} body {border: 1px dashed blue;} p {border: 1px dotted red; width: 300px; height:300px;} </style> </head> <body> <p>Dies ist Text innerhalb eines Paragraphen...</p> </body> </html>
  • 9. Normaler overflow (overflow:visible) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/ DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Formatierung mit der Eigenschaft width</ title> <meta http-equiv="Content-Type" content="text/ html;charset=UTF-8"/> <style type="text/css"> html {border: 1px solid green;} body {border: 1px dashed blue;} p {border: 1px dotted red; width: 300px; height:100px;} </style> </head> <body> <p>Dies ist Text innerhalb eines Paragraphen. Die Breite und Höhe eines Abschnitts betragen 300 bzw. 100 Pixel....</p> </body> </html>
  • 10. overflow:hidden <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/ DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Formatierung mit der Eigenschaft width</ title> <meta http-equiv="Content-Type" content="text/ html;charset=UTF-8"/> <style type="text/css"> html {border: 1px solid green;} body {border: 1px dashed blue;} p {border: 1px dotted red; width: 300px; height:100px; overflow:hidden} </style> </head> <body> <p>Dies ist Text innerhalb eines Paragraphen. Die Breite und Höhe eines Abschnitts betragen 300 bzw. 100 Pixel....</p> </body>
  • 11. overflow:auto <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/ DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Formatierung mit der Eigenschaft width</ title> <meta http-equiv="Content-Type" content="text/ html;charset=UTF-8"/> <style type="text/css"> html {border: 1px solid green;} body {border: 1px dashed blue;} p {border: 1px dotted red; width: 300px; max-height: 100px; overflow:auto} </style> </head> <body> <p>Dies ist Text innerhalb eines Paragraphen. Die Breite und Höhe eines Abschnitts betragen 300 bzw. 100 Pixel....</p> </body> </html>
  • 12. overflow:scroll <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/ DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Formatierung mit der Eigenschaft width</ title> <meta http-equiv="Content-Type" content="text/ html;charset=UTF-8"/> <style type="text/css"> html {border: 1px solid green;} body {border: 1px dashed blue;} p {border: 1px dotted red; width: 300px; max-height:100px; overflow:scroll;} </style> </head> <body> <p>Dies ist Text innerhalb eines Paragraphen. Die Breite und Höhe eines Abschnitts betragen 300 bzw. 100 Pixel....</p> </body> </html>
  • 13. Werte für margin <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Formatierung mit der Eigenschaft margin</title> <meta http-equiv="Content-Type" content="text/ html;charset=UTF-8"/> <style type="text/css"> html {border: 1px solid green;} body {border: 1px dashed blue;} p {border: 1px dotted red; margin-top:10px; margin-right: 20px; margin-bottom:30px; margin-left:40px;} </style> </head> <body> <p>Dies ist Text innerhalb eines Paragraphen....</p> </body> </html>
  • 14. Wertzusammenfassung: margin <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Formatierung mit der Eigenschaft margin</title> <meta http-equiv="Content-Type" content="text/ html;charset=UTF-8"/> <style type="text/css"> html {border: 1px solid green;} body {border: 1px dashed blue;} p {border: 1px dotted red; margin: 20px;} </style> </head> <body> <p>Dies ist Text innerhalb eines Paragraphen....</p> </body> </html>
  • 15. Wertzusammenfassung: margin <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Formatierung mit der Eigenschaft margin</title> <meta http-equiv="Content-Type" content="text/ html;charset=UTF-8"/> <style type="text/css"> * {margin: 0; padding: 0; border: 0;} p {border: 1px dotted red; margin:20px;} </style> </head> <body> <p>Dies ist Text innerhalb eines Paragraphen....</p> </body> </html>
  • 16. margin und padding margin border padding <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Formatierung mit der Eigenschaft margin</title> <meta http-equiv="Content-Type" content="text/ html;charset=UTF-8"/> <style type="text/css"> * {margin: 0; padding: 0; border: 0;} p {border: 1px dotted red; margin:20px; padding: 30px; } </style> </head> <body> <p>Dies ist Text innerhalb eines Paragraphen....</p> </body> </html>
  • 17. Zentrieren mit margin:left und margin:right <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Formatierung mit der Eigenschaft margin</title> <meta http-equiv="Content-Type" content="text/ html;charset=UTF-8"/> <style type="text/css"> * {margin: 0; padding: 0; border: 0;} p {border: 1px dotted red; margin-left:auto; margin-right: auto; padding:30px;} </style> </head> <body> <p>Dies ist Text innerhalb eines Paragraphen....</p> </body> </html>
  • 18. Ohne position sind Positionsangaben wirkungslos <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Formatierung mit der Eigenschaft position</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <style type="text/css"> * {margin: 0; padding: 0;border: 0;} p {border: 1px dotted red; margin:20px; padding: 10px; } p#top {top: 30px; left: 30px;} </style> </head> <body> <p id="top">Dies ist Text innerhalb eines Paragraphen. eines Paragraphen. </p> <p id="bottom">Dies ist Text innerhalb eines Paragraphen...</p> </body> </html>
  • 19. position:relative <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Formatierung mit der Eigenschaft position</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <style type="text/css"> * {margin: 0; padding: 0; border: 0;} p {border: 1px dotted red;margin:20px; padding: 10px; } p#top {position:relative; top: 30px; left: 30px;} </style> </head> <body> <p id="top">Dies ist Text innerhalb eines Paragraphen. eines Paragraphen. </p> <p id="bottom">Dies ist Text innerhalb eines Paragraphen...</p> </body> </html>
  • 20. position:absolute <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Formatierung mit der Eigenschaft position</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <style type="text/css"> * {margin: 0; padding: 0; border: 0;} p {border: 1px dotted red; margin:20px; padding: 10px; } p#top {border: 1px solid black; position: absolute; top: -15px; left: -15px;} </style> </head> <body> <p id="top">Dies ist Text innerhalb eines Paragraphen. eines Paragraphen. </p> <p id="bottom">Dies ist Text innerhalb eines Paragraphen...</p> </body> </html>
  • 21. Relative Positionierung in einem umgebenden Element <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Formatierung mit der Eigenschaft position</title> <meta http-equiv="Content-Type" content="text/ html;charset=UTF-8"/> <style type="text/css"> * {margin: 0; padding: 0; border: 0;} div {border: 1px solid gray; position: relative; top: 20px; left: 20px;} p {border: 1px dotted red; padding: 10px; width: 300px;} p#top {border: 1px solid black; position: relative; top: -10px; left: -10px;} p#bottom {border: 1px solid black; position: relative; top: 20px; left: 10px;} </style> </head> <body> <div> <p id="top">Dies ist Text innerhalb eines Paragraphen...</p>
  • 22. Absolute Positionierung in einem umgebenden Element <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Formatierung mit der Eigenschaft position</title> <meta http-equiv="Content-Type" content="text/ html;charset=UTF-8"/> <style type="text/css"> * {margin: 0; padding: 0; border: 0;} div {border: 1px solid gray; position: relative; top: 20px; left: 20px;} p {border: 1px dotted red; padding: 10px; width: 300px;} p#top {border: 1px solid black; position: absolute; top: -10px;left: -10px;} p#bottom {border: 1px solid black;position: absolute;top: 200px; left: 10px;} </style> </head> <body> <div> <p id="top">Dies ist Text innerhalb eines Paragraphen...</ p>
  • 23. float:left <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Formatierung mit der Eigenschaft float</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <style type="text/css"> * {margin: 0; padding: 0; border: 0;} p {border: 1px dotted red;margin: 10px;padding: 10px;} p.remark {float:left;width: 80px;} </style> </head> <body> <div> <p>Dies ist Text innerhalb eines Paragraphen....</ p> <p class="remark">Dies ist eine Bemerkung.</p> <p>Dies ist Text innerhalb eines Paragraphen. ....</ p> </div>
  • 24. clear <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Formatierung mit der Eigenschaft float</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <style type="text/css"> * {margin: 0; padding: 0; border: 0;} p {border: 1px dotted red; margin: 10px; padding: 10px;} p.remark {float:left; width: 80px; p.remark_right {float:right; width: 80px;} p.bottom {clear:left;}} </style> </head> <body> <div> <p>Dies ist Text innerhalb eines Paragraphen....</p> <p class="remark">Dies ist eine Bemerkung.</p> <p class="remark_right">Dies ist eine weitere und schon etwas längere Bemerkung.</p>
  • 25. clear:both <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Formatierung mit der Eigenschaft float</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <style type="text/css"> * {margin: 0; padding: 0; border: 0;} p {border: 1px dotted red; margin: 10px; padding: 10px;} p.remark {float:left; width: 80px; p.remark_right {float:right; width: 80px;} p.bottom {clear:both} </style> </head> <body> <div> <p>Dies ist Text innerhalb eines Paragraphen....</p> <p class="remark">Dies ist eine Bemerkung.</p> <p class="remark_right">Dies ist eine weitere und schon etwas längere Bemerkung.</p>
  • 26. Einfaches dreispaltiges Layout <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Formatierung mit der Eigenschaft float</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <style type="text/css"> * {margin: 0; padding: 0; border: 0;} html, body {height:100%;} p {border: 1px dotted red; margin: 10px; padding: 10px;} div {padding: 10px; border: 1px solid black;} div.left_column {float:left; width: 100px; height: 100%;} div.right_column {float:right; width: 100px; height: 100%;} </style> </head> <body> <div class="left_column">Dies ist eine Spalte.</div> <div class="right_column">Dies ist eine weitere Spalte.</div> <p>Dies ist Text innerhalb eines Paragraphen. </p> <p>Dies ist Text innerhalb eines Paragraphen. </p>