Menu pionowe a w nim nagłówki pozornie wyśrodkowane. Opcje

[Asmox]

Witam,
na wstępie od razu tłumaczę o co mi chodzi, gdyż temat zapewne jest nie do końca jasny. Myślę, że najlepiej wszystko wyjaśni załączony obrazek:
http://imageshack.us/photo/my-images/17/rpanel.png/ (Edytor nie chciał mi wstawić png)
Jak widzicie, chciałem zrobić efekt tekstu, który wyjeżdża z prawej strony i ustawia się tak, aby być wyśrodkowanym względem całego boxa.
Budowa nagłówków:

[HTML] pobierz, plaintext 
<div id=\"rpanel\">
   <div class=\"header\"><span>Menu</span></div>
   <div class=\"header\"><span>Tagi</span></div>
   <div class=\"header\"><span>Szukaj</span></div>
   <div class=\"header\"><span>Szukaj</span></div>
</div>
[HTML] pobierz, plaintext 

Każdy nagłówek znajduje się w <span>, a ten w <div>. Dzięki temu pierwszemu mogę ustalić faktyczną szerokość tekstu, a drugi pozwala na zrobienie fajnej ramki. Aby wszystko działało jak należy, napisałem funkcję javascript, która uruchamia się od razu po wczytaniu strony:

Kod

function go() {
    var divHeaders = document.getElementsByClassName(\'header\');
    for (i=0; i<divHeaders.length; i++) {
        if (i==3) continue; // To jest dla porównania z pozostałymi elementami, aby zobaczyć, czy faktycznie tekst jest na środku.
        thisHeader = divHeaders[i];
        thisHeader.style.marginLeft = (200-(100+0.5*(thisHeader.firstChild.offsetWidth))+4-3)+\"px\"; // Te obliczenia wyjaśniam poniżej
        thisHeader.style.textAlign = \"left\"; // Ustawienie elementu do lewej, gdyż po powyższej linijce div się skróci.
    }
}
window.onload = go;

A teraz o co chodzi z obliczeniami:

• Cały panel (div#rpanel) ma szerokość 200, więc 100 to połowa jego szerokości
• thisHeader.firstChild.offsetWidth odnosi się do szerokości samego tekstu
• 4 tu chodziło mi o padding-left
• no i 3 na końcu to przesunięcie w lewo, odejmuję je od nowego marginesu

No i niestety są rozbieżności, może niezbyt duże, ale jednak są i nie mogę się doszukać błędu, który gdzieś przeoczyłem. Czy mógłbym prosić o pomoc?

Ten post edytował Asmox 16.08.2011, 15:21:16