gracer

Ну если в лоб, то берёте 8 инпутов, ограничиваете длинну ввода до 1 знака, стилизуете по макету, 2 последних поднимаете через position relative. При отправке формы склеиваете поля как вам надо. По мере продвижения в обучении можно придумывать более творческие подходы.

Масштаб в браузере проверьте. ctrl+0 для сброса

У вас .page абсолютом задан. Суньте section в main блок. Хотя не знаю зачем вам абсолют вообще

может вам не круги подойдут
xbsoftware.github.io/enjoyhint

Про тень попробовал https://codepen.io/gracer/pen/yLBePRY
Т.е. смысл элемент с тенью располагать и растягивать с js высчитывая от положения и размеров нужного элемента

line-height

Ну, я бы примерно так сделал
https://codepen.io/anon/pen/wVzGmO

Потому что
position: absolute;

Скорее всего какой-то margin вылезает за блоки, попробуйте overflow: hidden поставить блокам.

Можно как-то так изобразить, не совсем то, но всё же. https://codepen.io/anon/pen/zMydYr

Берётся от ширины body. У вас 5к монитор?

Так?
https://codepen.io/anon/pen/WaKvYd

<option <?= $_SESSION['AAA'] ?>  value="CCC" >CCCCCCCCC</option>

ошибка 1

п.2

foreach ($_POST['docs'] as $v ){
      $_SESSION[$v] = 'SELECTED';
      echo "SESSION['{$v}'] = ".$_SESSION[$v]."<br>";
    }

Там ещё фишка в visibility
https://codepen.io/anon/pen/JmMrjR

Ну, например

Значения атрибутов должны находиться в кавычках
<input type="text" value="some value">

Можно было самостоятельно посмотреть стили меню
htmlbook.ru/css/transition

$('#step01').on("click", function(){
  $('#section3').empty();
  $('#section3').load('info.html #block01 > *');
 })

Для старых версий

$('#step01').live("click", function(){
  $('#section3').empty();
  $('#section3').load('info.html #block01 > *');
 })

Потому что у вас iframe загружается раньше, чем создаётся функция askName.

Тэг form вынесите за таблицу, браузер форму режет

<form autocomplete="off" action="s/acp/act=translations" method="post">
<table style="border: 0;">  
    <tr style="margin: 5px;">
      <td style="background: rgba(204,204,204,1); padding: 10px;">
        <p>Объект: <b>acp.translations.title</b></p>
        <p>Комментарий: <input name="comment_acp.translations.title" type="text" size="50" maxlength="250" value=""></p>
        <p>Русский вариант перевода / версия: <input name="ru_version_acp.translations.title" type="text" size="5" maxlength="5" value="0"></p>
        <p><textarea name="ru_acp.translations.title" type="text" rows="5" cols="80" maxlength="65535"></textarea></p>
        <p>Английский вариант перевода / версия: <input name="en_version_acp.translations.title" type="text" size="5" maxlength="5" value="0"></p>
        <p><textarea name="en_acp.translations.title" type="text" rows="5" cols="80" maxlength="65535"></textarea></p>
      </td>
    </tr>
    <tr style="margin: 5px;">
      <td style="background: rgba(204,204,204,1); padding: 10px;">
        <p>Объект: <b>kek.asd</b></p>
        <p>Комментарий: <input name="comment_kek.asd" type="text" size="50" maxlength="250" value=""></p>
        <p>Русский вариант перевода / версия: <input name="ru_version_kek.asd" type="text" size="5" maxlength="5" value="0"></p>
        <p><textarea name="ru_kek.asd" type="text" rows="5" cols="80" maxlength="65535"></textarea></p>
        <p>Английский вариант перевода / версия: <input name="en_version_kek.asd" type="text" size="5" maxlength="5" value="0"></p>
        <p><textarea name="en_kek.asd" type="text" rows="5" cols="80" maxlength="65535"></textarea></p>
      </td>
    </tr>
    <tr>
      <td>
        <input type="submit" name="submit" style="position: fixed; top:15; right:15;" value="Сохранить изменения">
      </td>
    </tr>
</table>
</form>

Единицы измерения забыли

function resizeRock() {
    document.getElementById('rockimg').style.height =
        ((document.body.clientHeight - 100) * 0.9)+"px";
}