TOPlist

Pixylophone - komentáře

Komentáře (od nejstarších po nejnovější)

Komentáře k příspěvku Nejčastější problém s CSS a jeho řešení


[1] Vložil(a): dji, 2004-08-26, 18:23 Solo | MuteČtenáři: ---

presne na timto problemem jsme s kolegou stravili den premyslenim jak to sakra v tom CSS udelat.
nemyslim si, ze bychom nemeli predstavivost, ale zadavatel proste chtel klasicky 3-sloupcovy model (mysleno stejna vyska), takze i kdybychom jsme se rozkrajeli, tak jsme tabulky vynechat nemohly.
nicmene diky, ze ubezpeceni, ze to opravdu nejde :)
diky tomuto prikladu me vzdycky nakrknou hlasky zastancu CSS ze tabulky jsou mrtve a CSS rulez ... kdyz jim predhodim tento problem, tak zacnou blekotat neco o tom, ze nemam chtit to, co chci :)

[2] Vložil(a): Tomáš Herout [web], 2004-08-26, 18:28 Solo | MuteČtenáři: ---

Já jsem to vyřešil tak, že jsem použil Pixyho řešení 3sloupcového layoutu, z proházel nějaké DIVy, použil min-height a _podtžítko hack, je to trochu prasárna, ale jakš-takš to funguje. No, koukněte sami: http://www.zsvodojem.cz

[3] Vložil(a): Zerryk, 2004-08-26, 18:29 Solo | MuteČtenáři: ---

Sloupec textu široký dle rozlišení je nečitelný, oko nenajde následující řádek. Úzká nudle uprostřed obrovské plochy 1600x1200 je zas hnusná. Už aby tu bylo css3 s vícesloupcovou sazbou a s automatickým počtem sloupců.
A ještě větší prča nastane, až přijdou obrazovky s 200 dpi, to půjde do háje i bitmapová výzdoba. Už teď je problém s blechami na lepších noteboocích, majoritní browser (hádejte jaký) umí zoom jen po důkladném domlouvání v registrech (HKCU\Software\Microsoft\Internet Explorer\Main\"UseHR"=dword:00000001 ) a na výsledek se ani tak koukat nedá.

[4] Vložil(a): Bohumír Bednařík [web], 2004-08-26, 19:06 Solo | MuteČtenáři: ---

[3] Dokud nebude MSIE podporovat max-width a pokud si tvůrci webů budou chtít ulehčit práci tím, že nebudou používat nějaké expression hacky, tak si myslím, že roztažení sloupce podle velikosti okna je OK. Samozřejmě by tam pro ty prohlížeče, které to umí, mělo to max-width být uvedeno.

Já osobně používám maximální rozlišení 1024x768 a když vidím nějaký web, který je dělaný stylem maximální šířka 800px (nebo něco kolem 800), tak mě to docela štve, protože pak mi svítí do očí spousta prázdného místa, protože většina takových webů mívá nastavené bílé (nebo hodně světlé) pozadí stránky. Třeba tady u Pixyho mi to nevadí, protože to oranžové pozadí není tolik do očí bijící. Ale je to myslím všechno subjektivní, protože kazdému vyhovuje něco jiného.

[5] Vložil(a): Ondřej Pohorský (wellard) [web], 2004-08-26, 19:17 Solo | MuteČtenáři: ---

Pixy, touhle vetou "Jestli opravdu trváte na tom, že vaše stránka bezpodmínečně musí mít X sloupců stejné výšky, udělejte to tabulkou." jsi celou situace docela "pohnojil". Předesílám, že to nemyslím zle. Za tu řádku let, co působíš v tomhle "oboru" jsi na českém itnernetu už docela uznávaná autorita a já už vidím ty zástupy "pseudoprofíků" na Kritice webu v Intervalu, jak se odvolávají na tuhle stránku a tuto jedinou magickou větu, za níž schovají svá dílka - "Ja to chtel puvodne udelat pomoci CSS, ale kdyz i Pixy rikal, ze 3 sloupce jsou na tabulky, tak jsem tam vrazil ty tabulky."

A taky nechápu, proč hned házíš flintu do žita, když nejméně v polovině případů (já osobně bych řekl ve více než 90-ti procentech) lze beze zbytku využít tvou metodu 3-sloupcového řešení, navíc bez jakýchkoliv hacků a fines? Tohle vážně nechápu a prosím o méně ironickou a více přímou odpověď (třeba mi totiž skutečně něco uniklo a chyba je ve mně).

[6] Vložil(a): Michalek [web], 2004-08-26, 19:22 Solo | MuteČtenáři: ---

Nebyl by to problem za pouziti float: right a float: left, kdyby existoval pouze jeden prohlizec.
Upravim pro IE - nefunguje v Mozille
Upravim pro Mozillu - nefunguje v IE...
Uz me to pomalu stve (ale koho ne...)

Chci se jenom zeptat, jak na stejny obsah stranky narvat tolik obsahu jako tam je ted?

Priznavam se, neumim myslet jinak nez tak jak to je...

[7] Vložil(a): Ondřej Pohorský (wellard) [web], 2004-08-26, 19:29 Solo | MuteČtenáři: ---

[6] nechapu co stale vsichni resite. float se preci elegantne resi formulkou clear:both; a funguej to vsude.

[8] Vložil(a): Michalek [web], 2004-08-26, 19:37 Solo | MuteČtenáři: ---

[7] Jenomze, popisu svoje snazeni.
Mel jsem tri sloupce.
levy - float: left;
stredni - width: 100%;
pravy - float: right;

Pokud je ve strednim sloupci nejaka tabulka se sirkou v procentech jiz to prestava fungovat. Zadne clear mi nepomahalo, ale myslim, ze jsem jeden z mnoha, ktery ma tento problem...

Rad bych vysekal vsechny tabulka, ale zatim to je nerealny...

[9] Vložil(a): johnny [web], 2004-08-26, 19:40 Solo | MuteČtenáři: ---

[5] Já myslím, že když někdo tabulku zneužije JEN na rozdělení stránky do tří sloupců, je to stále jako nebe a dudy v porovnání s běžným stavem, kdy jsou těch tabulek do sebe zanořené desítky.

[10] Vložil(a): Jirka, 2004-08-26, 19:44 Solo | MuteČtenáři: ---

Celej dnesek jsem stravil badanim, jak na trisloupcovy layout od pixyho nalepit paticku tak, aby pri nedostatku textu byla naspod okna a mezera byla vplnena barvou vsech tri sloupcu. Na nic jsem neprisel, na netu na nic nenarazil...az pred malou chvilkou - http://jezek2.advel.cz/css/3colhf.html - to je presne to co potrebuju (rozumej zakaznik potrebuje). Myslim, ze i ostatnim by se to mohlo hodit. (nevim, co je v tom za figl, jeste sjem na to nekoukal.

[11] Vložil(a): Michalek [web], 2004-08-26, 19:47 Solo | MuteČtenáři: ---

[10] - vypada to zajimave, stoji to za prozkoumani, diky :-)

[12] Vložil(a): Michalek [web], 2004-08-26, 19:54 Solo | MuteČtenáři: ---

[10] - tak jsem skoncil tam kde jsem skoncil uz predtim, pokud mam v prostrednim sloupci tabulku s width=100%, tak se layout rozhodi...
Ale diky (i za ostatni) za link...

[13] Vložil(a): Ondřej Pohorský (wellard) [web], 2004-08-26, 20:04 Solo | MuteČtenáři: ---

[12] - ano, to je problem.

[14] Vložil(a): Jirka, 2004-08-26, 20:45 Solo | MuteČtenáři: ---

[12] - no, zkusil jsem si tam narychlo hodit tabulku se 100% sirkou (jak pres css tak pres html) a chova se mi to korektne (je teda pravda, ze je to jednoduchoucka tabulcicka - ale 100% sirku a ramecek ma a je to v cajku)

[15] Vložil(a): Roj [web], 2004-08-26, 21:43 Solo | MuteČtenáři: ---

Tak ja mel od sveho webdetstvi presne opacny problem. Nesnasel jsem pevne sloupce a misto toho jsem vsude, kde se dalo, prdl plovouci tabulky. (table align=right witdh=180...) K tomu jsem vyuzival (br clear=right...) To byly primo table-hackove orgie :-))
CSS prislo jako vysvobozeni.
Vubec nikdy jsem nechapal, proc vsichni do zblbnuti maji trisloupcovej lejout.

[16] Vložil(a): Endlife [web], 2004-08-26, 22:00 Solo | MuteČtenáři: ---

co se týče té 100% široké tabulky v divu, měl jsem s tím dost slušné problémy.. ale pak jsem nastavil width:95%, případně width="95%" & problém je vyřešený..

Možná to pojede i vyšším procentem, ale 95% mi přijde optimální..

[17] Vložil(a): meky [web], 2004-08-26, 22:30 Solo | MuteČtenáři: ---

Když se snažím někoho přesvědčit k přechodu na CSS, bývá právě s touto délkou velký problém. Teď už vím kam odkázat sebe i tápajícího tabulkáře pro vysvětlení.

Linkuju a díky za dobrej spot.

[18] Vložil(a): Sokolík [web], 2004-08-26, 22:30 Solo | MuteČtenáři: ---

Tak jsem trošku zklamán. Nahlídnul jsem na všechny reprezentativní weby a u všech až na ten první mám dojem, že úvodní stránka je typickm příkladme dvou/tří - sloupcového layoutu...

[19] Vložil(a): pixy [web], 2004-08-26, 22:34 Solo | MuteČtenáři: ---

ad [18] > Ano, ale bez potřeby sloupců stejné výšky. To je *zásadní* rozdíl.

[20] Vložil(a): Bednee [web], 2004-08-26, 23:51 Solo | MuteČtenáři: ---

Ja to tedy resim pomoci obrazku. Myslim tim, ze kdyz mam pozadavek na 2 sloupce stejne vysoke. Udelam si jeden px vysoky gif do ktereho nakreslim pozadi a ten potom dam jako pozadi kontejneru, ktery tyto dva sloupce obali.

Jinak k te tabulce v 3sl designu. Jsem to vymyslel takhle, ma sirku 100% :)
<div style="float: left; width: 200px; background-color: red; height: 200px;">text</div>
<div style="float: right; width: 100px; background-color: blue; height: 200px;">text</div>
<div style="margin: 0 100px 0 200px; background-color: yellow"><div style="width: 99%">
aaaaaaaa
<table style="width: 100%; background-color: purple;"><tr><td>tabulka</td></tr></table>
</div></div>

[21] Vložil(a): jakub [web], 2004-08-27, 00:07 Solo | MuteČtenáři: ---

[20] s tím gifem to dělám běžně taky, ale je to trochu prasárna - pokud se jeden pruh nechtěně rozšíří třeba širokou fotkou (a k tomu na webech, kde si klienti sami administrují obsah dojde dřív nebo později VŽDY), tak gif se samozřejmě neroztáhne.

K tomu „myšlení jinak“ - mám dojem, že no-table dogma a podobné doktríny vedou k tomu, že se forma příliš přizpůsobuje technologiím - myslím, že je to příliš vyhrocený extrém (i když jistě lepší, než extrém opačný, jako třeba udělat celou stránku jako jeden gif). Jistě je třeba při návrhu respektovat použité médium a technologie, ale řekl bych, že není nutné se nechat jakýmisi technologiemi příliš omezovat.

[22] Vložil(a): pixy [web], 2004-08-27, 00:22 Solo | MuteČtenáři: ---

ad [20] > No jasně, to jde (stejně řeším i ten svůj publikovaný 3-sl. layout) - ale musí být fixní šířka obou sloupců. Což je ale jen velmi malá podmnožina všech možných variant řešení.

A k těm floatům. Prosím vás, NENÍ PRAVDA, že by s těmi tabulkami byl nějaký problém, který popisujete. Pravda je jen to, že IE má v tomhle bodu závažnou chybu. Místo aby bral za měřítko šířku rodičovského prvku, bere šířku celé stránky (nebo nejbližšího prvku, který má určenou šířku). Ostatní prohlížeče tenhle bug nemají (a IE6 ve std. režimu myslím taky ne - ale to si nejsem jistý).

Řešením je umístit tu tabulku do nějakého prvku (nejspíš neutrálního DIVu), který bude mít šířku určenu - u DIVů tahle chyba není, takže místo

<table style="width:100%">...</table>

stačí použít

<div style="width:100%">
<table style="width:100%">...</table>
</div>

[23] Vložil(a): Jerry [web], 2004-08-27, 00:45 Solo | MuteČtenáři: ---

[12] Zkuste to nacpat do 100% DIVu, mistře Marconi... ;-)

[24] Vložil(a): Jerry [web], 2004-08-27, 00:46 Solo | MuteČtenáři: ---

[22],[23] Aha, s křížkem po svatbě...

[25] Vložil(a): Lukas Mach, 2004-08-27, 01:10 Solo | MuteČtenáři: ---

[21] ad siroke obrazky: tady se o tom pise http://www.clagnut.com/sandbox/imagetest/ . Myslim, ze jsem nekde cetl i o nastaveni overflow: scroll pro IMG a pokud pak nemel obrazek dost mista, tak se uvnitr objevila scrollovaci lista.

[26] Vložil(a): Mise, 2004-08-27, 07:43 Solo | MuteČtenáři: ---

mozna by se nekomu mohlo hodit reseni, ke kteremu sem nakonec dosel ja. vim, ze je to reseni z jine kategorie a nechce se mi o tom prilis rozepisovat. (snad jen jeden link volne k tematu: http://www.digital-web.com/articles/separating_behavior_and_presentation/ )

reseni:
onload="srovnej(div1,div2)"

function srovnej(d1,d2) {
 var d = Math.max(document.getElementById('d1').offsetHeight, document.getElementById('d2').offsetHeight);
  document.getElementById('d1').style.height= d + 'px';
  document.getElementById('d2').style.height= d + 'px';
}

(psano z hlavy, muze byt potreba odladit to)

[27] Vložil(a): jk, 2004-08-27, 09:44 Solo | MuteČtenáři: ---

Myslim, ze celkem zajimavy navod na to jak udelat dvousloupcovy layout s footerem na spod stranky (a stejne tak by to melo fungovat i pro trisloupcovy) se nedavno objevil na http://veerle.duoh.com - hledejte clanek s nazvem Designing a CSS based template (ma asi 7 casti).

[28] Vložil(a): jirka, 2004-08-27, 15:09 Solo | MuteČtenáři: ---

dalsi skoro neresitelny problem vidim u vertikalniho zarovnani v bloku. Proste to, co se s tabulkou udela takto:

<style>
td {text-align: center; width: 100px; height: 100px; background-color: #aaaaaa;}
</style>
<table>
<tr>
<td><a href="">zalozka prvni</a></td>
<td><a href="">zalozka druha s odradkovanim</a></td>
<td><a href="">zalozka treti, jeste delsi abych ukazal o co mi jde</a></td>
</tr>
</table>

bych rad provedl s nejakou jednoduchou konstrukci v CSS, treba ostylovanim tohoto:

<div>
<a href="">zalozka prvni</a>
<a href="">dalsi... </a>
</div>

s tim, ze ty tagy a by mely float: left aby vizualne tvorily zalozky. Jedine, jak to resit,
aby byl delsi text zarovnan na vertikalne na stred, vidim v CSS + skriptu, ktery projde jednotlive polozky, zmeri jejich vysku a pote nastavi padding v boxu. Cili reseni a la [26]. Mozna by to slo resit i pomoci expression primo v css ale zase nechci extra zpomalit nacitani stranky v prohlizeci... Neresil tento problem uz nekdo, at nevymyslim Ameriku?

[29] Vložil(a): jirka, 2004-08-27, 15:25 Solo | MuteČtenáři: ---

Jeste ad [26]: udelal jsem z toho funcni priklad, ktery si kazdy muze vyzkouset prekopirovanim kodu zde:

<style>
#Prvni, #Druhy {float: left; background-color: red; width: 250px;}
#Druhy {background-color: green;}
</style>

<div id="Prvni">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam ut quam.
Fusce a magna. Donec blandit. Sed pharetra ipsum at nibh.
Donec accumsan est in purus. Morbi eu ipsum ac dui scelerisque tempus.
In in tellus eget orci rutrum tincidunt. Vivamus eu odio.
Aenean aliquet sapien et erat. Pellentesque luctus diam in lacus.
Duis ipsum. Cras et lorem in tellus fringilla tempus.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia Curae; Vivamus hendrerit ligula consectetuer tortor.
Sed pretium dui non pede. Sed rhoncus rhoncus felis. In hac habitasse
platea dictumst. Quisque tristique molestie velit. Nullam interdum tortor ac lectus.
</div>
<div id="Druhy">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
<script>
  var d = Math.max(document.getElementById('Prvni').offsetHeight, document.getElementById('Druhy').offsetHeight);
  document.getElementById('Prvni').style.height= d + 'px';
  document.getElementById('Druhy').style.height= d + 'px';
</script>

a napada me jedna uprava skriptu, pokud to nekdo zvladne: prepracovat skript tak, aby nevyzadoval id prvku, ktere ma srovnat, ale fungoval by pomoci tridy: DIVY, ktere by mely byt srovnany na vysku, by mely class="equalize_height" a skript by po nacteni stranky projel cely dokument na vyskyt divů s timhle classem a postupne by si v promenne prepisoval nejvyssi zjistenou vysku vnitrniho obsahu divů a pak by v druhé fázi nastavil vsem divům s touto class tu nejvetsi zmerenou vysku. Nevyhodu celeho reseni ovsem vidim uz ted: u slozitejsich stranek si to vezme dost systemovych prostredku kvuli potrebe preformatovat stranku na strane klienta...

[30] Vložil(a): pixy [web], 2004-08-27, 15:37 Solo | MuteČtenáři: ---

ad [28], [29] > Tomu problému nějak nerozumím. Přece když chci něco vycentrovat svisle v nějakém bloku, tak bloku nastavím jenom stejný horní i dolní padding, ne? Proč něco počítat, proboha?

[31] Vložil(a): Martin Koníček, 2004-08-27, 15:48 Solo | MuteČtenáři: ---

Pixy byl trošku brutální při psaní tohodle článku, naschvál to nadhodil tvrdě, aby se kochal komentářema :)

Nicméně k věci:

1) tabulky se pomalu načítají, musí se mnohdy načíst celé a zbytečně se čeká, proto bych je nepoužil, jinak v nich problém nevidím

2) tabulky mají problém na PDA

3) Tří sloupcový stejný layout je možná zvyk, ale patička je nutnost. Za nic nedokážu pochopit, proč nemůžu k absolutnímu pozicování dát patičku. Prostě to nejde, když dám bottom: 0px, plácne se to dolů na obrazovku, ale já chci samozřejmě dolů za dokument.

CSS nejsou dokonalé a podle mě je tam stále dost mezer, podle mě by CSS mělo umožňovat takovou funkčnost, aby člověk udělal design obdobný novinám, třeba text do sloupců, aby se hodil na celou obrazovku a hezky se to četlo

[32] Vložil(a): Michalek [web], 2004-08-27, 15:51 Solo | MuteČtenáři: ---

[22] vim co vidim :-) nefunfuje mi to a zustavam u tabulek :-) casem prejdu do CSS, ale ted to proste a jednoduse nejde, takze holt budu mit layout v tabulkach, no booooze ;-)

[33] Vložil(a): Tomáš Valůšek, 2004-08-27, 16:12 Solo | MuteČtenáři: ---

Tak nevím, ale mě osobně působí veliké problémy překrývání textových prvků, jež působí ve svém výsledku nečitelnost a tedy nepoužitelnost webu. Jsem přisleplý a tak mám nastavené písmo jako kráva (16 bodů) a často je to průšvih. "Miluju" line-height a všeechny varianty align: right. V pre-CSS době mohlo dojít k překrývání textových prvků jen tehdy, byla-li textová tabulka "vrznuta" na pravý okraj okolního textu, teď je překrývání, zvláště při zvětšeném písmu, dost běžná a pro mě dost frustrující věc.

[34] Vložil(a): jirka, 2004-08-27, 16:32 Solo | MuteČtenáři: ---

ad [30]: jenže ono to "něco" co chci vycentrovat, má různou výšku: typicky jednořádkový, ale i víceřádkový text. Vnější kontejner takového prvku chci s konstatní výškou.(vedle bude floatovat stejne ostylovany vnejsi kontejner se stejne nastavenou vyskou, ale obsahujici vnitrni prvek s jinou vyskou).

Reseni se stejnym paddingem shora i zespoda mi osetri jen pripad, kdyz vlozene "neco" ma stejnou vysku...

Takze: mam treba tuto situaci:

<style>
a {display: block; float: left; text-align: center;
   width: 100px; height: 100px; background-color: #aaaaaa;
   margin-right: 1px;}
</style>

<a href="">zalozka prvni</a>
<a href="">zalozka druha s odradkovanim</a>
<a href="">zalozka treti, jeste delsi abych ukazal o co mi jde</a>

a chci pridat vertikalni zarovnani textu v kazde 'zalozce' tak, aby kazda 'zalozka' mela stale vysku 100px a aby jednoradkovy i viceradkovy text v takove zalozce byl vertikalne vycentrovan. Pokud bych to resil tim pocitanim,
tak pro kazdy prvek vezmu: 100px jako vysku zalozky minus zmerena vyska prvku uvnitr zalozky to cele deleno dvema a mam padding-top a padding-bottom, ktery potrebuju.

[35] Vložil(a): pixy [web], 2004-08-27, 17:13 Solo | MuteČtenáři: ---

ad [34] > Á, už chápu. Vy prostě potřebujete emulovat tabulku. Nevím sice proč, ale nechápu, proč v tom případě tedy nepoužijete tabulku rovnou?

Ale pokud jde o nějaká tlačítka vedle sebe, s různě dlouhým textem, tak proč nutně používat float? Float je z prncipu definován jako prvek, který je zarovnán na horní hranu. Proč nepoužít jednoduše nějaké inline prvky? Nebo je tady prvek button. Jsou tu inline-bloky (pravda, zatím s horší podporou v browserech - ale IE je umí). Možností je dost.

Jenže vy pořád myslíte tabulkově. Vás napadne nějaký prvek, který znáte z tabulkových layoutů a pak složitě vymýšlíte, jak ho udělat pomocí CSS - namísto toho, abyste přemýšleli, jak udělat dobrou, pěknou a použitelnou stránku a vzali si k tomu CSS jako nástroj.

Já už jsem kdysi prohlašoval, že podle mě neexistuje grafický návrh, který by se nedal realizovat čistě pomocí CSS - a snad se o to veřejně vsadím... Jenže zapomenout na tabulkový layout je proces na delší lokte...

[36] Vložil(a): jirka, 2004-08-27, 17:21 Solo | MuteČtenáři: ---

no nechtel jsem tam davat tabulku, protoze jde o navigaci na webu a soucast layoutu; pro informacni obsah bych tabulku klidne vyuzil...
vyresil jsem to nakonec s vyuzitim tohoto: http://www.pixy.cz/css/zarovnavani.html

a vysledny kod dela to co chci, skoda jen, ze neni moc elegantni a ta jednoduchost css se trochu vytraci:

<style>
.outer {height:100px; overflow:hidden; background-color: #cccccc; float: left; margin-right: 1px;}
.inner {width:100px; position:relative; top:50%;}
.outer .inner a {position:relative; top:-50%; display: block; text-align: center;}
</style>

<div class="outer">
   <div class="inner">
      <a class="anchor" href="">Obsah prvku obsah prvku obsah</a>
   </div>
</div>

<div class="outer">
   <div class="inner">
      <a href="">Obsah prvku obsah prvku obsah prvku obsah prvku</a>
   </div>
</div>

<div class="outer">
   <div class="inner">
      <a href="">Obsah prvku</a>
   </div>
</div>

Nicmene to funguje a diky informacim, co jsou na tomhle webu. Skoda jen, ze jsou ukryte v archivech tohoto webu a nejdou mezi clanky na wellstyled.com a rozumne se daji najit jen fulltextovym hledanim...

[37] Vložil(a): jirka, 2004-08-27, 17:25 Solo | MuteČtenáři: ---

tak nic, s [36] resenim jsem si nakonec nepomohl, funguje to jen v IE :-(

[38] Vložil(a): Michalek [web], 2004-08-27, 17:30 Solo | MuteČtenáři: ---

[35] potrebuju narvat na urcity obsah co nejvic informaci a to lze nohuzel (podle me) pouze pouzitim tri sloupcoveho layoutu, samosebou, ze bych mohl pouzit dvou sloucovy CSS, ale nevejde se mi do toho tolik, kolik ve trech sloupcich...

Rad zapomenu tabulku, kdyz mi nekdo navrhe neco jinyho takovyhleho :-))

[39] Vložil(a): llook [web], 2004-08-27, 19:17 Solo | MuteČtenáři: ---

"...nikdo netvrdí, že CSS dokáže kompletně všechno to, co tabulky..."
Já tvrdím, že CSS dokáže to co tabulky (display: table), ale že jeden jediný prohlížeč (hádejte který;)) to nedokáže. viz http://llook.wz.cz/weblog/lackylog-web-05-2004.php#1083892523

[38] - před nějakou dobou jsem se pokusil vytvořit beztabulkovou šablonu k phpRS:
http://llook.wz.cz/phprs/
Není to nic moc, ale aspoň je na tom vidět, jak to lze. Ta šablona má dvou- i třísloupcovou verzi. Doteď jsem tam měl vystavenou dvousloupcovou protože méně je více, ale teď jsem to změnil.
Jak psal pixy, není problém vytvořit třísloupcový layout v CSS. Problém je pouze ten, že nemůžou být všechny sloupce stejně dlouhé. Pokud mají všechny sloupce stejné pozadí (jako na nemrum.cz/bg), tak ale nikdo nepozná, že mají různou dýlku.

Webu toho biskupského gymnázia ( http://www.nemrum.cz/bg/ ) bych ale vytknul především absenci sémantických značek, především nadpisů a seznamů. Je tam předivováno a přespanováno. Například <div class="blok_nadpis">. Na nadpisy snad máme značky pro nadpisy.
To je podle mě mnohem větší nedostatek než tabulkový layout!

[40] Vložil(a): Michalek [web], 2004-08-27, 19:26 Solo | MuteČtenáři: ---

[39] jj, na ten bez tabulkovy layout jsem taky reagoval a myslim, ze jsme se nejak rubali :-)

pokud dobre chapu "semanticke" znacky, je to napr. h1, h2 atd?

co se tyce blok_nadpis - priznavam, mohlo by to byt napr. h4

ale ten layout uz bych dnes taky delal jinak nez tak jak je, ovsem predelavat se mi ho nechce, protoze zatim myslim ze je dobry...

Nj, zkousel jsem web prihlasit na interval do ty diskuze ohledne webu, ale nevzali to. Takhle nemam nikoho, kdo by mi to zkritizoval. Pokud se do toho chces pustit, muzes mi poslat maila s vyctem chyb, docela by me to zajimalo (to je vyzva pro vsechny :-))

[41] Vložil(a): Michalek [web], 2004-08-27, 19:29 Solo | MuteČtenáři: ---

[39] jeste jednou, koukal si na ty tri sloupce (u tebe) v IE? nejak je to trosicku posunuty doprava...

[42] Vložil(a): llook [web], 2004-08-28, 19:32 Solo | MuteČtenáři: ---

[41] teď jsem na se na to díval. Asi si budu muset pořídit widle, jestli se chci dál věnovat webu, protože ani můj weblog se nezobrazuje korektně (přesto však použitelně!).
Dřív jsem vše kontroloval přes ieCapture, ale ten je poslední dobou pořád přetížený:(

[43] Vložil(a): E.T. [web], 2004-08-29, 08:11 Solo | MuteČtenáři: ---

Myslím, že není potřeba stavět novej web se stejně vysokejma sloupcema tj. "tabulkově". Nicméně tenhle problém se vyskytne tehdy, když se webmaster rozhodne překopat kód stránek bez redesignu - tj. aby to vypadalo totožně - tak to bylo aspoň u mě...

[44] Vložil(a): p, 2004-08-29, 16:01 Solo | MuteČtenáři: ---

[35] nechce pouzit tabulku protoze tabulka neni urcena k formatovani

cilovy stav by mel byt o tom, ze pujde oddelit definice vzhledu od obsahu a ZAROVEN pujde docilit libovolneho vzhledu

a tento pozadavek bohuzel css zatim nesplnuji, zakryvat to vycitkama vuci designerum, ze se neumi odpoutat od stareho zpusobu mysleni, je trochu smesne

nejde jen o nejake hloupe 3 sloupce, ale kolikrat musite pri tvorbe webu prehazet poradi prvku ve zdrojaku stranky, protoze by jinak neslao ostylovanim dosahnout pozadovaneho vzhledu? uz to samo o sobe je spatne

[45] Vložil(a): Michalek [web], 2004-08-29, 17:29 Solo | MuteČtenáři: ---

Kazdymu to, co se mu libi. Pokud nekdo chce pouzivat tabulky, at je pouziva; pokud chce nekdo pouzivat CSS, at je poiuziva :-)
Kazdopadne, tabulky jsou lepe pochopitelne pro zacinajici (doufam, ze mi nikdo nebude odporovat...)

[46] Vložil(a): pixy [web], 2004-08-29, 21:43 Solo | MuteČtenáři: ---

ad [44] > Teda, já tu sázku snad jednou vážně uzavřu. Tvrdím pořád a dokola, že každý design (třeba libovolný návrh stránky vytvořený ve Photoshopu) udělám čistě pomocí těch vašich "nedostatečných" CSS

[47] Vložil(a): llook [web], 2004-08-29, 23:26 Solo | MuteČtenáři: ---

[45] tou pochopitelností si nejsem až tak moc jistý. Co si pamatuju, tak při tvorbě svého prvního webu (už dávno zmizel) jsem po několika pokusech nakonec vzal příklad na Jakpsátwebu a upravil rozměry.
Kdybych se měl učit teď, tak myslím, že třeba Plaváčkův seriál o XHTML a CSS by mi přišel docela srozumitelný: http://owebu.cz/css/

[48] Vložil(a): Michalek [web], 2004-08-30, 11:47 Solo | MuteČtenáři: ---

[46] coz o to, pokud vsechno predelam do CSS, fungovat to bude, ale kdyz tam mam tu tabulku 100% tak mi ani zadnej 100% DIV nepomuze, ani dva mi nepomuzou, ani tri mi nepomuzou :-)

vsadime se :-) ale o co? :-)

[49] Vložil(a): Filip Zamorsky [web], 2004-08-30, 14:52 Solo | MuteČtenáři: ---

Kdyz si tak fandite, Pixy, muzete zkusit udelat CSS layout pro http://fashiondiary.com - ja fsak tyto stranky necham radeji v tabulkach ...

Pro vsimavce - dopredu predesilam, ze muj kod ani CSS nejsou validni, natoz abych splnoval podminky SEO - SEM ...

[50] Vložil(a): jirka, 2004-08-30, 15:07 Solo | MuteČtenáři: ---

ad [49]
tenhle priklad v css pujde a to docela elegantne. Dokonce se da zaroven udelat s chytrym nahrazovanim nadpisu obrazky. Takze v html bude treba <h1>nadpis</h1> a pomoci CSS se to nahradi tim obrazkovym ekvivalentem. Takze toto myslim by pro css layout vyzva nebyla...
blize viz http://www.quirksmode.org/dom/fir.html

[51] Vložil(a): pixy [web], 2004-08-30, 18:02 Solo | MuteČtenáři: ---

ad [49] > a) To není žádná výzva, ale pomocí CSS naprosto triviální web (co taky chcete od stránek tvořených vesměs jedním obrázkem a klikací mapou); b) A dělat bych to nechtěl/nemohl, protože všechny ty prasárny s pop-up oknama a roztahováním na celou šířku obrazovky bych opravdu neskousnul... :(

[52] Vložil(a): Filip Zamorsky [web], 2004-08-30, 21:05 Solo | MuteČtenáři: ---

ad [50] -tohle jsem zrovna na mysli neměl. Jedná se o design, který by se měl zobrazovat takřka "bod na bod" v každém browseru, na každé platformě. A jak jsem to pochopil z vašich diskuzí, tak to pomoci CSS zatím dost dobře nejde. Souhlasím však s tím, že by se měl oddělit layout od kódu - ale podle mého názoru je na to ještě brzy.

ad [51] - stránky jsou určené pro prohlížení ostatních stránek - to bude návštěvník vypisovat moji doménu pokažde znovu? Nebo hledat v historii? Mě jen štvou ty dogmatický řeči ...Vaší práce si samozřejmě vážím.

[53] Vložil(a): pixy [web], 2004-08-30, 22:25 Solo | MuteČtenáři: ---

ad [52] > Každý, kdo si ještě dnes stále myslí, že může existovat webová stránka, která je "stejná v každém browseru" (hehe), na každé platformě (búehe), nebo dokonce "bod na bod" (múehehehe), by se měl urychleně probudit, podívat se do kalendáře a občas si něco přečíst o webových technologiích. Já vás ujišťuju, že momentálně mám v počítači dvanáct browserů a vidím ten váš web minimálně v šesti až osmi různých podobách (nebo ve dvanácti, pokud budu opravdu detailista). Představa "chci, aby to vypadalo všude stejně" je největší webdesignerský naivismus.

A to jsem si skoro jist, že jste neviděl ten svůj web třeba v textovém browseru, nebo v Opeře v user modu a s vypnutými obrázky atd. To byste zjistil, že kromě informace, že jste použil GIMP a Linux, se z vašeho webu už nedozvíte vůbec nic dalšího a nedostanete se na jedinou podstránku...

A k té druhé poznámce - pardon, nevšiml jsem si původně, že se jedná o jiné weby. Kliknul jsem na Armaniho a otevřela se na mě hromada nových oken a ta stávající si svévolně změnila velikost. Omlouvám se, tohle máslo není na vaší hlavě. Ale chybou je, že jsem nepoznal, že opouštím váš web a že mi nebylo aspoň lehce naznačeno, že všechny odkazy se otevřou v nových oknech. To sem ovšem tak docela nepatří.

Ale abych se vrátil k meritu věci - ve vašem případě, kdy se nejedná tak o WWW stránky, ale prakticky jen o monolitní obrázek s jednoduchou obrázkovou mapou doplněný prostým seznamem odkazů, není skoro co řešit. S CSS by to bylo opravdu triviální, navíc s poloviční velikostí kódu stránek, většími možnostmi efektů a přitom mnohem přístupnější.

[54] Vložil(a): Roj [web], 2004-08-30, 23:48 Solo | MuteČtenáři: ---

[52][53], jesteze se da v mozille nastavit, aby mozilla ignorovala ten vsivy atribut target :-)
Takze Filipe, mas smulu, me se zadny novy okna na tvem webu nikdy neotevrou. I kdybych tam nekdy zabloudil :-)

[48] Tabulka 100%?? K cemu takova vec je dobra?
Jinak pochopit CSS je o dost jednodussi pro zacatecnika, nez tvorit nepochopitelne tabulky s rowspanama, collspanama a patnactinasobnym vnorovanim :-)

[55] Vložil(a): dgx [web], 2004-08-31, 07:19 Solo | MuteČtenáři: ---

[52] na "bod po bodu stejný web" se dávno nehraje, co třeba "slovo od slova" stejný obsah? Když budete příliš hledět na jeden pixel, unikne Vám smysl stránky jako takové.

[50] Chytré nahrazování nadpisů obrázky kolikrát ani není třeba. Těch pár fontů co se na webech používá má stále co nabídnout, stačí objevit jejich "skryté kouzlo" ;-)

Například na http://www.rockovyklic.com jsem původně o nahrazování uvažoval, ale nakonec místo toho poprvé použil (objevil) font Impact.

[56] Vložil(a): Filip Zamorsky [web], 2004-08-31, 13:40 Solo | MuteČtenáři: ---

Nejprve bych se chtel omluvit, ze nepisu tak moc "cesky" - nedavno jsem se stehoval a doma jsem zatim bez netu (taham tento textak po ruznejch platformach).

ad [54] - kdyz jsem v kafarne na woknech, tak otviram temer kazdou linku do noveho okna. Nektere weby jsou udelany tak neprehledne, ze se v nich jeden ztrati. Na Mozille si je otviram do nove tabulky - Galeon to ma vyresene asi nejlepe, protoze vam otevre novou tabulku a zustane ve stare. Mam kamarada, kterej si vypina javashity ...

ad [53] - jeste ze jsem pouzil magicke slovicko "takrka" a nechal jsem si zadni vratka. Uznamvam, ze stranky jsou stare a je potreba je vylepsit. Kdyz jsem je prvne psal, mel jsem vedle sebe komply s Linuxem, Meka a Wokna. Kamarad, kterej me ucil, si stranky prohlizel zasadne v textovem browseru a jeho nejoblibenejsi barva byla seda (a dodnes asi bude). Jedna vec je "jak to vypada" pro bezneho uzivatele a jak ve zdrojaku. O tom, ze se mi design stranek vcelku povedl svedci reference. Nemam problemy osobne (klasickou postou) komunikovat s firmami typu Jean Paul Gaultier, Pirelli nebo Hasselblad.

Dokazu si predstavit, ze ve Vasich dvanacti browserech se to hybe. Pokud se to pohnulo tak, ze to narusilo zamer, poslete mi prosim screenshot (samozrejme pokud Vam to nenarusi Vas casovy harmonogram).
  
Jak uz jsem vyse uvedl, nemam duvod menit layout stranek, ale rad bych upravil jejich kod. Chapu, ze asi mnoho casu nazbyt asi mit nebudete a ze jste si tedy otevrel jen index. Na ostatnich stranach jsem uz mapu nepouzil, ale pouzil jsem jeden obrazek jako "background" v zakladni tabulce a na nej pak pozicuji ostatni prvky - a o to mi prave slo. Muj dotaz tedy zni? Mohu pouzit CSS pro svuj layout, tak, abychom mohli byti vsichni spokojeni?
 
P.S. Lide s textovymi browsery nepatri do me cilove skupiny, ale rad jim stranky zpristupnim. Nerad bych ale pouzival komplikovane kody pro nahrazovani cehokoliv, protoze mam rad jednoduche a ciste veci.

[57] Vložil(a): pixy [web], 2004-08-31, 14:15 Solo | MuteČtenáři: ---

ad [56] > řekl jste to hezky s tou cílovou skupinou. Chápu, že módní návrháři, frikulíni, anorektické holky a kdovíkdo podobný (upřímně netuším, koho ještě podobné stránky můžou zajímat) jsou jasná cílová skupina, která má jednoznačně mainstreamový prohlížeč, mainstreamový OS, stejně cool mobil a vůbec jsou společně happy, takže nemá cenu něco řešit... Klidně si to nechte v tabulkách - ostatně ta původní debata byla trošku o něčem jiném...

Váš web by bylo snadné předělat do CSS, ale pakliže by se měla zachovat jeho podoba, možná i zbytečné. ;)

[58] Vložil(a): Filip Zamorsky [web], 2004-08-31, 16:18 Solo | MuteČtenáři: ---

diky ... a zni to hezky od cloveka, ktery je tvurcem Blesk.cz

[59] Vložil(a): pixy [web], 2004-08-31, 17:02 Solo | MuteČtenáři: ---

Díky za pochvalu. Pokud to tedy pochvala měla být - Blesk.cz je web vytvořený čistým CSS a přečtete si ho i Netscapem 1.0.

[60] Vložil(a): pavelp [web], 2004-09-01, 01:36 Solo | MuteČtenáři: ---

ad [57] co jsou to frikulíni ?

[61] Vložil(a): rl, 2004-09-01, 14:30 Solo | MuteČtenáři: ---

[60] Free, cool, in :-)

[62] Vložil(a): Václav Mach [web], 2004-09-02, 13:06 Solo | MuteČtenáři: ---

Po přečtení tohodle článku už chápu ten smutný výraz když jsem požadoval 3 stejně vysoké sloupce vedle sebe...
Jestli někoho zajímá možné řešení (nevím jestli geniální či naprosto mizerné) podívejte se na
http://www.scisoft.cz/webdesign-cz/webdesign.php (raději hned, do týdne bude asi celý layout úplně jiný)

[63] Vložil(a): DarkMaster [web], 2004-09-02, 21:57 Solo | MuteČtenáři: ---

Přesně tohle jsem potřeboval zjistit :). Lámal jsem si hlavu nad tím, jak to či ono udělat a jak správně Pixy podotýká, musím zcela změnit myšlení. Uvažuji příliš tabulkovitě :D

[64] Vložil(a): dgx [web], 2004-09-03, 06:58 Solo | MuteČtenáři: ---

Mazec je předělávat web založený na FRAMECH a tabulkách do CSS s tím, že si návštěvník nesmí všimnout změny....

Zkuste se podívat na http://www.bors.cz/cz/nd_index.php - pokud možno s Internet Explorerem. Že to vypadá na frejmový počin? Kdysi býval... ;-)

[65] Vložil(a): p, 2004-09-03, 22:00 Solo | MuteČtenáři: ---

[46]
nemel jsem na mysli funkcni web na vsech browserech, staci mi i teoreticka funkcnost pomoci cisteho css

idealem je pripravit dokument a rekneme rozumne (aby sly vsechny zamerit) oznackovat prvky v nem - a pak bez jeho zmeny navrhout zcela odlisne alternativni styly

a odpovezte popravde: menite poradi prvku v dokumentech aby jste si usnadnil stylovani? a umel by jste dosahnout stejneho zamysleneho cile bez techto zmen?

ja uznavam prevahu css nad tabulkovym designem, ale css je porad jeste nedokonale

[66] Vložil(a): p, 2004-09-03, 22:05 Solo | MuteČtenáři: ---

[46]
jeste male rypnuti ;)
pripomnela se mi nedavna oslava implementace sloupcu z css3 v mozille ->umel by jste bez teto vlastnosti ciste pomoci css (bez js) dosahnout stejneho efektu u dynamicke stranky? a ted uz muzete, jak vidite, porad je co zlepsovat

[67] Vložil(a): hippo, 2004-09-06, 18:22 Solo | MuteČtenáři: ---

[10] jenze tento priklad funguje jen v KIRK MODu. Pouzijte treba transitional hlavicku a priklad prestane fungovat 9 v mozille 0


Váš názor

Přidat nový komentář

Váš komentář

Přidávání komentářů k tomuto příspěvku již bylo ukončeno.

Chcete-li autorovi přesto sdělit nějakou podstatnou informaci, která se příspěvku týká, kontaktujte jej e-mailem.



 RSS 0.9x  Export  RDF  Export  RSS 0.9x  Komentáře  TXT  Komentáře  XHTML 1.0  Validate  W3C  CSS 2.1  Em-web  Resizable  W4D  90% dogmatic

Vygenerováno: [stránka generována dynamicky]