1
00:00:01,839 --> 00:00:06,400
Let's try to add in a little bit of styling for the ad sell component, so remember, we want those

2
00:00:06,400 --> 00:00:10,240
two buttons to be more or less displayed in the middle of the screen with a good amount of space in

3
00:00:10,240 --> 00:00:10,720
between them.

4
00:00:11,050 --> 00:00:15,580
We also want to have this sort of horizontal line running the entire width of the screen, and we want

5
00:00:15,580 --> 00:00:17,680
that line drawn behind the buttons as well.

6
00:00:18,310 --> 00:00:19,250
So let's go back over.

7
00:00:19,300 --> 00:00:21,280
We're going to add in a pretty good amount of styling.

8
00:00:23,330 --> 00:00:29,220
I'm going to first begin by finding my ad cell to file inside of here, I'll first begin by adding in

9
00:00:29,220 --> 00:00:30,660
a class name to our div.

10
00:00:31,800 --> 00:00:33,360
Of ad sell.

11
00:00:35,490 --> 00:00:40,740
Then after hour, two buttons, I'm going to add in another div that is going to serve as that divider

12
00:00:40,740 --> 00:00:45,740
line or that horizontal line, I'm going to give it a class name of divider.

13
00:00:46,590 --> 00:00:51,570
So this right here is what is going to be responsible for showing that horizontal line behind our two

14
00:00:51,570 --> 00:00:52,050
buttons.

15
00:00:53,540 --> 00:00:57,470
Let's go and add in some success right away to get that divider drawn on the screen.

16
00:00:58,270 --> 00:01:00,500
Let's go over to my ad sell sites file.

17
00:01:01,250 --> 00:01:04,910
I'm going to first begin by adding in a rule of ad cell.

18
00:01:05,770 --> 00:01:07,840
Position relative.

19
00:01:09,410 --> 00:01:15,330
I'll then do a ad sell dot divider and I'll give this thing a position of absolute.

20
00:01:16,070 --> 00:01:20,150
So this is how we're going to make sure that we can draw the divider behind those buttons and kind of

21
00:01:20,240 --> 00:01:21,410
directly through them.

22
00:01:21,680 --> 00:01:23,220
That's what I definitely looks like in this market.

23
00:01:23,990 --> 00:01:25,580
So the divider is positioned.

24
00:01:25,580 --> 00:01:26,390
Absolutely.

25
00:01:27,300 --> 00:01:31,140
We're going to apply a couple of other rules to make sure that it stretches the entire with a screen,

26
00:01:31,410 --> 00:01:37,080
make sure it actually draws a line, and make sure that it's drawn about 50 percent of the way down

27
00:01:37,230 --> 00:01:38,520
our overall component.

28
00:01:40,350 --> 00:01:45,420
So I'm going to add in a top of 50 percent and a bottom up 50 percent.

29
00:01:45,740 --> 00:01:49,860
That's what's going to make sure that we show it kind of at the midpoint vertically of those two buttons.

30
00:01:50,900 --> 00:01:57,680
I'll add in a border bottom, which is how we're going to draw an actual line, the line itself is really

31
00:01:57,680 --> 00:01:58,300
just a border.

32
00:01:58,700 --> 00:02:00,380
I'll give it a color of graph right now.

33
00:02:01,400 --> 00:02:05,930
I'm going to give it a width of one hundred percent to make sure it draws the entire width of the screen.

34
00:02:07,110 --> 00:02:11,590
And then finally, I'm going to also give it a Z index of negative one to make sure it shows up behind

35
00:02:11,610 --> 00:02:12,300
our buttons.

36
00:02:12,660 --> 00:02:16,530
Now, this right here, you might say, hey, Stephen, wait, can't we do that exact same trick we

37
00:02:16,530 --> 00:02:20,500
use just a moment ago of moving the div before those buttons?

38
00:02:20,880 --> 00:02:25,290
Well, it kind of comes down to how elements are drawn when they are positioned relative.

39
00:02:25,290 --> 00:02:32,250
And absolutely, in this case, if we just move the step before the divider or the actual border that

40
00:02:32,250 --> 00:02:35,150
we are drawing on a screen is still going to be drawn on top the buttons.

41
00:02:35,160 --> 00:02:39,360
And again, this just comes down to some rules of position relative in position, absolute.

42
00:02:39,900 --> 00:02:43,680
So in this case, we're just going to rely upon the index to make sure that the divider is drawn behind

43
00:02:43,680 --> 00:02:44,160
the buttons.

44
00:02:45,600 --> 00:02:47,400
Yes, let's save this flowback over.

45
00:02:48,430 --> 00:02:53,170
And yeah, there we go, then we've got that full horizontal line and it is definitely drawn behind

46
00:02:53,170 --> 00:02:55,980
our two buttons, if you don't believe me about that whole Z.

47
00:02:55,990 --> 00:03:01,810
And next thing you can, of course, coming out the index, save this, you'll then see that the line

48
00:03:01,810 --> 00:03:03,250
is drawn on top of the two buttons.

49
00:03:03,850 --> 00:03:09,310
And if we try to move the divider before the buttons, which in theory might fix this issue, even if

50
00:03:09,310 --> 00:03:10,050
we refresh.

51
00:03:10,330 --> 00:03:11,270
Nope, no dice.

52
00:03:11,540 --> 00:03:18,220
So again, just comes down to some little intricacies around position, absolute and position relative.

53
00:03:18,440 --> 00:03:19,750
It's going to undo all those changes.

54
00:03:20,260 --> 00:03:22,930
And I should be back to having that full horizontal line.

55
00:03:23,720 --> 00:03:24,780
OK, that's a good start.

56
00:03:25,640 --> 00:03:27,560
We still have to add in a decent amount of success.

57
00:03:27,590 --> 00:03:30,430
So quick pause and finish up the styling in just a moment.