Web design

transcript

WEB DESIGN

Multimedia and Web

Today’s Objectives

Quick review selector types Layout and positioning

SELECTORS

Types of selectors

Tag or HTML Selectors: Page-Wide Stylingp {color: #333333;}

Class Selectors: Pinpoint Control.myclass {color: #333333;}

ID Selectors: Specific Page Element#main-nav {color: #333333;}

Group Selectors h1, h2, h3, p, div {color: #333333;} Pseudo class a:link {} Pseudo elements p:first-letter {} Attribute a[href^="http://"] { color : yellow; }

Pseudo-Classes

a:link | a:link { color : #EFEFEF; } a:visited | a:visited { color :

#CCCCCC; } a:hover | a:hover { color : # F33333; } a:active | a:active {color : #B2F511;}

Hover: (these will also work) h1:hover { color : #FFFFFF; } .hiLite:hover { color : #FFFFFF; }

Structural pseudo-classes

Beginning with second item select every 4th items

Source: McFarland, D.S. (2009), CSS: The missing manual, O’Reilly.

Pseudo-elements

:first-letter – p:first-letter { font-size : 2em;

font-weight: bold;color: red;}

:first-line –p:first-line { font-size : 2em;

font-weight: bold;color: red;}

Lorem ipsum dolor sit

amet, consectetuer adipiscing elit. Duis non ipsum quis sapien rhoncus vehicula.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis non ipsum quis sapien rhoncus vehicula.

Attribute Selectors | ^ and $Format external links:

a[href^="http://"] { color : yellow; }

^ - begins withAny link that begins with “http://” is yellow

a[href$=".zip"] { color : green; }$ - Ends withAny link URL that ends with “zip” is green.

Attribute Selectors | *

img[src*="Ire"] {border : solid 5px green;}

LAYOUTS | FLOATS |POSITIONING

HTML Tree

<html>

<head>

</head>

<body>

<h1>Main Topic</h1>

A web page about the days of the week, specifically<strong>Tuesday.</strong>

</body>

</html>

Remember the document flow/tree

HTML Tree Hierarchy

<html>

Ancestor to all tags

Ancestor to h1, p, span

Siblings

Child of <p>

Descendent of <html>

Descendent of <html> and <head>

HTML Tree

<html>

<head>

</head>

<body>

<h1>Main Topic</h1>

</body>

</html>

HTML Tree

<html>

<head>

</head>

<body>

<h1>Main Topic</h1>

</body>

</html>

Normal Document Flow

HTML Tree

<html>

<head>

</head>

<body>

<h1>Main Topic</h1>

</body>

</html>

Elements (tags) create boxes - stack on top of

each other

</div>

NORMAL DOCUMENT FLOW

HEADER id=“banner”

NAV id=“main-nav”

DIV id=“main-content”

FOOTER id=“site-info”

Div id=“wrapper”

Normal Flow

1. BANNER

2. NAVIGATION

3. CONTENT

1.BANNER

2 3.CONTENT

FLOAT LEFT

Normal Flow

1. BANNER

2. NAVIGATION

3. CONTENT

1.BANNER

23.CONTENT

FLOAT RIGHT

Normal Flow

1. BANNER

2. NAVIGATION

3. CONTENT

1.BANNER

43.CONTEN

FLOAT Left & Right

R4. EVENTS

Normal Flow

HEADER id = banner

NAV id = main-nav

DIV id = main-content

FOOTER id = site-info

DIV id = wrapper

FLOAT LEFT

HEADER id = banner

NAV id = main-nav

DIV id = wrapper

FLOAT LEFT

#wrapper {border:1px solid #0C0;background-color:#F90;}

#banner {border:1px solid #0C0; background-color:#099;}

#main-nav { border:1px solid #099; background-color:#069;width:200px; float:left;

#main-content { border:1px solid #03F; background-color:#09C;margin-left:222px;}

#site-info {border:1px solid #933; background-color:#CC9;}

</style>

HEADER id = banner

NAV id = main-nav

DIV id = wrapper

FLOAT LEFT

#wrapper {border:1px solid #0C0;background-color:#F90;}

#banner {border:1px solid #0C0; background-color:#099;}

#main-nav { border:1px solid #099; background-color:#069;width:200px; float:left;

#main-content { border:1px solid #03F; background-color:#09C;margin-left:222px;}

#site-info {border:1px solid #933; background-color:#CC9;}

</style>

With positioning, can place boxes anywhere on screen.

POSITIONING

Positioning

CSS position property lets you control how and where a web browser displays particular elements.

CSS offers four types of positioning: Absolute Relative Fixed Static

Absolute Positioning

Absolute : determine element’s location by specifying a left, right, top, or bottom position in pixels, ems, or percentages.

Element moves out of the normal flow of the page as determined by the HTML.

Detached from document flow. Other elements fill-in the space left by an absolutely positioned element.

Float and absolute or fixed positioning can’t work together on the same element.

1. BANNER

2. NAVIGATION

3. CONTENT

4. EVENTS

1. BANNERposition: absolute; left:10px;

top:100px

3. CONTENT

4. EVENTS

Content below absolute positioned element moves up to fill space.

Absolute PositioningNormal doc flow.

Absolutely positioned element is placed relative to the boundaries of its closest ancestor.

When you create element (DIV) with absolute positioning, any absolutely positioned elements inside

that element are positioned relative to it’s top, bottom, left, and right edges.

Browser<div id=“wrap”> no positioning

- 150px -

<div id=“nav”> position: absolute;

left:150px;

Create element (DIV) with absolute positioning, any absolute positioned elements inside that element are positioned relative to it’s top, bottom, left, and right edges.

Browser<div id=“wrap”> no positioning

- 150px -

left:150px;

Content below fills vacated space.

Browser<div id=“wrap”> absolute or relative

left:150px;

- 150px -

Relative positioning

Relative. Element placed relative to its current position in the normal document flow.

Other elements do NOT fill in the space left in the document flow.

Left:250px

This space does not get filled in.

A benefit of relative positioning is to set a new point of reference for absolutely positioned elements that are nested inside it.

Relative positioning creates a positioning context for nested elements (tags).

Example

Set position of the <p> tag to relative, Any absolute positioning you apply to

the <img> tag inside the <p> tag is relative to the four edges of the <p> tag, not the browser window.

Here’s what the CSS looks like:

p { position: relative; }

p img {position: absolute;top: 0;right: 55px;}

Positioning Rules

A tag is positioned relative to the browser window if it has an absolute position and it’s not inside any other tag that has absolute, relative, or fixed positioning applied to it.

A tag is positioned relative to the edges of another element if it’s inside (child) another tag with absolute, relative, or fixed positioning.

Fixed Positioning

Fixed. Element is locked into place on the screen.

When scrolling, fixed elements remain onscreen.

Useful for creating a fixed sidebar.

Static Positioning

Static. Normal positioning method – what an element appears in the normal document flow.

Setting Positioning Values

Display area of a web browser window has top, bottom, left, and right edges.

Each of the four edges has a corresponding CSS property: top, bottom, left, and right.

Don’t need to specify values for all four edges.

Two are usually enough to place an item on the page.

Any of the valid CSS measurements—pixels, ems, percentages, etc. can be used.

You can also use negative values for positioning.

Position element from the top and left edges of window:

#banner { position: absolute;left: 100px;top: 50px;width: 760px;}

Position the banner 100 pixels from the right of the window

#banner { position: absolute;right: 100px;top: 50px;width: 760px;}

Z-index

This stacking of elements takes place on what’s called the z-index.

.logo1 {position: absolute;z-index: 0;left: 810px;top: 10px;

Web design

Documents