I’ve created a website that has a dynamically constructed menu, which pulls out tabs, based on some arrays within the backend. Choosing a tab fetches the entire web page once more, with completely different css lessons utilized, relying on the chosen tab.

Principally, I’m utilizing fashion="place: absolute; left: xxxxpx" the place the xxxx is calucated within the backend. I’m uncertain how one can proceed with altering this so that each one the format calculations are made by css. I used to be enthusiastic about doing it with css variables, and maintaining the important similar code, however I’m uncertain how one can decide which node and subsequently how far it needs to be offset.

My Present Code

1st tab chosen

<div class="topTabSelected tab-admin noprint" fashion="left: 204px;">Administration</div>
<div class="topTab tab-design noprint" fashion="left: 336px;"> <a href="https://talentcloud.native/DesignManager">Design Supervisor</a>Venture Supervisor</div>
<div class="topTab tab-project noprint" fashion="left: 468px;"><a href="/ProjectManager">Venture Supervisor</a></div>

third tab chosen

<div class="topTab tab-admin noprint" fashion="left: 204px;"><a href="/Administration">Administration</a></div>
<div class="topTab tab-design noprint" fashion="left: 336px;"> <a href="https://talentcloud.native/DesignManager">Design Supervisor</a>Venture Supervisor</div>
<div class="topTabSelected tab-project noprint" fashion="left: 468px;">Venture Supervisor</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 {
    place: absolute;
    high: 31px;
    z-index: 8;
    coloration: white;
    font-weight: daring;
    border-left: 1px strong black;
    border-top: 1px strong black;
    border-right: 1px strong black;
    border-bottom: clear;
    padding: 3px;
    border-radius: 5px 5px Zero 0;
    width: 120px;
    peak: 17px;
    text-align: heart;
}

.topTab {
    place: absolute;
    high: 31px;
    z-index: 2;
    coloration: white;
    font-weight: daring;
    border-left: 1px strong black;
    border-top: 1px strong black;
    border-right: 1px strong black;
    padding: 3px;
    border-radius: 5px 5px Zero 0;
    width: 120px;
    text-align: heart;
}

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

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

Backend code to calculate positions:

$tabwidth = 132;
$widthmodifier = 200;

for ($mainpageCounter = 1; $mainpageCounter <= rely($mainpage); $mainpageCounter++) {
        echo "<div class="" . ($p == $mainpageCounter ? "topTabSelected" : "topTab") . " " . $mainpage[$mainpageCounter]["cssClass"] . " " . $mainpage[$mainpageCounter]["cssClass"] . " noprint" fashion="left: " . (4 + $widthmodifier) . "px;">" .($p != $mainpageCounter) ?
            "<a href="/" . $mainpage[$mainpageCounter]["urlPart"] . "">" . $mainpage[$mainpageCounter]["title"] . "</a>" :
            (($p == $mainpageCounter) ? $mainpage[$mainpageCounter]["title"] : "")) .
            "</div>n";
        $widthmodifier += $tabwidth;
    }