Css Positionering

CSS positionering Thomas Aertssens 2008-2009

Alles is gepositioneerd ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Css voor paginalayout ,[object Object]

Design benadering ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Tabellen zijn toegelaten in xhtml! ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Datatabellen en css ,[object Object]

divs en divitis ,[object Object],[object Object],[object Object],[object Object],[object Object]

classitis ,[object Object],[object Object],[object Object],[object Object],[object Object]

Compacte code ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Compacte code ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Compacte code ,[object Object],[object Object],[object Object]

Compacte code = overzichtelijke code ,[object Object]

Css selectoren: specificiteit ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Css selectoren: specificiteit CSS2.1<>CSS2.0 voorbeelden

Tools ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Positionering en paginalayout De theorie

Paginalayout: basiselementen ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Boxmodel ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Maatberekening ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Maateenheden ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],media="screen" @media screen, projection

Font size ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Fonts en browsers ,[object Object]

Fonts en line-height ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Floating en positioning ,[object Object],[object Object],[object Object],[object Object],[object Object]

Floating: theorie ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Floating ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Floating ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Positioning ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

position: static ,[object Object]

position: absolute ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

position: relative ,[object Object],[object Object],[object Object],[object Object]

position: fixed ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

z-index: stacking order ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Verbergen van elementen ,[object Object],[object Object],[object Object],[object Object],[object Object]

overflow ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

clip ,[object Object],[object Object],div { clip: rect(5px, 40px, 45px, 5px) } div { clip: rect(5px 40px 45px 5px) } IE: W3C:

Positionering en paginalayout De praktijk

Navigaties met lijsten ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Navigatie met afbeelding(en) ,[object Object],navigatie_rollover.html

Navigatie met afbeelding(en) ,[object Object],[object Object],[object Object]

Navigatie: sliding doors techniek ,[object Object],[object Object],navigatie_rollover_ sliding.html

Ahtergrond - afbeelding(en) meer dan nodig meer dan nodig gewenste breedte

Fotogallerij met lijst ,[object Object],<ul id="albumlist"> <li><img src="images/thumb1.jpg" alt="deisgn 1" />design 1</li> <li><img src="images/thumb2.jpg" alt="deisgn 2" />design 2</li> <li><img src="images/thumb3.jpg" alt="design 3" />design 3</li> <li><img src="images/thumb4.jpg" alt="design 4" />design 4</li> <li><img src="images/thumb5.jpg" alt="design 5" />design 5</li> <li><img src="images/thumb6.jpg" alt="design 6" />design 6</li> <li><img src="images/thumb7.jpg" alt="design 7" />design 7</li> <li><img src="images/thumb8.jpg" alt="design 8" />design 8</li> </ul>

Floating layout ,[object Object],[object Object],[object Object],[object Object],[object Object]

Floating layout ,[object Object],[object Object],[object Object]

Floating layout ,[object Object],[object Object],[object Object],[object Object],einde van de float

Gepositioneerde layout ,[object Object],[object Object],[object Object]

Gepositioneerde layout ,[object Object],[object Object],[object Object],[object Object]

Footer onderaan document ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],html, body, #wrapper { min-height: 100%;} #wrapper{ position: absolute; top: 0; left: 0;} #footer { position: absolute; [meer css]}

Liquid en zoom layout ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Faux columns ,[object Object],[object Object]

Faux column liquid ,[object Object],[object Object],[object Object],© Bulletproof Web Design: Improving flexibility and protecting against worst-case scenarios with XHTML and CSS

Faux column liquid ,[object Object],[object Object],[object Object],[object Object],[object Object],2000px 1400px 600px 560 640px transparant

Negative margin techniek ,[object Object],[object Object],[object Object],[object Object]

Alternate styles ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Trouble in paradise ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Internet Explorer ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

IE bugs ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Don’t let the bugs bite ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Hoe het begon: de boxmodel hack ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],html > body #box {width:128px;}

IE hasLayout -property ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],IE hasLayout

IE hasLayout -property ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Oplossingen: backslash hack ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Oplossingen: * workaround ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

* Workaround voorbeeld ,[object Object],[object Object],[object Object],[object Object]

* Workaround voorbeeld ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],.clearme:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } /* voor IE <7 / * html .clearme { height: 1px; } /* voor IE 7*/ *+html .clearme { min-height: 1px;}

Oplossingen: Underscore Hack ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Oplossingen: script ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Oplossingen: IE conditionele CSS ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Debug scenario ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

bronnen - internet ,[object Object]

Css Positionering

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (15)

Ähnlich wie Css Positionering

Ähnlich wie Css Positionering (20)

Css Positionering