Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Page layout with css

256 views

Published on

Page layout with css

Published in: Education
  • Login to see the comments

Page layout with css

  1. 1. Prepared By: Er. Nawaraj Bhandari DESIGNING AND DEVELOPING A WEBSITE Topic 8: Page Layout with CSS
  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
  17. 17. Positioning  The position property can be one of four values  Relative  A relative positioned element is positioned relative to its normal position.  The element can be moved, but it remains in the document flow.
  18. 18. Positioning  Absolute  The element can be moved and is removed from the document flow.
  19. 19. Positioning  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.
  20. 20. 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
  21. 21. Design using absolute position
  22. 22. CSS
  23. 23. CSS ▪ Elements with absolute positioning are placed in relative to their parent element. ▪ The parent has a position property with value relative.
  24. 24. Task
  25. 25. 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.
  26. 26. 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.
  27. 27. Fluid Page Design
  28. 28. Fluid Page Design
  29. 29.  Columned designs do not suit mobile devices.  Screen width  Even flexible designs have limits at low resolutions.  The handheld media type has limited support.  One solution is CSS3 Media Queries. Page Layout and Mobile Devices
  30. 30.  CSS 3 extends the concept of media queries.  Provide different style sheets based on screen resolution  If the device’s screen resolution is less than 480px, the mobile.css style sheet will be used. CSS3 Media Queries
  31. 31.  Specify rules in the mobile.css style sheet.  Remove the columns. CSS3 Media Queries #header, #nav_bar, #page_contents, #extra_links, #footer { width:auto;float:none; }
  32. 32. List Based Navigation Bars  It is common for sites to implement horizontal navigation bars.  Need to use CSS to change the default list appearance
  33. 33. List Based Navigation Bars
  34. 34. 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
  35. 35. 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.
  36. 36. Styling the Links
  37. 37. Topic 8 – HTML Forms Any Questions?

×