Stylování-pozicování seznamu (rozdíly prohlížečů)*

Jcas:

Nakopávat vlákno zbytečnými příspěvky v hodinovém taktu tady není dvakrát v oblibě. Navíc se vyřadíš z rubriky Témata bez reakcí, jakož vůbec klesá šance, že to někdo bude číst, když je v přehledu vláken vidět, že už jsi "dostal" dvě odpovědi.

–

Ten nápad s dvířky od kotců je bezva, ale obávám se, že nakódovat něco takového nepatří k základním cvičením. Zkus se když tak podívat do klávesové mapy na odkazy pod heslem ladění CSS.

Pokud se chceš inspirovat, jak se dá nařezat a následně nakódovat layout, můžeš zkusit tento postup:

1. vymazat všechno z keše prohlížeče
2. navštívit jen jednu dobře udělanou stránku, např. salon-biolage.cz
3. podívat se, jaké teď máš v keši obrázky a porovnávat je s layoutem navštívené stránky. Uvidíš, kde se jaký obrázek opakuje, případně jak je pozicovaný, z kolika a jakých obrázků je poskládané něco, co vypadá jako obrázek jediný, jak úzký může být proužek, který stačí zvětšit až v kódu atd.

Vyprázdnit předtím keš a navštívit poté jen jednu stránku slouží přehlednosti. Pokud jsi navštívil více stránek, měl bys tam toho tolik, že se v tom nezorientuješ. Máš-li strach, abys nevymazal něco důležitého, můžeš místo mazání upravit pořadí souborů v keši podle internetových adres a poté si zkopírovat obrázky jen z té jedné adresy do nějaké jiné, dosud prázdné složky. Pak je máš pohromadě a můžeš studovat.

Jcas:
„Už jsem dostal radu, pozadí rozřezat, ale to mi připadá mnohem těžší (zkoušel jsem), aby to pozadí bylo opravdu hezké.“
dostal jsi radu a byla dobrá. Byla, tuším, ode mě :-)

„Co z toho, že např použiju "_padding......", když už máme IE7 a za chvílu bude IE8“
máme IE6-IE8 a za chvíli bude IE9.

„prosím, jak napozicovat seznam tak, aby vypadal všude stejně“
nepozicovat a řídit se dle toho, co jsem napsal už jednou. Aby to bylo srozumitelnější, psal jsem tam i kousek inkriminovaného kódu. Proč se mu bráníš?

„Můžete doporučit nějaký článek, který se opravdu dobře věnuje tomu, jak pozicovat neutrálně?“
co to znamená „neutrálně“? Ono pozicování je mocná zbraň, ale ne na stavbu layoutu a už vůbec ne stavbu layoutu začátečníkem. Je to jen zařitý omyl, že je to jednodušší (pro jeden konkrétní prohlížeč a monitor možná ano, obecně to ale neplatí).

Mám dobrou náladu, udělal jsem ti tedy krátkou ukázku, jak by to zhruba mohlo vypadat s rozřezanými obrázky (nařež si to sám a pořádně, je to jen od oka). Je tam udělaný hover stejný jako aktivní položka (tak jsem to pochopil aspoň z náčrtu), poslední položka má akorát třídu "last", může jich tedy být různě (není to fixované na pevný počet, jak jsi to měl ty). Je tam použita vlastnost display: table-cell, která není podporována IE <= 7, proto to doháním tím hackem. Teoreticky by tam tato vlastnost být nemusela a mohl být padding pro všechny prohlížeče, naznačil jsem ti další možné varianty.

První a druhou položku budeš muset ještě odlišit a dát tam na pozadí jiný kotec (u prvního je noha slepice, u obou potom jiné pozadí vlevo), to už zvládneš.

Petr ZZZ:
„Ten nápad s dvířky od kotců je bezva, ale obávám se, že nakódovat něco takového nepatří k základním cvičením.“
jsou horší věci, se kterými se musí kodér potýkat, chce to nápad. Už jsem ho jednou naznačoval, evidentně bez úspěchu :-)

Velda:

Předpokládám, že máš na mysli diskusi Video v pozadí stránky. Netvrdím, že panther nemohl formulovat jednoznačněji, ale o IE9 se nezmiňoval. Myslím, že by ti o něco zdrženlivější vystupování mohlo slušet.

Jcas:
„Ovšem nevyřeším si dvířka (leda javascript měnit obr. u dalšího <li>“
kde máš na obrázku otevřená dvířka? Jestli u první položky v levém sloupci, tak to jsem ti tam ukázal taky. Nebo máš dvířka někde schovaná?

„co z toho, že mám v hlavě krásný (skoro originál) vzhled, když to nedokážu aplikovat.“
Pokud ti nestačí náznak, který jsem ti udělal, tak si třeba zaplatit kodéra, který web nakóduje pořádně :-)

Jcas:
„Na tvé ukázce se neotevřou, ale zmizí“
tak znovu. Kde jsou otevřené? Nikde jsem je nenašel, nevím, jak mají vypadat. Vycházel jsem z obrázků, které jsem měl k dispozici, které jsi nám ukázal.

Nicméně, princip je stejný, změní se obrázek u ul#left li a:hover.

Jcas:
„Já nechápu, jakto že je nevidíš.“
já myslel, že máš nahoře na kotci nějaký vzor :-). A ejhle, to jsou dvířka. Moc reálně nevypadají, IMHO jsi zvolil špatný úhel.

Jcas:
Když si dvířka namaluješ trošku jinak a otevřená nebudou zasahovat do sousedních kotců, bude ti na všechny kotce stačit jediný malinký obrázek jednoho kotce, kdy levá polovina obrázku bude kotec otevřený a pravá polovina obrázku bude kotec zavřený. Vidět bude vždy jen jedna polovina obrázku. Ten dáš na pozadí menu a pomocí CSS jím pak už jen posouváš. Pro pochopení principu se podívej na bubákův příklad.

Dodatek 1: Budeš potřebovat obrázky dva, jeden na levý a druhý na pravý sloupec menu.

Dodatek 2: Momentální rozmístění kotců popírá zákony perspektivy. Měl bys oba sloupce přehodit (levý sloupec králíkáren doprava a vice versa).

Jcas:
„ale proč mi pořád doporučujete ten obrázek rozřezat.“
protože se to tak normálně dělá :-) To, že se tím řídit nechceš, je věc druhá. Je to přeci jen tvůj web.

„Když se podíváš na ten poslední odkaz v mozile, tak je to přesně dle mých představ“
podle mě je stejný jako předtím. Změnilo se něco, co nevidím?

Jcas:
„Řekněte mi prosím, proč se to tak dělá.“
když budeš do budoucna chtít přidat/odebrat položku, budeš překreslovat všechny obrázky? Jednodušší je přidat jen <li> do HTML.
Další věc je datová velikost obrázku. Velký obrázek (se 4 kotci) je mnohem větší než malý obrázek (s jedním kotcem).

„Metodě s nařezaným obrázkem jsem věnoval už asi 40 hod a nedostal jsem se ani do poloviny.“
nj, začátky jsou kruté. To platí u všeho, u kódování též :-)

Jcas:
„proč mi pořád doporučujete ten obrázek rozřezat“

Tvůj obrázek má 105 kB a pokud tě chápu správně, tak chceš na každou položku menu zhotovit vlastní obrázek. Momentálně má menu 10 položek, to by bylo 10 obrázků krát 105, to už máme 1,05 MB a to je prostě neúnosně mnoho, protože při každém kliknutí na položku v menu by se načítal stokilový obrázek. Když uděláš obrázek a kód podle odkázaného bubákova příkladu, ušetříš na obrázku víc než 1 MB, protože ti na to budou stačit dva obrázky, jejichž velikost si troufnu odhadnout na nějakých směšných 10 až 20 kB (možná i pod 10 kB).

Jcas:
„Proč IE registruje hover pouze na textu a ne na celým prvku?“
protože není odkaz blokový.

„Jak zajistit, aby bylo podmenu !! u všech prohl. !!! přesně vedle obr.?“
nač tučný text a tolik otazníků? Submenu se dá ukočírovat marginem, paddingem. Nevím, kde přesně si jej představuješ, těžko radit. Máme pořád odkaz na ukázku (ten je správně), ale jen ty víš, jak to má ve finále vypadat.

Jcas:
„Metodě s nařezaným obrázkem jsem věnoval už asi 40 hod“

Ulož si Bubákův kód jako stránku html a experimentuj s tímto souborem. Vyměň Bubákův obrázek za vlastní, podívej se na výšky (height) a šířky (width) prvků definovaných v CSS atd. Čti si jeho kód a jakmile narazíš na výraz, který ti nic neříká, vyhledej si ten výraz na JPW a čti. A připrav se na to, že jestli se pokoušíš kódovat týden, tak ještě pár týdnů budeš potřebovat, než do problematiky alespoň trochu pronikneš. Je možné, že profík by byl schopen tvůj design nakódovat do hodiny nebo za pár hodin (nepočítám výrobu obrázku). Ale musíš si uvědomit, že ten profík má za sebou dlouholeté studium a zkušenosti. A především používá jiné postupy, takže není schopen tvůj kód "mírně upravit" a bude to šlapat. Profík to nakóduje zgruntu jinak, ale to už je do sekce Práce a zakázky. Alternativa je zamyslet se nad radami, které zde dostaneš, a naučit se to. Na ty dva, vlastně tři sloupce (dva na dvě menu a jeden prostřední na vlastní obsah) doporučuji nastudovat obtékání.

Jcas:
Protože co chvíli měníš CSS a možná i HTML, což pozám jen podle toho, že stránka je co chvíli jinak rozpadlá, tak budu jen hádat.

„Proč IE registruje hover pouze na textu a ne na celým prvku?“
Tipnul bych si, že jsu odkaz deklaroval jako table-cell, což umí až IE8.

Petr ZZZ:
Moje příklady jsou jen pro jednořádkové položky menu. Bude nutné najít řešení, jak vycentrovat text vertikálne (snadné) a horizontálně (to je ten zakopaný pes), které bude funkční napříč prohlížeči. Co jsem četl, jeden pokus už tu byl, nevím, proč se nedotáhnul do konce, nechce se mi číst celé vlákno.

Bubák:
„Bude nutné najít řešení, jak vycentrovat text vertikálně (snadné) a horizontálně (to je ten zakopaný pes), které bude funkční napříč prohlížeči.“

Pokusil jsem se Tvůj příklad upravit (nelekni se, je to německy a mimo jiných úprav jsem přidal <border> a v horním příkladu <br>). Jakés takés řešení vertikálního "vycentrování" (nebo spíše obejití problému) bych viděl v tom, že prostě řeknu, že pokud je položka menu krátké slovo, bude v horní části kastlíku a pokud je to delší výraz, bude uprostřed. Přijatelného vzhledu (tj. aby to nebylo úplně nalepené nahoře) lze potom dosáhnout dostatečnou výškou kastlíku a připsáním <br> před položku menu. Dobře je to vidět v IE při střední velikosti písma. Zvětší-li se písmo v IE, je víceřádkový text přilepený na spodním okraji, takže by bylo potřeba udělat tu výšku (v příkladu 170px) ještě o trochu větší (a taky obrázek asi bude nutno mít vyšší). Nebudou-li se položky menu v délce textu příliš lišit, tento problém více méně odpadá. Pro ilustraci jsem přidal ještě jeden příklad, ve kterém je výška položek menu jen 50 místo 170 pixelů.

Jcas:
Řekl bych, že z mé úpravy bys měl být schopen vykutat to, co potřebuješ. V podstatě potřebuješ jen jiný obrázek a pohrát si trochu s výškou, která je v horním příkladu zadaná jako 170 px. Na tvůj účel musí být výška obrázku přesně shodná s výškou položek (v mém příkladu těch 170px), což v mé ukázce není nutné, protože nevadí, když se zde obrázek nahoře a dole uřízne; viz spodní příklad, pro který je použit totožný obrázek jako pro horní příklad. Asi budeš – kvůli místu na otvírání dvířek do stran – potřebovat obrázek i širší, což musíš pochopitelně zohlednit i v kódu v šířce menu; obrázek musí být samozřejmě přesně dvakrát tak široký jako menu a poloviny obrázku musí být na pixel přesně opravdové poloviny.

Abych mohl napsat oba příklady do jednoho CSS, je na horní menu použit element <menu>, na spodní element <ul>; na funkčnost celé konstrukce by to snad nemělo mít vliv, ale díval jsem se na to jen v IE6 a v FF. Budu rád, když se na to někdo mrkne i v jiných prohlížečích.

(Bubák: Odkázal jsem na Tvůj web; dej mi prosím vědět (můžeš i e-mailem), kdybys ten odkaz nechtěl nebo kdybys chtěl jiný text; budeš-li chtít, můžu k odkazu přidat nofollow. :-)
(To samozřejmě platí i pro ostatní odkazy, kdyby to tu četl Yuhů nebo Pixy.)

Jcas:
„Obrázky mám nařezané a naskládané na sobě. Pro prohlíže podporující display: table i bezva vycentrovaný text.“
Kde?

„Každá položka <a> podmenu je na úrovni dalšího kotce. Co za to může?“
To netuším, ale pokud je to napříč prohlížeči stejně, tak o noc nejde a pomůže záporný horní margin. Ale raději bych napřed viděl ukázku.

Jcas:
„hover se ztratí okamžitě při opuštení obr.“
To je podstatou hoveru. Mění se, jen když je na něm myš.

<OT>
Bubák:
„Jsem teď v Jabber místnost diskuze“
Nějak se mi tam nedaří dostat (přiznám se ale, že jsem to příliš zavile zas nezkoušel).
</OT>