Tengo un problema en el que no puedo averiguar cómo hacer que estas "teclas del piano" se muevan hacia arriba 10px. Estoy creando una aplicación de piano y el código que tengo hasta ahora está en este JSFiddle "https: / /jsfiddle.net/Klauss/fxhd5z3e/#&togetherjs=RmEh5FeuIE " ''

Pero lo que quiero hacer es mover las teclas negras hacia arriba por diez píxeles. Yo he tratado:

margin-top: 10px; top: 10px; top: -10px; margin-top: -10px;

Si alguien pudiera ayudarme, eso sería muy apreciado

0
Jacob 22 ene. 2017 a las 14:14

3 respuestas

La mejor respuesta

Asegúrese de agregar el margin-top: -10px después del margin: 1px más general para no anularlo:

.blackKey {
  /* ... */
  margin: 1px;
  margin-top: -10px;
}

Esto podría combinarse con margin: -10px 1px 1px 1px o {{X1 }}.

JSFiddle actualizado.

0
Marvin 22 ene. 2017 a las 11:37

Puede agregar margin-top de -10px a la clase .blackkey como se muestra a continuación, manteniendo otros lados como 1px y simplemente cambiando el valor máximo.

.blackKey {
    background: #232323;
    display: inline-block;
    position: absolute;
    width: 75%;
    height: 20px;
    color: #eee;
    z-index: 10;
    margin: -10px 1px 1px 1px; /*Add this*/
}
#keyboard {
	width: 100%;
	left: 0px;
	position: relative;
	display: inline-block;
	background: black;
	height: 100%;
}
.whiteKey {
	background: #FCFBE3;
	display: inline-block;
	position: relative;
	width: 100%;
	margin: 1px;
	height:30px;
	text-align: right;
}
.blackKey {
	background: #232323;
	display: inline-block;
	position: absolute;
	width: 75%;
	height: 20px;
	color: #eee;
	z-index: 10;
	margin: -10px 1px 1px 1px;
}
<div id="keyboard">
	<span class="whiteKey">C</span>
	<span class="blackKey">C#</span>
	<span class="whiteKey">D</span>
	<span class="blackKey">D#</span>
	<span class="whiteKey">E</span>
	<span class="whiteKey">F</span>
	<span class="blackKey">F#</span>
	<span class="whiteKey">G</span>
	<span class="blackKey">G#</span>
	<span class="whiteKey">A</span>
	<span class="blackKey">A#</span>
	<span class="whiteKey">B</span>
</div>
0
frnt 22 ene. 2017 a las 11:47

Actualicé el violín: usar después ya que es más fácil de controlar:

#keyboard {
  width: 100%;
  background: black;
}
.whiteKey {
  background: #FCFBE3;
  width: 100%;
  margin: 1px;
  height:30px;
  text-align: right;
  position: relative;
}
.withBlack:after {
  content: " ";
  position: absolute;
  left: 0;
  top: 20px;
  background: #232323;
  width: 75%;
  height: 20px;
  color: #eee;
  z-index: 10;
  margin: 1px;
  text-align: left;
}
.keyC:after {
  content: "C#";
}
.keyD:after {
  content: "D#";
}
.keyF:after {
  content: "F#";
}
.keyG:after {
  content: "G#";
}
.keyA:after {
  content: "A#";
}
<div id="keyboard">
  <div class="whiteKey withBlack keyC">C</div>
  <div class="whiteKey withBlack keyD">D</div>
  <div class="whiteKey">E</div>
  <div class="whiteKey withBlack keyF">F</div>
  <div class="whiteKey withBlack keyG">G</div>
  <div class="whiteKey withBlack keyA">A</div>
  <div class="whiteKey">B</div>
</div>
0
Robbie 22 ene. 2017 a las 21:58