I am in the process of creating a website to showcase my skills as a pianist. I am sticking to using only HTML and CSS for now, as I have yet to explore JavaScript or Flash. It's all still very new to me since I just started learning HTML two days ago.
Here's the idea: I thought it would be fun to incorporate a set of piano keys at the top of the site to function as a navigation panel. Currently, they are simply linked to Google.
Now, I have a couple of questions:
How can I elegantly insert text into the divs (keys) without causing them to shift positions?
I'm struggling with this - the key keeps dropping down inexplicably.Am I missing a simpler approach to positioning each key individually?
I attempted grouping them together, considering C & F are essentially the same keys, and likewise with Csharp & Fsharp, but ultimately decided against it for better management of each key separately.
Any additional advice or tips would be greatly appreciated.
This is what the index file currently looks like:
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>Thijs Waleson, Pianist in Utrecht and Surrounding Areas</title>
</head>
<body>
...
And this is the snippet from the CSS stylesheet:
.white-key {
...
}
.black-key {
...
}
.footer {
...
}
a div:hover {
...
}
/* Positioning of the piano keys */
#C {
...
}
...