[machoolah]

Hello everyone,

I am trying to create a piano in HTML and CSS. I created the images for the white and black keys. Now I am stuck on how to position the keys (newbie problem, I suppose?)

Note that I only want to create a single octave (WBWBWWBWBWBW, where W stands for the white key and B stands for the black key).

The way I'd like to do it -- suggest an easier way if you know one -- is to overlay the black keys on the white keys. However, I don't know how to set up the CSS. Any ideas?

So far I've gotten to this point. Also note that class="invisible" is used for places where there is no black key between two white keys. I am simply using .white {float:left;} .black{float:left;} for CSS which just puts the keys next to each other (they should overlap). Is there anyone who could help me with the proper CSS? Thanks! =)

EDIT: I don't mind if the technique involves CSS3. =)

<div id="piano">
<div class=white>
	<img src='../../images/white.jpg'>
</div>
<div class="black">
	<img src='../../images/black.jpg'>
</div>

<div class=white>
	<img src='../../images/white.jpg'>
</div>
<div class="black">
	<img src='../../images/black.jpg'>
</div>

<div class=white>
	<img src='../../images/white.jpg'>
</div>
<div class="black" class="invisible">
	<img src='../../images/black.jpg'>
</div>

<div class=white>
	<img src='../../images/white.jpg'>
</div>
<div class="black">
	<img src='../../images/black.jpg'>
</div>

<div class=white>
	<img src='../../images/white.jpg'>
</div>
<div class="black">
	<img src='../../images/black.jpg'>
</div>

<div class=white>
	<img src='../../images/white.jpg'>
</div>
<div class="black">
	<img src='../../images/black.jpg'>
</div>

<div class=white>
	<img src='../../images/white.jpg'>
</div>
<div class="black" class="invisible">
	<img src='../../images/black.jpg'>
</div>



</div>

This post has been edited by machoolah: 03 March 2012 - 09:34 AM

[exiles.prx]

If you want the one image to overlap another iamge I believe you can use a negitive margin to get an image to overlap another image.

[machoolah]

exiles.prx, on 03 March 2012 - 02:49 PM, said:

If you want the one image to overlap another iamge I believe you can use a negitive margin to get an image to overlap another image.

Thank you! I ended up doing the whole thing in a silly way using Canvas though!

[Shane Hudson]

How come you were planning to use images rather than just style the divs to a certain height and colour using CSS? Would have been a thousand times easier!