Проблема такая:
Я решил протестировать свои навыки в вёрстке, написать сайт. (Исключительно для себя.) Столкнулся с проблемой, озвученной в заголовке.
<!DOCTYPE html>
<html>
<head>
<title>Don2Quixote</title>
</head>
<body>
<p id="top"><big>CHOOSE, WHAT DO YOU WANT TO LEARN:</big></p>
<p id="bot"><tt>@ P o w e r e d b y D o n 2 Q u i x o t e </tt></p>
<b id="varl">Pascal</b> <b id="varl">Java</b>
</body>
<style>
body { background: #E6E6E6; }
#bot {
position: fixed;
left: 38%;
top: 91%;
padding: 5px;
background: #FE2E64;
border: 2px solid #FF0000;
}
#top {
position: fixed;
width: 385px;
left: 35%;
top: 1px;
padding: 5px;
background: #FE2E64;
border: 2px solid #FF0000;
}
#varl {
width: 30px;
top: 50%;
left: 3em;
right:3em;
padding: 7px;
background: #FF00BF;
border: 2px solid #FF0000;
}
</style>
</html>
Искодный код сайта. Так же я залил сайт на хостинг Гитхаба, с доменом.
nahoy.tk. Как вы можете видеть, есть кнопки (пока что не кнопки, но в ближайшем будующем должны ими стать) PASCAL и JAVA. У них есть ID (#varl). Если посмотреть в исходнике, то можно увидеть в style #varl строку:
top: 50%;
Я и px ставил, и em ставил, и % ставил. Отсупа всё равно нет. Отступ появляется только если добавить такую строку в #varl:
position: fixed;
Но мне это не нужно. Тем более, с position: fixed; кнопки накладываются друг на друга. Объясните, как сделать так, что бы отступ работал, а так же почему не работает отступ в моём случае?
Простой
Средний
