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:
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;
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?
