I need help setting this up

HTML & CSS
41

It’s going into a spot that’s 266px.

42

Can you add a 1px colored border at one end so the color bands are divisible by 5? I serously doubt anyone could tell that the end color band was one pixel longer than the others.

43

There’s no such thing as half a pixel.
No one will notice.

1 Like
44

Change of plans.

88px 90px 88px space inside each box.

<a href="" target="_blank" style="display:block;width: 260px;height:44px;background-image: linear-gradient( to right,#000000 199px,#0059dd 199px, #0059dd 202px, #000000 202px, #000000 202px, #0059dd 399px, #0059dd 399px, #000000 402px );border: 3px solid #0059dd; cursor: pointer;"></a>

45

That can’t be right.

88+90+88=266. How many pixels do your blue lines take up?

46

3px.

47

then it’s, 80, 90, 80

48

3 + 88 + 3 + 90 + 3 + 88 + 3 = 278

80+90+80+12 = 262

49

3x4=12
278 - 12 = 266

50

Indeed. And your point is?

51

I’m not sure exactly.

52

266 - 12 = 254

So once you’ve accounted for the 12 pixels taken up by the blue lines, you have 254px to distribute between the three black sections.

53

82, 90, 82

54

OK - that will work.

3 + 82 + 3 + 90 + 3 + 82 + 3 = 266

1 Like
55

Putting the numbers in confuses me.

Is there a certain way to do this so I’ll be able to remember it?

<a href="" target="_blank" style="display:block;width: 260px;height:44px;background-image: linear-gradient( to right,#000000 82px,#0059dd 82px, #0059dd 90px, #000000 90px, #000000 164px, #0059dd 164px, #0059dd 399px, #000000 402px );border: 3px solid #0059dd; cursor: pointer;"></a>

56

It confuses us all! You have an element 260px wide, so what are the 399px and 402px doing?

57

@PaulOB gave you a very good explanation here: How would I convert these 3 div into 1 div without using border, and only background? - #16 by PaulOB

You need to give the start and end positions for each band of colour (apart from the first and last, which are assumed to start at the beginning, and end at the end).

So it would start linear-gradient( to right, #0059dd 3px, #000000 3px, #000000 85px, #0059dd 85px, #0059dd 88px...

(If you’re setting a border, then you don’t need to include the first and last blue stripes in the gradient, which will affect the numbers you use.)

(The numbers you have are nonsense. How can you have something at 402px in an area 266px wide?)

58

That was based off my larger one I made.

60

I would find it easier to read and write like this.

.myLink {
   display:block;
   width: 260px;
   height:44px;
   background-image: linear-gradient( to right,
      #000000 82px,
      #0059dd 82px, 
      #0059dd 90px, 
      #000000 90px, 
      #000000 164px, 
      #0059dd 164px, 
      #0059dd 399px, 
      #000000 402px
   );
   border: 3px solid #0059dd; 
   cursor: pointer;
}

Only with numbers that add up.

3 Likes
61

That’s not the right set up though.