Víceřádkové vodorovné menu čistě pomocí CSS

_Martin_

Ahoj, marně se snažím vytvořit vodorovné CSS menu, kde by všechny položky měly stejnou výšku dle té nejvyšší.

Příklad:

<ul>
	<li><strong>Aktuální položka</strong></li>
	<li><a href="#">Jiná položka</a></li>
	<li><a href="#">Speciální položka<br><small>použijte jen na vlastní nebezpečí</small></a></li>
</ul>

Původně použité řešení si s tím bohužel neporadí. Asi by se dal použít nějaký JS kód, ale pokud by to šlo, dal bych radši přednost CSS řešení.

Nějaké nápady, prosím?

studna

Brrrrr, to je ošklivé BR! Buď nastyluj small a výška by měla být stejná a nebo se zeptej na d.jpw.cz :-)

Petr Mašát

Mno chování jenž chceš umí v CSS jen jediný typ diplay a to table-cell. Jen to není moc zaručené chování pro starší prohlížeže.

Příklad:

<ul id="nav">
	<li><strong>Aktuální položka</strong></li>
	<li><a href="#">Jiná položka</a></li>
	<li><a href="#">Speciální položka <small>použijte jen na vlastní nebezpečí</small></a></li>
</ul>

ul#nav {
	display: table-row;
}
ul#nav li {
	display: table-cell;
}
ul#nav li small {
	display: block;
}

Snad jsem pomohl : )

_Martin_

Díky za odpovědi, vezmu to postupně:

@studna: br vem čert, dal jsem to do příkladu, abych neodváděl pozornost jinam (je jedno, zda tam je br, zda má small typ zobrazení block nebo zda je položka v tom meníčku tak dlouhá, že překročí určitou maximální šířku a zalomí se přirozeně sama).

Odkazované fórum můžu taky vyzkoušet, nicméně se trochu bojím úrovně tamních znalostí. Tento problém jsem zkoušel hledat na českém i zahraničním internetu, prolezl jsem přes třicítku příkladů na meníčko a neuměl to žádný z nich. A přeci jen na zdejším fóru bývá i spousta lidí na velmi vysoké úrovni, tak jsem radši začal zde. Ale je pravda, že kodérů tu asi tolik nebude.

@tachyon: Jo, to jsme se dobrali stejného řešení, tak je to v tom mnou odkazovaném příkladu. Ten sice natáhne výšku li, ale jednotlivé odkazy a mají každý svou výšku – a to je ten problém =(

Petr Mašát

Hm, jestliže chceš mít stejně veliké i vnitřní tagy <a> tak na to už jsou CSSka krátká. Ale popravdě v reálné kodeřině jsem nepotkal situaci kdy by bylo fakt nutné tohle nastavit. Je Někde vidět stránka na které toto chceš udělat aby bylo zřejmé proč toho chceš docílit?

voda

Tagy <a> můžeš roztáhnout na celou velikost <li> pomocí:

li {
    overflow: hidden;
}
a {
    display: block;
    margin: -2000px;
    padding: 2000px;
}

a zdroj: https://twitter.com/#…

_Martin_

@tachyon: Jde o to, že některé položky mají pod sebou upřesňující nápovědu. Ale dobrý, neboť:

@voda: Super, to je přesně ono, díky moc =)

ic

Pokud jde o upřesňující nápovědu není lepší dát text do title a použít nějaké z mnoha javascriptových řešení, které takovou bublinu pěkně graficky zobrazí okamžitě po najetí myši?

_Martin_

@ic: Oceňuji dobrý úmysl snažit se vyřešit i podstatu věci a nastíněnému problému se tak třeba vyhnout lepším způsobem realizace. V tomto případě je ale můj požadavek oprávněný.

Nechci tu rozjíždět hádku nad tím, čí grafické provedení je lepší. Taková hádka by nedávala smysl. Jde o specifický případ použití, vytvoření panelu tlačítek v intranetové aplikaci. U některých je třeba pod hlavním textem zobrazit drobným písmem upřesňující text/nápovědu, která ovšem do tlačítka patří a u které je třeba, aby byla vidět hned na první pohled. Vychází to z požadavků skutečných uživatelů, kteří nejsou počítačově zcela zběhlí a kteří potřebují, aby pro ně aplikace byla srozumitelná a práce s ní jim život usnadňovala.

Ještě jednou děkuji všem, kteří mi s řešením pomohli, a zároveň všechny prosím, aby toto téma považovali za uzavřené.