StephanieSullivanCSSLayouts&DreamweaverCS3

Agenda

•WhataretheCSSLayouts?

• UsingtheCSSLayouts• CombiningLayouts

• Thingstowatchfor

• Q&A

StephanieSullivanFounder/Principal‐W3Conversions‐WebStandardsandAccessibilityCompanySpeakerandCorporateTrainerConsultant&sub‐contractorforXHTML/CSSdevelopmentAdobeCommunityExpertDreamweaverTaskForceforWebStandardsProject(WaSP)Partner‐CommunityMX.comAuthor‐DWMX2004Magic,WebDeveloper’s&Designer’sJournal(formerlyMXDJ),Adobe’sDevNetCenter,andotherwebpublicationsListMomforWebWeavers&moderatorforSEM2.0Comingsoon‐MasteringCSSwithDreamweaverCS3byNewRiders‐authoredwithAdobe’sGregRewisinfo@w3conversions.com

WhatAreTheCSSLayouts?

CSSLayoutsarestructureonly• Noimages• Nostyling

QuickstartsforCSSdevelopment• Heavilycommentedforthosenewtolayout• FaststartforthosecomfortablewithCSS

BrowserCompatibility

• Firefox(WinandMac)1.0,1.5,and2.0

• InternetExplorer(Win)5.5,6.0,7.0

• Opera(WinandMac)8.0,9.0

• Safari2.0

FiveTypesofLayouts

• Fixed

• Liquid

• Elastic

• Hybrid

• AbsolutePositioning

PageStructureoftheCSSLayouts• Rightandleftcolumnsarefloated

•MainContentcolumnismarginedonthesideofthecolumn

• Bodyclassanddescendantselectorsusedtodefinepagetypetoallowcombination‐forexample:.twoColFixLtHdr

• Heavycommentingexplainseachpagesectionandsomespecificproperty/valuepairs

• InternetExplorerConditionalComments7

AquickdemonstrationoftheCSSLayouts

FixedSpecificpixelwidth‐centered

Pros/Cons

✓Fullbackgroundcoloroncolumnsiseasytoachieve(fauxcolumns)

✓Easytoknowexactdimensionsforelementswithinthemaincontentareaandavoidfloatdrop*

๏Columnsdonotexpandwithincreasedtextsize

9

LiquidOverallwidthandcolumnsbasedonpercentageofuser’sviewport

Pros/Cons

✓Allowsforcreativeuseofheaders‐repeatonXaxisorshowmorewhenbrowseriswider

๏Backgroundcolumncolormorechallenging(liquidfauxcolumns)

๏Moredifficulttoknowexactdimensionsforelementstoavoidfloatdrop‐usemin‐width

10

ElasticWidthbasedonuser’sdefaulttextsize

Pros/Cons✓Layoutandcolumnsexpandwithtextsizechangesnotbrowserwidth

✓Allowsforcreativeuseofheaders‐repeatonXaxisorshowmorewhenbrowseriswider

๏Moredifficulttoknowexactdimensionsforelementstoavoidfloatdrop‐usemin‐width

HybridOverallwidthbasedonpercentage,whilethesidecolumnsarebaseduponem’s

Pros/Cons✓Columnwidthsexpandwithincreasedtextsize

✓Allowsforcreativeuseofheaders‐repeatonXaxisorshowmorewhenbrowseriswider

๏ Stillchallengingtoknowexactdimensionsforelementstoavoidfloatdrop‐usemin‐width

AbsolutelyPositionedFixed,pixel‐basedwidth

Pros/Cons✓Floatdropnotaproblemsincethereisnofloating

✓Headersandfootersaresimpleduetosetwidth

๏Columnsareabsolutelypositionedandtakenoutoftheflowofthedocument‐footerwillnot“see”them

PointstoRemember

PrinciplesofFloating

• Afloatmustbegivenawidth

• Afloatmustbegivenadirectionalvalueofleftorright(thereisnotoporbottom)

• Ifyouwantafloattoappearalongsideanotherelement,itmustprecedethatelementinthesourceorderofthedocument

• Afloatnevercoverstextorinlineimages

• Sinceafloatistaken"outoftheflow"ofthedocument,afloatinsideanothercontainermustbeclearedinorderfortheparentcontainertoencloseitproperly

ClearingFloatsinthe#mainContentdiv

Clearingwithinanon‐floateddivwillclearallfloats–includingthesidecolumns.

Fixes:

Floatthe#mainContentdiv

Placeafloateddivwithinthe#mainContentdiv

BewareofFloatDrop

Evidentwhenonedivstartsbelowthelevelofthedivnexttoit

Causes:Anelement,likeanimage,thatiswiderthancanfitinthespaceprovided.Thedivwillmovedownuntilitcanfitnexttothefloats.(MakesureclientswhoaretakingcareoftheirownsiteswithContributeareawareoftheirsizespecsandlimitations.)3pxtextjoginInternetExplorer(unaccountedforinyourmath)

AquickdemonstrationofcombiningCSSLayouts

Q&A

ResourcesDavidPowers‐StripCommentsRegExhttp://foundationphp.com/tools/

AdobeCSSAdvisorbetahttp://www.adobe.com/go/cssadvisor

CommunityMXhttp://www.communitymx.com

W3Conversionshttp://www.w3conversions.com

Amazon.com(forpreorder)MasteringCSSwithDreamweaverCS3StephanieSullivan&GregRewis

ThankYouDankeschönDankuwel

Mercibeaucoup