Позиционирование элементов div без серверных вычислений - PullRequest
Новая
       8

Позиционирование элементов div без серверных вычислений

1 голос
/ 04 апреля 2020

Я создал сайт, который имеет динамически построенное меню, которое выводит aws вкладок, согласно некоторым массивам в серверной части. При выборе вкладки снова выбирается вся страница с различными классами css, в зависимости от выбранной вкладки.

В основном я использую style="position: absolute; left: xxxxpx", где * * * * * вычисляется в бэкэнде.

Я хочу изменить сайт так, чтобы gui был более независимым от бэкэнда.

Я не уверен, как действовать, чтобы изменить это так, чтобы все вычисления макета выполнялись с помощью css. Я думал о том, чтобы сделать это с css переменными и сохранить основной код, но я не уверен, как определить, какой узел и, следовательно, как далеко он должен быть смещен.

Мой текущий код

выбрана 1-я вкладка

1st tab selected

<div class="topTabSelected tab-admin noprint" style="left: 204px;">Administration</div>
<div class="topTab tab-design noprint" style="left: 336px;"> <a href="https://talentcloud.local/DesignManager">Design Manager</a>Project Manager</div>
<div class="topTab tab-project noprint" style="left: 468px;"><a href="/ProjectManager">Project Manager</a></div>

выбрана 3-я вкладка

3rd tab selected

<div class="topTab tab-admin noprint" style="left: 204px;"><a href="/Administration">Administration</a></div>
<div class="topTab tab-design noprint" style="left: 336px;"> <a href="https://talentcloud.local/DesignManager">Design Manager</a>Project Manager</div>
<div class="topTabSelected tab-project noprint" style="left: 468px;">Project Manager</div>

CSS

.tab-admin{
    background-color: var(--admin-tab-bg);
}

.tab-design{
    background-color: var(--design-tab-bg);
}

.tab-project{
    background-color: var(--project-tab-bg);
}

.topTabSelected {
    position: absolute;
    top: 31px;
    z-index: 8;
    color: white;
    font-weight: bold;
    border-left: 1px solid black;
    border-top: 1px solid black;
    border-right: 1px solid black;
    border-bottom: transparent;
    padding: 3px;
    border-radius: 5px 5px 0 0;
    width: 120px;
    height: 17px;
    text-align: center;
}

.topTab {
    position: absolute;
    top: 31px;
    z-index: 2;
    color: white;
    font-weight: bold;
    border-left: 1px solid black;
    border-top: 1px solid black;
    border-right: 1px solid black;
    padding: 3px;
    border-radius: 5px 5px 0 0;
    width: 120px;
    text-align: center;
}

.topTab a {
    text-decoration: none;
    color: white;
}

.topTab a:hover {
    text-decoration: underline;
    color: white;
}

Код сервера для расчета позиций: 

$tabwidth = 132;
$widthmodifier = 200;

for ($mainpageCounter = 1; $mainpageCounter <= count($mainpage); $mainpageCounter++) {
        $topTabDivStart = "\n<div class=\"topTab " . ($p == $mainpageCounter ? "topTab-Selected " : "") . $mainpage[$mainpageCounter]["cssClass"] . " noprint\" style=\"left: " . $widthmodifier . "px;\">";
        $topTabDivEnd = "</div>\n";

        if ($p == $mainpageCounter) {
            echo $topTabDivStart . $mainpage[$mainpageCounter]["title"] . $topTabDivEnd;
        } else {
            echo $topTabDivStart . "<a href=\"/" . $mainpage[$mainpageCounter]["urlPart"] . "\">" . $mainpage[$mainpageCounter]["title"] . "</a> $topTabDivEnd";
        }
        $widthmodifier += $tabwidth;
}
...