organizacija thumbnailova

[AngalotH]

recimo da imam neke thumbnailove (100px dulja stranica), oni mi otvaraju popupove, a ja ih zelim lijepo poslozit, sad me zanima, je li dobra ideja ovdje koristit tablice, ili nekako drugacije, posto radim s cssom?

Ja sam probao ovako:

Code:

... <a href="javascript:popup('photos/photo_1.htm')">    <div class="imgcontainer" style=" background-image: url(thumbnails/thumb_11.jpg); ">&nbsp;</div> </a> <a href="javascript:popup('photos/photo_2.htm')">    <div class="imgcontainer" style=" background-image: url(thumbnails/thumb_2.jpg); ">&nbsp;</div> </a> ...

i u vanjskom .css fajlu:

Code:

.imgcontainer {    position: static;    height: 100px;    width: 100px;    float: left;    padding: 10px;    background: no-repeat scroll center center; } .imgcontainer:hover { background-color: #FFCCCC; }

i to mi se sve lijepo poslozi kao i tablice, ali problem je kaj mi IE nece procitat vanjski css (.imgcontainer), valjda zato sto ga zanemari zbog inline cssa. Firefox mi prikaze oba cssa. Jel postoji kakav fix za to ili da uzmem tablice?

[Sulien]

u ovom kodu što si napisao sve je apsolutno krivo:

1. DIV se ne može nalaziti unutar A
   
2. href="javascript: bla bla" ... ovo si naučio krivo: ne postoji javascript protokol, koristi href="#" i onclick="bla bla neki javascript"
   
3. DIV bi trebao sadržati thumbnail kao IMG koji eventualno ima ALT atribut a ne samo jedan space i thumb kao CSS background

nakon što odradiš dobro HTML moći ćeš uredno floatati stvari lijevo i radit će u svim browserima ako su thumbovi iste visine

[gog]

Sulien wrote:

[*]href="javascript: bla bla" ... ovo si naučio krivo: ne postoji javascript protokol, koristi href="#" i onclick="bla bla neki javascript"

Krivo, koristi <a href="putanja_do_full_size_fotke" onclick="javascript...."> tako da i oni sa isključenim javascriptom mogu doći do slika...

[Sulien]

gog, hvala

toliko sam u zadnje vrijeme u hash-evima da sam smetnuo sa uma onsove unobtrusive i accessible skriptiranja

[nel`chee]

za lijepo ih poslozit:

Code:

<ul class="gallery"> <li><a href="link_do_slike.jpg"><img src="..." /></a></li> <li><a href="link_do_slike.jpg"><img src="..." /></a></li> <li><a href="link_do_slike.jpg"><img src="..." /></a></li> </ul>

css nesto kao

Code:

.galerija li {list-style: none; display: inline;} .galerija li a {float: left;}

plus jos vrlo lako dodas margine, bordere, sto hoces...

[lekke]

Evo ja baš radim jednu xhtml galeriju, dakle thumbovi kao linkovi na veće slike, i odlučio sam da site prvo mora biti mega funkcionalan u slučaju da su stylesheeti isključeni. Stvar rješavam unordered listom sa imenima slika (i nekim detaljima), a thumb se u nestiliziranoj verziji ne pojavljuje. U stiliziranoj ga se vidi, prikazujem ga kao neponavljajući background list itema u lijevom dijelu, dok je tekst paddingom pomaknut tako da izgleda da se pojavljuje desno od thumba. Znači, nešto kao u gornjem postu od nel'chee, samo što ne koristim img tag unutar LI-a.

Vjerujem da ovaj princip sajtu daje maksimalni useability. Galerija će bit gotova za dan-dva, moram samo uloviti 2-3h vremena da isprogramiram kategorije za thumbove, pa da to mogu koristiti kao engine općenito.

[gog]

Ja vjerujem da je to totalno nepotrebno. Za početak, što mislite koliko imate korisnika koji surfaju vašim site-om sa isključenim stilovima, lynxom ili nećim sličnim? Vjerojatno manje nego korisnika Mac/IE5-ice...

A ako baš netko ima isključene stilove, ako je to napravio zbog uštede bandwith-a ili čega već onda si zna isključiti i slike.

Svima drugima site nije accessible, jerbo ne vide thumbnailove...

Google ne može indeksirati slike, ni alt tagove, što donekle smanjuje i količinu posjeta sa pretraživaća...

My 0.02$

[lekke]

gog wrote:

Ja vjerujem da je to totalno nepotrebno. Za početak, što mislite koliko imate korisnika koji surfaju vašim site-om sa isključenim stilovima, lynxom ili nećim sličnim? Vjerojatno manje nego korisnika Mac/IE5-ice... A ako baš netko ima isključene stilove, ako je to napravio zbog uštede bandwith-a ili čega već onda si zna isključiti i slike. Svima drugima site nije accessible, jerbo ne vide thumbnailove... Google ne može indeksirati slike, ni alt tagove, što donekle smanjuje i količinu posjeta sa pretraživaća... My 0.02$

spremi ih nazad u dzep i ponovno procitaj sto sam napisao
tko je rekao da svima drugima site nije accessible?! Site je kompletno funkcionalan i thumbnailove vidis u svakom browseru, jedino sto kad dodjes sa Pocket PCa, small screen tablet PCa, terminala, mobitela sa html browserima i sl., neces imat bijelu stranicu (ignorirani css) s nabacanim slikama, nego fino listu s imenima i opisom, pa otvoris sto te zanima. A google ce bome indeksirati sve opise.

Sto mogu, otkad sam bio prisiljen radit AAA verziju jednog web portala, postao sam Osvijesten. A i kad submitam site ekipi na Stylegalu, nebuju mi odma odjebali site jer iskljucivanje cssa i javascripta je prvo kaj naprave...FYI

[gog]

Ja da dođem sa pda-om više bih volio potrošiti ekstra bw-tha da vidim thumbnailove, nego da recimo otvorim sliku koja me ne zanima... slika ipak vrijedi više od riječi..

Što se gugleta tiče, neće vidjeti <img alt="...

Da, znam da gledaju kako site izgleda bez js-a i css-a...

Nego, kada već ciljaš na prijenosne uređaje, znaš li da je postotak njih koji ignoriraju css jako mali. Isto kao što navodno nije baš prevelik niti broj browsera koji prihvaćaju <style media="handheld"...> kao nešto što je njima namijenjeno...

Nego, zna li netko kakva je podrška za dijakritičke znakove na ručnim računalima? Od onoga što sam ja vidio iso-8859-2 je bolje riješenje od UTF-8, nažalost...

[nel`chee]

nemam pojma, nego: moja Nokia ne ignorira stylesheet probala sam jednom gledat svoju stranicu i razocarala sam se jako.

[lekke]

gog wrote:

Nego, kada već ciljaš na prijenosne uređaje, znaš li da je postotak njih koji ignoriraju css jako mali. Isto kao što navodno nije baš prevelik niti broj browsera koji prihvaćaju <style media="handheld"...> kao nešto što je njima namijenjeno...

Mislim da se nismo razumjeli u startu... ja ne provjeravam s kakvog se uredjaja zahtjeva stranica pa da serviram dokument u odnosu na to... ne, ja samo napravim nestiliziranu verziju ljepsom... full mi je glupo gledat slike i onda odma do njih tekst poravnan sa dnom iste

zanimljivo ovo sa codepageom... ja recimo hr stranice serviram pod win 1250 i jos nisam uocio problema

[carr]

nel`chee wrote:

nemam pojma, nego: moja Nokia ne ignorira stylesheet probala sam jednom gledat svoju stranicu i razocarala sam se jako.

probaj napraviti poseban stylesheet za mobitele, mozda na to reagira.

[che.UP]

lekke wrote:

U stiliziranoj ga se vidi, prikazujem ga kao neponavljajući background list itema u lijevom dijelu, dok je tekst paddingom pomaknut tako da izgleda da se pojavljuje desno od thumba. Znači, nešto kao u gornjem postu od nel'chee, samo što ne koristim img tag unutar LI-a.

ovo mi je totalno bezveze, pa slike su content, zasto ih pobogu stavljati kao background slike?

[Sulien]

Slike su content i trebaju biti u IMG i točka.

[gog]

lekke wrote:

stranica pa da serviram dokument u odnosu na to... ne, ja samo napravim nestiliziranu verziju ljepsom... full mi je glupo gledat slike i onda odma do njih tekst poravnan sa dnom iste

Zakaj to radiš, tko normalan gleda web-ove bez style-sheetova

lekke wrote:

zanimljivo ovo sa codepageom... ja recimo hr stranice serviram pod win 1250 i jos nisam uocio problema

Mora da su ti posjetitelji sa Mac-ovima neizmjerno zahvalni

[lekke]

gog wrote:

lekke wrote: stranica pa da serviram dokument u odnosu na to... ne, ja samo napravim nestiliziranu verziju ljepsom... full mi je glupo gledat slike i onda odma do njih tekst poravnan sa dnom iste Zakaj to radiš, tko normalan gleda web-ove bez style-sheetova

Exactly. Ja ne zelim da mi samo "normalni" mogu browsat po siteu, nego zelim da mogu SVI. Pogledaj malo gore, napisao sam ti da sam postao jako osvijesten sto se tice A/A/A compliancea. Jebiga, jednostavno se ne mogu naterat da ignoriram takve stvari, _svaki_ site koji radim izgleda super bez styleova te se trudim imati ih i semanticki dobro slozenim; al ovo je prvi put da to primjenjujem i na galeriju. a skoro nista dodatnog efforta.

gog wrote:

lekke wrote: zanimljivo ovo sa codepageom... ja recimo hr stranice serviram pod win 1250 i jos nisam uocio problema Mora da su ti posjetitelji sa Mac-ovima neizmjerno zahvalni

sta ti mislis da jedino browseri pod windowsima podrzavaju razne kodne stranice?

[gog]

lekke wrote:

Exactly. Ja ne zelim da mi samo "normalni" mogu browsat po siteu, nego zelim da mogu SVI. Pogledaj malo gore, napisao sam ti da sam postao jako osvijesten sto se tice A/A/A compliancea. Jebiga, jednostavno se ne mogu naterat da ignoriram takve stvari, _svaki_ site koji radim izgleda super bez styleova te se trudim imati ih i semanticki dobro slozenim; al ovo je prvi put da to primjenjujem i na galeriju. a skoro nista dodatnog efforta.

Po meni to nema nikakve veze sa accessibilitijem, ti thumbnailovi su dio dokumenta, ne ukras. Zašto bi stavljanje slike bilo semantički neispravno?

lekke wrote:

sta ti mislis da jedino browseri pod windowsima podrzavaju razne kodne stranice?

Pa iskreno ne znam točno, znam da se Macovci ponekad bune, znam da još nisam vidio normalnu sliku WEB-a dana u Jutarnjem (ne vide se dijakritički znakovi) i znam da win-1250 nije standard, pa kad već radiš sve po standardima zašto se prikloniti Microsoftovoj izmišljotini kada imaš na raspolaganju 2 odlična _standarda_ iso-8859-2 i utf-8...

[lekke]

gog wrote:

Po meni to nema nikakve veze sa accessibilitijem, ti thumbnailovi su dio dokumenta, ne ukras. Zašto bi stavljanje slike bilo semantički neispravno?

nekako sve vise i vise imam osjecaj da pricamo o totalno razlicitim stvarima. imam fakin popis galerija, svaka galerija ima svoje ime i property polja, te nekakav thumbnailic koji totalno NIJE krucijalni dio sadrzaja i ne zelim da mi njegovo pojavljivanje unutar list itema u nestiliziranom prikazu narusava estetiku... mislim end of story, nije mi jasno sto mi pokusavas dokazati, kad znam da radim ispravnu stvar

gog wrote:

Pa iskreno ne znam točno, znam da se Macovci ponekad bune, znam da još nisam vidio normalnu sliku WEB-a dana u Jutarnjem (ne vide se dijakritički znakovi) i znam da win-1250 nije standard, pa kad već radiš sve po standardima zašto se prikloniti Microsoftovoj izmišljotini kada imaš na raspolaganju 2 odlična _standarda_ iso-8859-2 i utf-8...

Da ti odam jednu tajnu? Ja sam macovac
A i Win-1250, koliko god bila microsoftova izmisljotina, JEST standard. Mozda ne preferirani, ali jest.
Razlog zasto ja koristim win-1250 je zato sto recimo imam CMS i svi autori osim mene sjede za windows kantama i ne koriste svi postene browsere, tako da zelim izbjec i najmanju mogucnost da se sjebu HR znakovi

anyway, otisli smo off topic a i ja mislim da sam napisao sve sto sam trebao. mozemo nastavit u private tho, ako ti jos trebam sto razlagat

[lekke]

@gog: krep, pa kud bas samo msn imas bas sam te htio dodat u IM, vidim da bi se mogli pametno pospikat

[gog]

Ma sve imam, samo nisam unio Mirandu trošim...

[AngalotH]

Hvala na savjetima, evo stavio sam img (tako je bilo u pocetku, al ja se majmun nisam sjetio da ih sve napravim 100x100 u png) samo ne znam kako jos rijesit popup.
Evo kako galerija trenutno izgleda:


Javascript:

Code:

<script type="text/javascript"> <!-- function popup(xx) { w2 = window.open(xx,"w22","borders=0,toolbar=0,directories=0,location=0,status=0,menubar=0,scrollbars=0,resizable=0,left=277,top=40,width=470,height=560"); w2.focus(); } //--> </script>

Code:

<a href="photos/photo1.htm" onclick="popup('photos/photo1.htm')" ><img alt="photo1" src="thumbnails/thumb_1.png" /></a>

Kad tako stavim onda mi i u istom prozoru i u popup otvara (jasno mi je zasto, al ne znam sredit tako da mi onclick otvara link pod href-om, a li da koristi funkciju popup). Ja skoro pa nemam pojma u javacriptu, pa zato molim pomoc. Hvala unaprijed

[nel`chee]

Code:

<a href="photos/photo1.htm" onclick="popup('photos/photo1.htm'); return false;" ><img alt="photo1" src="thumbnails/thumb_1.png" /></a>

mislim da je ovako. neka me netko ispravi ako nije.

[AngalotH]

Radi, thx. Sad je sve u redu