Beruflich Dokumente
Kultur Dokumente
StephanieSullivan
WebDeveloper,Trainer,Consultant
AdvancedCSS
StephanieSullivan
Ideas in motion.
Overview
AbsolutePositioningVSFloating ClearingFloats Fauxcolumns DescendantSelectortricks Opacity Splittingimagesforreuse
Overview
Usingimagesfornegativespace Multiplebackgrounds&wrappers UsingNegativeMargins SeparatingCSSintoseparatesheets&
directories
Commonbugsandhowtoswatthem
QuickReview
WhatistheBoxModel? margin border
QuickReview
Whatisaninlineorblockelement? Whatistheflowofthedocument? Whatispositioning? Textwithin
padding
QuickReview
HowdoyouwriteefficientCSS? Classvs.ID Avoidingclassitisusingtypeanddescendantselectors Usingshorthand Whatisadescendantselector? #nava:link #content.podh1 ululli
ThreeColumnLayout
Basic3columnlayout header
Col1
Col2
Col3
AddtheFooter
Howshouldfooterbeadded?
Positioning
DemonstrationofAbsolutevsRelativePositioning Addcontent Increasetextsize
footer
MakingitFlow
Swapstylesheet Fauxcolumns Floatorder Clearingfloats Usingnegativespace Descendantselectorsonthebodyelement
RealWorldExamplesPopStick
Fauxcolumns,opacity&multiplewrappers
RealWorldExamplesPopStick
Fauxcolumns,opacity&multiplewrappers
MultipleWrappersXHTML
<divid="mostOuter"> <divid="outerBox"> <divid="boxContainer"> <div>Contentofcolumnone</div> <div>Contentofcolumntwo</div> <div>Contentofcolumnthree</div> <brclass=brclear/> </div> </div> <brclass=brclear/> </div>
MultipleWrappersCSS
#mostOuter{ background:#FFFurl(assets/most_outer.gif)repeatylefttop/*thenarrow linesandboxes*/ margintop:25px } #outerBox{ background:url(assets/outer_box.gif)norepeatlefttop/*Showsthethicker greybars*/ position:relative } #boxContainer{ width:620px } #boxContainerdiv{
OpacityCSS
#mostOuter{ background:#FFFurl(assets/most_outer.gif)repeatylefttop /*thenarrowlinesandboxes*/ margintop:25px position:relative/*forcesthemozopacitytowork*/ filter:alpha(opacity=80)/*IEopacity*/ mozopacity:0.80/*mozillaopacity*/ opacity:0.8/*CSS3opacity*/} /*forcestheproprietaryalphafiltertoworkinIE\*/ *html#mostOuter{ height:1%
} /*endhack*/
RealWorldExamplesAnteo
Multiplewrappers,sIFR&splitbackgrounds
RealWorldExamplesAnteo
Multiplewrappers
Rollovers
Leftside
Rightside
MultipleWrappers
<divid=navwrap"> <divid=nav"> <ul> <liid=primalnk><ahref=#>linkone</a></li> <liid=cooplnk><ahref=#>linktwo</a></li> <liid=areelnk><ahref=#>linkthree</a></li> </ul> <brclass=brclear/> </div> </div>
RealWorldExamplesAnteo
sIFR Useanyfontevenwhenonlyonyourmachine UsesJavaScriptandFlashfallsbacktopuretext/CSS CreateFlashswfofadynamicalphabet InsertJavaScript,CSSandtune
SariMediumsIFR
HelveticaCSS
RealWorldExamplesAnteo
Splitbackgrounds
SplitBackgrounds
<divid=content"> <divid=redpod"><!placescoloredtop> <divid=pod"><!usedoneverypod> <h1>sIFRizedheader</h1>
tops
Commonbottoms
</div><!closescontent>
RealWorldExamplesFlexRight
LocalCSS,dependantselectorsandAPdivs
LocalCSS
SitesCSSisbrokenintotwopages flex.css(mainstructureandalluniversalselectors) local.css(placedinindividualdirectoriescoloronly) KSPope.com
DependantSelectors(onBodyElement)
Createtwoorthreecolumns
<bodyclass=two>
#faux{ background:url(images/divider.gif)repeaty498px0px margin:25px0 } body.two#faux{ background:url(none) } body.two#callout{ display:none }
DependantSelectors(onBodyElement)
Navigation/Sitesectionindicator(youarehere)
<bodyid=employerclass=two> body#employer#employerlnka{ /*selectorsforbutton*/ }
Payattentiontospecificity
#about.abouta body#aboutpg#navli#aboutlnka
Therearemanycreative,powerfulusesfor
descendantselectors
AbsolutelyPositioned(AP)divs
APelements shouldbeusedsparinglyandappropriately shouldnotcontainresizablecontentliketext shouldnotberoutinelystyledinline(DWlayers) arepositionedwithinthelastpositionedparent(relative)
CommonBugsandCodingIssues
Isitreallyabug? UseTagselector&CSSStylespanel Clickintoelementandselectitwiththetagselector ViewthepropertiesandrulespanesoftheCSSpanel foravaluefartherupthecascadethatoverridesyour desiredoutcome(hovertoviewspecificity) ValidateyourHTMLandCSStoverifytheyareto
standardswithnoerrors
Itssimplertocodetostandardsandhackasneeded forIE
WaystoDebug
Usedivvisualizationfeature Placebackgroundcolorsoneachdiv Showboxmodel Useindividualbrowserextensionstovisualize Firefox ChrisPedericks WebDevelopersToolbar InternetExplorerDeveloperToolbar(beta) Safari Createatestcasewithonlythebasicdivs
MostCommonBugs
IEFloatDropdueto3pxbugordoublingmargins(star
filter)
Listwhitespace,andotherunaccountedforwhitespace
differences(stripwhitespacetagstouching)
IErequiresacontainertohavedimensions/layout(Holly
hack)http://positioniseverything.netforIEPCinfo
IEMacvariousissuesmanyrelatingtodimensions(tan
hack)http://www.lcn.comforIEMacinfo
Mozillabasedissuewithmargincollapseprotruding
fromacontainercausingextraspace(removetopand/or bottommarginsofelementinside)
MagicBulletssometimes
Addposition:relativetotheelement UsetheHollyhack
/*HidesfromIE5mac\*/ *html.buggybox{height:1%} /*EndhidefromIE5mac*/
Summary
Takeadvantageoftheflowofthedocument
Gowiththeflow notagainstit
Usecreativemethodsofdisplay: Multiple divsandbackgrounds Negativemargins Fauxbackgrounds Negativespace Opacity BreakupCSSandbackgroundimages GettoknowsIFR Validatepagesandbesureitsabugwith DWsCSSpanel
Createyourownbugsnippets(ordownloadfrom
andvisualizationfeatures
Usesnippetstospeedupwork
CMX)
Resources
PositionisEverything http://www.positioniseverything.net/ MacIE5:oddities http://lcn.com/IE5tests/ CommunityMX http://communitymx.com/ CSSZenGardens http://csszengarden.com/ W3Conversions http://w3conversions.com/ sIFRInformation http://mikeindustries.com/sifr/
Thankyou.
Ideas in motion.
RealWorldExamplesWildSpiritGallery
Negativemargins
RealWorldExamplesWildSpiritGallery
Negativemargins Musthavepositioning Goesintheoppositedirectionfromanormalmargin margintop:10pxpullstheelementup10px
NegativeMarginsXHTML
<divid="content"> <divid="welcome"> <divclass="podtext">
NegativeMarginsCSS
#welcome{ margin:1.4em00 bordertop:1pxsolid#5D3528 }
} #welcome.podtext{ float:right
width:245px
#welcomeh1{ borderbottom:1pxsolid#FFF/*followedbymorevalues*/