Are the margins on this set up correctly, and if not, how should they be set?

HTML & CSS
1

I’m confused on how the margins should be set.

1st
margin:0 0 0 -68px

2nd
margin: 0 -74px 0 125px

<div style=" width: 88px; height: 24px; background-color:#ffffff; color:#000000; border-left: 89px solid #00ffff;border-right: 89px solid #ff00ff;border-radius: 50px;"> 

<button style=" margin:0 0 0 -68px;cursor: pointer; background-color:transparent;padding-bottom:1px;"
onclick="document.getElementById('player').play()">Play</button>

<button style=" margin: 0 -74px 0 125px;cursor: pointer; background-color:green;padding-bottom:1px;"    
onclick="document.getElementById('player').pause()">Pause</button></div>
2

Please explain is styles are used.

I and many others have shown how to write code which is a great deal simpler, easy to debug, more efficient, easier to maintain…

Previously explained

Reminds me of the old vinyl records with a scratch and the record keeps looping.

1 Like
3

I’m asking about the margin I used, I’m not asking about any of the other stuff.

4

The margins you’ve set here appear to be with the aim of getting the 3 <div>'s you’ve created to appear as if they’re in a single row (as if in a table-like structure). Is that an accurate interpretation of what you wish to do? If so, it’s a very poor technique to use to meet the end goal.

You’d be far better off using a combination of display: table;, display: table-row;, and display: table-cell; and to forget about using negative margins as a positioning tool - that’s not what they’re for.

For reference: https://developer.mozilla.org/en-US/docs/Web/CSS/display

2 Likes
5

a combination, which ones would you use? Can you show me how you would do it?

6

When is it acceptable to use negative margins?

7

There’s only 1 div here, I don’t see 3.

8

The idea here is that we help you learn how to do this for yourself. I know that you’ve been shown how to make use of the display property to create layouts that simulate the appearance of a table on more than one occasion. I’d suggest you review those first, as well as the link I’ve provided above, then give it a go yourself.

To the best of my knowledge, it’s only really used when you want to hide a page element outside the visible area of the viewport, but someone with more experience than myself, can probably give you a better response.

Not seen that one yet - do you think I should?

Have you changed the code again? That is not what I looked at when I offered my original suggestion.

9

This was the one I specifically wrote the topic about.

<div style=" width: 88px; height: 24px; background-color:#ffffff; color:#000000; border-left: 89px solid #00ffff;border-right: 89px solid #ff00ff;border-radius: 50px;"> 

<button style=" margin:0 0 0 -68px;cursor: pointer; background-color:transparent;padding-bottom:1px;"
onclick="document.getElementById('player').play()">Play</button>

<button style=" margin: 0 -100px 0 125px;cursor: pointer; background-color:green;padding-bottom:1px;"    
onclick="document.getElementById('player').pause()">Pause</button></div>
10

I never changed it, as you can see there has been no edit to my topic. So, whatever I posted is as is, and never edited.

11

That is not accurate. There is a 5 minute grace period after a post is initially saved during which it can be edited without leaving a trace. I thought the code was different, too, but don’t remember whether it was the code in the fiddle or the code in the post.

12

It’s possible I was looking at another one of your posts - it’s difficult to keep track.

3 Likes
13

Both the post and jsfiddle point to the same code. So, can you address the code I mentioned in both? I only mentioned 1 code, and 1 jsfiddle which pointed to the same thing.

14

No. Today, I am using my time to do something that will leave me with some sense of accomplishment.

3 Likes
15

How would you address the margin issue in my topic?

16

Try this Fiddle:

https://jsfiddle.net/John_Betong/etnvfpmp/19/

Edit:
I don’t like Fiddle, it is far easier to work locally, quicker and possible to validate.

1 Like
17

I don’t like it.

18

You’re going to have to explain far more about what it is you don’t like about what John offered, if you’re going to get the support you want.

1 Like
19

it’s not inline and it doesn’t look exactly like this: https://jsfiddle.net/etnvfpmp/18/

20

The idea was to use a style sheet and to separate the in-line styles.

It may not look the same but it is far easier to:

  1. modify the colours
  2. positions
  3. size
  4. smaller
  5. ideal for mobiles

Did you try and modify anything in the style-sheet to make it more to your taste?

3 Likes