Css positioning

  • 16,462 views
Uploaded on

Css paginalayout: absolute positioning, floating, liquid layout, "faux columns", ... …

Css paginalayout: absolute positioning, floating, liquid layout, "faux columns", ...
Problemen en oplossingen

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
16,462
On Slideshare
0
From Embeds
0
Number of Embeds
8

Actions

Shares
Downloads
0
Comments
1
Likes
23

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. CSS positionering Thomas Aertssens 2008-2009
  • 2. Alles is gepositioneerd
    • document volgorde
    • block vs inline
    • (x)html Browser defaults
    • css
      • width, height, padding, border, margin
      • display
      • float
      • position
      • overflow
      • z-index
  • 3. Css voor paginalayout
    • Semantische xhtml-opbouw
  • 4. 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
  • 5. Css en divs
    • divs voor de paginaregio's
  • 6. 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
  • 7. Datatabellen en css
    • tabellen.html
  • 8. divs en divitis
    • zuinig met divs: is er geen ander element?
    • divitis.html
    • divitis in wysiwyg
      • visual studio.net
      • layers in Dreamweaver
  • 9. classitis
    • classitis
      • geen onnodige classes
      • - contextuele selectoren
      • .navigatie
      • #navigatie li
  • 10. Compacte code
    • veel minder code
      • vrijwel alle attributen verdwijnen uit de code
      • <p><font color=&quot;red&quot; size=&quot;+2&quot; face=&quot;Arial, sans-serif&quot;>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
  • 11. 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
  • 12. Compacte code
    • kul redesign (simulatie)
    • kul - tabeldesign met basis- css
    • xhtml / css gepositioneerd redesign
  • 13. Compacte code = overzichtelijke code
    • voorbeeld: subnavigatie
  • 14. 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
  • 15. Css selectoren: specificiteit CSS2.1<>CSS2.0 voorbeelden
  • 16. 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
  • 17. Positionering en paginalayout De theorie
  • 18. Css voor paginalayout
    • vorige generatie layouts: tabellen in html
  • 19. Paginalayout: basiselementen
    • boxmodel
    • maateenheden
    • fonts
    • maatberekening
    • containing block
    • floating
    • positioning
  • 20. Boxmodel
  • 21. 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
  • 22. 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
  • 23. 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=&quot;screen&quot; @media screen, projection
  • 24. 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%
  • 25. Fonts en browsers
    • happy screenshots
  • 26. 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
  • 27. Floating en positioning
    • in vergelijking met de meeste css
      • steile leercurve
    • veel misvattingen
    • crossbrowser-frustraties
    • positioning_basics.html
  • 28. Floating: theorie
    • ~ html: att. align=&quot;left|right&quot; bij img
    • float:
      • left
      • right
      • none
    • clear:
  • 29. 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
  • 30. Floating
    • breedte?
      • SPEC: &quot;A floated box must have an explicit width...&quot;
      • 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
  • 31. 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
  • 32. position: static
    • default
  • 33. 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
  • 34. 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
  • 35. 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
  • 36. 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
  • 37. Verbergen van elementen
    • display: none ook screenreader negeert dit
    • visibility:hidden
    • accessibility
      • text-indent: -9999px;
      • left: -9999px;
  • 38. overflow
    • overflow:
      • visible (default)
      • hidden
      • scroll
      • auto
      • overflow.html
    • auto: container met geneste float volgt de hoogte van de float
  • 39. clip
    • clip
      • enkel voor absoluut gepositioneerde elementen
    div { clip: rect(5px, 40px, 45px, 5px) } div { clip: rect(5px 40px 45px 5px) } IE: W3C:
  • 40. Positionering en paginalayout De praktijk
  • 41. 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
  • 42. Navigatie met afbeelding(en)
    • tab-effect: take 1
    navigatie_rollover.html
  • 43. 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
  • 44. Navigatie: sliding doors techniek
    • tab-effect: take 3
    • li en a met background-image
    navigatie_rollover_ sliding.html
  • 45. Ahtergrond - afbeelding(en) meer dan nodig meer dan nodig gewenste breedte
  • 46. Fotogallerij met lijst
    • layout_gallery.html
    <ul id=&quot;albumlist&quot;> <li><img src=&quot;images/thumb1.jpg&quot; alt=&quot;deisgn 1&quot; />design 1</li> <li><img src=&quot;images/thumb2.jpg&quot; alt=&quot;deisgn 2&quot; />design 2</li> <li><img src=&quot;images/thumb3.jpg&quot; alt=&quot;design 3&quot; />design 3</li> <li><img src=&quot;images/thumb4.jpg&quot; alt=&quot;design 4&quot; />design 4</li> <li><img src=&quot;images/thumb5.jpg&quot; alt=&quot;design 5&quot; />design 5</li> <li><img src=&quot;images/thumb6.jpg&quot; alt=&quot;design 6&quot; />design 6</li> <li><img src=&quot;images/thumb7.jpg&quot; alt=&quot;design 7&quot; />design 7</li> <li><img src=&quot;images/thumb8.jpg&quot; alt=&quot;design 8&quot; />design 8</li> </ul>
  • 47. 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)
  • 48. Floating layout
    • 25%+75%+ 1px border-left = >100%
    • wrapperdivs
      • border:0, margin:0; padding:0
  • 49. Floating layout
    • clear
      • steeds alle voorgaande floats
        • extra container met float
      • clear op footer of container met overflow:auto
    einde van de float
  • 50. Gepositioneerde layout
    • absolute of fixed
    • inhoud met margin, padding of border
    • layout_3col_abspos.html
  • 51. Gepositioneerde layout
    • ook hier rekening houden met boxmodel
    • containingblock bepaalt offset
      • container-div: position:relative;
    • risico op overlap
  • 52. 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]}
  • 53. 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
  • 54. Faux columns
    • met afbeelding op achtergrond
      • layout_fauxcolumn.html
  • 55. 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
  • 56. 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
  • 57. Negative margin techniek
    • omgekeerde document volgorde
    • eenvoudige oplossing voor clearingprobleem
    • maar nadelig voor toegankelijkheid
    • layout_negative_margin.html
  • 58. Alternate styles
    • meerdere css mogelijk
      • rel = &quot;alternate stylesheet&quot; title=&quot;stijlnaam&quot;
      • styleswitcher in browser
      • javascript
        • <a href=&quot;javascript:;&quot; onclick=&quot; setActiveStyleSheet('2 kolommen'); return false;&quot;>2 cols</a>
    • layout.html
  • 59. Problemen en oplossingen
  • 60. Trouble in paradise
    • bugs en spec overtredingen
      • ...and the winner is &quot;IE WIN&quot;
    • 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
  • 61. 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
  • 62. 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
  • 63. Don’t let the bugs bite
    • to hack or not to hack &quot; 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.&quot; (Peter-Paul Koch)
    • oplossingen:
      • * en *+ workaround
      • underscore hack voor IE Win
      • backslash-hack (simplified Holly hack)
      • IE conditionele CSS (mijn keuze)
  • 64. 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: &quot;&quot;}&quot;&quot;;
        • voice-family:inherit;
        • width:128px; /*correcte waarde vr andere browsers*/
    html > body #box {width:128px;}
  • 65. 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
  • 66. 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
  • 67. Oplossingen: backslash hack
    • Voor IE < 6
    • backslash (“&quot;) is allowed volgens CSS2.1 : valid
    • <= IE 5.x negeert properties met escape karakters
    • voor ander browsers:
      • width = width
    • opmerking
      • dit lukt niet voor cijfers 0-9 en a-f
        • background: red;
        • background: red
    • body {font-size:x-small;font-size:small;
  • 68. 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 */
        • width: 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
  • 69. * 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
  • 70. * 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: &quot;.&quot;; display: block; height: 0; clear: both; visibility: hidden; } /* voor IE <7 */ * html .clearme { height: 1px; } /* voor IE 7*/ *+html .clearme { min-height: 1px;}
  • 71. Oplossingen: Underscore Hack
    • underscore (&quot;_&quot;) 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
  • 72. Oplossingen: script
    • min- en max- width niet door IE ondersteund.
    • mogelijke oplossing: script
    • * html #box {
    • width:expression(document.body.clientWidth < 740? &quot;740px&quot; :document.body.clientWidth > 1200? &quot;1200px&quot; : &quot;auto&quot;);
    • }
    • geen valide css!
      • Kan enkel in conditionele css
  • 73. Oplossingen: IE conditionele CSS
    • bundeling van IE-specifieke css
    • embedded:
        • <!--[if lte IE 7]>
        • <style>
        • * html .gainlayout { height: 1px; } /*ie<=6*/
        • *+html .gainlayout { zoom: 1; /*ie7*/}
        • </style><![endif]-->
    • extern
        • <link rel=&quot;stylesheet&quot; href=&quot;allbrowsers.css&quot; type=&quot;text/css&quot; />
        • <!--[if lte IE 7]>
        • <link rel=&quot;stylesheet&quot; href=&quot;iefix.css&quot; type=&quot;text/css&quot; />
        • <![endif]-->
  • 74. Debug scenario
    • isoleer problemen bij testing
    • gebruik aanwezige tools
    • valideer
      • http://validator.w3.org/
      • http://jigsaw.w3.org/css-validator/
    • testen, testen, testen, ....
  • 75. bronnen - internet
      • www.ohmdesign.be / links.html
  • 76. bronnen - boeken