Layouts & Navigation

A guide to achieving different layouts and navigation styles using CSS and HTML.

Transcript

1. Layouts & Navigation IS1103 Lab - Friday 7th December 2012
2. Less theory, more practice... As promised, this week’s lab will be less like a lecture and more like a lab! Yesterday, you learned how to use CSS to style up a horizontal navigation bar. Today, we’ll change that navigation bar to a vertical one using some other CSS techniques. We’ll also learn a bit more about other layout paradigms.
3. Yesterday’s example
4. Changing the orientation to vertical Let’s take yesterday’s example and change it to provide a vertical navigation bar, without changing the HTML - we only need to change the CSS.
5. Putting the navigation bar on the right It’s really easy to change the navigation bar to display on the right hand side instead of the left. .nav { .nav { background-color: #DDD; becomes background-color: #DDD; width: 20%; width: 20%; float: left; float: right; } } and .nav ul li a { .nav ul li a { display: block; becomes display: block; color: #000; color: #000; padding: 10px 20px; padding: 10px 20px; border-bottom: 1px solid #000; border-bottom: 1px solid #000; text-decoration: none; text-decoration: none; border-right: 1px solid #000; border-left: 1px solid #000; } }
6. Putting the navigation bar on the right
7. Layouts in CSS You can achieve many different layout possibilities using CSS. These are typically broken into two main groups: Fixed-width layout and Flexible-width layout
8. Fixed-width layouts In a fixed width layout, you must specify the exact width of the layout. The size of the layout will not change depending on the size of the browser window, and will not adjust if the user resizes the window. The benefits of fixed-width layouts are that they are very predictable and easy to test. The primary disadvantage is that they lead to lots of potential unused screen real estate.
9. Fixed-width layout example To achieve a fixed width layout, you usually wrap your entire page in a “container” <div> element, which is given a specific width value. An example: <div class="container"> ...page content... </div> .container { width: 960px; margin: 0 auto; /* Centers the container */ }
10. Fixed-width layout example
11. Flexible-width layouts In a flexible-width layout, you can use a number of techniques to achieve a layout that adjusts in dimensions depending on the size of the user’s browser window. The most popular method of achieving a flexible- width layout is to use % values for widths. The main issue with this approach is that everything must be a percentage, meaning that you can’t have fixed- width navigation bars on your pages.
12. Flexible-width layouts (continued) A much better, but less-often used approach for creating a flexible layout is to use fixed positioning. The best way to explain this is to use an example. Let’s create a page that will always use up 100% of the space available in the browser window. Caveat: fixed positioning was introduced in IE7. I have a JavaScript microlibrary that will make it work in IE6 available on my GitHub account (maximus.js)
13. Full screen layout example
14. Positioning To date, you’ve learned about absolute positioning and fixed positioning in CSS. The default browser positioning system is static positioning, and will be used if you don’t explicitly use a specific type of CSS positioning. Relative positioning is a cross between static and absolute positioning that allows you to move elements in relation to their default position on the page.
15. Possibilities of CSS layouts The following example uses the power of CSS layouts to build a full-screen replica of the standard Microsoft Outlook application layout. This particular example was built using the ExtJS JavaScript framework, but this is built on top of CSS positioning and layout technology.
16. Possibilities of CSS layouts
17. One last thing... Something I find people struggling with all the time is figuring out how to make content display in the centre of a page. If you just want to centre an element horizontally, you can use margin: 0 auto; If you just want to centre text, use text-align: center; But what if you want something to centre horizontally and vertically? It’s not straightforward...
18. Horizontal and Vertical Centering Firstly, give the element you want to centre a fixed width and height. Next, you’ll want to use absolute positioning for the element you want to appear in the centre. Finally, you’ll need to use the negative margin trick to move the object to the absolute centre of the page. Make sense? Didn’t think so! Let’s look at an example instead!
19. Horizontal and Vertical Centering Example width: 300px; height: 300px; position: absolute; top: 50%; left: 50%; margin-top: -150px; margin-left: -150px;
20. Next week Styling tables Advanced CSS Examples Responsive Web Design Introduction to CSS3 Last week before Christmas break... After Christmas, we’ll move on to JavaScript!