1 / 45

Web design

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;}

ruby-lamb
Download Presentation

Web design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web design Multimedia and Web

  2. Today’s Objectives • Quick review selector types • Layout and positioning

  3. Selectors

  4. Types of selectors • Tag or HTML Selectors: Page-Wide Styling p {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; }

  5. 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; }

  6. Structural pseudo-classes Beginning with second item select every 4th items Source: McFarland, D.S. (2009), CSS: The missing manual, O’Reilly.

  7. 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.

  8. Attribute Selectors | ^ and $ Format external links: a[href^="http://"] { color : yellow; } ^ - begins with Any link that begins with “http://” is yellow a[href$=".zip"] { color : green; } $ - Endswith Any link URL that ends with “zip” is green.

  9. Attribute Selectors | * img[src*="Ire"] {border : solid 5px green;} <img src="banner_Ire.png“ /> <img src="banner.png“ />

  10. Layouts | Floats |Positioning

  11. 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)

  12. HTML Tree Hierarchy <html> Ancestor to all tags Ancestor to h1, p, span <head> <body> Descendent of <html> <title> <h1> <p> Descendent of <html> and <head> Siblings <strong> Child of <p>

  13. 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>

  14. 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

  15. 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

  16. <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

  17. Normal Flow <html> <body> Div id=“wrapper” HEADER id=“banner” NAV id=“main-nav” DIV id=“main-content” FOOTER id=“site-info” <body> <html>

  18. Normal Flow FLOAT LEFT 1. BANNER 1.BANNER 2. NAVIGATION 3.CONTENT 2 3. CONTENT L

  19. Normal Flow FLOAT RIGHT 1. BANNER 1.BANNER 2. NAVIGATION 3.CONTENT 2 3. CONTENT R

  20. Normal Flow FLOAT Left & Right 1. BANNER 1.BANNER 2. NAVIGATION 2 3.CONTENT 4 3. CONTENT L L R 4. EVENTS

  21. DIV id = wrapper HEADER id = banner NAV id = main-nav DIV id = main-content FLOAT LEFT FOOTER id = site-info

  22. DIV id = wrapper HEADER id = banner NAV id = main-nav DIV id = main-content <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> FLOAT LEFT FOOTER id = site-info

  23. DIV id = wrapper HEADER id = banner NAV id = main-nav DIV id = main-content <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. FLOAT LEFT FOOTER id = site-info

  24. Positioning

  25. 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

  26. 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.

  27. Absolute Positioning 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.

  28. Absolute Positioning Content below absolute positioned element moves up to fill space. Normal doc flow. 1. BANNER 1. BANNER position: absolute; left:10px; top:100px 2. NAVIGATION 3. CONTENT 3. CONTENT 4. EVENTS 4. EVENTS

  29. 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.

  30. Browser <div id=“wrap”> no positioning • 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. - 150px - <div id=“nav”> position: absolute; left:150px;

  31. Browser <div id=“wrap”> no positioning - 150px - <div id=“nav”> position: absolute; left:150px; Content below fills vacated space.

  32. Browser <div id=“wrap”> absolute or relative - 150px - <div id=“nav”> position: absolute; left:150px;

  33. 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. This space does not get filled in. Left:250px

  34. 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).

  35. 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.

  36. Relative positioning • Here’s what the CSS looks like: p { position: relative; } p img { position: absolute; top: 0; right: 55px; }

  37. Positioning Rules • A tag is positioned relative to the browser window if it has an absolute positionand 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.

  38. Fixed Positioning • Fixed. Element is locked into place on the screen. • When scrolling, fixed elements remain onscreen. • Useful for creating a fixed sidebar.

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

  40. 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.

  41. Setting Positioning Values • Any of the valid CSS measurements—pixels, ems, percentages, etc. can be used. • You can also use negative values for positioning.

  42. Setting Positioning Values • Position element from the top and left edges of window: #banner { position: absolute; left: 100px; top: 50px; width: 760px;}

  43. Setting Positioning Values • Position the banner 100 pixels from the right of the window #banner { position: absolute; right: 100px; top: 50px; width: 760px;}

  44. 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; }

More Related