Introduction to Computer Science Web Development

Size: px

Start display at page:

Download "Introduction to Computer Science Web Development"

Aldous Perry
5 years ago
Views:

1 Introduction to Computer Science Web Development Flavio Esposito Lecture 12

2 Lecture Outline Background property and subproperties Position Elements by Floating Flexible Layouts using CSS floating

3 Background properties Background property and subproperties Position Elements by Floating Flexible Layouts using CSS floating

4 Consider this HTML code <html><head><metacharset="utf- 8"> <title>background</title> <style> #bg { width: 500px; height: 500px; </style> </head> <body> <h1>the Background Property</h1> <div id="bg">background properties are fun!</div> </body> </html> background/background- before.html

5 Set background color <html><head><meta charset="utf- 8"> <title>background</title> <style> #bg { width: 500px; height: 500px; background- color: blue; < </style> </head> <body> <h1>the Background Property</h1> <div id="bg">background properties are fun!</div> </body> </html> background/background- before.html

6 Set background image <html><head><meta charset="utf- 8"> <title>background</title> <style> #bg { width: 500px; height: 500px; background- color: blue; background- image: url( cat.jpeg ); </style> </head> <body> <h1>the Background Property</h1> <div id="bg">background properties are fun!</div> </body> </html> background/background- before.html

7 Set background image <html><head><meta charset="utf- 8"> <title>background</title> <style> #bg { width: 500px; height: 500px; background- color: blue; background- image: url( cat.jpeg ); background- repeat: no- repeat; </style> </head> <body> <h1>the Background Property</h1> <div id="bg">background properties are fun!</div> </body> </html> background/background- before.html

8 Set background image <html><head><meta charset="utf- 8"> <title>background</title> <style> #bg { width: 500px; height: 500px; background- color: blue; background- image: url( cat.jpeg ); ß image wins in terms of priority background- repeat: no- repeat; // repeat- y </style> </head> <body> <h1>the Background Property</h1> <div id="bg">background properties are fun!</div> </body> </html> background/background- before.html

9 Set background image <html><head><meta charset="utf- 8"> <title>background</title> <style> #bg { width: 500px; height: 500px; background- color: blue; background- image: url( cat.jpeg ); ß image wins in terms of priority background- repeat: no- repeat; // repeat- y background- position: bottom right; // horizontal then vertical </style> </head> <body> <h1>the Background Property</h1> <div id="bg">background properties are fun!</div> </body> </html> background/background- before.html

10 Set background image <html><head><meta charset="utf- 8"> <title>background</title> <style> #bg { width: 500px; height: 500px; background- color: blue; background- image: url( cat.jpeg ); ß image wins in terms of priority background- repeat: no- repeat; // repeat- y background- position: bottom; // horizontal then vertical specifying only one makes the other default to center </style> </head> <body> <h1>the Background Property</h1> <div id="bg">background properties are fun!</div> </body> </html> background/background- before.html

11 Let s combine all together <html><head><meta charset="utf- 8"> <title>background</title> <style> #bg { width: 500px; height: 500px; background- color: blue; background: url( cat.jpeg ) no- repeat right center; </style> </head> <body> <h1>the Background Property</h1> <- - - Why the background is not blue anymore? Try and refresh to believe! <div id="bg">background properties are fun!</div> </body> </html> background/background- before.html

12 Let s combine all together <html><head><meta charset="utf- 8"> <title>background</title> <style> #bg { width: 500px; height: 500px; background- color: blue; background: url( cat.jpeg ) no- repeat right center; </style> </head> <body> <h1>the Background Property</h1> <- - - Why the background is not blue anymore? The background property wins and background- color gets overwritten!!! <div id="bg">background properties are fun!</div> </body> </html> background/background- before.html

13 Given the following code:...<div style="background- color: blue; background: url('mypicture.jpg');">... </div> What will you see inside the div element? _ Some image on top of a blue background _ Blue background, but no image _ Blue background will be covering the image _ Just the image

14 Given the following code:...<div style="background- color: blue; background: url('mypicture.jpg');">... </div> What will you see inside the div element? _ Some image on top of a blue background _ Blue background, but no image _ Blue background will be covering the image x_ Just the image Since we specified 'background' and not 'background-image', we wiped the 'background-color' property value, so the blue background will not appear.

15 Position Elements by Floating Background property and subproperties Position Elements by Floating Flexible Layouts using CSS floating

16 Example of Floating

17 Example of Floating

18 Floating for layout

19 Clearing the Float An element that has the clear property set on it will not move up adjacent to the float like the float desires, but will move itself down past the float.

20 Clearing the Float #footer { clear: both;

21 Position Elements by Floating floating/floating- before.html

22 Position Elements by Floating #p1 { background- color: #A52A2A; float: right; ß What happened? The rest of the boxes moved up. Why?

23 Position Elements by Floating #p1 { background- color: #A52A2A; float: right; ß What happened? The rest of the boxes moved up. Why? When you flow an element, the browser takes them out the regular document flow (that s why the second moves up)

24 Position Elements by Floating #p1 { background- color: #A52A2A; float: right; ß What happened? The rest of the boxes moved up. Why? When you flow an element, the browser takes them out the regular document flow (that s why the second moves up) Margin never collapses in floating: The Margin usually collapses when is touching a margin of another element on top)

25 Position Elements by Floating p { #p1 { width: 50px; height: 50px; border: 1px solid black; float: left; ß all boxes floated to left margin- right: 10px; ß margin refresh. What happened? background- color: #A52A2A; float: right; ß remove this

26 Position Elements by Floating p { width: 50px; height: 50px; border: 1px solid black; float: left; ß all boxes floated to left margin- right: 10px; ß margin Refresh. What happened? When you float elements, the browser take them out the regular document flow. So the div collapses as there is nothing else in it. The only think keeping the div alive is the section element which has a tiny space. How do we fix that?

27 Position Elements by Floating p { section { width: 50px; height: 50px; border: 1px solid black; float: left; margin- right: 10px; clear: left; Use the clear property on the section: Nothing is allowed to be floating to the left of the element section

28 Let s try now to apply the clear on another element section { #p3 { clear: left; background- color: #5F9EA0; clear: left; ß Nothing is allowed to float on the left (resume the regular document flow again)

29 Clear: both; Let s reset the page the way it was p { width: 50px; height: 50px; border: 1px solid black; #p1 { background- color: #A52A2A; #p2 { background- color: #DEB887; #p3 { background- color: #5F9EA0; #p4 { background- color: #FF7F50;

30 Clear: both; p { width: 50px; height: 50px; border: 1px solid black; #p1 { background- color: #A52A2A; float: left; Now let s float the first element to the left #p2 { background- color: #DEB887; float: right; And the second element to the right #p3 { background- color: #5F9EA0; #p4 { background- color: #FF7F50;

31 Clear: both; p { width: 50px; height: 50px; border: 1px solid black; #p1 { background- color: #A52A2A; float: left; #p2 { background- color: #DEB887; float: right; #p3 { background- color: #5F9EA0; clear:left; #p4 { background- color: #FF7F50;

32 Clear: both; p { width: 50px; height: 50px; border: 1px solid black; #p1 { #p2 { #p3 { background- color: #A52A2A; float: left; background- color: #DEB887; float: right; height: 300px; ß now this box overflows background- color: #5F9EA0; clear:left; ß clear left but not clear right! #p4 { background- color: #FF7F50;

33 Clear: both; p { width: 50px; height: 50px; border: 1px solid black; #p1 { #p2 { #p3 { background- color: #A52A2A; float: left; background- color: #DEB887; float: right; height: 300px; ß now this box overflows background- color: #5F9EA0; clear:right; ß now p2 jumped all the way down #p4 { background- color: #FF7F50;

34 Clear: both; p { width: 50px; height: 50px; border: 1px solid black; #p1 { #p2 { #p3 { background- color: #A52A2A; float: left; height: 150px; background- color: #DEB887; float: right; height: 100px; background- color: #5F9EA0; clear:both; #p4 { background- color: #FF7F50;

35 Make a 2- column layout floating/two- column- before.html

36 Make a 2- column layout GOAL I want the first paragraph to be the first column, The second paragraph to be the second column p {.. width: 50%; border: 1px solid black; float: left; ß each paragraph is taking 50% of its containing element: body or (entire screen)

37 Make a 2- column layout GOAL I want the first paragraph to be the first column, The second paragraph to be the second column p {.. width: 50%; border: 1px solid black; float: left; ß It does not seem to work, why?

38 Make a 2- column layout GOAL I want the first paragraph to be the first column, The second paragraph to be the second column p {.. width: 50%; border: 1px solid black; float: left; ß There is no space: try removing border

39 Make a 2- column layout The border is pushing the size to a new line! We want the boarder but also the float left!!! p {.. width: 50%; border: 1px solid black; float: left; ß But I want the border

40 Make a 2- column layout We need the boarder pixel to be included in the box. Remember how to do that? p {.. width: 50%; border: 1px solid black; float: left; ß But I want the border

41 Make a 2- column layout We need the boarder pixel to be included in the box. Remember how to do that? * { p { box- sizing: border- box; //default was content- box width: 50%; border: 1px solid black; float: left; ß Now the 1 px border is included in the 50%

42 Let s enhance our layout * { p { box- sizing: border- box; //default was content- box width: 50%; border: 1px solid black; float: left; padding: 10px; ß Now the text is not too close to border And it looks nicer

43 Remove border and colors that were there only to visualize things div { /* background- color: #00FFFF; */ p { width: 50%; /* border: 1px solid black; */ float: left; padding: 10px; #p1 { /* background- color: #A52A2A;*/ #p2 { /* background- color: #DEB887; */

44 We created a flexible layout! Now try to enlarge or shrink the browser window! We created a very basic responsive layout As you can see the layout is flexible! It adapts to different screen sizes This is because we didn t specify pixel but percentage!

45 Practice Quiz Floating elements takes them out of the regular document flow True False

46 Practice Quiz Floating elements takes them out of the regular document flow Solution _x_true False

47 Practice Quiz The following code: section { clear: right; says that none of the section elements should allow anything to float to the right of them. True False

48 Practice Quiz The following code: section { clear: right; says that none of the section elements should allow anything to float to the right of them. Solution _x_true False

49 Summary Floating elements can produce flexible page layouts Floats are taken out of the normal document flow Floats don t have vertical margin collapse! To resume normal document flow use clear clear:left; clear:right; or clear:both;

50 Code Challenge Starting from this: /floating/two- column- before.html Please modify the existing HTML and CSS to create a flexible Three Column Layout!

51 Code Challenge Starting from this: /floating/two- column- before.html Please modify the existing HTML and CSS to create a flexible Three Column Layout! Solution: /floating/three- column- design.html

52 Introduction to Computer Science Web Development Flavio Esposito Lecture 12

Introduction to Computer Science Web Development

Introduction to Computer Science Web Development Flavio Esposito http://cs.slu.edu/~esposito/teaching/1080/ Lecture 9 Lecture Outline Text Styling Some useful CSS properties The Box Model essential to