I have created a site that has a dynamically built menu, which draws out tabs, according to some arrays in the backend. Selecting a tab fetches the whole page again, with different css classes applied, depending on the selected tab.

Basically, I am using style="position: absolute; left: xxxxpx" where the xxxx is calucated in the backend.

I want to change the site so that the gui is more independent of the backend.

I am unsure how to proceed with changing this so that all the layout calculations are made by css. I was thinking about doing it with css variables, and keeping the essential same code, but I am unsure how to determine which node and therefore how far it should be offset.

My Current Code

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>

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

Backend code to calculate positions:

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