1 css more details reasons to use css for page layoutreasons to use css for page layout relative and...

11

CSS more detailsCSS more details

• Reasons to use CSS for page layoutReasons to use CSS for page layout• Relative and absolute positioningRelative and absolute positioning• The CSS Box ModelThe CSS Box Model• Configuring single column page layouts using CSSConfiguring single column page layouts using CSS• Configuring two column page layouts using CSSConfiguring two column page layouts using CSS• Configuring three column page layouts using CSSConfiguring three column page layouts using CSS• Configuring navigation using listsConfiguring navigation using lists• Styling for print mediaStyling for print media• CSS page layout resourcesCSS page layout resources

22

CSS Page Layout OverviewCSS Page Layout Overview

The idea of using CSS for page layout is not The idea of using CSS for page layout is not new new

W3C Recommendations for CSS level 2 W3C Recommendations for CSS level 2 published in 1998published in 1998

In the past year or so ---In the past year or so ---An increasing number of commercial sites are An increasing number of commercial sites are

using CSS for page layoutusing CSS for page layout

Wired Wired http://www.wired.comhttp://www.wired.comESPN ESPN http://www.espn.comhttp://www.espn.comTruGreen TruGreen http://www.trugreen.comhttp://www.trugreen.com

33

CSS Page LayoutCSS Page LayoutAdvantagesAdvantages

Greater typography controlGreater typography control Style is separate from structureStyle is separate from structure Potentially smaller documentsPotentially smaller documents Easier site maintenanceEasier site maintenance Increased page layout controlIncreased page layout control Increased accessibilityIncreased accessibility Ability to define styles for multiple media Ability to define styles for multiple media

typestypes Support of the Semantic WebSupport of the Semantic Web

44

CSS Page LayoutCSS Page LayoutDisadvantagesDisadvantages

There is one large disadvantage – the There is one large disadvantage – the use of this technology is not yet use of this technology is not yet uniformly supported by browsers. uniformly supported by browsers.

This current disadvantage will be less This current disadvantage will be less of an issue in the future people stop of an issue in the future people stop using old browsers and the newer using old browsers and the newer browsers comply with standards. browsers comply with standards. Examples in the text have been Examples in the text have been tested with Internet Explorer 6, tested with Internet Explorer 6, Netscape 7, Opera 7.5, and Firefox Netscape 7, Opera 7.5, and Firefox 1.5, and Mozilla 1.7.1.5, and Mozilla 1.7.

55

The Box ModelThe Box Model

ContentContent• Text & web page Text & web page

elements in the elements in the containercontainer

PaddingPadding• Area between the Area between the

content and the content and the marginmargin

BorderBorder• Between the Between the

padding and the padding and the marginmargin

MarginMargin• Determines the Determines the

empty space empty space between the between the element and element and adjacent elementsadjacent elements

66

CSS Positioning CSS Positioning Properties (1)Properties (1)

RelativeRelative• Use to slightly change the location Use to slightly change the location

of an element in relation to where of an element in relation to where it would otherwise appearit would otherwise appear

h1 { background-color:#cccccc;padding:5px;color: #000000;}#myContent { position: relative;left:30px;font-family:Arial,sans-serif;}

77


AbsoluteAbsolute• Use to precisely specify Use to precisely specify

the location of an element the location of an element in the browser windowin the browser window

h1 { background-color:#cccccc;padding:5px;color: #000000;}#content {position: absolute;left:200;top:100;font-family:Arial,sans-serif;width:300;}

88


FloatFloat• Elements that Elements that

seem to “float" on seem to “float" on the right or left the right or left side of either the side of either the browser window browser window or another or another element are often element are often configured using configured using the float property.the float property.

h1 { background-color:#cccccc;padding:5px;color: #000000;}p { font-family:Arial,sans-serif;}#yls {float:right;margin: 5px;border: solid;}

99


DisplayDisplay• The display property configures how The display property configures how

and if an element is displayed. and if an element is displayed. • An element configured with An element configured with

display:none display:none will not be displayed. will not be displayed. This is sometimes used when This is sometimes used when configuring styles to print a web pageconfiguring styles to print a web page

• An element configured with An element configured with display:block display:block will be rendered as a will be rendered as a block element (even if it is actually an block element (even if it is actually an inline element, such as an anchor tag.inline element, such as an anchor tag.

1010


Z-indexZ-indexUsed to modify the stacking order of elements on a web page.The default z-index value is “0". Elements with higher z-index values will appear stacked on top of elements with lower z-index values rendered on the same position of the page.

1111

CSS Properties Used with Page CSS Properties Used with Page Layout & FormattingLayout & Formatting

See Table 10.1 in your text for an See Table 10.1 in your text for an alphabetical listing.alphabetical listing.

Also see the Web Developer’s Also see the Web Developer’s Handbook on the Student CDHandbook on the Student CD

1212

QuestionsQuestions

1.1. State three reasons to use CSS for State three reasons to use CSS for page layout on a commercial site being page layout on a commercial site being developed today.developed today.

2.2. Describe the difference between Describe the difference between relative and absolute positioning.relative and absolute positioning.

3.3. In the following code snippet the logo In the following code snippet the logo appears under instead of over the appears under instead of over the images. Explain why. (See your images. Explain why. (See your textbook for the code snippet.)textbook for the code snippet.)

1313

Two Column Page LayoutTwo Column Page Layout

A common design for a web page is a two-A common design for a web page is a two-column layout with left-column navigation column layout with left-column navigation and right-column logo and content.and right-column logo and content.

1414

body {margin:0px;body {margin:0px; font-family:Verdana, Arial, sans-serif; }font-family:Verdana, Arial, sans-serif; }#leftcolumn { float:left; width:100px;#leftcolumn { float:left; width:100px;

background-color:#eeeeee;background-color:#eeeeee; height:400px; }height:400px; }#rightcolumn { }#rightcolumn { }#logo{background-color:#eeeeee;#logo{background-color:#eeeeee; color: #cc66cc; font-size:x-large;color: #cc66cc; font-size:x-large; border-bottom: 1px solid #000000;border-bottom: 1px solid #000000; padding:10px; }padding:10px; }.content {padding:20px 0px 0px 150px; }.content {padding:20px 0px 0px 150px; }#floatright {margin:10px; float:right; }#floatright {margin:10px; float:right; }.footer {font-size:xx-small;.footer {font-size:xx-small; text-align:center; clear:right; }text-align:center; clear:right; }.navBar{.navBar{ color:#000066;color:#000066; text-decoration:none;text-decoration:none; padding:3px; margin: 15px;padding:3px; margin: 15px;

display:block; }display:block; }a.navBar:link {color:#000066; }a.navBar:link {color:#000066; }a.navBar:visited {color:#000000; }a.navBar:visited {color:#000000; }a.navBar:hover {color:#cc66cc; }a.navBar:hover {color:#cc66cc; }

Two Column Two Column Page LayoutPage Layout

1515

Navigation LayoutNavigation LayoutUsing ListsUsing Lists

Navigation link areas are actually Navigation link areas are actually “lists" of links“lists" of links

Some web design gurus argue that Some web design gurus argue that Navigation links should be configured Navigation links should be configured using XHTML list elementsusing XHTML list elements

Use the Use the list-style-image list-style-image property to property to configure the “bullet" configure the “bullet" list-style-image:url(arrow.gif)list-style-image:url(arrow.gif)..

1616

CSS & XHTML CSS & XHTML Navigation ListNavigation List

CSS:CSS:.navBar{.navBar{ color:#000066;color:#000066; text-decoration:none;text-decoration:none;

padding:3px; padding:3px; margin: 15px;margin: 15px;display:block; }display:block; }

XHTML:XHTML:<ul class="navBar"><ul class="navBar">

<li><a class="navBar" <li><a class="navBar" href="home.htm">Home</a></li>href="home.htm">Home</a></li>

<li><a class="navBar" <li><a class="navBar" href="spring.htm">Spring</a></li>href="spring.htm">Spring</a></li>

<li><a class="navBar" <li><a class="navBar" href="summer.htm">Summer</a></li>href="summer.htm">Summer</a></li>

<li><a class="navBar" href="fall.htm">Fall</a></li><li><a class="navBar" href="fall.htm">Fall</a></li><li><a class="navBar" <li><a class="navBar"

href="winter.htm">Winter</a></li>href="winter.htm">Winter</a></li></ul></ul>

1717

Three ColumnThree ColumnPage LayoutPage Layout

Often a web page layout will consist of a Often a web page layout will consist of a header across the top of the page with header across the top of the page with three columns below: navigation, content, three columns below: navigation, content, and sidebar.and sidebar.

If you are thinking about this layout as a If you are thinking about this layout as a series of boxes—you’re thinking along the series of boxes—you’re thinking along the right lines for configuring pages using CSS!right lines for configuring pages using CSS!

1818

Three Column Three Column LayoutLayout

Review the CSS on Review the CSS on threecolumn.htmthreecolumn.htm

1919

QuestionsQuestions1. The two column and three column page 1. The two column and three column page

layouts you created in the Hands-On layouts you created in the Hands-On Practice did not use absolute positioning. Practice did not use absolute positioning. Open the twocolumn.htm and Open the twocolumn.htm and threecolumn.htm pages in a browser. threecolumn.htm pages in a browser. Resize the browser window. Resize the browser window. Describe what happens. Describe what happens. What type of page design layout: ice, jello, What type of page design layout: ice, jello, or liquid is being used?or liquid is being used?

2020

QuestionsQuestions2. State a reason to use an unordered 2. State a reason to use an unordered

list to configure navigation links.list to configure navigation links.

3. Describe how to choose whether to 3. Describe how to choose whether to configure a XHTML tag, create a configure a XHTML tag, create a class, or create an id when working class, or create an id when working with CSS.with CSS.

2121

Using CSSUsing CSSto Style a Formto Style a Form

Moderate ApproachModerate Approach• Use a table to format the form but Use a table to format the form but

configure styles instead of XHTML configure styles instead of XHTML table attributes.table attributes.

table {border:solid 3px #000000;width:100%;}td {padding: 5px;margin: 0px;}.mylabel {text-align:right;}

2222

Using CSS toUsing CSS to Style a Form Style a Form

““Pure" CSS Pure" CSS ApproachApproach • Do not use a table to Do not use a table to

format the form. Use format the form. Use CSS divs and spans with CSS divs and spans with positioning properties to positioning properties to configure the page.configure the page.

#myForm {border:3px solid #000000;padding:10px;margin:10px;}.myRow {height:30px;}.myRowComments {margin-bottom:20px;}.labelCol{float:left;width:100px; text-align:right;}

2323

CSS Styling CSS Styling for Printfor Print

Create an external style sheet Create an external style sheet with the configurations for with the configurations for browser display.browser display.

Create a second external style Create a second external style sheet with the configurations sheet with the configurations for printing.for printing.

Connect both of the external Connect both of the external style sheets to the web page style sheets to the web page using twousing two <link> <link> tags.tags.

<link rel="stylesheet" href="wildflower.css" type="text/css" media="screen" /><link rel="stylesheet" href="wildflowerprint.css" type="text/css" media="print" />

2424

CSS Debugging TipsCSS Debugging Tips

Manually check syntax errorsManually check syntax errors Use W3C CSS Validator to check syntax Use W3C CSS Validator to check syntax

errorserrors• http://jigsaw.w3.org/css-validator/http://jigsaw.w3.org/css-validator/

Configure temporary background colorsConfigure temporary background colors Configure temporary bordersConfigure temporary borders Use comments to find the unexpected Use comments to find the unexpected

cascadecascade Don’t expect your pages to look exactly the Don’t expect your pages to look exactly the

same in all browsers!same in all browsers! Be patient!Be patient!

2525

CSS Page Layout CSS Page Layout ResourcesResources

For additional study:For additional study: http://glish.com/css/http://glish.com/css/

• Large collection of CSS page layouts and links to Large collection of CSS page layouts and links to tutorialstutorials

http://www.websitetips.com/css/index.shtmlhttp://www.websitetips.com/css/index.shtml• Comprehensive list of tutorials and CSS-related sitesComprehensive list of tutorials and CSS-related sites

http://www.meyerweb.com/eric/css/http://www.meyerweb.com/eric/css/• The web site of Eric Meyer, a leading-edge web The web site of Eric Meyer, a leading-edge web

developerdeveloper http://www.w3.org/Style/CSS/learninghttp://www.w3.org/Style/CSS/learning

• W3C’s list of CSS resourcesW3C’s list of CSS resources http://www.bluerobot.com/web/layouts/http://www.bluerobot.com/web/layouts/

• A “reservoir” of CSS page layoutsA “reservoir” of CSS page layouts http://www.blooberry.com/indexdot/css/http://www.blooberry.com/indexdot/css/

• CSS syntax reference listCSS syntax reference list

2626

QuestionsQuestions1.1. State an advantage of using CSS to style State an advantage of using CSS to style

for print.for print.

2.2. Describe a CSS display problem that you Describe a CSS display problem that you encountered and the steps you took to encountered and the steps you took to resolve it.resolve it.

3.3. True or False. CSS that validates must True or False. CSS that validates must always work.always work.

1 css more details reasons to use css for page layoutreasons to use css for page layout relative and...

Documents