Autor Zpráva
WanTo
Profil
Mám závažný problém při převodu grafického návrhu do CSS a HTML. Nejdřív ukážu kousek grafického návrhu a pak popíšu, s čím si nevím rady.



Ten výřez ukazuje logo a prostor, kde bude menu, což je ta svislá a zašpičatělá část "odznaku". Menu nebude mít předem určenou výšku - bude se automaticky natahovat tak, aby se tam vešly veškeré odkazy a všechno, co tam patří. A tady nastává problém. Zobrazení stínu dolní (zašpičatělé) části menu nad proužkovaným pozadím. Jak ho vyřešit?

Můžu použít PNG s alfa složkou. Stínu nastavím patřičně průsvitné pixely a on krásně překryje proužkované pozadí. Jednoduché a bude fungovat skoro všude. Bohužel všude kromě IE 6 a nižší (a nějakých zanedbatelně používaných prohlížečů), takže si tenhle postup nemůžu dovolit.

Nebo můžu vzít tenhle grafický návrh a vyřezat z něj určitě prvky přesně tak, jak jsou na návrhu zobrazeny. Pak je nastavím jako pozadí různým divům a nechám prohlížeč, ať si to všechno poskládá dohromady. Jenže tady nastává problém s menu. Říkal jsem, že nebude mít předem danou výšku a automaticky se natáhne podle svého obsahu. Většinou se ale natáhne tak nešikovně, že proužkované pozadí u dolní, zašipčatělé, části bude "přerušeno", bude nesouvislé a ošklivé.



Ehm, jak tohle vyřešit?

Napadlo mě nějak zajistit, aby byla výška divu s menu vždycky násobkem nějakého čísla - v tomto případě násobkem výšky "dlaždice" proužkování. Menu by se pak natahovalo podle jakési pomyslné mřížky a vždycky by se zarovnalo tak, aby proužkování v dolní části u stínu korespondovalo s proužkováním pozadí.

Jak na to? Já se bohužel obávám, že to nejde :( Na druhou stranu, z dob, kdy jsem na tuto diskuzi často chodil, vím, že tu je pár opravdu zkušených lidí, kteří by možná mohli vědět co s tím.

Předem díky za všechny postřehy a rady. Já už jsem opravdu na hranici svých znalostí.
Dero
Profil
http://www.howtocreate.co.uk/alpha.html
WanTo
Profil
Dero
Díky moc! Zkusím si s tím pohrát a doufám, že to bude opravdu fungovat.

Pokud jde o tu výšku, aby byla násobkem určitého čísla - nevíš, jak na to? Existuje nějaké řešení? Předpokládám, že s vyřešením alfa složky u PNG to snad nebudu potřebovat, ale stejně by mě zajímalo, jestli jde něco takového udělat :)
tiso
Profil
WanTo - teoreticky áno - nastavením height, line-height, marginu, borderu a paddingu všetkých prvkov v menu na násobok "dlaždice"...
WanTo
Profil
tiso
Nad tím jsem taky přemýšlel. Ale stačilo, aby si uživatel změnil velikost textu, nebo se někam vloudil nějaký zběsilý element s nespecifikovanými rozměry, a už by to bylo rozházené.

Zpátky k alfa průsvitnosti i v IE6:
Došlo mi, že mi je k ničemu. V tom návodu je popisovaná pro obrázky. Ne pro obrázky na pozadí prvků. Můžu zkusit, jestli to nebude fungovat i pro ně, ale popravdě řečeno o tom dosti pochybuji.

Nejspíš skončím u toho, že v zájmu správného zobrazení v IE 6 vyřadím proužkované pozadí a nechám tam jen tmavě šedivou jednolitou plochu.
ash721
Profil
Pokud jde o ty proužky a o to, aby seděly na sebe, pak by to jít mělo.
A sice přes pozicování backgroundu.

V té šipce bych nechal background i s proužky, a prostě zajistil, aby se zobrazil vždy např. pětset pixelů od horní hrany obrazovky. (Podle výšky tvých dlaždic) Tím zajístíš zarovnání odshora.

Teď ještě to zarovnání ze stran. K tomu je potřeba, aby body mělo backround pozicovaný od středu do stran (50% 0%), a ne top left. Tím se zajistí, že bude mít konstantní pozici, ať bude okno jakkoli velké.

Pak už to menu můžeš jen decentně relativně posunout, aby to sedlo na sebe. (Respektive můžeš posunout přímo tu grafiku, aby to sedlo na sebe)

Je to srozumitelný?
ash721
Profil
Když to tak znova čtu, tak jsem tvou otázku asi poprvé dost přelít.
Předchozí řešení samozřejmě taky nezajistí odolnost proti zvětšení textu (natažení šipky dolů)..

A to natahování divu po nějakých definovaných stupních přes css nelze.. Pardon..
WanTo
Profil
Je to srozumitelný?
Ehm, není.
Toto téma je uzamčeno. Odpověď nelze zaslat.