Текст в div в HTML

Я пытаюсь создать сайт, чтобы продвигать себя как пианист. Я пытаюсь сделать это только с html и css, так как я ничего не знаю о javascript/flash и т. Д. (YET). Я только что начал html 2 дня назад, так что это для меня все ново.Текст в div в HTML

Здесь есть: у меня была эта забавная идея поставить набор клавиш фортепиано поверх сайта, чтобы он функционировал как панель навигации. На данный момент я просто связал их с Google.

Теперь у меня есть несколько вопросов:

Как вставить текст в дивы (ключи) красиво, без дивы позиции все время меняются?
Я просто не могу разобраться. Ключ по какой-то причине падает.
Могу ли я пропустить более простой способ позиционирования всех ключей отдельно?
Я уже пытался их сгруппировать, поскольку C & F - это в основном те же ключи, что и для Csharp & Fsharp и т. Д. Я решил не группировать ключи, поэтому я могу легко управлять ими все отдельно.

Любая полезная информация также высоко оценена.

Индексный файл выглядит следующим образом:

<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>

И это то, что CSS-лист выглядит следующим образом:

.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; 
}

источник

2013-08-11 Thijs Waleson

JSFiddle пожалуйста? –

[Там вы идете ...] (http://jsfiddle.net/cpkp4/) Вы можете делать float: left или display: inline, я полагаю ... Просто отрегулируйте поля. – UIlrvnd

[Довольно многое, что вы хотите, я полагаю.] (Http://jsfiddle.net/cpkp4/2/) (щелкните по тексту - это ссылка: P) – UIlrvnd

Это сделал трюк, благодаря Стефану Денчев

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;}

источник

2013-08-13 11:39:54

Зафиксировав позиции для дивы в виде позиций пикселей, вероятно, не лучшая идея. Я бы посоветовал вам ознакомиться с учебниками по позиционированию CSS, например this, для лучшей идеи.

источник

2013-08-11 12:32:48 geekchic

В этом учебнике используются пиксели везде ... – UIlrvnd

Текст в div в HTML

ответ

Смежные вопросы