| Autor | Zpráva | ||
|---|---|---|---|
| Tomasds Profil |
#1 · Zasláno: 18. 3. 2009, 16:19:04
Mám tabulku, v ní sloupec čísel. Chtěl bych na pozadí buněk graficky znázornit hodnoty stylem položeného sloupcového grafu.
V podstatě chci každou buňku vyplnit dvěma obdélníky ve vypočteném poměru šířek tak, aby obdélníky v součtu zabraly 100% šířky a 100% výšky buňky a přes ně byl samozřejmě text. Lze to nějak? Jedno řešení bych měl - pomocí css background, ale tam je problém, že tomu obrázku nejde zadat velikost, to znamená, že bych musel pro každou buňku phpkem vyrobit a namalovat extra obrázek, což mi připadá poněkud nefajn. |
||
| Cargas Profil |
#2 · Zasláno: 18. 3. 2009, 16:41:07
udelat pomoci CSS obal ... potom vlozit dalsi do obalu s pozadim obrazku ... obalu dat pevnou sirku a druhemu zadat sirku v procentech
|
||
| Trejpa Profil |
#3 · Zasláno: 18. 3. 2009, 19:13:12
Tomasds
Pokud to generuješ pomocí PHP a znáš přesnou velikost buňky, tak není problém každé buňce přigenerovat atribut style s požadovaným posunem obrázku na pozadí, který překrývá pozadí a v závislosti na background-position ho odkrývá. Takhle. Pro potřeby stylování obsahu ale budeš muset do buněk vložit další element (span), protože buňky potřebují mít vynulovaný padding. |
||
| Tomasds Profil |
#4 · Zasláno: 18. 3. 2009, 22:18:10
Trejpa
Princip fungování mně trochu uniká, ale dělá to přesně to co chci, díky moc. Teď to prostě použiju, až bude čas, pokusím se to pochopit :) |
||
| Trejpa Profil |
#5 · Zasláno: 18. 3. 2009, 23:14:24 · Upravil/a: Trejpa
Tomasds
„Princip fungování mně trochu uniká“ Tak to zkusím vysvětlit trochu blíže: Předpokladem pro toto zobrazení je pevně definovaná šířka elementu. Pro buňku tabulky je kromě nastavení její šířky třeba jí vynulovat padding a nastavit tabulce table-layout: fixed;, aby se šířka buněk nepřizpůsobovala vnitřnímu textu. Jelikož pracuješ s PHP, tak není problém vše nastavit do HTML kódu automaticky. V ukázce jsem předvedl nejjednodušší procenta, nicméně můžeš použít i jiné rozsahy než 100, ale potom to musíš přepočítávat. Myšlenka obecného postupu je taková: 1. Předpokládám, že máš nějaký seznam hodnot, které asi budeš měnit. 2. Určíš si velikost buňky, tedy konstantu (třeba v pixelech). 3. Určíš maximum, kterého budou hodnoty nabývat (100 %, nejvyšší z hodnot, nebo součet hodnot). To může být dynamické podle hodnot. 4. Převedeš hodnoty (v buňkách) na procenta - maximum z bodu 3 odpovídá 100 % (pokud se už tedy o procenta nejedná, že). 5. Tato jednotlivá procenta vynásobíš velikostí buňky (bod 2) a zaokrouhlíš. 6. Výsledky z bodu 6 vložíš do jednotlivých buněk jako v příkladu, tedy <td style="background-position: ##px top;"> Co se vlastně děje v CSS: Kromě již zmíněného zafixování a nastavení rozměrů a vynulování paddingů přichází na scénu pozadí. Na pozadí je použita barva i obrázek. Nejdříve nastavíme barvu pozadí, která odpovídá aktivní části sloupečku. Poté vložíme na pozadí obrázek (v příkladu je bílý, aby splynul s okolím), který nám tu aktivní barvu překryje. Aby ji nepřekrýval vždy, tak mu zakážeme opakování a posuneme ho podle potřeby zleva o požadovaný počet pixelů. A to už mají za úkol právě ty vygenerované styly u buněk. td {
background-color: lightGreen; /* barva aktivní oblasti grafu */
background-image: url(bila.gif); /* obrázek v barvě neaktivní oblasti grafu */
background-repeat: no-repeat; /* nutné, abychom vedle obrázku viděli barvu */
background-position: left top; /* výchozí nastavení zakrytí */
}No a to background-position: ##px top; ve style u jednotlivých buněk vlastně říká, o kolik se má obrázek odsunout z jednobarevného pozadí. Místo no-repeat lze u nízkých obrázků použít repeat-x. Obrázek ale vždy musí být široký aspoň jako buňka, jinak bude graf zprava vylézat. Problém nastane jen s formátováním, protože text buněk je kvůli nulovým paddingům přímo nalepen na její okraje, takže se špatně čte. Řešením je vložit do buněk nějaký element, kterému už odsazení můžeme nastavit: <td ...><div style=padding:0.3em>12 %</div> |
||
| Tomasds Profil |
#6 · Zasláno: 20. 3. 2009, 12:44:00
Trejpa
Vyčerpávající popis :) Díky moc. Mně jen na první pohled nedocvaklo, proč je tam position, když jsem tak nějak předpokládal width. Teď je to jasné. |
||
|
Časová prodleva: 15 let
|
|||
0