CSSLayout 5/10/15______
FourKindsofLayout
(youcouldrunintoanyoftheseonthejob):
1)CSSOnly.Thisisthewaywebsitesarebeinglaidoutnow.
2)Table-basedLayouts(oldwaytolayoutwebpages).Cumbersomedesignprocess,slowerdownloadtimes,awkwardcode
3)TablesandCSS(transitional).AspeopletransitionedtoCSS,theysometimesusedtablesasthelayoutfoundationandCSSforstyleswithinthatlayout.
OldNew
Left: Table Layout | Right:CSSpositioning ofdiv(like pods youcancommand)
<div
(eachoneoftheareasinthislayoutwouldbea<div>)
BenefitsofCSSLayoutoverTables:
QuickupdateofmanypagesatonceConsistentdesignfrompagetopageMoreflexiblelayoutpossibilitiesRelativelyquickdownloadtimes
Optionsforrelativeandabsolutepositioning
Aboutdivs
Whatisadivtag?
1)<divisthedivisiontag,creatingadivisioninthepage.Thinkofitasapodyoucancommandwithitsownstyles
2)Or,thinkofadivasawrapperthatyouplacearoundcontent(e.g.,maincontainer,header,sidebar,contentarea,etc.)
3)A<divinsideanother<divis“nested.”Thewrapperisthe“parent.”
What’ssoCoolAboutdivs?
What’scoolisthatyoucanpositiondivslikepodsonanHTMLpageinordertolayoutyourcontent(e.g.,header,sidebar,etc.).Insideeachdiv,youcanhavedifferentstyles.Forexample,insidetheheaderdiv,youmightwanttohaveanavigationbarwithlinksthatarebluetextwithnounderlines.However,inthemaincontentarea,youmaywantyourlinkstobeunderlinedblacktext.Etc.
ReviewofStyles
Class,tag,I.D.,andCompoundstylesareactuallyselectors(weselectwhattoattachastyleto).
Tagselectors:stylesgetattachedtotagssuchasthebody,<p,orh1>tagClassselectors:Canbeappliedmultipletimesonapage(.redboldtext),byhandto
individualelements.
I.D.selector:canbeusedonlyonceonapage,usedforfoundationalelements(e.g.,
#header,#sidebar)
Compoundselectors:combineselectors (forexample,ifyouwantlinksinyoursidebartobedifferentthanlinksinyourheader,youwouldcreateacompoundstylecalledsomethinglike#sidebara:link.Anotherwouldbe#sidebara:visited,#sidebara:hover,#sidebara:active.
Tutorial
All page layout methods for web design (whether you use tables, frames, or divs) rigyourcodetodosomethingitwasn’texactlyoriginallyintendedfor (because nobody could have guessed long ago all the ways we use the Internet today),butthese riggings work,sothey havebecomestandardpractice.
There are many ways to lay out a webpage using old methods or CSS. Thistutorialteaches CSS“float”layout method(columnsarecreatedbyfloating divsleftandright).ThisisacommonlyrecommendedmethodforCSSlayout because of its stability. Youwillneedyourpreferencestobesetproperly(seeCSSintro).
Forthistutorial,youwillneedthegraphicsfoundat them in your root directory. Oryoucanuseyourown graphics(youwillneedabackgroundgraphicthatrepeats,aheadergraphic760x150,and abulletgraphic).
Note:Thistutorialcreatesthedivsfirstandtheninsertsgraphicsandotherelements.Anotheroptionistocreateonedivatatimeandinsertallcontentintoeachonebeforethenextoneiscreated.
1-CreatedivsforaLayout
1)CreateandsaveanHTMLpageinyourrootdirectory.
2)Make sure your CSS panel is open (Windows > CSS Designer).
3)To create a new CSS page, go to the “Sources” panel, click on the plus sign, select “Create a New CSS File,” name your new file in the pop-up window (e.g., mystyles.css), and click O.K.
4)With your CSS page selected in the “Source” panel, go to the “Selector” panel, click the plus sign, and type a new style called #container (use the pound sign as the first character). When you’re done creating it, click on it to select it.
5)In the “Properties” panel, de-select the “Show Set” box if it is checked.
Click the “Layout” icon (the first icon).
Set width 760 px x height 900 px (or 1000 x 620 to view in 1024 x 768).
Go to “Margins” and type the word “auto” on all four sides
(or click center to apply to all).
This will create a <div> that contains your whole page, and the auto margins will position it in the center of your browser, no matter how big or small the browser window gets. Do not confuse this with the float property that floats things left or right.
6)Staying in the “Properties panel,” click the “Background” icon and select any background color.
7)Place your cursor where you want your container div to appear (upper left of page is fine).
8)GotoInsert>Div. In the pop-up window, click on I.D. and select #container.
You will see a box appear on your page. It will contain all the contents of your page.
CreateaHeaderdiv
1)Header:Gothroughthestepsabovethatyouusedtocreateacontainerdiv,
exceptthistimecalltheI.D.div#header.
2)Giveitthefollowingproperties: width 760x height 150, and a background color.
3)Positionyourcursorinsideofthecontainerdivintheupperleftcorner,byclickingintothetextthatsays“ContentGoesHere.”
4)GotoInsert>Div. In the pop-up window, click on I.D. and select #header.
You will see a header box appear in the top of your content.
CreateaSideBardiv
1)Gothroughthestepsabovethatyouusedtocreatedivs,
exceptthistimecallthediv#sidebarleft.
2)Giveitthefollowingproperties: width 150x height 300, and a background color.
3)Positionyourcursorin the upper left underneath the header, in front of the text that says, “ContentGoesHere.”
4)GotoInsert> Div. In the pop-up window, click on I.D. and select #sidebarleft.
You will see a box appear in the upper left corner under your header.
5)Notice that the box is hugging the top and left coner To adjust the space, go to your Properties box and “Margins” to add space on the left and top of your box (e.g., 50 pixels).
6)Also, you will notice that the text inside your box is hugging the sides. To change this, go to your Properties box and “Padding” to add space on all sides of the box (e.g., 10 pixels).
Note to troubleshoot: If you have trouble placing your cursor and div, select the header div, click your right arrow button on the keyboard once. Then, hold down your shift key with your left hand and hit Enter (or Return) with your right hand. Your cursor will appear where it needs to for insertion.
CreateAMainContentAreaDiv
1)Gothroughthestepsabovethatyouusedtocreateacontainerdiv,
exceptthistimecallthediv#maincontent.
2) Give it width 600x height 500, and a background color.
Then, scroll down to “Float” and give it a float right. (We’re going to make the #maincontent div float to the right of the side bar.)
3) To position your cursor for insertion, select your side bar div. Then, clickyourleftarrowoncesothatthecursorisblinkingontheleftofyoursidebar.
4) GotoInsert>Div
5) Whenthedialogueboxpopsup,selectI.D.maincontent.Youwillseeabox appearing to the right of your sidebar. Give it whatever margins and padding you like.
Tweak Dimensions, Margins, and Padding
of the Side Bar and Main Content Area
Tweak all as needed.
InsertaNavigationBarDivusingRelativePositioning
WehavejustlearnedhowtocreateCSSlayoutusingthe“float”technique(floatleft,floatright).Nowwearegoingtolearnabout“relative”positioning,whichallowsyou
toplaceasmallerdivinsidealargerdivinanexactpositionrelativetothatlarger
(parent)div.Forexample,let’ssayyouhaveaheaderdivcreated.Youcouldpositionasmallernavigationbardivwithinit.Here’show:
1)Gothroughthestepsabovethatyouusedtocreateacontainerdiv,
exceptthistimecallthediv#navbar.
2)Give it a width 760 x height 30.
3)Go to “Positioning” and click “Relative.” Then, give 120 pixels to the “Top” side.
4)To position your cursor for insertion, click inside the header at the end of the text that says “ContentGoesHere.”
5)GotoInsert>Div and select I.D. #navbar. A bar will insert inside the header 120 px from the top and will be ready to hold your menu links.
2-CreateContentforEachdiv
ContainerContent
Select your #container div in the “Selector” panel and set the following properties in the “Properties” panel:
BACKGROUND, URL: image (bg_white.jpg)
By default, this graphic will repeat vertically and horizontally.
HeaderContent
Selectyour#headerdiv in the “Selector” panel andsetthefollowingproperties in the “Properties” panel:
BACKGROUND, URL:image (header_graphic.jpg) with no repeat.
SidebarContent
Select your#sidebardiv in the “Selector” panel andsetthefollowingproperties in the “Properties” panel:Type:Verdana12pt.
Background:#CCCCCC(lightgray)Other: List Style Image (bullet.jpg)
CreateaBackgroundforEntireBrowserArea
Tocreateabackgroundbehindthefloatingcontainer,createatagstyleforthebodytagandindicateacolororbackgroundgraphicofyourchoice, text style, etc.To remember how to do this, review “CSS Intro” or use these quick steps:
1) With your CSS page selected in the “Source” panel, go to the “Selector” panel, click the plus sign, and type body.
2) In the “Properties” panel, go to “Background” and select #CCCCCC (light gray). Then, go to “Type” and select a default font for the site (e.g., Verdana).
MainContent
Inside your main content area, you can continue to create content, insert images and text, and even create class styles that put borders around images and float them left or right with text wrapping around them. Review “CSS Intro” to remember how.
How to LinkYour.csssheettoanewpage:
So, you like your styles and you want to apply them to a new page?
1)CreateanewHTMLpage.
2)IntheCSS “Source” panel, select the plus sign and “Attach Existing CSS File.”
3)Browse to your existing CSS page in your root directory, select it, and click O.K.
Other Options
3-columnLayout
Theabovelayoutwecreatediscalleda“float”layoutbecauseitfloatsthemaindivsleftandright.Booksandtutorialshavemanydifferentwaysofteachingfloatlayouts,butherearesometechniquesbelow:
1)For2-columnlayout(above),wefloatedleftandfloatedright
2)For3-columnlayout(ormore),itcanworktostartwiththeleftcolumnonnofloatandthentosetthemiddleandright-handcolumnonfloatleft(itmakesno
sense,sincetheyarepositionedtotherightofthefirstcolumn,butitworks).
Footer
1)Create a div called #footer with width 660 x height 30,
background CCCCCC, margins: top 20 / left 50 / right 50
2) Insert your cursor at the beginning of the “Container” text and go to Insert > Div.
3) Select I.D. footer.