Copyright © Terry Felke-Morris CSS Flow & Positioning 1 Copyright © Terry Felke-Morris.

Slides:



Advertisements
Similar presentations
LIS650 lecture 4 Thomas Krichel today CSS Properties –Box properties-- List properties –Table properties-- Classification properties –(Audio.
Advertisements

© 2010 Delmar, Cengage Learning Chapter 9 Positioning Objects with AP Div Tags.
CSS Layout Crash Course An Advance CSS Tutorial. Inline vs. Block Many HTML elements have a default display setting of Block. Block elements take up the.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 6 Key Concepts 1 Copyright © Terry Felke-Morris.
Layout using CSS. Using multiple classes In the head:.important{font-style:italic;}.title{color:red;} In the body: Here's a type of paragraph that is.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 6 Key Concepts 1 Copyright © Terry Felke-Morris.
Chapter 7 Page Layout Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D 1.
Part 5 Introduction to CSS. CSS Display - Block and Inline Elements A block element is an element that takes up the full width available, and has a line.
Floating Elements CS380.
CGS 3175: Internet Applications (CSS – Page Layout) Page 1 © Mark Llewellyn CGS 3175: Internet Applications Fall 2008 Cascading Style Sheets – Page Layout.
Week 9 Using the Box Properties. 9-2 The CSS Visual Formatting Model Describes how the element content boxes should be displayed by the browser –Based.
Using CSS for Page Layout. Types of HTML Elements Block-Level Element –Creates blocks of content e.g. div, h1..h6, p, ul, ol, li, table, form –They start.
MORE Cascading Style Sheets (The Positioning Model)
CSS (Cascading Style Sheets): How the web is styled Create Rules that specify how the content of an HTML Element should appear. CSS controls how your web.
Web Development & Design Foundations with XHTML Chapter 6 Key Concepts.
Web Development & Design Foundations with XHTML Chapter 6 Key Concepts.
Page Layout & Mobile Web Using columns, grid systems, etc… to layout sites for desktops and mobile.
Principles of Web Design 6 th Edition Chapter 7 – Page Layouts.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 6 Key Concepts 1 Copyright © Terry Felke-Morris.
Basics of Web Design 1 Copyright © 2016 Pearson Education, Inc., Hoboken NJ.
CSS Netcentric. What is CSS O CSS stands for Cascading Style Sheets O Styles define how to display HTML elements O Styles were added to HTML 4.0 to solve.
 This presentation introduces the following: › 3 types of CSS › CSS syntax › CSS comments › CSS and color › The box model.
Neal Stublen Course Road Map  Create web page layouts using CSS  Manage CSS  Test website validity  Create navigation menus using.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 6 Key Concepts 1 Copyright © Terry Felke-Morris.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 6 Key Concepts 1 Copyright © Terry Felke-Morris.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 6 Key Concepts 1 Copyright © Terry Felke-Morris.
Week 8 – Part 2 Page Layout Basics Key Concepts 1.
THE BOX MODEL Putting layouts together with CSS. The Box Model  How would you describe a box?  Container?  Tags or elements are “containers”  puts.
1 CS428 Web Engineering Lecture 08 Border, Margin, Padding … (CSS - III)
Web Development & Design Foundations with HTML5 7th Edition
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 6 Key Concepts 1 Copyright © Terry Felke-Morris.
Web Design (12) CSS Introduction. Cascading Style Sheets - Defined CSS is the W3C standard for defining the presentation of documents written in HTML.
Web Development & Design Foundations with XHTML Chapter 6 Key Concepts.
MTA EXAM HTML5 Application Development Fundamentals.
CONTROLLING Page layout
Tutorial 4 Creating Page Layouts with CSS
HTML and Dreamweaver November 11th. Agenda Box Model Displaying and positioning elements – Padding – Margin – Float – Display – Position HTML Demo.
Today’s objectives  Announcements  Positioning  Measurement units.
Week 5.  Normal document flow  Affecting document flow with float and position properties using CSS  Using these properties to create layouts.
Understanding CSS Cascading Style Sheets control the presentation of content in HTML pages Style Sheets separate formatting from the content –Styles defined.
Cascading Styles Sheets Positioning HTML elements.
Laying out Elements with CSS
Cascading Style Sheets Layout
The Box Model in CSS Web Design – Sec 4-8
The Box Model in CSS Web Design – Sec 4-8
CSS Layouts: Grouping Elements
Webpage layout using CSS
Cascading Style Sheets
Floating & Positioning
The Box Model in CSS Web Design – Sec 4-8
Web Development & Design Foundations with HTML5 7th Edition
Chapter 7 Page Layout Basics Key Concepts
Web Development & Design Foundations with HTML5 8th Edition
Web Development & Design Foundations with HTML5
Basics of Web Design Chapter 7 Page Layout Basics Key Concepts
Objectives Create a reset style sheet Explore page layout designs
Creating Layouts Using CSS
CSS Borders and Margins.
Positioning.
MORE Cascading Style Sheets (The Positioning Model)
Float Property Elements that seem to “float" on the right or left side of either the browser window or another element are often configured using.
Web Development & Design Foundations with H T M L 5
Web Development & Design Foundations with H T M L 5
Web Development & Design Foundations with HTML5
Floating and Positioning
Web Development & Design Foundations with HTML5
Positioning.
Laying out Elements with CSS
Positioning Boxes Using CSS
Presentation transcript:

Copyright © Terry Felke-Morris CSS Flow & Positioning 1 Copyright © Terry Felke-Morris

Normal Flow Browser display of elements in the order they are coded in the Web page document Two div elements Nested div elements

Copyright © Terry Felke-Morris h1 { background-color:#cccccc; padding:5px; color: #000000;} p { font-family:Arial,sans-serif;} #yls {float:right; margin: 0 0 5px 5px; border: solid;} float Property Elements that seem to “float" on the right or left side of either the browser window or another element are often configured using the float property. Two values only: right and left. 3

float Property HTML source code is: Wildflowers The heading and paragraph follow normal flow. The Yellow Lady Slipper pictured on the right is a wildflower. It grows in wooded areas and blooms in June each year. The Yellow Lady Slipper is a member of the orchid family. Use: – float: right; to float the element on the right side. – float: left; to float the element on the left side. The elements are pushed as far as possible within their container (usually either the browser viewport or a div element) Remember: The tag is used to group block-elements to format them with CSS. 4

Copyright © Terry Felke-Morris Tutorial Video 8I 5

To clarify more.. 6 By Christopher Stein

7

8 If there is room after the first block, the next block will float up next to it.

Copyright © Terry Felke-Morris clear Property The clear property is used to control the behavior of floating elements. Elements after a floating element will flow around it. To avoid this, use the clear property. The clear property specifies on which sides of an element floating elements are not allowed to float 9

Copyright © Terry Felke-Morris Clear Property – Left: No floating elements allowed on the left side – Right: No floating elements allowed on the right side – Both: No floating elements allowed on either the left or the right side 10

clear Property Code a page with an image floated to the right and a paragraph. (the image is coded first) Your page should look like: 11 Lecture 6 img {float: right;} this gives you more explanation about clearing a float

clear Property Now let us edit the code: Restrict the paragraph so it does not float around the image. Do this by adding this rule to your CSS p{ clear: both;} Notice that the image floats but the text remain where it is. 12

Copyright © Terry Felke-Morris clear Property Useful to “clear” or terminate a float Values are left, right, and both The h2 text is displayed in normal flow. clear: left; was applied to the h2. Now the h2 text displays AFTER the floated image.

Copyright © Terry Felke-Morris overflow Property Intended to configure the display of elements on a Web page. However, it is useful to “clear” or terminate a float before the end of a container element Values are auto, hidden, and scroll The background does not extend as far as you’d expect. overflow: auto; was applied to the div that contains the image and paragraph. Now the background extends and the h2 text displays AFTER the floated image.

overflow Property Visible: Default Value, the content is displayed and if it is too large it will overflow and extend outside the area allocated to it. hidden: The content is clipped to fit the area allocated to the element in the browser viewport. auto: The content fills the area allocated to it and if needed, scrollbars are displayed to allow access to the remaining content. scroll: the content is rendered in the area allocated to it and scrollbars are displayed. div { overflow: auto; }

Copyright © Terry Felke-Morris Overflow Tutorial 8Ns 8Ns erflow.asp erflow.asp 16

Copyright © Terry Felke-Morris CSS Layout properties Specify location of elements More control over the position of an element Properties: – Relative – Absolute 17

Copyright © Terry Felke-Morris 1.Relative Positioning Changes the location of an element in relation to where it would otherwise appear with the normal flow. Properties: top, left, right & bottom 18 h1 { background-color:#cccccc; padding: 5px; color: #000000; } #myContent { position: relative; left: 30px; font-family: Arial,sans-serif; } h1 { background-color:#cccccc; padding: 5px; color: #000000; } #myContent { position: relative; left: 30px; font-family: Arial,sans-serif; }

Copyright © Terry Felke-Morris 1.Relative Positioning HTML source code is: Relative Positioning This paragraph uses CSS relative positioning to be placed 30 pixels in from the left side. 19

Let us practice Code a page with one heading, one paragraph and one image. Check how the browser renders the page. Now change the position of the heading to: h1 {position: relative; top: 40px;} Notice how changing the position did not affect the position of other elements the in the page, the rest of the page acts like nothing changed at all. 20

Copyright © Terry Felke-Morris 2.Absolute Positioning Precisely specifies the location of an element in the browser window 21 h1 { background-color: #cccccc; padding: 5px; color: #000000; } #content {position: absolute; left: 200; top: 100; font-family: Arial,sans-serif; width: 300; } h1 { background-color: #cccccc; padding: 5px; color: #000000; } #content {position: absolute; left: 200; top: 100; font-family: Arial,sans-serif; width: 300; }

Copyright © Terry Felke-Morris 2.Absolute Positioning 22 HTML source code is: Absolute Positioning This paragraph is contained in a div…...

Copyright © Terry Felke-Morris Absolute Positioning Example

Copyright © Terry Felke-Morris Absolute Positioning Example The CSS:.content { position: absolute; left: 200px; top: 75px; width: 300px; } The CSS:.content { position: absolute; left: 200px; top: 75px; width: 300px; }

25 The End