IDM 221 - Digital Media | Drexel...

IDM 221

Web Design I

IDM 221: Web Authoring I 1

Part 1 because part 2 is coming next term (RWD, Flexbox, Grids)

Page Layout

Part 1


Use these properties to position elements on a page. Let's look at these individually.

Position An Element

• position

• top

• bottom

• left

• right

• z-index


The position property determines how an element is positioned. 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.Let's review examples of each. (examples available in examples folder)

Position

• static

• relative

• fixed

• absolute

• sticky


Static Position


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


Relative Position


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.


example: position-relative

<p>Lorem ipsum.</p><p class="example">Ut enim ad.</p>

p.example { position: relative; left: 100px; top: 10px;}


Absolute Position


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.


example: position-absolute and position-absolute-2

<h1>My Awesome Web Page</h1><p>Lorem ipsum dolor.</p>

h1 { position: absolute; left: 500px; top: 0; width: 250px;}


Fixed Position


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.


example: position-fixed

<h1>My Awesome Web Page</h1><p>Lorem ipsum dolor.</p>

h1 { position: fixed; left: 0; top: 0; width: 100%;}


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

Sticky Position


z-index


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.


Why did I use 10 and 20 instead of 1 and 2?

.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 19

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.

Float


<div class="wrapper"> <aside> <p>Lorem ipsum...</p> </aside> <main> <p>Lorem ipsum...</p> </main> <footer> <p>Lorem ipsum...</p> </footer></div>


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.

main { margin: 0; padding: 0 20px;}

aside { border: 1px solid black; float: right; margin: 0 0 10px 20px; padding: 0 20px; width: 250px;}


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.

footer { border-top: 1px solid lightgray; clear: both; font-size: 0.88rem;}


Examples are available in the examples folder.

Float Examples

• Basics

• 2 Column Fixed Width

• 2 Column Fluid Width

• Grid System


Exercise !

http://digm.drexel.edu/crs/IDM221/exercises/layouts


http://digm.drexel.edu/crs/IDM221/exercises/layouts/index.php/index.php

Work

For Next Week


IDM 221 - Digital Media | Drexel...

Documents

Transcript of IDM 221 - Digital Media | Drexel...