eg-146:lecture16
Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
eg-146:lecture16 [2012/03/19 20:58] – [Changing the Cursor] eechris | eg-146:lecture16 [2012/03/19 21:30] (current) – [Positioning Elements Absolutely] eechris | ||
---|---|---|---|
Line 518: | Line 518: | ||
===== Case Study: Developing a Positioning Style Sheet ===== | ===== Case Study: Developing a Positioning Style Sheet ===== | ||
This is the document as we want it to appear when it is finished | This is the document as we want it to appear when it is finished | ||
- | [http:// | + | [[http:// |
===== Document Structure ===== | ===== Document Structure ===== | ||
Line 592: | Line 592: | ||
- | ==== To change the background colour ==== | + | ===== To change the background colour |
<code css> | <code css> | ||
Line 646: | Line 646: | ||
* [[http:// | * [[http:// | ||
* [[http:// | * [[http:// | ||
- | ===== Positioning Elements Absolutely ===== | ||
- | |||
- | Affixing an Element to the Browser Window | ||
- | |||
- | When a visitor scrolls in the browser window, the contents of the window usually move up or down while the Back and Forward buttons, for example, stay stationary or fixed. | ||
- | CSS allows you to affix elements to the browser window so that they don't move when the visitor scrolls up and down. | ||
- | |||
- | #sidebar { position: fixed; width: 26%; } | ||
- | |||
- | #main { padding: 4px; } | ||
- | |||
- | [Affixing an element to the browser window] | ||
- | |||
- | This example can only really be appreciated by seeing it in action. | ||
- | |||
- | Notes | ||
- | |||
- | Making Elements Float | ||
- | |||
- | You can make elements float in a sea of text (or other elements). | ||
- | You can use this technique to crete multi-column layouts, to create callout quotes, and more. | ||
- | We already pushed the sidebar off to the right, now we'll float the main content to its left. | ||
- | The navbuttons div will float next to the description rather than just under it. | ||
- | |||
- | #main { width: 75%; float: left; } | ||
- | |||
- | #navbuttons { width: 22em; float: right; } | ||
- | |||
- | [Floating elements] | ||
- | Notes | ||
- | |||
- | Controlling Where Elements Float (1) | ||
- | |||
- | You can control which elements an element can float next to an which cannot. | ||
- | Since it is the main div that is floating, all of the other elements, including the footer, flow around it unless we say otherwise. | ||
- | |||
- | [The footer shouldn' | ||
- | |||
- | Controlling Where Elements Float (2) | ||
- | |||
- | Here we clear the float so that the footer div no longer floats next to the main div | ||
- | |||
- | #footer { clear: both; } | ||
- | |||
- | [The footer doesn' | ||
- | Notes | ||
- | |||
- | Positioning Elements in 3D | ||
- | |||
- | When we floated the navbuttons they slid under the description. This means that you can't click the links (try it!). | ||
- | We set the z-index level to 1 which pulls the navbuttons div above the description. | ||
- | We also have to position the navbuttons div relatively so that the z-index property can work. | ||
- | |||
- | #navbuttons { position: relative; z-index: 1; } | ||
- | |||
- | [After z-index has been added, links will work] | ||
- | |||
- | Once the navbuttons div is on top, the links work as expected. | ||
- | |||
- | |||
- | |||
- | Setting the Border | ||
- | |||
- | You can create a border around an element and then set this for thickness, style and colour. | ||
- | If you've specified any padding, the border encloses both the padding and the contents of the element. | ||
- | |||
- | .entry { border-right: | ||
- | |||
- | .photo img { border: none; } | ||
- | |||
- | #footer { border-top: 2px dotted #B74E07; } | ||
- | [Setting the border] | ||
- | Notes | ||
- | [Setting the border] | ||
- | More notes | ||
eg-146/lecture16.1332190733.txt.gz · Last modified: 2012/03/19 20:58 by eechris