Autor Zpráva
Ecrazit
Profil *
Zdravím, už několikrát jsem se s tímhle problémem setkal, ale nikdy jsem ho nevyřešil. Mám na webu nějaké menu, které je tvořeno v tomto stylu

Prostě klasické buttony v určitém divu tvořené pomocí linků v odrážkách. Když ale takto vytvořím menu, nevím jak dosáhnout toho, aby tlačítka vždy vyplnili celý div a vpravo nevznikal prázdný prostor. Samozřejmě automaticky, respektive když se zkrátí text v jednom buttonu, tak se všechny buttonu natáhnou. Jakou metodou se řeší takovýhle typ menu?
juriad
Profil
můžeš použít tabulku, sama se stará o velikost buněk; pokud tabulku roztáhneš na celou šířku, tak prázdný prostor přidělí jednotlivým buňkám
petkahuryska
Profil *
Já použila letter-spacing a text-align: center.
margin
Profil *
petkahuryska:
Já použila letter-spacing a text-align: center.
Ale na tom není nic automatického, naopak stačí změna textu odkazu nebo fontu a buď se ti to rozpadne nebo vznikne prázdný prostor.
Someone
Profil
Znáš-li počet položek menu tak to bude 100/počet_položek %
Ecrazit
Profil *
Bohužel ani jedna rada nepomohla. Je potřeba aby se to přizpůsobilo, ikdyž někdo změní text v buttono nebo jeden odebere/přidá.
juriad
Profil
Ecrazit:
Proč ti nefunguje, nevyhovuje tabulka?
<style>
#menu {
  width: 100%;
}
#menu table {
  width: 100%;
}
#menu td {
  padding: 0px;
}
#menu a {
  display: block;
}
</style>

<div id="menu">
<table><tr>
<td><a href="prvni.html">Prvni</a></td>
<td><a href="druhy.html">Druhy</a></td>
<td><a href="treti.html">Treti</a></td>
</tr></table>
</div>
Ecrazit
Profil *
Tabulka by samozřejmě fungovala... jenže záměrem je, aby to menu bylo v CSS, bez použití tabulek
margin
Profil *
Tabulky a CSS se nevylučují.
Ecrazit
Profil *
řeknu to jinak, je to zakázka s požadavkem, že v kódu nesmí být žádná tabulka :)


Trošku tady nastíním aktuální situaci

<DIV s pevnou šířkou 800px>
<DIV s šířkou 100%>
<UL>
<LI><ODKAZ>Různě dlouhý text</ODKAZ></LI>
<LI><ODKAZ>Různě dlouhý text</ODKAZ></LI>
<LI><ODKAZ>Různě dlouhý text</ODKAZ></LI>
</UL>
</DIV>
</DIV>

Existuje tedy nějaký způsob, jak ty odkazy přimět, aby přesně vyplnili celé pole? Bez použítí tabulek?


odrážky jsou samozřejmě nastavené jako Inline a mají nastylovaný vzhled buttonů...
Someone
Profil
Ecrazit:
Takže počet položek není pevně daný?
Ecrazit
Profil *
Počet položek ani jejich šířka není pevně daná.
Someone
Profil
Předpokládám, že se položky menu vypisují z nějaké Databáze, takže tam zasahuje i PHP... Možná neelegantní způsob, ale já bych to vyřešil nějak takto.
mimochodec
Profil
Someone:
<li style="width: 16.666666666667%;">Úvod</li> nebo <li style="width: 14.285714285714%;">Úvod</li> .. nic pěknýho.
Ecrazit
Profil *
Tenhle způsob mě samozřejmě napad, ale má to bohužel zase svý mouchy... když je některý z textů v menu dlouhý, neudělá to u něj okraje a text je napraný v buttonu bez postranních mezer a padding nelze nastavit, protože to rozhodí ty procentuelní šířky. Druhý problém je, že to nepočítá s border-right:1px solid ...; Naskáčou tam pak pixely navíc a jedne button skočí na druhý řádek,
Someone
Profil
mimochodec:
Jak jsem psal... není to nejšťastnější řešení.
Str4wberry
Profil
Od osmičkového Exploreru to lze řešit pomocí display a table a table-cell. Ve starších asi jedině tabulkou, protože to dopočítávání dle počtu položek je hezké jenom do doby, kdy je to ukázkový příklad a všechny texty jsou stejně dlouhé.

Případně lze použít Centrování menu s neznámou šířkou, ale nevyužije to úplně ideálně prostor jako ta tabulka.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: