Starší komentáře ke článku: Práce s obrázky v éře CSS
Zpět na článek | Úvodní stránka Interval.cz
Datum vložení: 14.9.2001 8:27:50
Musim rict, ze tenhle ukazkovej priklad me fascinoval. Clanek jsem zacal cist s tim, ze "proc se morit s CSS, kdyz mam oddeleni designu a obsahu v podstate reseny PHPckem a to, jak to vypada v browseru, uz me nemusi prilis zajimat", ale skutecne me ta jednoduchost vyslednyho kodu uchvatila. Mel bych nicmene dva dotazy:
1) Proc mi v background-image nikdy nefungujou animovany obrazky? Mel jsem puvodne predstavu, ze by normalni background-color byl statickej a v hover se premenil na animovanej, ale nefunguje to v zadnym browseru, co jsem zkousel. Budiz, to muze bejt nejaky zaludny omezeni, i kdyz v popisu CSS jsem o tom nic nenasel. Ale animovany gify mi nefungujou ani v normalnim statickym background-image. Delam neco blbe, nebo to delaj blbe prohlizece?
2) Tabulka se zaoblenyma rohama je super. Jenze uvedenej priklad ma nevyhodu, ze ma pevnou sirku. Da se to nejak udelat tak, aby to fungovalo s procentuelni sirkou? V podstate nchci nahradit dve tabulky vedle sebe, jedna ma pevnou sirku, druha zabira celej zbytek obrazovky...
Datum vložení: 14.9.2001 21:33:33
Ad 1) Není důvod, proč by nemělo být možné použít animovaný GIF. S implementací to opět může být všelijaké. Zběžně jsem testoval - v MSIE 5 a Netscapu 6 (i k mému překvapení) funguje jak změna obrázku při A:Hover, tak i animovaný GIF, a to jak v základní poloze, tak i při "hover". V Opeře 5 nefunguje jedno ani druhé. (Vše Windows.)
Ad 2) Přiznám se, že jsem dosud nezkoušel udělat takový rámeček (je zajímavé, že stále máme tendenci říkat "tabulka", i když to vlastně žádná tabulka není :)) s graficky řešenými okraji, tak aby se mohl dynamicky horizontálně roztahovat. Těžko říct, zda bychom nenarazili na nějaký problém, protože to už spíše než s obrázky souvisí s problémem vícesloupcového layoutu a zde má CSS2 opravdu určité zásadní slabiny.
Datum vložení: 14.9.2001 23:05:11
Ad 1) A mohl bys mi sem nebo na e-mail hodit ukazku toho zdrojaku? Opravdu nemuzu vyloucit, ze jsem treba udelal nejakou pitomou botu, ale proste mi to v IE nefungovalo :-(
Ad 2) Jediny, co me napadlo, je udelat to zase jako tabulku, akorat nedavat IMG do ni klasicky, ale pres CSS, ale zase se mi to nezda jako prilisny zjednoduseni kodu :-(
Datum vložení: 18.9.2001 9:59:40
Rámček v CSS som už skúšal urobiť a narazil som na jeden zásadný problém - browsery nepodporujú nastavenie výšky DIVu v percentách. Tým pádom sa variabilný rámček (teda taký, u ktorého môžete ľubovoľne meniť výšku či šírku, prípadne aby sa výška a šírka prispôsobovala obsahu) nedá urobiť (aspoň ja osobne som zatiaľ na žiadny spôsob neprišiel ani nenarazil). Z daného obmedzenia teda vyplýva, že môžeme urobiť rámčeky dvoch typov:
- s pevne danou výškou a šírkou
- variabilný, ale bez ľavého a pravého okraja
Ak by však niekto prišiel na to, že sa mýlim a že sa variabilný rámček predsa len dá urobiť, nech ma láskavo informuje. Bol by som mu naozaj vďačný, pretože ma to už dosť dlho žerie.
Datum vložení: 18.9.2001 10:38:36
Nechápu námitku, že "browsery nepodporují nastavení výšky DIVu v procentech"... to přece není pravda. Také není pravda, že nelze udělat rámeček, jehož výška by se přizpůsobovala obsahu - to je přece základní požadavek a rámeček v uvedené ukázce tak funguje. Nicméně je pravda, že při pokusech o složitější varianty (zejména tu s dynamickou šířkou) narazíme na nedostatky CSS (dokonce omezení samotného standardu, ne jen nedostatky v implementaci). Občas může být vhodné vypomoct si skriptem...
Datum vložení: 18.9.2001 10:43:56
Najprv ukazka toho, co som urobil ja:
<a href='http://acid.nfo.sk/bordel/css/ramcek.html' target='_blank'>http://acid.nfo.sk/bordel/css/ramcek.html</a>
Skuste si urobit prazdnu stranku s jednym DIVom a pomocou CSS mu nastavte vysku 100%. Neviem ako vam, ale mne to nefunguje. Prave preto je problem urobit pomocou CSS univerzalny variabilny ramcek, ktory by bol hore, dole, vlavo, vpravo aj v rohoch ohraniceny grafikou.
Ako som uz povedal skor, ak sa vam to podari, budem velmi rad.
Datum vložení: 18.9.2001 14:49:36
Zdravim vas,
zkuste tento kod:
<style>
div {
width: 100%;
height: 100%;
background-color: red;
}
</style>
<div>text</div>
DIV ma vysku/sirku presne 100 procent. Testovano v IE 5.0.
Datum vložení: 18.9.2001 14:58:09
Už sme o tom hovorili s autorom článku v e-mailoch. Trochu som to poplietol tým, že som neuviedol, že ten DIV s výškou 100% má byť v ďalšom layeri.
Skúsim citovať náš posledný mail:
> > > Skuste si urobit prazdnu stranku
> > > s jednym DIVom a pomocou CSS mu nastavte vysku 100%. Neviem ako vam,
ale
> > > mne to nefunguje.
> >
> > Me to funguje... opravdu nevim, v cem je problem. ALE:
> > 1) Jak dostat zakonceni tabulky dolu? To je podle me dalsi orisek.
> > 2) K cemu je to vubec dobre? 100% = vychozi vyska plochy browseru.
Jakmile
> > je na strance jeste jiny element a ten ma vysku treba 1000px, vysku
naseho
> > DIVu to nijak neovlivni. (Coz je asi logicke.)
>
> 1. Ak si pozriete ten moj zdrojak, uvidite, ze tabulka je zlozena z troch
> riadkov.
Jasne, nepotrebujeme-li tu levou a pravou stranu, neni to problem.
> 2. Omyl. 100% = vyska nadradeneho blokoveho elementu.
No jiste. To je v pripade hlavniho DIVu vyska BODY, coz je vychozi vyska
okna browseru. (Psal jste, ze vam to nefunguje "na prazde strance s jednim
DIVem".)
> Ak sa teda layer da do
> dalsieho layera a nastavi sa mu vyska 100%, mal by sa roztiahnut na vysku
> svojho rodica. Bohuzial, ak vyska rodica nie je pevne dana, je vyska
layera
> prepisana na "auto" (vid. specifikacie CSS2).
Ma-li element B vnoreny do rodicovskeho elementu A nastavenu vysku na 100%,
pak se jeho vyska odvodi od vysky elementu A v okamziku vykreslovani. Nelze
cekat, ze pokud nejaky jiny vnoreny element C ovlivni vysku elementu A
(treba tim, ze je do nej nalito vetsi mnozstvi textu), prepocita se znovu
vyska elementu B. (Co by se stalo, kdyby B mel height: 110%? :)) V tom je
podle me zakopany pes. Snazime se vlastne simulovat chovani HTML-tabulek,
ale to proste nejde a neni to chyba browseru, ale vyplyva to ze samotne
podstaty formatovaciho modelu CSS. Bud musime pockat, jestli CSS3 neprijde s
necim novym nebo pouzivat tabulky nebo si pomoct proceduralnim resesim
(JavaScript) tam, kde nepomuze deklarativni reseni (CSS).
Datum vložení: 15.9.2001 10:24:42
Moc se mi libi ten zeleny "ramecek". Muzete mi prosim rict, v cem a jak je to udelany???
Datum vložení: 15.9.2001 23:00:11
Photoshop 6 - efekty vrstev.
Datum vložení: 15.9.2001 23:06:15
Dodatečně jsem zjistil, že mám v článku chybu, za což se tímto omlouvám a uvádím na pravou míru. Ve druhém příkladu je nutné předefinovat zobrazení položek menu na typ "block" v každém případě, ne kvůli problematickému zobrazení v Mozille, jak uvádím. Inline elementům totiž nelze nastavovat výšku a šířku. Že to v Internet Exploreru funguje, je jeho "iniciativa", čili v podstatě chyba. (Ve zdrojovém kódu se tedy nic nemění, pouze komentář je zavádějící.)
Datum vložení: 17.9.2001 14:56:46
... a jsem zvedav, zda se mi tento prispevek zase neulozi, respektive kolik dostanes na svuj ucet :)
Datum vložení: 17.9.2001 23:10:19
V Netscape uz to ovsem takova parada neni...
Datum vložení: 17.9.2001 23:36:50
Kdybyste četl článek pozorně, dozvěděl byste se, že ukázka funguje pouze v prohlížečích, které podporují CSS2 (více než tři roky starý standard!), což je u Netscapu verze 6. Ve starších verzích by se stránka měla zobrazit bez jakéhokoliv formátování a zbytečných obrázků, což osobně za určitou formu "parády" také považuji. (Proč v tomto případě není řešeno odříznutí stylesheetu, vysvětluji také.) Tento přístup, kdy za prvé o informace nepřijde absolutně nikdo a za druhé uživatelé starých browserů jsou upozorněni, že by měli přezbrojit na prohlížeče, které nebrzdí vývoj oboru, považuji za správný a snažím se ho používat všude, kde to je možné.
Datum vložení: 10.10.2001 11:53:20
Při tvorbě nové verze svých stránek (ještě tam je ta prastará, tak se nelekněte :), jsem narazil na problém. Stránky dělám v PHP&MySQL (databáze, atomatické generování a tak) a právě v tom je ta potíž, protože chci, aby stránky byly jaxi barevně sladěny, tak hromada <B>různých</B> elementů má na stránce stejnou barvu. Abych mohl zpětně měnit tu kterou barvu pro všechny tyto elementy, vytvořil jsem si kratičký soubor konstanty.php, který includuju do každé stránky na začátku a ve které definuji různé barvy (pozadí, text, menu, podmenu...) Používám takřka výhradně styly, ale nepřišel jsem na to, jak můžu pomocí php vložit tyto konstanty do souboru styly.css (protože ten není dynamicky generovaný). Mnohdy je pro mě tedy výhodnější napsat
<B><div style="color:<?echo BARVA;?>">Nějaký text</div></B>
popřípadě
<B><div style="<?echo KOMPLETNIDEFINICESTYLU;?>">Nějaký text</div></B>
než
<B><div class="nejakystyl">Nějaký text</div></B>
protože potom si můžu v souboru konstanty.php víc pohrát s tím, jak budou ty styly definovaný.
Je mi sice jasný, že jde více stylům přiřadit jeden element (např. H1,DIV {color:#123456}), ale mám-li více tabulek stylů, tak už to tak udělat nejde. Napadlo mě vkládat includem na začátek každé stránky definici stylů s použitím těch konstant, ale mám pocit, že by to zbytečně bude zvětšovat velikost té stránky, a tím pádem i dobu načítání.
Jde to nějak obejít, nebo kecám úplný bludy? No, nechám se překvapit, co mi poradíte.
DÍK
Datum vložení: 10.10.2001 12:24:30
Tak především bych osobně zavrhnul to řešení s inline deklarací CSS (tj. PHPčkem generovat atributy style v HTML) -- HTML dokument je pak velmi nepřehledný a popírá zásadu oddělení obsahu od vzhledu. Tedy všechny barvy rozhodně v samostatném stylesheetu. Pokud si nedovede představit život bez PHP, nic vám nebrání používat ho i v CSS a klidně i stylesheety parametrizovat (stačí mít správně nastavený server a CSS se bude generovat stejně jako HTML). Ovšem řekl bych, že to také není ta správná cesta. Generovat by se měl obsah, tedy HTML, stylesheet naopak považuju za cosi stabilního. Měl byste vhodně využívat importování+kaskádování, tzn. dekomponovat si strukturu stylů na optimálně malé jednotky, různě mezi sebou dědící (přesněji řečeno kaskádující), což do značné míry řeší podobné problémy jako PHPčkové includování. Pokud by přece jen nakonec zůstaly ve stylesheetech nějaké duplicity v definicích barev (jako že asi ano), tak se s tím podle mě už lze smířit a k údržbě používat třeba program TopStyle, který v nejnovější verzi umí skvělou správu barev (nahrazení všech výskytů dané barvy jinou, apod.), samozřejmě ovšem založenou na obyčejném Find&Replace. Jinak ale musím upozornit, že jsem webdesigner, který se zabývá jen klientskou stranou - jak serveroví programátoři optimálně poskládají web, do toho už zas tak moc nevidím.
Datum vložení: 15.10.2001 10:14:10
pokud jsem to pochopil, chcete napriklad, aby dve tabulky, ktere maji jiny vzhled, tedy jinou class, mely ale vzdy stejnou barvu pozadi, bez toho, aby jste ji musel menit v obou (vice) definich stylu... podle me to jsou od toho kaskadni styly, ze je lze vrsit pres sebe, ne?
tak treba
.pozadi1 {background:#15ff9a;}
.tab1 {size:5px;}
.tab2 {size:6px;}
<table class="pozadi1 tab1"> ...
lze tedy oddelit mezerou vice stylu, ktere se odpredu maji aplikovat...
sorry, pokud odpovidam na uplne neco jineho :))) ale ja osobne jsem to chtel v php resit jako vy, ale pak me napadlo toto reseni...
md.
Datum vložení: 15.10.2001 12:24:51
No, a to že to jde takhle udělat, tak to je přesně to, co jsem nevěděl. <B>Díky moc.</B>
MALIS
Datum vložení: 15.10.2001 12:58:19
To je sice pravda, ale začátečníkovi bych hlavně poradil pořádně využívat kontextové selektory - obvyklá začátečnická chyba je všechno řešit přes třídy, což nakonec může vést ke zbytečně složitému kódu. (Nakonec si lze vytvořit tolik tříd, kolik je různých vlastností CSS a dostaneme se tam, kde jsme byli s inline-definicemi style="...".)
Příklad kontextového selektoru:
.x { }
.y { }
.x .y {nejake nastaveni, ktere se pouzije pro elementy tridy y vnorene v elementech tridy x a prebije nastaveni v jednoduchem selektoru pro x}
Kromě kontextových selektorů lze kaskádovat vhodným rozdělení stylesheetu na několik souborů - některé definice budou společné všem stránkám, některé jen pro určité stránky.
Já osobně i u složitých projektů s tímto vystačím a ty vícenásobné třídy prakticky nepoužívám.
Shrnutí: Těžko říct, co se původnímu tazateli nejvíce hodí pro jeho projekt. Každopádně se vyplatí nejprve pořádně nastudovat všechny možnosti CSS -- je to docela věda, to nepopírám.
Datum vložení: 13.10.2001 9:01:13
Podarilo sa mi to. Konečne som urobil kompletný variabilný grafický rámček pomocou CSS. A ani to nebolo zložité. Stačilo zabudnúť na to, že ho treba robiť pomocou riadkov či stĺpcov. To bola éra tabuliek. Teraz sme v ére CSS, takže sa to robí inak - jednoduchšie.
Ukážku nájdete tu: <a href='http://acid.nfo.sk/bordel/css/' target='_blank'>http://acid.nfo.sk/bordel/css/</a>
Datum vložení: 18.5.2003 4:51:45
super, ale mozna by tam mohl i chvilku vydrzet, co rikate? :)
Datum vložení: 18.5.2003 6:36:01
<a href='http://www.fczbkk.com/css/ramceky.html' target='_blank'>http://www.fczbkk.com/css/ramceky.html</a>