Biography

StephanieSullivan
WebDeveloper,Trainer,Consultant

AdvancedCSS
StephanieSullivan

FounderW3Conversions/VioletSkyDesign Consultant&contractorforXHTML/CSSdevelopment PartnerCommunityMX.com AuthorDWMX2004Magic ContributingAuthorMXDevelopersJournal, MacromediasDevNetCenter,andotherwebsites MemberDWTaskForceforWaSP

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%

float:left width:165px padding:3px010px15px margin:010px00 }

} /*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

<p>Contentofthepod</p> <brclass=brclear/> </div><!closespod> </div><!closesredpod>

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

Navigationbar Dualwrappersfor endcaps greycolorbetweenasbackgroundcolor logoplacedoverthebarasanAPimage

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 }

<p>Thisareaisprovidedforintroductiontextwhereyoucan provideabriefdescriptionofthegalleryandthetypeof artistsrepresented.</p> </div><!closeswelcomepodtext> <divclass="pod"> <h1>Welcome</h1>

#welcome.pod{ background:#5D3528url(images/pod_gradient.jpg)repeatytopright width:217px padding:0020px10px margintop:1.6em/*thispullsthepodupsothatthelinesarealigned*/ position:relative/*thisallowsthenegativemargin*/

<imgsrc="images/gall_img.jpg"alt="Gallery"width="208" height="163"/> </div><!closespod>

} #welcome.podtext{ float:right

<brclass="clearrt"/> </div><!closeswelcome> </div><!closescontent>

width:245px

#welcomeh1{ borderbottom:1pxsolid#FFF/*followedbymorevalues*/