CSS III Positioning

CSS III Positioning Webdesign og Webkommunikation 09.10.2008

Goals of the lecture • Floating • Positioning

The normal flow • Block elements laid from top to bottom • Text elements laid from left to right, flowing in the block element • Objects in the normal flow influence surrounding objects • Floating and positioning change the normal flow

The normal flow <img src="logo_en.gif" alt="" /> "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam accumsan, leo vel gravida placerat, est nulla sollicitudin mi, ut dignissim eros urna sit amet sem. Phasellus posuere malesuada tortor. Mauris id pede.

Floating image img.right {float:right; margin: 10px;} <img class="right" src="logo_en.gif" alt="" /> "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam accumsan, leo vel gravida placerat, est nulla sollicitudin mi, ut dignissim eros urna sit amet sem. Phasellus posuere malesuada tortor. Mauris id pede.

Floating text span.sidenote {float: right; margin: 10px; border: 2px solid; width: 200px;} This is a sidenote on the right explaining some latin…Lorem ipsum dolor sit amet...

Floating multiple elements P1 P2 P3 P4 P5 P6 p#float { float: left; width: 200px; } p {border: 1px solid red;}

Clearing img {float: left;} img {float: left;} h2 {clear: left;}

Positioning • 4 types: • static: normal way, objects are rendered following the normal flow • relative: moves the element box preserving the original space • absolute: object is removed from the flow and positioned relative to their containing block • fixed: similar to absolute, but object is positioned relative to the viewport (i.e. the browser window)

Specifying position • offset property (top, right, bottom, left) • Value: • Absolute measure (pixels, ems) • Relative (%) • Move image 50 pixels down • Can take negative values -> move in the opposite direction img {position: absolute; top: 50px; }

Relative positioning • Relative to the object’s initial position in the normal flow • The original space in the document flow is preserved • There might be overlap em { position: relative; top: 30px; left: 30px; background-color: pink; }

Absolute positioning • Relative to the edges of the containing block using offset properties • Object is removed from the document flow em { position: absolute; top: 30px; left: 30px; background-color: pink; }

Absolute positioning II • How to determine the containing block of an element: • positioned element not contained within another positioned element -> position relative to the root containing block (<html> element) • positioned element contained within an element that is positioned using relative, absolute or fixed -> position relative to that containing element • An element that is positioned becomes the containing block for all elements it contains

Absolute positioning III #one {position: absolute; top: 10px; left: 10px;} #two {position: absolute; top: 30px; left: 10px;} #three {position: absolute; top: 10px; left: 10px;} p1 <div id=“two”> p3 </div> 10px 10px p1 30px 10px 10px p3 10px Viewport

Z-index p {position: absolute; padding: 5px; color: black;} #p1 {z-index: 19; background-color: red;} #p2 {z-index: 1; background-color: blue;} span.b {z-index: 72; background-color: green;} Paragraph 1, z-index=19 Paragraph 2, z-index=1. This is a span with z-index 72 And now some more text…

Fixed positioning • Relative to the edges of the viewport (browser window) • Object is removed from the document flow • Elements remain fixed with respect to the browser window • Not supported by (you guessed it) IE 6 and earlier.

Fixed positioning II #menu { position: fixed; width: 200px; background-color: pink; } #content { position: absolute; left: 250px; border: 1px solid #CCCCCC; }

Page layout • We don’t know the size of the browser window • Users might change the size of the text • 3 main techniques for page layout: • Liquid • Fixed • Elastic

Liquid layout • The page fills the available space in the window • http://www.w3.org/ • Pros: • No need to design for a specific resolution • The whole window is filled: no blank spaces • Cons: • Line lengths can get very long in large monitors • Layout less predictable

Liquid layout II • Use percentages to specify width #left { float:left; width: 25%; margin-right: 5%; background-color:pink; } #content { float:left; width: 70%; }

Fixed layout • The width of the page is fixed: blank space either on one or on both sides • http://www.dr.dk/ • Pros: • Predictable layout • Good control over line length • Cons: • If page width bigger than browser window, the content on the right is not shown • Layout changes if text is resized

Elastic layout • Expands or contracts with the text size • http://www.htmldog.com/articles/elasticdesign/demo/ • Pros: • Consistent layout • Flexibility in text size • Good control over line lengths • Cons: • Images don’t resize with text • Not really necessary with the “new” zooming function in newer browsers

Centering a page div#container { position: relative; width: 600px; margin-left: auto; margin-right: auto; } Might not work in IE6 div#container { position: absolute; width: 600px; left: 50%; margin-left: -300px; } Works always

Final advise • Try your website in different browsers • And if you can’t: • http://browsershots.org/

Questions?

CSS III Positioning