Css positioning

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    19 Favorites & 1 Group

    Css positioning - Presentation 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

    + ohmdesignohmdesign, 3 years ago

    custom

    17617 views, 19 favs, 9 embeds more stats

    Css paginalayout: absolute positioning, floating, l more

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 17617
      • 17370 on SlideShare
      • 247 from embeds
    • Comments 0
    • Favorites 19
    • Downloads 0
    Most viewed embeds
    • 109 views on http://www.dreamcss.com
    • 65 views on http://dreamcss.blogspot.com
    • 33 views on http://raja.tistory.com
    • 31 views on http://www.ohmdesign.be
    • 3 views on http://sc-net.blogspot.com

    more

    All embeds
    • 109 views on http://www.dreamcss.com
    • 65 views on http://dreamcss.blogspot.com
    • 33 views on http://raja.tistory.com
    • 31 views on http://www.ohmdesign.be
    • 3 views on http://sc-net.blogspot.com
    • 2 views on http://www.filescon.com
    • 2 views on http://apprentieweb.blogspot.com
    • 1 views on http://creatingsexystylesheets.com
    • 1 views on http://www.rapidshareabc.com

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories

    Groups / Events