Clanek kniha cokoliv – CSS – Fórum – Programujte.com

ahoj mam problem s kaskadovimy styly pri zmene velikosti okna tak sem se chtel zeptat zda by mi nekdo doporucil nejakou knihu nejlepe v elektronicke forme nebo nejaky clanek ktery o tom pojednava vim ze by se to  dalo poresit tak ze udelam javascript funkci napisu vice css souboru a po zjisteni rozliseni a velikosti okna by se aplikovalo urcite rozlozeni ale nechci to takto resit za a) muze byt js vypnuty a za b) bych musel udelat css pro kazdou moznou velikost okna ciz je tak trochu pitomost

jakpsatweb.cz a forum tam

Z dotazu nemam vubec predstavu, co potrebujes. Prohlizece dnes pri zvetsovani zvetsuji vse. Obrazky, text, i hodnoty v css. Bez js to nejde udelat univerzalne. Jsou takove 3 moznosti. Bud udelas pevnou sirku a vystredis to, coz je nejlepsi. Nebo zadas rozmery v procentech, coz se bude v ruznych prohlizecich pri ruznych oknech sypat, chovat divne (position i float layout). Nebo vyuzijes min-width, min-height, coz se v ruznych prohlizecich opet muze chovat jinak. Navic je vetsina tech moznosti narocna na preciznost. Ale treba ti na jpw foru reknou neco jineho a daji linky na layouty. Az pak najdes chyby, vzpomen si na ma slova, ze s tim ztracis jen cas, ktery muzes venovat zajimavym informacem pro navstevniky a usporadani a ne se drbat s nespolehlivymi layouty :)

Co se tyce js, tak to vyple nebyva. Pouze na nekterych ss a zs maji paranoidni adminy.

zacal sem pouzivat procentualni pozicovani i procentualni rozmery protoze hojjne vyuzivam css3 a diky tomu se mi naskytla moznost minimalizovat grafiku tedy to co si musim sam nakreslit treba ve photoshopu atd. zkratka aby to melo takovej ten gumovej efekt ale muel sem udelat chybu uz v zapisu css protoze kdyz sem to smazal a napsal znovu od nuly tak to jede jak ma ale pro zmenu se potykam s problemy v roznych prohlizecich nezahrnuji do toho IE protoze to je problemovy samo o sobe to vzdy pak delm az na konec ale firefox ve kterem to ladim to zobrazuje normalne ( jak jinak ze ) ale napriklad chrome to rozhazuje ne tak fatalne jako IE ale napriklad posledni div mi to svihne trebas o 3px niz nez to ma byt kazdopadne diky za tip na stranku obcas tam taky chodim ale pouze kvuli prehledu vlastnosti css protoze si obcas popletu nejake funkce

To bys musel dat link.

Prohlizece pouzivaji ruzne zobrazovaci rezimy, doctype. Jsou ruzne finticky, hacky, jak to obejit. V konkretnim rezimu ignoruji vlastnosti, ktere ten rezim nepodporuje. Soucasne pouzivaji jiny box model, kde se treba padding pocita do width nebo se pripocitava navic. Nebo treba se margin prenasi na nadrazene prvky. Pak je treba obrazek v odkazu o 3px vys, protoze odkaz nese v sobe podtrzeni a je treba to resit pres vertical-align. Atd... Proto by bylo uplne nejlepsi celou stranku udelat s divu. Mas jeden prvek, presne znas jeho vlastnosti, presne vis, jak je ovlivnit (coz treba menit input nebo hr muze byt umeni prace s googlem pro ruzne prohlizece).

Urcite na to clanky jsou. Nejlepsi je vlastni zkusenost, zkouset ruzne velikosti okna, stahovat az na extremne male, full screen, ruzne prohlizece... Na ty clanky nemuzes plne spolehat, muzou byt stare nebo zamerene na konkretni chybnou verzi prohlizece.

http://www.ichis.eu

priznam se ze procentualni pozicovani a rozmery pouzivam v takovemto rozsahu poprve vzdy se jednalo jen o male koousky na webu zkratka sem chtel zkusit neco noveho ale dopadlo to takto jako konecne reseni me napadlo napsat nejakej jquery kod kterej rozezna prohlizec a podle toho predhodi css styl ale je to stejna blbost jako psat rodilnej styl pro kazdej pixel a hlavne bych musel napsat takovejch rozdilnejch stylu ze bych se z toho po**al kazdopadne sem pocital s tim ze pro IE bude muset byt jiny css styl ale nenapadlo me ani ve snu ze budu muset resit i chrome extra po tom co to opera safaria a dokonce i maxthon to zobrazuji korektne

No, a tady to presne mas.
- V mem okne (600 x 900) se vsechny 3 sloupce prekryvaji.
- Pri full screen (1900 x 1200) mam zas mezi sloupci velke mezery a stredni sloupec je priles dlouhy (omezeni je asi 80 znaku na radek pro dobrou citelnost).
- Navic ti v obou pripadech pluje kazdy obdelnicek jinam mimo okraj layoutu. Bud na jedne strane dovnnitr nebo naopak pretekaji mimo ven.
Kdybys to cele uzavrel do divu, nastavil mu sirku. A ten vystredil, bylo by to fajn. Zvetseni bych pak resil javascriptem. Ale to tez nemuzes prehanet, kvuli obrazkum. Takze mozna nechat zvetseni na uzivateli. Na tabletu je to jednoduche gesto.
A pak tam mas jeste spoustu dalsich chybicek. Treba, delas zakulaceni. Vnejsi radius rekneme 10px, vnitrni 10px. Tim ale docilis hranateho zakulaceni.  Kdyz si ale vemes pneu od auta, tak ma vnejsi radius rekneme 70 a vnitrni 30. Pak kolo nevypada jako zakulaceny ctverecek. Pak tam mas ruzne velke mezery mezi mezi temi bloky. Atd...

Zkousel jsi tabulkovy layout? <TABLE> nebo css display:table? Vetsinu tech problemu by ti to asi vyresilo.

Jinak koukam, ze pravy a levy nenatahujes. Takze nastavenim min-width bys to vyresil.

<!DOCTYPE html>
<div class="a">
  <div class="aa"></div>
  <div class="ab"><div class="aba"></div></div>
  <div class="ac"></div>
</div>
<style>
.a
  {min-height:500px; min-width:700px; position:relative;  border:2px solid #0b0;}
.a .aa, .a .ab, .a .ac
  {min-height:500px; position:absolute; top:0; border:2px solid #f00;}
.a .ab
  {margin:0 200px;  position:relative;}
.a .aba
  {min-height:500px; width:100%;}
.a .aa
  {width:200px; left:0;}
.a .ac
  {width:200px; right:0;}
</style>

Netestoval jsem to moc. V IE bez doctype to dela psi kupsy, protoze pak nezna min-width, coz se pak resi pomoci width, ale tak, aby ho ostatni prohlizece ignorovali.