Original subtitles

1 1

So in the last lecture we wrote a very 2

2

simple layout using float, clear, margins and pettings. 3

3

Now it's time to polish our blog post website a little bit. 4

4

So let's go do that. 5

5

OK, we just need to finish some things here, 6

6

like putting some content in this right column, 7

7

and also make the author section a little more 8

8

beautiful, you know. 9

9

And that's what we'll do now. 10

10

So I'll put some content here in this box, 11

11

and to do so I go back to the HTML file, 12

12

into the outer posts, which is empty for now. 13

13

So let's say we want three outer blog posts here. 14

14

So I create simply three 15

15

new diffs and call them maybe just other. 16

16

And put some name in here 17

17

diffs first other blog post. 18

18

Now we'll do this three times. 19

19

It's just so that that box isn't completely empty. 20

20

So yet another blog post, 21

21

and maybe the best post ever. 22

22

Read this. 23

23

Now I just want to format those. 24

24

So Command+E again, 25

25

a new rule. 26

26

And let's say we want a 27

27

margin bottom of 40 pixels, 28

28

which means a distance between those boxes of 40 pixels. 29

29

So this is what it looks like. 30

30

It's not beautiful, but you know, it's there. 31

31

And the cool thing is we know how to put it there. 32

32

So let's just close this again, 33

33

and let's talk about the author box down here. 34

34

Now I want to show you a new kind of selector 35

35

because we want to change this author image here. 36

36

But you know, I don't feel like creating a new class 37

37

just for this image. 38

38

And if I format all the image at the same time, 39

39

then the outer image, like this one here, 40

40

will also be affected. 41

41

So there is a way to actually just select 42

42

this image without giving it a class name. 43

43

And that's what I'm gonna do here in this file. 44

44

So I write author box because this is the box 45

45

where this image is inside. 46

46

Author box, and then I just write img. 47

47

And what this does is to select not all the images 48

48

on the entire website, but only the images inside 49

49

of the author box. 50

50

So I don't need to make a whole new class 51

51

just for that image. 52

52

It's a much easier way. 53

53

So and what I want now is to maybe make it 54

54

a little smaller, so I'll say hide 100 pixels. 55

55

And since it's a square, 56

56

can make width also 100 pixels. 57

57

Here it is. 58

58

Now let's make it round. 59

59

You probably have seen those round images 60

60

all over the internet. 61

61

Now I'll just show you how to do that, 62

62

and it's really easy. 63

63

We just have to specify the border radius. 64

64

Border radius. 65

65

And if we say we want this to be 50%, 66

66

then this is what happens. 67

67

Image is just a circle. 68

68

Now another thing that we should probably do is 69

69

to put this text here right beside this image. 70

70

You know, this doesn't look so good. 71

71

And to do that we will again use the float property. 72

72

So we say these two elements should float left, 73

73

which will make this element appear first 74

74

right where it is now, 75

75

and then this element should go right here. 76

76

So let's just do that. 77

77

Say float left for this image, 78

78

and also for the author text, 79

79

which is this class right here. 80

80

So float also left. 81

81

All right, here we go. 82

82

Now using some margin we can actually put it where we want. 83

83

So we just specify some top margin until it is 84

84

here in the middle where we want it. 85

85

We just have to try what works here. 86

86

Margin top, I have no idea, maybe 15 pixels. 87

87

Then just a margin to the left side 88

88

so that there's a little space between 89

89

the image and the text. 90

90

Margin left, let's say 10 pixels. 91

91

OK, 15 pixels was not quite enough. 92

92

Maybe 25 pixels, so margin top could be 25. 93

93

We're almost there. 94

94

Let's try it with 30 pixels. 95

95

And that's it. 96

96

That looks great I think. 97

97

So the last thing could be to maybe make 98

98

this image here a little smaller, 99

99

and put it right here after this paragraph 100

100

in the HTML is amazing section. 101

101

So let's do that. 102

102

It's very easy. 103

103

Just cut the image 104

104

(mumbling), 105

105

and paste it down here after this paragraph 106

106

such as we want it, this image. 107

107

All right, so if you remember as we did it before 108

108

with this author image, I will now use the same 109

109

type of selector to select this image. 110

110

This is inside the blog post diff. 111

111

So I will just write 112

112

blog post image. 113

113

So it's the same situation as we had here 114

114

with the image inside the author box. 115

115

Now just let's say we want it to be 150 pixels high. 116

116

Now to maintain the aspect ratio of the image 117

117

let's put the width to auto. 118

118

OK, very well. 119

119

All right. 120

120

This web page maybe does not look perfect now, 121

121

but wow, you learned such a lot in all the lectures 122

122

of this section, and that's what actually matters. 123

123

We used margins and pettings. 124

124

We defined width and used float and clear 125

125

and created a nice gray border, 126

126

and even learned a new useful selector. 127

127

So that's a lot of new stuff. 128

128

And there's actually only one more thing 129

129

I wanna show you in this CSS section, 130

130

which is element positioning.