| Autor | Zpráva | ||
|---|---|---|---|
| Amunak Profil |
#1 · Zasláno: 9. 4. 2010, 17:45:38 · Upravil/a: Amunak
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 |
#2 · Zasláno: 9. 4. 2010, 20:04:01
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 |
#3 · Zasláno: 9. 4. 2010, 20:37:39 · Upravil/a: Amunak
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 |
#4 · Zasláno: 9. 4. 2010, 21:53:38
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 |
#5 · Zasláno: 9. 4. 2010, 22:10:33
Miloš:
To vím, ale kterej je ten inline :-D |
||
| Miloš Profil |
#6 · Zasláno: 9. 4. 2010, 22:15:01
Vždyť jsem to psal: [edit]tohle bude zelené[/edit]
|
||
| Amunak Profil |
#7 · Zasláno: 9. 4. 2010, 22:19:16
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><div></code>u, nebo výšku <code><ul></code>u, není to nijak zvlášť krkolomné. Ty tam máš <ins>, Chamurappi tam má <code> :) |
||
| Miloš Profil |
#8 · Zasláno: 9. 4. 2010, 22:30:07
Amunak:
Aha. Tak to budeme muset počkat, až se tu Chamurappi objeví a vysvětlí. Já víc nevím. |
||
| Chamurappi Profil |
#9 · Zasláno: 9. 4. 2010, 23:31:36
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 |
#10 · Zasláno: 11. 4. 2010, 21:49:59
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. |
||
|
Časová prodleva: 14 let
|
|||
Toto téma je uzamčeno. Odpověď nelze zaslat.
0