Topic 08 : Page Layout with CSS


Published on

Published in: Education, Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Topic 08 : Page Layout with CSS

  1. 1. Topic-08 Page Layout with CSS Er. Pradip Kharbuja
  2. 2. A Typical Website Layout Header Navigation Bar Page Content Footer Additional Links
  3. 3. We’ll learn...
  4. 4. Using CSS For Page Layout ▪ CSS is used to create complex page layouts. 1. Using the float and clear properties 2. Using positioning properties
  5. 5. The Process ▪ Mark-up the page with HTML elements to define meaning. ▪ Add <div> elements to describe different parts of the page. ▪ Use the width and float properties to create a basic page layout. ▪ Add finishing CSS touches – colours, fonts etc.
  6. 6. HTML Page
  7. 7. CSS
  8. 8. Output till now...
  9. 9. The float Property ▪ The float property specifies whether or not a box (an element) should float. ▪ The float property is used to make the columns wrap onto the same line. ▪ The value of float property can be none, left, right. ▪ To stop floating, the clear property is used. ▪ The value of clear property can be left, right, both.
  10. 10. Updated CSS
  11. 11. Updated CSS
  12. 12. Final Output
  13. 13. Task
  14. 14. Centering the Page ▪ The margin-left and margin-right properties are set to auto. – The browser re-calculates the margins based on the window size and centers the page.
  15. 15. Positioning ▪ CSS positioning properties allows us to position elements on the page. ▪ It can also place an element behind another. ▪ Positioning is an alternative approach to using floats.
  16. 16. Positioning ▪ The position property can be one of four values – Static ▪ It is default value. A static positioned element is always positioned according to the normal flow of the page – Relative ▪ A relative positioned element is positioned relative to its normal position. ▪ The element can be moved, but it remains in the document flow.
  17. 17. Positioning – Absolute ▪ The element can be moved and is removed from the document flow. – Fixed ▪ The element is positioned relative to the browser window and not the page. ▪ Fixed positioned elements are removed from the normal flow. ▪ It will not move even if the window is scrolled. DEMO
  18. 18. Positioning ▪ By default, elements are placed one after the other in a page. – They do not overlap. ▪ Elements which are taken out of the ‘document flow’ – Do not occupy any space on the page. – Can overlap other elements – CSS properties define location on the page
  19. 19. Design using absolute position
  20. 20. CSS
  21. 21. CSS ▪ Elements with absolute positioning are placed in relative to their parent element. ▪ The parent has a position property with value relative.
  22. 22. Fixed, Fluid, Adaptive & Responsive ▪ Fixed websites have a fixed width and resizing the browser or viewing it on different devices won’t affect on the way the website looks. ▪ Fluid websites are built using percentages for widths. As a result, columns are relative to one another and the browser allowing it to scale up and down fluidly.
  23. 23. Fixed, Fluid, Adaptive & Responsive ▪ Adaptive websites introduce media queries to target specific device sizes, like smaller monitors, tablets, and mobile. ▪ Responsive websites are built on a fluid grid and use media queries to control the design and its content as it scales down or up with the browser or device.
  24. 24. Fluid Page Design
  25. 25. Fluid Page Design
  26. 26. List Based Navigation Bars ▪ It is common for sites to implement horizontal navigation bars. ▪ Need to use CSS to change the default list appearance
  27. 27. List Based Navigation Bars
  28. 28. Removing the Default Styling ▪ The first step is to remove the default list appearance. – list-style:none ▪ Removes the bullet points ▪ The <li> elements are floated to the left. – Wrap onto the same line
  29. 29. Styling the Links ▪ The hyperlinks can then be styled to look like navigation buttons. – The display property is necessary so the hyperlinks can be given a width. – We can also specify background- images.
  30. 30. Styling the Links
  31. 31. End of Topic - 08 Any Questions?