1 / 48

Layout using CSS

Layout using CSS. Using multiple classes. In the head: <style type="text/css" > .important {font-style:italic;} .title {color:red;} </style> In the body: <p class="title important" >Here's a type of paragraph that is intended to be displayed in italic.</p>. The goal. Part 1 : Layout.

akina
Télécharger la présentation

Layout using CSS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Layout using CSS

  2. Using multiple classes In the head: <style type="text/css" > .important{font-style:italic;} .title{color:red;} </style> In the body: <p class="title important">Here's a type of paragraph that is intended to be displayed in italic.</p>

  3. The goal

  4. Part 1: Layout

  5. The concept • Use <div> tags to structure the blocks of the page. (content) • Define a style for <div> tags to achieve the desired output. (presentation)

  6. 1. Basic properties • width (default is 100%) • padding (ex: padding: 10px;) • background (ex: background: #ffffff;) • etc

  7. 2. Floating elements • Enables blocks to be aligned • Property: • float: left; • float: right; • float: none;

  8. 2. Floating elements, example • Three divs in a page, with following style: div.title{ float:left; border:1px solid gray; padding:10px; } Output: layoutb.html

  9. 2. Floating elements, example • Three divs in a page, with following style: div.title{ width:200px; float:left; border:1px solid gray; padding:10px; } Output: layoutc.html

  10. 3. Positioning • Elements can be positioned at any coordinates in the page • Property: • position: static; • position: relative; • position: absolute;

  11. Positioning example • Three divs in a page, with following style: div.title{ width:200px; position: absolute; top: [100,200,300]px; left: [100,200,300]px; border:1px solid gray; padding:10px; } Output: layoutd.html

  12. 1. no layout <body> <h1>Page Title</h1> <p>This is the first block.</p> <p>This is still the first block.</p> <p>This is the second block.</p> </body> layout1.html

  13. Output

  14. 2. Three sections (1) <body> <div> <h1>Page Title</h1> </div> ... </body>

  15. 2. Three sections (2) <body> ... <div> <p>This is the first block</p> <p>This is still the first block.</p> </div> ... </body>

  16. 2. Three sections (3) <body> ... <div> <p>This is the second block.</p> </div> </body>

  17. Output

  18. 2. Three “typed” sections (1) <body> <div class=”title”> <h1>Page Title</h1> </div> ... </body>

  19. 2. Three sections (2) <body> ... <div class=”part1”> <p>This is the first block</p> <p>This is still the first block.</p> </div> ... </body>

  20. 2. Three sections (3) <body> ... <div class=”part2”> <p>This is the second block.</p> </div> </body>

  21. Output

  22. 3. Writing a style (1) <style> div.title{ border:1px solid gray; padding:10px; } ... </style>

  23. 3. Writing a style (2) <style> ... div.part1{ border:1px solid gray; padding:10px; } ... </style>

  24. 3. Writing a style (3) <style> ... div.part2{ border:1px solid gray; padding:10px; } </style> layout2.html

  25. Output

  26. 4. Two column layout v1 - right column has variable width

  27. 4. Two column layout v1

  28. 4. Two column layout v1 (1) <style> div.title{ border:1px solid gray; padding:10px; } ... </style>

  29. 4. Two column layout v1 (2) <style> ... div.part1{ float: left; width:200px; border:1px solid gray; padding:10px; } ... </style>

  30. 4. Two column layout v1 (3) <style> ... div.part2{ margin-left:222px; border:1px solid gray; padding:10px; } </style>

  31. Output • As required • Right column has variable width • layout2col1.html

  32. 5. Two column layout v2 – left column has variable size

  33. 5. Two column layout v2

  34. 5. Two column layout v2 (1) <style> div.title{ border:1px solid gray; padding:10px; } ... </style>

  35. 5. Two column layout v2 (2) <style> ... div.part1{ margin-right:222px; border:1px solid gray; padding:10px; } ... </style>

  36. 5. Two column layout v2 (3) <style> ... div.part2{ float:right; width:200px; border:1px solid gray; padding:10px; } </style>

  37. Output • As required • Left column has variable width • In Body of document, part1 and part2 have been swapped, otherwise doesn't work • At home, try to swap them back and see what happens ... • There's a way to make the layout work without swapping. See three column example further on ... • layout2col2.html

  38. 6. Three column layout v1 – Right column has variable width

  39. 6. Three column layout v1

  40. 6. Change in the document body <body> <div class=”part1”>...</div> <div class=”part3”>...</div> <div class=”part2”>...</div> </body> layout3col1.html

  41. 6. Threecolumn layout v1 (1) <style> ... div.part1{ float: left; width:200px; border:1px solid gray; padding:10px; } ... </style>

  42. 6. Three column layout v1 (2) <style> ... div.part3{ float: left; width:200px; border:1px solid gray; padding:10px; } ... </style>

  43. 6. Two column layout v1 (3) <style> ... div.part2{ margin-left:444px; border:1px solid gray; padding:10px; } </style>

  44. 8. Three column layout v3 – All three columns have variable widths

  45. 8. Three column layout v3

  46. 8. Threecolumn layout v3 (1) <style> ... div.part1 { float: left; width:20%; border:1px solid gray; } ... </style> layout3col3.html

  47. 8. Three column layout v3 (2) <style> ... div.part3 { float:left; width:58%; border:1px solid gray; } ... </style>

  48. 8. Three column layout v3 (3) <style> ... div.part2 { float:left; width:20%; background:#ffffff; border:1px solid gray; } </style>

More Related