3 Replies - 2719 Views - Last Post: 04 March 2012 - 01:32 AM

#1 machoolah  Icon User is offline

  • D.I.C Head

Reputation: -6
  • View blog
  • Posts: 87
  • Joined: 17-May 09

creating a piano with HTML and CSS

Posted 03 March 2012 - 09:24 AM

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


Is This A Good Question/Topic? 0
  • +

Replies To: creating a piano with HTML and CSS

#2 exiles.prx  Icon User is offline

  • D.I.C Head

Reputation: 65
  • View blog
  • Posts: 241
  • Joined: 22-November 10

Re: creating a piano with HTML and CSS

Posted 03 March 2012 - 01:49 PM

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.
Was This Post Helpful? 0
  • +
  • -

#3 machoolah  Icon User is offline

  • D.I.C Head

Reputation: -6
  • View blog
  • Posts: 87
  • Joined: 17-May 09

Re: creating a piano with HTML and CSS

Posted 03 March 2012 - 09:29 PM

View Postexiles.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!
Was This Post Helpful? 0
  • +
  • -

#4 Shane Hudson  Icon User is offline

  • D.I.C Technophile
  • member icon

Reputation: 343
  • View blog
  • Posts: 1,286
  • Joined: 06-December 09

Re: creating a piano with HTML and CSS

Posted 04 March 2012 - 01:32 AM

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!
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1