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

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>

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

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

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

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

When is it acceptable to use negative margins?

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

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.

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>

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.

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.

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

3 Likes

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.

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

3 Likes

How would you address the margin issue in my topic?

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

I don’t like it.

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

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

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