Zarovnání menu - CSS (a HTML)
Takže mám další problém s HTML a CSS, snad se v tom někdo vyzná lépe než já. Na stránce mám JavaScriptové menu, které obsahuje slider a nad ním jednoduché odkazy. Problém nastává, když chci tyto odkazy vycentrovat doprostřed stránky, jediné funkční řešení by bylo, kdybych měnil velikost pixel po pixelu, já chci aby menu zabíralo 50% šířky.
Ukázka: test.htm
Neměřil jsem to a ani jsem se nekoukal na zdroj, jelikož mi to přijde, že to 50 % je (Opera).
To, že je to 50% vím, taky jsem to tam sám nastavil, ale potřebuju odkazy vycentrovat na střed, pokud s nimi slider nepůjde tak i slider. Nevím jestli to nějak jde, ale teď jsem to zkoušel nastavit pixel perfect, a taky nic, nalevo je vždy více místa. Takže jak to vycentrovat doprostřed?
Nikdo nic? Chtěl bych to nějak vyřešit, pokud možno rychle
Já bych ty odkazy dal do samostatného <div> (třeba jsou - nekoukal jsem) a tomu nastavil text-align: center; margin: 0 auto.
Aha, díky, další věc, která by mě v životě nenapadla. Ještě že tak, už jsem začal psát článek na fórum jakpsatweb.cz
Jestli se to povede, napíšu odezvu ... Zatím moc děkuji!
Takže taky nic, nevím jestli jsem to udělal správně, ale divem jsem obalil jen <a> a potom jsem zkoušel i <li>. Beze změny, vždy to jenom celé menu rozhodí, jdu napsat na to fórum jakpsatweb.cz
Musis dat do divu všechny. Neco jako
<div class="na-stred">
<a href...
<a href...
<a href...
<a href...
</div>
Problém je, že je to <ul> který už v divu je, a když tomu divu nastavím tyto parametry, tak se nic nestane.
Dej ul margin 0 auto
Zkusím, taky jsem teď na mobilu, kdyžtak si ty styly napíšu znova, ale štve mě, že pro ul žádné zarovnání přímo není.
<ul> neni odstavec, nema zadne zarovnani.
Bude to neco jako
<div style="width: 50%; margin: 4px auto; text-align: center">
<ul style="display: inline; margin: 0 auto">
<li><a href....</a></li>
<li><a href....</a></li>
<li><a href....</a></li>
</ul>
</div>
Pisu to z hlavy a smolim na mobilu - nehohu si to uverit.
Teď jsem se připojil a dostal jsem i odpověď na jakpsatweb.cz, uvidíme, už jsem z toho fakt zoufalý.
Takže nefunguje absolutně nic, pokud má někdo firefox, ve kterém se dobře ladí i CSS, ať to prosím zkusí, tohle je nad moje síly ...
V ul#menu vyhoď position: absolute a pridaj display: inline-block (prípadne si uprav aj tú bezrozmernú 9 v definícii paddingu). V div.menu pridaj text-align: center.
Proboha! Ono to fakt funguje!!!
Trávil jsem nad tím celý den já lamka. Už jsem si to chtěl rozdělit na 1/2 a dát right a left 50%.
DÍKY MOC! Myslel jsem že je to nemožné!
Kdybych mohl, koupil bych ti
Jo, a jako že jsem pořádná lama, nemůžeš se kouknout, proč footer zabírá víc než 100% displaye? dole je potom scrollbar a zarovnání je nepřesné.
Pretože máš na body margin: 8px, čo spolu so šírkou 100 % presahuje celkovú šírku.
Edit: Okrem odstránenia marginu na body to môžeš riešiť aj inak - záporným marginom na footer (margin: 0 -8px).
Aha, to jsem zkoušel, ale dopadlo to poněkud jinak, asi jsem to napsal špatně. Ten margin na body nikde nevidím, zkusím se podívat pořádně.
Aha, tých 8px je default v mojom prehliadači, t.j. keďže si nedefinoval žiaden margin, tak sa použil default a ten spolu so 100 % prekročil celkovú šírku stránky.
Už tam mám 0px, myslel jsem že to tam mám někde sám, protože to menu pořád ujíždí doprava. Jdu to nahrát na hosting, ať to můžete vidět.
V tom ul#menu nemáš definovaný padding, tak sa použije predvolený, viď obrázok (tá svetlozelená časť je padding):
Daj tam napr. padding: 0 a uvidíš.
Už je vše OK, vůbec jsem netušil že tam nějaký předvolený je, díky za trpělivost. CSS jsem v praxi nikdy nepoužíval, proto tolik zmatku, zkusím se trochu přiučit.
position: absolute a chce to mit jinde