CMPT241 Web ProgrammingMore CSS: Page Layout

2

Why do we need page sections?•Style individual elements, groups of

elements, sections of text or of the page•Create complex page layouts

3

Sections of a page <div>

Coding Horror! Coding Horror!

We’ll beat any advertised price! output• Tag used to indicate a logical section or area of

a page• Has no appearance by default, but you can apply

styles to it

<div class="shout"><h2>Coding Horror! Coding Horror!</h2><p class="special">See our special deal on Droids!</p> <p>We'll beat any advertised price!</p></div> HTML

See our special deal on Droids!

4

Inline Sections <span>

Coding Horror! Coding Horror!

See our spectacular deal on Droids!

We’ll beat any advertised price! output• has no onscreen appearance, but you can apply a style or ID to it, which will be applied to the text inside the span

<h2>Coding Horror! Coding Horror!</h2><p>See our <span class="special“>spectacular</span> deal on Droids!</p> <p>We'll beat <span class="shout“> any advertised price</span>!</p> HTML

5

CSS context selectorsselector1 selector2 {properties} CSS• applies the given properties to selector2 only if

it is inside a selector1 on the page

selector1 > selector2 {properties} CSS applies the given properties to selector2 only if

it is directly inside a selector1 on the page

6

Context selector example

Eat at Greasy’s Burger…

• The greasiest burgers in town!• Yummy and greasy at the same time!

output

<p>Eat at <strong>Greasy's Burger</strong>...</p><ul><li>The <strong>greasiest</strong> burgers in town!</li><li>Yummy and greasy at the same time!</li></ul> HTMLli strong { text-decoration: underline; }

CSS

7

The CSS Box Model•Every element

composed of:▫content▫a border around

the element▫padding between

the content and the border

▫a margin between the border and other content

8

The CSS Box Model (cont.)•width = content

width + L/R padding + L/R border + L/R margin

•height = content height + T/B padding + T/B border + T/B margin

9

Document Flow – block elements

10

Document flow - inline elements

11

Document flow - a larger example

12

CSS properties for borders

output

h2 { border: 5px solid red; }

CSS

This is a heading.

property description

border thickness/style/size of border on all 4 sides

13

More border propertiesproperty description border-color, border-width, border-style

specific properties of border on all 4 sides

border-bottom, border-left, border-right, border-top

all properties of border on a particular side

border-bottom-color, border-bottom-style, border-bottom-width, border-left-color, border-left-style, border-left-width, border-right-color, border-right-style, border-right-width, border-top-color, border-top-style, border-top-width

properties of border on a particular side

Complete list of border properties http://www.w3schools.com/css/css_reference.asp#border

14

Another border example

output

h2 {border-left: thick dotted #CC0088;border-bottom-color: rgb(0, 128, 128);border-bottom-style: double;}

CSS

This is a heading.

each side's border properties can be set individually

if you omit some properties, they receive default

border-radius (new in HTML5)

•single value•a pair of values representing the

horizontal and vertical roundness•Older browsers don’t support this feature.

h2 {border-radius: 20px;border-bottom-right-radius: 80px 40px;

} CSS

box-shadow•drop shadow under an element

▫two sizes (px, pt, em, %) for horizontal and vertical offset Offsets can be negative

▫blur size▫color (optional)▫inset for internal shadow (optional)

h2 {box-shadow: 10px 10px 5px grey;

} CSS

17

CSS properties for paddingproperty description padding padding on all 4 sides

padding-bottom padding on bottom side only

padding-left padding on left side only

padding-right padding on right side only

padding-top padding on top side only Complete list of padding propertieshttp://www.w3schools.com/css/css_padding.asp

18

Padding example 1

This is a first paragraph.

This is a second paragraph.

output

p { padding: 20px; border: 3px solid black; }h2 { padding: 10px; background-color: yellow; }

CSS

This is a heading

19

Padding example 2

This is a first paragraph.

output

p {padding-left: 200px; padding-top: 30px;background-color: fuchsia;} CSS

This is a first paragraph

This is a second paragraph

each side's padding can be set individually notice that padding shares the background color

of the element

20

CSS properties for marginsproperty description margin margin on all 4 sides

margin-bottom margin on bottom side only

margin-left margin on left side only

margin-right margin on right side only

margin-top margin on top side only Complete list of margin propertieshttp://www.w3schools.com/css/css_margin.asp

21

Margin example 1

output

p {margin: 50px;background-color: fuchsia;} CSS

A margin gives a separation between neighboring elements.

notice that margins are always transparent They don’t contain the element’s background color.

This is a second paragraph

This is a first paragraph

Top/bottom margin collapse• When two block elements appear on top of

each other, their margins are collapsed• Their shared margin is the larger of the two

individual margins

23

Margin example 2

output

p {margin-left: 8em;background-color: fuchsia;} CSS

each side's margin can be set individually

This is a second paragraph

This is a first paragraph

Note on margins•Web page body usually has a margin of

its own.body {

margin: 0px;} CSS

“spacer” image<img src="smiley.png" alt="smiley face" /><img src="pixel.gif" width="200" height="1" alt="spacer" /><img src="puppy.jpg" alt="cute puppy" />

CSS

#puppy{margin-left: 200px;

} CSS

Chrome’s build-in tool•Right-click on the element -> Inspect

element

27

CSS properties for dimensions

output

p { width: 350px; background-color: yellow; }h2 { width: 250px; background-color: aqua; }

CSS

An h2 heading

This paragraph uses the first style above

property description

width, height how wide or tall to make this element (block elements only)

28

Centering a block element: auto margins

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. output

p {margin-left: auto;margin-right: auto;width: 750px;} CSS

works best if width is set (otherwise, may occupy entire width of page)

center inline elements within a block element? use text-align: center;

29

The CSS float propertyimg.headericon {float: right; width: 130px;} CSS

• removed from normal document flow; underlying text wraps around as necessary

Ghostbusters is a 1984 American science fiction comedyfilm written by co-stars Dan Aykroyd and Harold Ramis about three eccentric New York City parapsychologists-turned-ghost capturers.

outputproperty description

float side to hover on; can be left, right, or none (default)

30

Floating elements diagram• Vertical position remains

the same• Horizontal position is flush

against the left or right edge of the document.

• Float distance away from the other wrapped elements?

Note on floating•Floating vs. alignment

▫If you simply want something on the left or right side of the page, align it.

▫If you want to hover on that side of the page with other content wrapping around it, float it.

•What elements do we float?▫block elements, eg., div▫inline elements, eg., img

treated as a block box width, margins

32

Common float bug: missing width

•often floating block elements must have a width property value

•Let’s try “floating”

33

The clear property

CS380

p { background-color: fuchsia; }h2 { clear: right; background-color: yellow; }

CSSMario is a fictional character in his video game series.Serving as Nintendo's mascot and the main protagonistof the series, Mario has appeared in over 200 video games since his creation.

output

Super Mario Fan Site!

Mario is a fictional character in his video game series. Serving as Nintendo's mascot and the main protagonist of the series, Mario has appeared in over 200 video games since his creation

34

The clear property (cont.)property description

clear

disallows floating elements from overlapping this element; can be left, right, both, or none (default)

35

Clear diagramdiv#sidebar { float: right; }p { clear: right; } CSS

appear below the floating element

36

Common error: container too short<p><img src="images/mario.png" alt=“super mario" />Mario is a fictional character in his video game series.....</p> HTML

Mario is a fictional character in his video game series.Serving as Nintendo's mascot and the main protagonistof the series, Mario has appeared in over 200 video games since his creation.

output

p { border: 2px dashed black; }img { float: right; } CSS

37

Mario is a fictional character in his video game series.Serving as Nintendo's mascot and the main protagonistof the series, Mario has appeared in over 200 video games since his creation.

output

38

The overflow property

Mario is a fictional character in his video game series.Serving as Nintendo's mascot and the main protagonistof the series, Mario has appeared in over 200 video games since his creation.

output

p { border: 2px dashed black;overflow: hidden; } CSS

39

The overflow property (cont.)property description

overflow

specifies what to do if an element's content is too large; can be visible (default), auto, hidden (better, most compatible with various browsers)

Float before/after other elements<div id = “main”>

<p>This is some text</p><img src = “smiley.png” alt = “smiley”/>

</div>CSS

<div id = “main”><img src = “smiley.png” alt = “smiley”/><p>This is some text</p>

</div>CSS

Multi-column layouts•When more than one element floats in the

same direction, they stack horizontally.▫The first one is the furthest towards the

float direction.•Multi-column layouts

▫create multiple divs▫each with float and width attribute

42

Multi-column layouts<div>

<p>first paragraph</p><p>second paragraph</p><p>third paragraph</p>Some other text that is important

</div> HTML

Some other text that is important

output

p { float: right; width: 25%; margin: 0.5em;border: 2px solid black; }div { border: 3px dotted green; overflow: hidden; }

CSS

second paragraph first paragraphthird paragraph

New in HTML5•column-count

▫number of columns to use•column-gap

▫space between columns•column-rule

▫vertical line between columns•column-span

▫lets elements span many columns•column-width

▫width of each column

New in HTML5•Not supported in all browsers•Temporary support for experimental new

CSS features▫-moz for Mozilla Firefox▫-webkit for Chrome and Safari▫-webkit-column-count▫-webkit-border-radius

Sizing and Positioning

46

The vertical-align propertyproperty description

vertical-align

specifies where an inline element should be aligned vertically, with respect to other content on the same line within its block element's box

can be top, middle, bottom, baseline (default), sub, super, text-top, text-bottom, or a length value or % baseline means aligned with bottom of non-

hanging letters

47

vertical-align example<p style="background-color: yellow;">

<span style="vertical-align: top; border: 1px solid red;">

Don't be sad! Turn that frown<img src="images/sad.jpg" alt="sad" /> upside down!<img style="vertical-align: bottom“

src="images/smiley.jpg" alt="smile" />Smiling burns calories, you know. <img style="vertical-align: middle"

src="images/puppy.jpg" alt="puppy" /> Anyway, look at this cute puppy; isn't he adorable! So cheer up, and have a nice day. The End.

</span></p> HTML

vertical-align example (cont.)48

49

Common bug: space under image<p style="background-color: red; padding: 0px; margin: 0px"><img src="images/smiley.png" alt="smile" /></p> HTML

red space under the image, despite padding and margin of 0

this is because the image is vertically aligned to the baseline of the paragraph (not the same as the bottom)

setting vertical-align to bottom fixes the problem

50

The position property (examples)#ad {

position: fixed;right: 10%;top: 45%;

} CSS

property value description

position

static default position

relative offset from its normal static position

absolute a fixed position within its containing element

fixed a fixed position within the browser window

top, bottom, left, right positions of box's corners

51

Relative positioning#lifted { position: relative; }

CSS

• Static positioning: place the element within the normal document flow

• Relative positioning: Shift an element’s position slightly relative to the normal static position

• actual position determined by top, bottom, left, right

52

Absolute positioning#menubar {position: absolute;left: 400px;top: 50px;} CSS

• positioned relative to the block

element containing them (normally from the corner of the overall web page)• should often specify a width

property as well

53

More on Absolute positioning#area2 { position: relative; }

CSS

• to make the absolute element to position itself relative to some other element's corner, wrap the absolute element in an element whose position is relative

• Difference with floating??

•If you use a percentage for your absolute position

body{ width: 100%;height: 100%

} CSS

55

Fixed positioning#area2 { position: relative; }

CSS• removed from normal flow • positioned relative to the

browser window even when the user scrolls the window, element will remain in the same place

• Values can be negative▫ “hanging” effect

56

Alignment vs. float vs. position1. If possible, lay out an element by aligning its

content▫ horizontal alignment: text-align

set this on a block element; it aligns the content within it (not the block element itself)

▫ vertical alignment: vertical-align set this on an inline element, and it aligns it

vertically within its containing element2. If alignment won't work, try floating the element3. If floating won't work, try positioning the

element▫ absolute/fixed positioning are a last resort and

should not be overused

57

Details about inline boxes•Size properties (width, height) are

ignored for inline boxes•margin-top and margin-bottom are

ignored, •but margin-left and margin-right are

not ignored

58

Details about inline boxes•the containing block box's text-align

property controls horizontal position of inline boxes within it▫text-align does not align block boxes within

the page•each inline box's vertical-align

property aligns it vertically within its block box

59

The display propertyh2 { display: inline; background-color: yellow; }

CSS

values: none, inline, block, ... no effect on what is/isn’t valid HTML use sparingly, because it can radically alter the

page layout

outputproperty description

display sets the type of CSS box model an element is displayed with

60

The display property

#topmenu li {display: inline;border: 2px solid gray;margin-right: 1em;} CSS

lists and other block elements can be displayed inline

flow left-to-right on same line width is determined by content

output

<ul id="topmenu"><li>Item 1</li><li>Item 2</li><li>Item 3</li>

</ul> HTML

The display property (cont.)p {

display: none;}

CSS

62

The visibility propertyp.secret {

visibility: hidden;} CSS

output

visibility vs. display •display: none

▫does not occupy space on the page▫It’s not there!

•visibility: hidden▫still occupies space on the page, but

invisible to the user▫It’s there, but I can’t see it!

•can be used to show/hide dynamic HTML content on the page in response to events

The opacity property•Certain degree of visibility

▫1.0: completely visible▫0.0: invisible

still occupies space on the page

Homework•Two parts

▫Summary of what you have learned this week (paragraphs, lists)

▫A web page that uses those techniques (CSS layout)

•You need to show/add something different in each homework.

•Project 2 ▫Due March 11 Friday▫upload to the turing server▫upload to Moodle