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

I don’t like it.

7 Likes

I can’t be experimenting with all these outrageous codes.

I have modified the colours and it is a now about the same as yours:

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

Can you do it without using float? I hate float.

Have you tried modifying the CSS and removing the floats?

I am off for a late lunch, maybe catch you tomorrow and hope you have made the changes to suit your taste.

Exceptionally rarely.
I struggle to think of a good example where it is appropriate.
I most cases it is used by newbies where relative or absolute positioning may be more appropriate.
In your case other layout methods using the display property would be better, such as inline-block or table.

I would find some good beginners tutorials on HTML & CSS and invest some time studying to actually learn how to code.
Attempting to do HTML & CSS without first learning HTML & CSS is never going to go anywhere. You are making life difficult for yourself by refusing the learn the basics and disregarding good advice.

1 Like

This is bad you’re saying?

<div style="margin: 0; width: 83px; height:18px; border-top: 3px solid #0059dd;border-left: 3px solid #0059dd;border-bottom: 3px solid #0059dd;border-right: 3px solid #0059dd; background-color:#000000; border-top-left-radius:50px;border-bottom-left-radius:50px;"></div>

<div style="margin: -24px 0 0 89px;width: 88px; height:18px; border-top: 3px solid #0059dd;border-bottom: 3px solid #0059dd;background-color:#000000;"> </div>

<div style="margin: -24px 0 0 177px; width: 83px; height:18px; border-top: 3px solid #0059dd;border-right: 3px solid #0059dd;border-bottom: 3px solid #0059dd;border-left: 3px solid #0059dd;background-color:#000000; border-top-right-radius:50px;border-bottom-right-radius:50px;">

Bad just doesn’t seem a strong enough word for it.

1 Like

margin: -24px , that’s bad?

My whole code uses negative margins.

<div style="width:0;" onclick="myc=document.getElementById('mycase'); myc.style.display='block'; this.style.display='none'">

<div style="width: 256px; height: 330px; cursor: pointer; background-color:#000000;border-radius: 50px; border: 5px solid #0059dd;text-align: center;">
 
<p style="font-family: 'Times New Roman'; font-size: 20px;color: #0059dd;line-height:73px;">[ ENJOY THE MUSIC]</p></div></div>

<div id="mycase" style="display: none;">

<div style="margin: 0;width: 50px; height: 50px; background-color:#00a0b0; color:#000000; border-top-left-radius:50px;"></div>

<div style="margin: -50px 0 0 54px; width: 50px; height: 50px; background-color:#6a4a3c; color:#000000; "></div>

<div style="margin: -50px 0 0 108px; width: 50px; height: 50px; background-color:#cc333f;color:#000000;"></div>

<div style="margin: -50px 0 0 162px; width: 50px; height: 50px; background-color:#eb6841;color:#000000; "></div>

<div style="margin: -50px 0 0 216px; width: 50px; height: 50px;background-color:#edc951;color:#000000; border-top-right-radius:50px; "></div>

<div style="width:0;" onmouseover="myObject=document.getElementById('myObj'); 
myObject.style.display='block'; this.style.display='none'">

<div style="margin: 0; width: 83px; height:18px; border-top: 3px solid #0059dd;border-left: 3px solid #0059dd;border-bottom: 3px solid #0059dd;border-right: 3px solid #0059dd; background-color:#000000; border-top-left-radius:50px;border-bottom-left-radius:50px;"></div>

<div style="margin: -24px 0 0 89px;width: 88px; height:18px; border-top: 3px solid #0059dd;border-bottom: 3px solid #0059dd;background-color:#000000;"> </div>

<div style="margin: -24px 0 0 177px; width: 83px; height:18px; border-top: 3px solid #0059dd;border-right: 3px solid #0059dd;border-bottom: 3px solid #0059dd;border-left: 3px solid #0059dd;background-color:#000000; border-top-right-radius:50px;border-bottom-right-radius:50px;">

</div></div>

<div id="myObj" style="display: none;">

<div style="margin: 0;width: 83px; height:18px; border-top: 3px solid #0059dd;border-left: 3px solid #0059dd;border-bottom: 3px solid #0059dd;border-right: 3px solid #0059dd; background-color:#00ffff; border-top-left-radius:50px;border-bottom-left-radius:50px;">

<button id="playButton" style="border:none;cursor: pointer;background-color:transparent;color:blue;padding:14px 260px 8px 0;margin:0; " onmouseover="  
var player = document.getElementById('player').volume='1.0';
var button = document.getElementById('playButton');
  var player = document.getElementById('player');
  if (player.paused) {
    playButton.style.cursor = 'pointer';
    playButton.style.backgroundColor = 'transparent';
    playButton.style.padding = '14px 260px 8px 0';
    player.play();
  } else {
    playButton.style.cursor = 'pointer';
    playButton.style.backgroundColor = 'transparent';
    playButton.style.padding = '14px 260px 8px 0';
    player.pause();
  }">
 </button>

</div>

<div style="margin: -24px 0 0 89px; width: 88px; height:18px; border-top: 3px solid #0059dd;border-bottom: 3px solid #0059dd;background-color:#ffffff;">

</div>

<div style="margin: -24px 0 0 177px; width: 83px; height:18px; border-top: 3px solid #0059dd;border-right: 3px solid #0059dd;border-bottom: 3px solid #0059dd;border-left: 3px solid #0059dd;background-color:#ff00ff; border-top-right-radius:50px;border-bottom-right-radius:50px; ">
          
</div></div>

<a href="" target="_blank" style="display:block; margin: 0; cursor: pointer; width: 50px; height: 50px;background-color:#00a0b0;color:transparent;"
onmouseover="this.style.backgroundColor='#000000';
this.style.width='40px';this.style.height='40px';
this.style.border='thick solid #5cb378'"
onmouseout="this.style.backgroundColor='#00a0b0';
this.style.width='50px';this.style.height='50px';
this.style.border='none'">
</a>

<a href="" target="_blank" style="display:block; margin: -50px 0 0 54px; width: 50px; height:50px; background-color:#6a4a3c;" onmouseover="this.style.backgroundColor='#badac5';
this.style.color='transparent'"
onmouseout="this.style.backgroundColor='#6a4a3c'"></a>

<a href="" target="_blank" style="display:block; margin: -50px 0 0 108px; width: 50px; height: 50px;background-color:#cc333f;" onmouseover="this.style.backgroundColor='#b7ab9d';
this.style.color='transparent'"
onmouseout="this.style.backgroundColor='#cc333f'"></a>

<a href="" target="_blank" style="display:block; margin: -50px 0 0 162px; width: 50px; height: 50px; background-color:#eb6841;" onmouseover="this.style.backgroundColor='#4679c7';
this.style.color='transparent'"
onmouseout="this.style.backgroundColor='#eb6841'"></a>

<a href="" target="_blank" style="display:block; margin: -50px 0 0 216px; width: 50px; height: 50px; background-color:#edc951; color:#000000;" onmouseover="this.style.backgroundColor='#45bf21';
this.style.color='transparent'"
onmouseout="this.style.backgroundColor='#edc951'"></a>

<div style="margin: 4px 0 0; width: 50px; height: 50px; background-color:#00a0b0; color:#000000;"></div>

<div style="margin: -50px 0 0 54px; width: 50px; height: 50px; background-color:#6a4a3c; color:#000000;"></div>

<a href="" target="_blank" style="display:block; margin: -50px 0 0 108px; cursor: pointer; width: 50px; height: 50px;background-color:#cc333f;color:transparent;"
onmouseover="this.style.backgroundColor='#ffffff';
this.style.width='18px';this.style.height='50px'
this.style.borderLeft='thick solid #00ffff';
this.style.borderLeftWidth='16px';
this.style.borderRight='thick solid #ff00ff'
this.style.borderRightWidth='16px'"
onmouseout="this.style.backgroundColor='#cc333f';
this.style.width='50px';this.style.height='50px';
this.style.border='none'">
</a>

<div style="margin: -50px 0 0 162px; width: 50px; height: 50px; background-color:#eb6841; color:#000000;"></div>

<div style="margin: -50px 0 0 216px; width: 50px; height: 50px; background-color:#edc951; color:#000000;"></div>

<div style="margin: 4px 0 0; width: 50px; height: 50px; background-color:#00a0b0; color:#000000;"></div>

<div style="margin: -50px 0 0 54px; width: 50px; height: 50px; background-color:#6a4a3c; color:#000000;"></div>

<div style="margin: -50px 0 0 108px; width: 50px; height: 50px; background-color:#cc333f; color:#000000;"></div>

<div style="margin: -50px 0 0 162px; width: 50px; height: 50px; background-color:#eb6841; color:#000000;"></div>

<div style="margin: -50px 0 0 216px; width: 50px; height: 50px; background-color:#edc951; color:#000000;"></div>

<div style="margin: 4px 0 0; width: 50px; height: 50px; background-color:#00a0b0; color:#000000;"></div>

<div style="margin: -50px 0 0 54px; width: 50px; height: 50px; background-color:#6a4a3c; color:#000000;"></div>

<div style="width:0;" onclick="myObject=document.getElementById('myObj2');
myObject.style.display='block'; this.style.display='none'">

<div style="margin:-50px 0 0 108px; width: 50px; height:50px;  cursor: pointer; background-color:#cc333f;">

</div></div>

<div id="myObj2" style="display: none;">

<button id="playButton2" style="display:block;margin:-50px 0 0 108px; width:50px; height:50px; border:none; cursor: pointer; background-color:#000000;" onclick="  
var player = document.getElementById('player2').volume='1.0';
var button = document.getElementById('playButton2');
  var player = document.getElementById('player2');
  if (player.paused) {
    playButton2.style.backgroundColor = '#000000';
    playButton2.style.border = 'thick solid blue';
    player.play();
  } else {
    playButton2.style.backgroundColor = '#cc333f';
    playButton2.style.border = 'none';
    player.pause();
  }">
 </button>
</div>

<div style="margin: -50px 0 0 162px; width: 50px; height: 50px; background-color:#eb6841; color:#000000;"></div>

<div style="margin: -50px 0 0 216px; width: 50px; height: 50px; background-color:#edc951; color:#000000;"></div>

<div style="margin: 4px 0 0; width: 50px; height: 50px; background-color:#00a0b0; color:#000000;border-bottom-left-radius:50px;"></div>

<div style="margin: -50px 0 0 54px; width: 50px; height: 50px; background-color:#6a4a3c; color:#000000;"></div>

<div style="margin: -50px 0 0 108px; width: 50px; height: 50px; background-color:#cc333f; color:#000000;"></div>

<div style="margin: -50px 0 0 162px; width: 50px; height: 50px; background-color:#eb6841; color:#000000;"></div>

<div style="margin: -50px 0 0 216px; width: 50px; height: 50px; background-color:#edc951;color:#000000; border-bottom-right-radius:50px;"></div></div>

<audio id="player" preload="none" style="display:none;">
<source src='http://hi5.1980s.fm/;' type='audio/mpeg'/>
</audio>

<audio id="player2" preload="none" style="display:none;">
<source src='http://hi5.1980s.fm/;' type='audio/mpeg'/>
</audio>

The negative margins used to layout the fixed squares is an appropriate use of negative margins. With a little imagination, one can see the same logic in the way sprites are addressed using fixed dimensions. (except that sprites are from a background image).

That’s as far as I’ll go, though. Inline styles are still poor code. I have not looked at the way you have used the other negaive margins but I suspect they will lose position if the user changes font size. Just speculating, tho.

What are sprites?

If you really want to know, look, it up. I’m not here.

How much you want to bet on no changes on font zoom?

google told me.

What happens if you actually add text? This is the version with no indication of what it is or how it operates.

1 Like

So, I’ll just forgo using text then.

Really? Rather than fix your layout you prefer to stick with an inaccessible version that operates on guesswork? Oh well - you can lead a horse to water…

To me using margins (negative or otherwise) to force layout in this way always feels like a dirty hack and very fragile, where positioning would seem a more correct method to arrange a fixed layout it the rare cases you want one.
In the context of a fixed layout in a fluid page which can cope with varying screen/font sizes, I would completely avoid px as a unit in favour or % for pure graphics or em where text is involved.

Then how will anyone know what the site is about and what the coloured boxes do?
Not that anyone would ever land in the page, because with no actual content as such it is destined to fail in SERPs.

2 Likes