web design
DESCRIPTION
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 Styling p {color: #333333;} Class Selectors: Pinpoint Control .myclass {color: #333333;} - PowerPoint PPT PresentationTRANSCRIPT
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;}
<img src="banner_Ire.png“ />
<img src="banner.png“ />
LAYOUTS | FLOATS |POSITIONING
HTML Tree
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<h1>Main Topic</h1>
<p>
A web page about the days of the week, specifically<strong>Tuesday.</strong>
</p>
</body>
</html>
Remember the document flow/tree
(DOM)
HTML Tree Hierarchy
<html>
<head> <body>
<title> <p><h1>
<strong>
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>
<title>My Web Page</title>
</head>
<body>
<h1>Main Topic</h1>
<p>
A web page about the days of the week, specifically<strong>Tuesday.</strong>
</p>
</body>
</html>
HTML Tree
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<h1>Main Topic</h1>
<p>
A web page about the days of the week, specifically<strong>Tuesday.</strong>
</p>
</body>
</html>
Normal Document Flow
HTML Tree
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<h1>Main Topic</h1>
<p>
A web page about the days of the week, specifically<strong>Tuesday.</strong>
</p>
</body>
</html>
Elements (tags) create boxes - stack on top of
each other
<div id=“wrapper”>
<header id=“banner”> </header>
<nav id=“main-nav”> </nav>
<div id=”main-content”> </div>
<footer id=“site-info”> </footer>
</div>
NORMAL DOCUMENT FLOW
HEADER id=“banner”
NAV id=“main-nav”
DIV id=“main-content”
FOOTER id=“site-info”
Div id=“wrapper”
Normal Flow
<html> <body>
<body><html>
1. BANNER
2. NAVIGATION
3. CONTENT
1.BANNER
2 3.CONTENT
FLOAT LEFT
L
Normal Flow
1. BANNER
2. NAVIGATION
3. CONTENT
1.BANNER
23.CONTENT
FLOAT RIGHT
R
Normal Flow
1. BANNER
2. NAVIGATION
3. CONTENT
1.BANNER
43.CONTEN
T
FLOAT Left & Right
R4. EVENTS
2
L L
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 = main-content
FOOTER id = site-info
DIV id = wrapper
FLOAT LEFT
<style>#wrapper,#banner,#main-nav, #main-content, #site-info {padding:10px;}
#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 = main-content
FOOTER id = site-info
DIV id = wrapper
FLOAT LEFT
<style>#wrapper,#banner,#main-nav, #main-content, #site-info {padding:10px;}
#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.
Absolute Positioning
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.
Absolute Positioning
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 -
<div id=“nav”> position: absolute;
left:150px;
Content below fills vacated space.
Browser<div id=“wrap”> absolute or relative
<div id=“nav”> position: absolute;
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.
Relative positioning
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).
Relative positioning
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.
Relative positioning
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.
Setting Positioning Values
Any of the valid CSS measurements—pixels, ems, percentages, etc. can be used.
You can also use negative values for positioning.
Setting Positioning Values
Position element from the top and left edges of window:
#banner { position: absolute;left: 100px;top: 50px;width: 760px;}
Setting Positioning Values
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;
}
