Css positioning

CSS positionering Thomas Aertssens 2008-2009

Alles is gepositioneerd document volgorde block vs inline (x)html Browser defaults css width, height, padding, border, margin display float position overflow z-index

Css voor paginalayout Semantische xhtml-opbouw

Design benadering scheiding semantiek en design valide xhtml semantische namen voor class en id navigatie ipv linkerkolom nieuw ipv blauw_groot less is more Hou xhtml en css zo eenvoudig mogelijk verschillende css voor verschillende media @media alternate styles toegankelijke pagina's

Css en divs divs voor de paginaregio's

Tabellen zijn toegelaten in xhtml! voor data relatie tussen data th voor relatie-titels (geen class) caption, summary enige att in html cellspacing wegens onvolmaakte browsers

Datatabellen en css tabellen.html

divs en divitis zuinig met divs: is er geen ander element? divitis.html divitis in wysiwyg visual studio.net layers in Dreamweaver

classitis classitis geen onnodige classes - contextuele selectoren .navigatie #navigatie li

Compacte code veel minder code vrijwel alle attributen verdwijnen uit de code <p><font color="red" size="+2" face="Arial, sans-serif">Dit is veeel werk</font></p> geen redundante code spacer-gifs, tabellen in tabellen, lege p-tags, sequentiële breaks overzichtelijke code modulaire opbouw consequente siteopbouw: templates

Compacte code slashdot: van puur html naar css redesign winst zonder css-caching: ~2KB / request winst met css-caching: ~9KB / request zo'n 50miljoen bez / maand = ~1 612900 / dag winst zonder css-caching: ~3.15 GB / dag winst met css-caching: ~14 GB / dag

Compacte code kul redesign (simulatie) kul - tabeldesign met basis- css xhtml / css gepositioneerd redesign

Compacte code = overzichtelijke code voorbeeld: subnavigatie

Css selectoren: specificiteit Berekening : (0) 0 0 0 elk (pseudo-) element : 4 de waarde + 1 elke (pseudo-)class : 3 de waarde + 1 elke id: 2 de waarde + 1 bij gelijk gewicht: documentvolgorde bepalend inline-stijl: altijd grootste gewicht (1 ste waarde +1) !important krijgt steeds voorrang

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

Tools Firefox (mijn keuze) betrouwbare testtool Firefox addons Web developer toolbar http:// chrispederick.com / View source in editor html validator firebug IEtab IE web developer toolbar

Positionering en paginalayout De theorie

Css voor paginalayout vorige generatie layouts: tabellen in html

Paginalayout: basiselementen boxmodel maateenheden fonts maatberekening containing block floating positioning

Boxmodel feitelijke breedte in browser: leftmargin+leftborder+leftpadding+content +richtpadding+rightborder+rightmargin boxmodel auto-invulling van niet-gedefinieerde eigenschappen eenheden kunnen ook negatief zijn. vb margin: 20px; padding:0; auto-width margin: 0 auto; width:50% auto-marge L&R verschillend voor block en inline elementen opgepast met quirksmode -> Gebruik doctype

Maatberekening Marges en margin-collapsing : blockelementen: 100% breed vertikale marges schuiven in elkaar inline elementen, floating elements Breedte afhankelijk van inhoud Marges schuiven nooit in elkaar Marges van geneste elementen kunnen uit hun container schuiven Voorkomen met border of padding op container width en height height: content kan hoger en breder zijn dan container Correct browsergedrag: overflow min-width, min-height max-width, max-height boxmodel_widthenheight.html

Maateenheden screen pixels favoriet voor vele webdesigners (makkelijk) ! ook tekst in pixel vastleggen ! accessibility em relatief tov font-size => grote flexibiliteit welke fontsize? size.html em voor font-size: tov font-size van parent % tov width van contextelement sleutelwoorden small, xx-large print pt, cm, in, ...: media="screen" @media screen, projection

Font size font small: 13px x-small: 10px medium: 16px (in principe default) fonts ems en % 62.5% (=10px) => 2em: 20px =>1.2em: 12px Tip: voorkomen van nesting-problemen ul: 0.8em ul ul : 100%

Fonts en browsers happy screenshots

Fonts en line-height default meestal ok belangrijk bij hover-effecten met font-weight of font-size wijzigingen met of zonder maateenheid p {font: 10px/1.2em Helvetica, sans-serif; => line-height : 12px div {font-size:10px;line-height: 1.2em } p {font-size: 2em } => line-height van p: 12px div {font-size:10px;line-height: 1.2 } p {font-size: 2em ;} => line-height van p: 24px line-height.html

Floating en positioning in vergelijking met de meeste css steile leercurve veel misvattingen crossbrowser-frustraties positioning_basics.html

Floating: theorie ~ html: att. align="left|right" bij img float: left right none clear:

Floating element zit niet meer in normale flow containing element volgt hoogte van float binnenin niet bij overlap met andere content: inline: bovenop omliggende inhoud block: tekst bovenop omliggende inhoud achtergrond achter omliggende inhoud floating1.html

Floating breedte? SPEC: "A floated box must have an explicit width..." autoshrink Boxmodel geldt ook hier indien voldoende ruimte: naast elkaar op zelfde hoogte floating elementen: steeds block maar: vertikale marges schuiven niet in elkaar clear: left | right | both | none floating2.html

Positioning position position: static position: absolute position: relative position: fixed offset top: maateenheid left: maateenheid right: maateenheid bottom: maateenheid width & height stacking order z-index

position: absolute element wordt weggeknipt uit de normale flow ruimte van element wordt ingenomen alsof het niet bestond Gepositioneerd element komt in aparte laag offset berekend vanaf containing block border van viewport indien geen ancestor met position(~body) ofwel border van gepositioneerde ancestor (relatief of absoluut) normale positie indien geen offset positioning_absoluut.html waarden kunnen theoretisch impliciet zijn vb: auto-breedte en auto-hoogte top: 20px;left:1em;right:15px;bottom:0; IE < 7 heeft hier problemen mee

position: relative ingenomen ruimte van het element in de normale flow blijft bewaard. offset berekend vanaf normale positie vermijd inline element als ancestor voor verdere positionering positioning_relatief.html

position: fixed speciale vorm van absolute positionering containing block is steeds viewport / html element beweegt niet mee bij scrolling binnen een pagina. bij afdrukken: fixed element moet op elke pagina positioning_fixed.html

z-index: stacking order stacking order bij gepositioneerde elementen: overlap is mogelijk default: verder in document: bovenop vorig element gepostioneerd element kan z-index krijgen hogere index = hogere laag html (document): initiële stacking context gepositioneerd element kan lokale stacking context creëren z-index <> auto negatieve z-index is mogelijk positioning_zindex.html

Verbergen van elementen display: none ook screenreader negeert dit visibility:hidden accessibility text-indent: -9999px; left: -9999px;

overflow overflow: visible (default) hidden scroll auto overflow.html auto: container met geneste float volgt de hoogte van de float

clip clip enkel voor absoluut gepositioneerde elementen div { clip: rect(5px, 40px, 45px, 5px) } div { clip: rect(5px 40px 45px 5px) } IE: W3C:

Positionering en paginalayout De praktijk

Navigaties met lijsten horizontaal navigatie_horizontaal.html ofwel: floating li's ofwel: display:inline denk aan verschillend boxmodel vr inline vs block elementen vertikaal navigatie_vertikaal.html a als knop met mouseover en mousedown-effect a met display: block (hack voor IE) ! denk aan paddings en borders bij breedte en hoogte

Navigatie met afbeelding(en) tab-effect: take 1 navigatie_rollover.html

Navigatie met afbeelding(en) tab-effect: take 2 lijn onder © Bulletproof Web Design: Improving flexibility and protecting against worst-case scenarios with XHTML and CSS

Navigatie: sliding doors techniek tab-effect: take 3 li en a met background-image navigatie_rollover_ sliding.html

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

Fotogallerij met lijst layout_gallery.html <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 floating element moet expliciete breedte hebben floating in margin en padding of border layout _ 2col_float.html variant meerdere floats naast elkaar (vaste breedte)

Floating layout 25%+75%+ 1px border-left = >100% wrapperdivs border:0, margin:0; padding:0

Floating layout clear steeds alle voorgaande floats extra container met float clear op footer of container met overflow:auto einde van de float

Gepositioneerde layout absolute of fixed inhoud met margin, padding of border layout_3col_abspos.html

Gepositioneerde layout ook hier rekening houden met boxmodel containingblock bepaalt offset container-div: position:relative; risico op overlap

Footer onderaan document position: absolute; bottom: 0 ? tov viewport niet het document oplossing: wrapper en footer absoluut gepositioneerd layout_footer.html + IE<6 workaround html, body, #wrapper { min-height: 100%;} #wrapper{ position: absolute; top: 0; left: 0;} #footer { position: absolute; [meer css]}

Liquid en zoom layout procenten en em voor fonts, widths, borders, padding, ... denk aan boxmodel bij floats min-width, max-width IE (underscore-hack, any selector (*) ) zoom-emulatie: probleem met fixed fonts in IE <7 relatieve fontsize op body 62.5%; kolombreedtes, andere fonts, ... uitdrukken in em en % tov basis lettergrootte meeste gebruikers kennen de textmanipulatie menus niet

Faux columns met afbeelding op achtergrond layout_fauxcolumn.html

Faux column liquid basis floating layout 28%+content+30% layout_fauxcolumn_liquid.html © Bulletproof Web Design: Improving flexibility and protecting against worst-case scenarios with XHTML and CSS

Faux column liquid brede achtergrondafbeelding: 2000px achtergrond moet 70% van links: 1400/2000*100 background: url(img/fauxcolumn_right.gif) repeat-y 70% 0; achtergrond moet 28% van links: 560/2000*100 background: url(img/fauxcolumn_right.gif) repeat-y 28% 0; 2000px 1400px 600px 560 640px transparant

Negative margin techniek omgekeerde document volgorde eenvoudige oplossing voor clearingprobleem maar nadelig voor toegankelijkheid layout_negative_margin.html

Alternate styles meerdere css mogelijk rel = "alternate stylesheet" title="stijlnaam" styleswitcher in browser javascript <a href="javascript:;" onclick=" setActiveStyleSheet('2 kolommen'); return false;">2 cols</a> layout.html

Trouble in paradise bugs en spec overtredingen ...and the winner is "IE WIN" IE6: meest gebruikte browser ? http://marketshare.hitslink.com/report.aspx?qprid=2 IE7: veel problemen opgelost, maar niet alles oudere browsers IE5, 5.5: dalend marktaandeel IE/MAC: uitstervend NS 4.7: nostalgie ... FF, Opera, Safari (nu ook Win), Camino, Konqueror, Mozilla, ... verschillende OS => test, test, test workarounds hacks en filters indien nodig http://tredosoft.com/Multiple_IE

Internet Explorer float-bugs positioning-bugs overtredingen van de standaard autostretch van container rond floats dimensieproblemen <IE6: foute implementatie van boxmodel Tantek hack IE6: doctypeswitching: quirksmode <IE7: heel wat bugs en overtredingen van de specs IE7: nog niet bugvrij en evenmin volledig volgens de specs IE8: Looking good

IE bugs peekaboo bug IE6Magic  komt vaak voor bij gebruik van footer bug verdwijnt na uitlokken van foutief IE nested float gedrag demo: floating _Peekaboo.html guillotine bug Nog meer IE6 – trucks demo: floating_Guillotine.html double margin bug www.positioniseverything.net

Don’t let the bugs bite to hack or not to hack " T he complexity monster has reappeared, right in the center of modern Web development. Nowadays it doesn’t manifest itself as an endlessly nested table, but as an endlessly complicated CSS hack." (Peter-Paul Koch) oplossingen: * en *+ workaround underscore hack voor IE Win backslash-hack (simplified Holly hack) IE conditionele CSS (mijn keuze)

Hoe het begon: de boxmodel hack target IE<6 beruchte hack door Tantek Celik be nice to Opera boxmodel2.html width: 150px; /*waarde voor IE Win < 6 */ padding: 10px; border: 1px solid #000; voice-family: "\"}\""; voice-family:inherit; width:128px; /*correcte waarde vr andere browsers*/ html > body #box {width:128px;}

IE hasLayout -property “ hasLayout” is een IE/Win concept dat bepaalt hoe elementen hun inhoud visualizeren, interageren met andere elementen reageren op application/user events. element “has layout” indien hasLayout true css-elementen kunnen de property van waarde laten veranderen IE hasLayout

IE hasLayout -property mogelijke gevolgen van hasLayout = false heel aantal IE float bugs. blokken die basis properties fout invullen. collapsing margins tussen een container en de afstammelingen problemen bij de weergave van lijsten. verschillen in de positionering van achtergronden foute weergave bij gebruik van scripting aantal bugs drastisch omlaag (ook IE7) indien hasLayout = true

Oplossingen: backslash hack Voor IE < 6 backslash (“\") is allowed volgens CSS2.1 : valid <= IE 5.x negeert properties met escape karakters voor ander browsers: w\idth = width opmerking dit lukt niet voor cijfers 0-9 en a-f b\ackground: red; bac\kground: red body {font-size:x-small;f\ont-size:small;

Oplossingen: * workaround In IE < 7 heeft het html-element een anonieme parent dit geldt voor geen enkele andere browser bijvoorbeeld: vereenvoudigde tantek hack * html #content /* enkel IE < 7 */ { width: 100px; /* IE <6 */ w\idth: 80px; /* IE 6 */ } #content { width: 80px; /*andere browsers*/ padding: 10px; background:red; } In conditionele css kan hiermee ook enkel IE7 gefilterd worden * html .voorbeeld {margin-left:-3px;} /* <7*/ .voorbeeld {margin-left: 0} /*enkel 7*/ Variant enkel voor IE7: *+html .voorbeeld

* Workaround voorbeeld IE past regels voor nested floating niet correct toe geneste floats: IE <> Specs bij focus op IE: probleem in andere browsers floating _IE.html

* Workaround voorbeeld Easyclearing-methode clearing old school clearing div (redundante opmaak) clearing zonder redundante html-code :after (markup toegevoegd aan einde van el) floating_W3C.html .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 underscore ("_") is allowed aan begin van CSS selectoren volgens CSS2.1 : valid browsers moeten onbekende CSS negeren IE <7 negeert _ aan begin van property voorbeeld: _height: 300px; genegeerd in alle andere browsers behandeld als height: 300px in IE <7

Oplossingen: script min- en max- width niet door IE ondersteund. mogelijke oplossing: script * html #box { width:expression(document.body.clientWidth < 740? "740px" :document.body.clientWidth > 1200? "1200px" : "auto"); } geen valide css! Kan enkel in conditionele css

Oplossingen: IE conditionele CSS bundeling van IE-specifieke css embedded:  extern <link rel="stylesheet" href="allbrowsers.css" type="text/css" />

Debug scenario isoleer problemen bij testing gebruik aanwezige tools valideer http://validator.w3.org/ http://jigsaw.w3.org/css-validator/ testen, testen, testen, ....

bronnen - internet www.ohmdesign.be / links.html

Css positioning

More Related Content

Viewers also liked (17)

Similar to Css positioning (20)

Css positioning