Skip to content

Commit 4dd149c

Browse files
rachelandrewrachelandrew
committed
overflow files
1 parent f13b6c0 commit 4dd149c

File tree

7 files changed

+315
-0
lines changed

7 files changed

+315
-0
lines changed

‎learn/overflow/auto.html‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Overflow: auto</title>
6+
<link rel="stylesheet" href="../styles.css" />
7+
<style>
8+
9+
</style>
10+
11+
<style class="editable">
12+
.box {
13+
border: 1px solid #333333;
14+
width: 200px;
15+
height: 100px;
16+
overflow: auto;
17+
}
18+
</style>
19+
</head>
20+
21+
<body>
22+
<section class="preview">
23+
<div class="box">This box has a height and a width. This means that if there is too much content to be displayed within the assigned height, there will be an overflow situation. If overflow is set to hidden then any overflow will not be visible.</div>
24+
</section>
25+
26+
<textarea class="playable playable-css" style="height: 120px;">
27+
.box {
28+
border: 1px solid #333333;
29+
width: 200px;
30+
height: 100px;
31+
overflow: auto;
32+
}
33+
</textarea>
34+
35+
<textarea class="playable playable-html" style="height: 140px;">
36+
<div class="box">This box has a height and a width. This means that if there is too much content to be displayed within the assigned height, there will be an overflow situation. If overflow is set to hidden then any overflow will not be visible.</div>
37+
38+
<p>This content is outside of the box.</p>
39+
</textarea>
40+
41+
<div class="playable-buttons">
42+
<input id="reset" type="button" value="Reset" />
43+
</div>
44+
</body>
45+
<script src="../playable.js"></script>
46+
</html>

‎learn/overflow/block-overflow.html‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Overflow: block overflow</title>
6+
<link rel="stylesheet" href="../styles.css" />
7+
<style>
8+
9+
</style>
10+
11+
<style class="editable">
12+
.box {
13+
border: 1px solid #333333;
14+
width: 200px;
15+
height: 100px;
16+
}
17+
</style>
18+
</head>
19+
20+
<body>
21+
<section class="preview">
22+
<div class="box">This box has a height and a width. This means that if there is too much content to be displayed within the assigned height, there will be an overflow situation. If overflow is set to hidden then any overflow will not be visible.</div>
23+
</section>
24+
25+
<textarea class="playable playable-css" style="height: 120px;">
26+
.box {
27+
border: 1px solid #333333;
28+
width: 200px;
29+
height: 100px;
30+
}
31+
</textarea>
32+
33+
<textarea class="playable playable-html" style="height: 140px;">
34+
<div class="box">This box has a height and a width. This means that if there is too much content to be displayed within the assigned height, there will be an overflow situation. If overflow is set to hidden then any overflow will not be visible.</div>
35+
36+
<p>This content is outside of the box.</p>
37+
</textarea>
38+
39+
<div class="playable-buttons">
40+
<input id="reset" type="button" value="Reset" />
41+
</div>
42+
</body>
43+
<script src="../playable.js"></script>
44+
</html>

‎learn/overflow/hidden.html‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Overflow: hidden</title>
6+
<link rel="stylesheet" href="../styles.css" />
7+
<style>
8+
9+
</style>
10+
11+
<style class="editable">
12+
.box {
13+
border: 1px solid #333333;
14+
width: 200px;
15+
height: 100px;
16+
overflow: hidden;
17+
}
18+
</style>
19+
</head>
20+
21+
<body>
22+
<section class="preview">
23+
<div class="box">This box has a height and a width. This means that if there is too much content to be displayed within the assigned height, there will be an overflow situation. If overflow is set to hidden then any overflow will not be visible.</div>
24+
</section>
25+
26+
<textarea class="playable playable-css" style="height: 120px;">
27+
.box {
28+
border: 1px solid #333333;
29+
width: 200px;
30+
height: 100px;
31+
overflow: hidden;
32+
}
33+
</textarea>
34+
35+
<textarea class="playable playable-html" style="height: 140px;">
36+
<div class="box">This box has a height and a width. This means that if there is too much content to be displayed within the assigned height, there will be an overflow situation. If overflow is set to hidden then any overflow will not be visible.</div>
37+
38+
<p>This content is outside of the box.</p>
39+
</textarea>
40+
41+
<div class="playable-buttons">
42+
<input id="reset" type="button" value="Reset" />
43+
</div>
44+
</body>
45+
<script src="../playable.js"></script>
46+
</html>

‎learn/overflow/inline-overflow.html‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Overflow: inline overflow</title>
6+
<link rel="stylesheet" href="../styles.css" />
7+
<style>
8+
9+
</style>
10+
11+
<style class="editable">
12+
.word {
13+
border: 5px solid #333333;
14+
width: 100px;
15+
font-size: 250%;
16+
}
17+
</style>
18+
</head>
19+
20+
<body>
21+
<section class="preview">
22+
<div class="word">Overflow</div>
23+
</section>
24+
25+
<textarea class="playable playable-css" style="height: 120px;">
26+
.word {
27+
border: 1px solid #333333;
28+
width: 100px;
29+
font-size: 250%;
30+
}
31+
</textarea>
32+
33+
<textarea class="playable playable-html" style="height: 140px;">
34+
<div class="word">Overflow</div>
35+
36+
</textarea>
37+
38+
<div class="playable-buttons">
39+
<input id="reset" type="button" value="Reset" />
40+
</div>
41+
</body>
42+
<script src="../playable.js"></script>
43+
</html>

‎learn/overflow/scroll-x.html‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Overflow: scroll-x</title>
6+
<link rel="stylesheet" href="../styles.css" />
7+
<style>
8+
9+
</style>
10+
11+
<style class="editable">
12+
.word {
13+
border: 5px solid #333333;
14+
width: 100px;
15+
font-size: 250%;
16+
overflow-x: scroll;
17+
}
18+
</style>
19+
</head>
20+
21+
<body>
22+
<section class="preview">
23+
<div class="word">Overflow</div>
24+
</section>
25+
26+
<textarea class="playable playable-css" style="height: 120px;">
27+
.word {
28+
border: 5px solid #333333;
29+
width: 100px;
30+
font-size: 250%;
31+
overflow-x: scroll;
32+
}
33+
</textarea>
34+
35+
<textarea class="playable playable-html" style="height: 140px;">
36+
<div class="word">Overflow</div>
37+
</textarea>
38+
39+
<div class="playable-buttons">
40+
<input id="reset" type="button" value="Reset" />
41+
</div>
42+
</body>
43+
<script src="../playable.js"></script>
44+
</html>

‎learn/overflow/scroll-y.html‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Overflow: scroll-y</title>
6+
<link rel="stylesheet" href="../styles.css" />
7+
<style>
8+
9+
</style>
10+
11+
<style class="editable">
12+
.box {
13+
border: 1px solid #333333;
14+
width: 200px;
15+
height: 100px;
16+
overflow-y: scroll;
17+
}
18+
</style>
19+
</head>
20+
21+
<body>
22+
<section class="preview">
23+
<div class="box">This box has a height and a width. This means that if there is too much content to be displayed within the assigned height, there will be an overflow situation. If overflow is set to hidden then any overflow will not be visible.</div>
24+
</section>
25+
26+
<textarea class="playable playable-css" style="height: 120px;">
27+
.box {
28+
border: 1px solid #333333;
29+
width: 200px;
30+
height: 100px;
31+
overflow-y: scroll;
32+
}
33+
</textarea>
34+
35+
<textarea class="playable playable-html" style="height: 140px;">
36+
<div class="box">This box has a height and a width. This means that if there is too much content to be displayed within the assigned height, there will be an overflow situation. If overflow is set to hidden then any overflow will not be visible.</div>
37+
38+
<p>This content is outside of the box.</p>
39+
</textarea>
40+
41+
<div class="playable-buttons">
42+
<input id="reset" type="button" value="Reset" />
43+
</div>
44+
</body>
45+
<script src="../playable.js"></script>
46+
</html>

‎learn/overflow/scroll.html‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Overflow: scroll</title>
6+
<link rel="stylesheet" href="../styles.css" />
7+
<style>
8+
9+
</style>
10+
11+
<style class="editable">
12+
.box {
13+
border: 1px solid #333333;
14+
width: 200px;
15+
height: 100px;
16+
overflow: scroll;
17+
}
18+
</style>
19+
</head>
20+
21+
<body>
22+
<section class="preview">
23+
<div class="box">This box has a height and a width. This means that if there is too much content to be displayed within the assigned height, there will be an overflow situation. If overflow is set to hidden then any overflow will not be visible.</div>
24+
</section>
25+
26+
<textarea class="playable playable-css" style="height: 120px;">
27+
.box {
28+
border: 1px solid #333333;
29+
width: 200px;
30+
height: 100px;
31+
overflow: scroll;
32+
}
33+
</textarea>
34+
35+
<textarea class="playable playable-html" style="height: 140px;">
36+
<div class="box">This box has a height and a width. This means that if there is too much content to be displayed within the assigned height, there will be an overflow situation. If overflow is set to hidden then any overflow will not be visible.</div>
37+
38+
<p>This content is outside of the box.</p>
39+
</textarea>
40+
41+
<div class="playable-buttons">
42+
<input id="reset" type="button" value="Reset" />
43+
</div>
44+
</body>
45+
<script src="../playable.js"></script>
46+
</html>

0 commit comments

Comments
 (0)