IDM 221 Web Design I IDM 221: Web Authoring I 1
Week 7 IDM 221: Web Authoring I 2
Page Layout Part 1 IDM 221: Web Authoring I 3 Part 1 because part 2 is coming next term (RWD, Flexbox, Grids)
Posi%on An Element posi&on top bo*om le. right z-index IDM 221: Web Authoring I 4 Use these properties to position elements on a page. Let's look at these individually.
Posi%on sta%c rela%ve fixed absolute s%cky The position property determines how an element is positioned. IDM 221: Web Authoring I 5 Possible values are static, absolute, fixed and relative. Static is the default value, which means the element is placed in the normal flow of the page. Relative means the element is positioned relative to it's position in the normal flow, again based on the top, left, bottom and right properties. Absolute means the element is removed from the flow and positioned relative to the closest containing block that is also positioned. The position is determined by the top, left, bottom and right properties. Fixed means the element is positioned absolutely relative to the browser window. The position again is determined by the top, left, bottom and right properties. Sticky means the element is positioned based on the user's scroll position.
Sta$c Posi$on IDM 221: Web Authoring I 6
IDM 221: Web Authoring I 7 In normal flow, each block-level element sits on top of the next one. Since this is the default way in which browsers treat HTML elements, you do not need a CSS property to indicate that elements should appear in normal flow. example: position-static
Rela%ve Posi%on IDM 221: Web Authoring I 8
IDM 221: Web Authoring I 9 Relative positioning moves an element in relation to where it would have been in normal flow. For example, you can move it 10 pixels lower than it would have been in normal flow or 20% to the right.
<p>lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> <p class="example">ut enim ad minim veniam, quis nostrud exercitation.</p> p.example { position: relative; left: 100px; top: 10px; } IDM 221: Web Authoring I 10 example: position-relative
Absolute Posi,on IDM 221: Web Authoring I 11
IDM 221: Web Authoring I 12 When the position property is given a value of absolute, the box is taken out of normal flow and no longer affects the position of other elements on the page. (They act like it is not there.) The box offset properties (top or bottom and left or right) specify where the element should appear in relation to its containing element.
<h1>my Awesome Web Page</h1> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. </p> h1 { position: absolute; left: 500px; top: 0; width: 250px; } IDM 221: Web Authoring I 13 example: position-absolute and position-absolute-2
Fixed Posi*on IDM 221: Web Authoring I 14
IDM 221: Web Authoring I 15 Fixed positioning is a type of absolute positioning that requires the position property to have a value of fixed. It positions the element in relation to the browser window. Therefore, when a user scrolls down the page, it stays in the exact same place. It is a good idea to try this example in your browser to see the effect.
<h1>my Awesome Web Page</h1> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. </p> h1 { position: fixed; left: 0; top: 0; width: 100%; } IDM 221: Web Authoring I 16 example: position-fixed
S"cky Posi"on IDM 221: Web Authoring I 17 Sticky positioning is a newer CSS property. It combines static and fixed positioning techniques, and uses the user's scroll position on the page to determine the position of the element. The basic concept is the element is positioned statically until some specific scroll condition is met, at which point the position of the element becomes fixed. Let's look at an example. example: position-sticky
z-index IDM 221: Web Authoring I 18
IDM 221: Web Authoring I 19 When you start positioning elements and messing with the natural flow of the page, there is the possibility that content will begin to overlap or fight for a specific spot on the page. The z-index property helps us deal with the issue by defining the order of our content. Think of it like layers in your graphic design software.
.thing1,.thing2 { height: 100px; width: 100px; position: absolute; }.thing1 { left: 0; top: 0; z-index: 10; }.thing2 { left: 20px; top: 20px; z-index: 20; } IDM 221: Web Authoring I 20 Why did I use 10 and 20 instead of 1 and 2?
Float IDM 221: Web Authoring I 21 By default, block elements flow from top to bottom. When you float an element, it's taken out of the flow of the document. Because of that, any elements that follow the floated element flow into the space that's left by the floated element.
<div class="wrapper"> <aside> <p>lorem ipsum...</p> </aside> <main> <p>lorem ipsum...</p> </main> <footer> <p>lorem ipsum...</p> </footer> </div> IDM 221: Web Authoring I 22
main { margin: 0; padding: 0 20px; } aside { border: 1px solid black; float: right; margin: 0 0 10px 20px; padding: 0 20px; width: 250px; } IDM 221: Web Authoring I 23 The basic skills for floating an element include first using the float property to define whether you want the element floated to the left or right. You also have to set a width of the floated element. In the example, the aside is 250px and floated to the right. The main element that follows flows into the space to the left of the aside.
footer { border-top: 1px solid lightgray; clear: both; font-size: 0.88rem; } IDM 221: Web Authoring I 24 By default, any content that follows the floated element will fill in the space to the side of the floated element. If you want to stop the flow of elements into the space behind a floated element, you can use the clear property. In this example, this property is used to stop the footer from flowing into the space next to the aside. The value of this property can be left, right or both and works whether the floated element is floated to the left or right.
Float Examples Basics 2 Column Fixed Width 2 Column Fluid Width Grid System IDM 221: Web Authoring I 25 Examples are available in the examples folder.
Exercise! h"p://digm.drexel.edu/crs/idm221/exercises/layouts IDM 221: Web Authoring I 26
For Next Week... IDM 221: Web Authoring I 27 Work