Let's try to add in a little bit of styling for the ad sell component, so remember, we want those
two buttons to be more or less displayed in the middle of the screen with a good amount of space in
between them.
We also want to have this sort of horizontal line running the entire width of the screen, and we want
that line drawn behind the buttons as well.
So let's go back over.
We're going to add in a pretty good amount of styling.
I'm going to first begin by finding my ad cell to file inside of here, I'll first begin by adding in
a class name to our div.
Of ad sell.
Then after hour, two buttons, I'm going to add in another div that is going to serve as that divider
line or that horizontal line, I'm going to give it a class name of divider.
So this right here is what is going to be responsible for showing that horizontal line behind our two
buttons.
Let's go and add in some success right away to get that divider drawn on the screen.
Let's go over to my ad sell sites file.
I'm going to first begin by adding in a rule of ad cell.
Position relative.
I'll then do a ad sell dot divider and I'll give this thing a position of absolute.
So this is how we're going to make sure that we can draw the divider behind those buttons and kind of
directly through them.
That's what I definitely looks like in this market.
So the divider is positioned.
Absolutely.
We're going to apply a couple of other rules to make sure that it stretches the entire with a screen,
make sure it actually draws a line, and make sure that it's drawn about 50 percent of the way down
our overall component.
So I'm going to add in a top of 50 percent and a bottom up 50 percent.
That's what's going to make sure that we show it kind of at the midpoint vertically of those two buttons.
I'll add in a border bottom, which is how we're going to draw an actual line, the line itself is really
just a border.
I'll give it a color of graph right now.
I'm going to give it a width of one hundred percent to make sure it draws the entire width of the screen.
And then finally, I'm going to also give it a Z index of negative one to make sure it shows up behind
our buttons.
Now, this right here, you might say, hey, Stephen, wait, can't we do that exact same trick we
use just a moment ago of moving the div before those buttons?
Well, it kind of comes down to how elements are drawn when they are positioned relative.
And absolutely, in this case, if we just move the step before the divider or the actual border that
we are drawing on a screen is still going to be drawn on top the buttons.
And again, this just comes down to some rules of position relative in position, absolute.
So in this case, we're just going to rely upon the index to make sure that the divider is drawn behind
the buttons.
Yes, let's save this flowback over.
And yeah, there we go, then we've got that full horizontal line and it is definitely drawn behind
our two buttons, if you don't believe me about that whole Z.
And next thing you can, of course, coming out the index, save this, you'll then see that the line
is drawn on top of the two buttons.
And if we try to move the divider before the buttons, which in theory might fix this issue, even if
we refresh.
Nope, no dice.
So again, just comes down to some little intricacies around position, absolute and position relative.
It's going to undo all those changes.
And I should be back to having that full horizontal line.
OK, that's a good start.
We still have to add in a decent amount of success.
So quick pause and finish up the styling in just a moment.