当前位置: 动力学知识库 > 问答 > 编程问答 >

css3 - Text in div's in HTML

问题描述:

I'm trying to set up a website to promote myself as a pianist. I'm trying to do this only with html and css, since I don't know anything about javascript/flash etc (YET). I just started html 2 days ago, so this is all new to me.

Here goes: I had this fun idea to put a set of piano-keys on top of the site to function as navigation panel. For now I just have them linked to Google.

Now I have a few questions:

  • How do I insert text into the divs(keys) nicely, without the divs changing position all the time?

    I simply can't work it out.. The key just drops down for some reason.

  • Am I overlooking a simpler method for positioning all the keys seperately?

    I already tried to group them, since C&F are basically the same keys, same goes for Csharp&Fsharp etc.

    I decided not to group the keys, so I can easily manage them all seperately.

Any other helpful information is also highly appreciated.

The index file looks as follows:

<html>

<head>

<link rel="stylesheet" type="text/css" href="stylesheet.css">

<title>Thijs Waleson, pianist in Utrecht en omgeving</title>

</head>

<body>

<a href="www.google.com"><div class="white-key"ID="C"><p>HOI</p></div></a>

<a href="www.google.com"><div class="black-key"ID="Csharp"></div></a>

<a href="www.google.com"><div class="white-key"ID="D"></div></a>

<a href="www.google.com"><div class="black-key"ID="Dsharp"></div></a>

<a href="www.google.com"><div class="white-key"ID="E"></div></a>

<a href="www.google.com"><div class="white-key"ID="F"></div></a>

<a href="www.google.com"><div class="black-key"ID="Fsharp"></div></a>

<a href="www.google.com"><div class="white-key"ID="G"></div></a>

<a href="www.google.com"><div class="black-key"ID="Gsharp"></div></a>

<a href="www.google.com"><div class="white-key"ID="A"></div></a>

<a href="www.google.com"><div class="black-key"ID="Asharp"></div></a>

<a href="www.google.com"><div class="white-key"ID="B"></div></a>

<a href="www.google.com"><div class="white-key"ID="C"></div></a>

<a href="www.google.com"><div class="black-key"ID="Csharp"></div></a>

<a href="www.google.com"><div class="white-key"ID="D"></div></a>

<a href="www.google.com"><div class="black-key"ID="Dsharp"></div></a>

<a href="www.google.com"><div class="white-key"ID="E"></div></a>

<div class="footer"></div>

</body>

</html>

And this is what the CSS sheet looks like:

.white-key{

display: inline-block;

border-radius: 5px;

border: 3px solid black;

background: #FFFFFF;

height: 575px;

width: 100px;

margin-left: 0px;

padding: 0px;

z-index: 1;

position: relative;

}

.black-key{

display: inline-block;

border-radius: 5px;

border: 3px solid black;

background-color: #000000;

height:375px;

width: 60px;

vertical-align: top;

margin-left: 0px;

padding: 0px;

z-index: 2;

position: relative;

}

.footer{

background-color: #000000;

height: 3px;

width: auto;

padding: 0px;

margin: 0px;

}

a div:hover{

background-color: grey;

}

/*Positions of the piano keys */

#C {

margin-left: -5px;

}

#Csharp {

margin-left: -50px;

}

#D {

margin-left: -25px;

}

#Dsharp {

margin-left: -25px;

}

#E {

margin-left: -50px;

}

#F {

margin-left: -5px;

}

#Fsharp{

margin-left: -50px;

}

#G{

margin-left: -25px;

}

#Gsharp{

margin-left: -37.5px;

}

#A{

margin-left: -37.5px;

}

#Asharp{

margin-left: -25px;

}

#B{

margin-left: -50px;

}

网友答案:

Having fixed positions for your divs in the form of pixel positions is probably not the best idea. I would suggest you have a look at CSS positioning tutorials like this one for a better idea.

网友答案:

This did the trick, thanks to Stefan Denchev

HTML:

<body>
<div id="menu">
<a href="www.google.com"><div class="key white"ID="C">C</div></a>
<a href="www.google.com"><div class="key black"ID="Csharp">C#</div></a>
<a href="www.google.com"><div class="key white"ID="D">D</div></a>
<a href="www.google.com"><div class="key black"ID="Dsharp">D#</div></a>
<a href="www.google.com"><div class="key white nosharp"ID="E">E</div></a>
<a href="www.google.com"><div class="key white"ID="F">F</div></a>
<a href="www.google.com"><div class="key black"ID="Fsharp">F#</div></a>
<a href="www.google.com"><div class="key white"ID="G">G</div></a>
<a href="www.google.com"><div class="key black"ID="Gsharp">G#</div></a>
<a href="www.google.com"><div class="key white"ID="A">A</div></a>
<a href="www.google.com"><div class="key black"ID="Asharp">A#</div></a>
<a href="www.google.com"><div class="key white nosharp"ID="B">B</div></a>
<a href="www.google.com"><div class="key white"ID="C"></div>C</a>
<a href="www.google.com"><div class="key black"ID="Csharp">C#</div></a>
<a href="www.google.com"><div class="key white"ID="D">D</div></a>
<a href="www.google.com"><div class="key black"ID="Dsharp">D#</div></a>
<a href="www.google.com"><div class="key white"ID="E">E</div></a>
<div class="footer"></div>
</div>
</body>

CSS:

.key{
float: left;
border-radius: 5px;
border: 3px solid black;
position: relative;
text-align:center;}

.white{
background: #FFFFFF;
height: 575px;
width: 100px;
z-index: 1;
margin-left: -66px;
left:66px;}

.black{
background-color: #000000;
height:375px;
width: 60px;
z-index: 2;
left:33px;}

.nosharp{
margin-right: 66px;}

body{
width: 1100px;}

.footer{
background-color: #000000;
height: 3px;
width: auto;
padding: 0px;
margin: 0px;}

a div:hover{
background-color: grey;}
分享给朋友:
您可能感兴趣的文章:
随机阅读: