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

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: static
default

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

Problemen en oplossingen

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:
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;

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

* 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

bronnen - boeken

http://www.dreamcss.com	510
http://www.ohmdesign.be	180
http://raja.tistory.com	83
http://dreamcss.blogspot.com	65
https://bbpilot.usc.edu	55
http://ohmdesign.be	16
http://sc-net.blogspot.com	14
http://www.slideshare.net	8
http://translate.googleusercontent.com	3
http://sc-net.blogspot.com.br	2
http://apprentieweb.blogspot.com	2
http://ohmdesign.alfahosting.be	2
http://www.filescon.com	2
http://www.ohmdesign.alfahosting.be	1
http://onwebdev.blogspot.com	1
http://static.slidesharecdn.com	1
http://www.rapidshareabc.com	1
http://creatingsexystylesheets.com	1
http://apprentieweb.blogspot.com.br	1

Css positioning

by ohmdesign on May 09, 2007

Accessibility

Categories

Tags

Upload Details

Usage Rights

19 Embeds 948

Statistics

Css positioning — Presentation Transcript