Autor Zpráva
Amunak
Profil
Problém, který se tu už několikrát řešil.
      <div id="menu">
        <ul id="menu_container">
          <li><a href="?stranka=a">A</a></li>
          <li><a href="?stranka=b">B</a></li>
          <li><a href="?stranka=c">C</a></li>
        </ul>
      </div>


Otázka je, jak ten seznam (menu) vycentrovat v jeho DIVu. Vím, že to jdepřes CSS, ale udělal jsem to přes JS. Myslíte, že je to lepší? Funguje v IE8, FF, Opeře, Chrome (nic jiného jsem netestoval). Vzhledem k tomu, že pro mě to centrování není životně důležité, jsem s tím spokojen. A nemusím dělat žádné krkolomnosti v CSS. Jediná nevýhoda je, že se to správně srovná až po načtení stránky (a může to pak 'skočit').

function correctPositionOfMenu(){
  var menuContainer = document.getElementById('menu_container');
  var menuContainerH = menuContainer.clientHeight;
  var menuH =document.getElementById('menu').clientHeight;
  var correctTo = (menuH-menuContainerH)/2;
  menuContainer.style.marginTop = correctTo+'px';
};
Chamurappi
Profil
Reaguji na Amunaka:
Vím, že to jde přes CSS, ale udělal jsem to přes JS. Myslíte, že je to lepší?
Ani ne. Kdybych nechtěl použít CSS, použiju raději tabulku v HTML než JavaScript.

Jediná nevýhoda je, že se to správně srovná až po načtení stránky
To je ošklivá nevýhoda.

nemusím dělat žádné krkolomnosti v CSS
Pokud znáš výšku <div>u, nebo výšku <ul>u, není to nijak zvlášť krkolomné.
Amunak
Profil
Chamurappi:
Pokud znáš výšku <div>u, nebo výšku <ul>u, není to nijak zvlášť krkolomné.
A když jí neznám, existje jednoduché řešení?
Počet položek <ul> se mění a <div>u se mění velikost podle <div>u s obsahem (je to vlastně sloupec menu a sloupec s obsahem).

Ani ne. Kdybych nechtěl použít CSS, použiju raději tabulku v HTML než JavaScript.
Radši než tabulku? Vždyť to není zas tak hrozné (obzvlášť když má stránka pár kB a načítá se rychle)


Mimochodem, jak děláš to inline <code> formátování tady na diskuzi?
Miloš
Profil
Amunak:
inline <code> formátování tady na diskuzi“ není <code>, nýbrž <EDIT>.
Seznam dalších kódů najdeš, když v textovém poli zmáčkneš Ctrl+J, obdobně klávesovou mapu na Ctrl+↓
Více najdeš v nápovědě a nápovědě ke klávesové mapě.
Amunak
Profil
Miloš:
To vím, ale kterej je ten inline :-D
Miloš
Profil
Vždyť jsem to psal: [edit]tohle bude zelené[/edit]
Amunak
Profil
Miloš:
Vždyť jsem to psal: [edit]tohle bude zelené[/edit]
zdroj:
Vždyť jsem to psal: <b>[edit]</b><ins>tohle bude zelené</ins><b>[/edit]</b>


Chamurappi napsal:
Pokud znáš výšku <div>u, nebo výšku <ul>u, není to nijak zvlášť krkolomné.
zdroj:
<br>Pokud znáš výšku <code>&lt;div&gt;</code>u, nebo výšku <code>&lt;ul&gt;</code>u, není to nijak zvlášť krkolomné.


Ty tam máš <ins>, Chamurappi tam má <code> :)
Miloš
Profil
Amunak:
Aha. Tak to budeme muset počkat, až se tu Chamurappi objeví a vysvětlí. Já víc nevím.
Chamurappi
Profil
Reaguji na Amunaka:
když jí neznám, existje jednoduché řešení?
Viz Vertikální centrování v IE 7. Jednoduché to zrovna moc není.

Počet položek <ul> se mění a <div>u se mění velikost podle <div>u s obsahem
To máš udělané jak? Odmítáš-li krkolomná řešení, předpokládal bych, že stejnou výšku sloupců nasimuluješ pozadím na společném rodiči, ale to by ti nešlo centrovat uvedeným skriptem (protože výška <div id="menu"> by byla smrsknutá).

Jestli znáš počet položek, tak můžeš odhadnout jejich výšku v em jednotkách a pak seznam napozicovat na top: 50%; margin-top: -půlkaTéOdhadnutéVýšky;.

Vždyť to není zas tak hrozné
Tabulka také není tak hrozná. Sémanticky to trochu skřípe, ale to na rozdíl od použití JavaScriptu nemá žádný praktický dopad, takže mi to vychází jednoznačně lépe.

jak děláš to inline <code> formátování tady na diskuzi?
Já ho dělám pomocí chytřejšího [pre], ale v ostré verzi diskuse to zatím nejede.
Amunak
Profil
Chamurappi:
Trochu jsem se ztratil ve vlastním CSS. Nejhorší na tom je, že je ještě docela krátký.

Nakonec jsem to prostě vyřešil tak, že jsem #menu_container nastavil margin-top na 50%. Oproti tomu JS se to liší asi o 2px.

Takže se omlouvám za otravování a přeji příjemný večer.
Toto téma je uzamčeno. Odpověď nelze zaslat.