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

[CuteOne]

nieźle przekombinowałeś

[HTML] pobierz, plaintext 
<style>
.header-left {
 width: 50%;
 float:left;
}
.header {
 width:50%;
 float:left;
 text-align: left; // tak na wszelki wypadek ;)
}
.clear {
 clear:both;
}
</style>
<div id=\"rpanel\">
   <div class="header-left"></div><div class=\"header\"><span>Menu</span></div>
   <div class="clear"></div>//w razie gdyby divi chciały do siebie przylgnąć ;)
   <div class="header-left"></div><div class=\"header\"><span>Menu</span></div>
   <div class="clear"></div>
   <div class="header-left"></div><div class=\"header\"><span>Menu</span></div>
   <div class="clear"></div>
   <div class="header-left"></div><div class=\"header\"><span>Menu</span></div>
   <div class="clear"></div>
</div>
[HTML] pobierz, plaintext 

[Asmox]

Niestety, nie bardzo rozumiem Twoje rozwiązanie... W dodatku nie działa u mnie
Chciałem, aby tekst był wyśrodkowany względem całego menu, a dookoła niego była ramka łącząca tekst z prawym brzegiem. Stosując Twoje rozwiązanie wyszło mi tak, jakbym nic nowego nie robił. Wszystko jest ściągnięte do lewej i nic z tego nie wyszło :/ Mógłbyś mi wytłumaczyć, co zamierzyłeś?