|
Gospoda iz vbulletina svaki tjedan izbacuju novu verziju foruma,
tako da je vec postalo naporno baviti se time. No ova nova
verzija ima neka poboljsanja, korisno je npr. sto se moze
zatraziti da prikaze sve nove postove koji su napisani na
forumu od vaseg zadnjeg dolaska. Provjerite.
Upomoc, site mi je rasturen u Netscapeu!
Napisala: Visnja Zeljeznjak ©
2001 - 2002
Nijedna dva browsera na svijetu ne prikazuju istu web stranicu jednako,
no Netscape u toj tuznoj situaciji prednjaci svojom nestandardnoscu
i brojem glavobolja koje uzrokuje. Nekoliko najcescih glavobolja
u vezi dizajna i prikaza teksta rjesavamo u ovom clanku.
Htjeli mi to priznati ili ne, mrski Netscape browser mora se podrzavati
i to do njegove prastare verzije 4.7 koja se jos uvijek koristi.
Ako dizajnirate za Internet Explorer, vas dizajn ce u Netscapeu
vjerojatno izgledati neprepoznatljivo i neupotrebljivo i to morate
srediti. Ne smijete si dozvoliti diskriminaciju surfera po browseru
zato: 1) jer ste profesionalac i 2) jer surferi previse drze do sebe
da bi surfali po trecerazrednom sajtu.
Ne vidi se pozadinska slika u tablicama
Neke web stranice (poput Webmajstori.net) imaju graficki dizajn sastavljen
od mnogo malih slika koje nisu nista drugo nego pozadina u celijama
tablica. Ako u te celije ne stavite nikakav drugi sadrzaj osim pozadinske
slike, Netscape nece prikazati pozadinu i dizajn ce biti pun rupa.
Da biste to rijesili, dovoljno je u svaku celiju (tj. u svaki <TD>
tag) staviti bilo sto, pa cak i non-breaking space ( ) ili
jedan <BR>:
<table width="100">
<tr>
<td background="pozadina.gif"> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
Izmedju slika u tablicama pojavljuje se rupa
 Objasnimo
ovu Netscape 4.7 gresku na primjeru slike s naseg sajta.
Kao sto vidite, izmedju dviju slika koje cine dizajn pojavio se razmak.
Svaka slika smjestena je u zasebnoj tablici. Taj razmak se
prikazuje zato jer tablici u koju je smjesten logo nedostaje
atribut border="0". Netscape ce pretpostaviti da
border postoji, prikazati ga u boji pozadine stranice i rasturiti
vas glamurozni dizajn.
 Cim
se u tablicu doda border="0", problem nestaje:
<TABLE
height="8" width="765"
cellSpacing="0" cellPadding="0"
border="0">
...
</TABLE>
Rupe ce se pojaviti i izmedju dviju slika unutar iste tablice ako vam
nedostaju cellspacing="0" i cellpadding="0"
atributi. Obavezno dodajte ove atribute!
<FORM> elementi prosiruju tablice i unistavaju dizajn
<INPUT> i <TEXTAREA> polja za unos teksta prikazuju se
i do 30% sire u Netscapeu 4.7 nego u Internet Exploreru. To dovodi
do toga da se kolumna tablice u koju ste smjestili ta polja prosiruje
onoliko koliko treba mjesta za najsire polje, sto neminovno rastura
dizajn.
Suzavanje tih polja nije najbolje rjesenje jer ona tako postaju preuska
kad ih se gleda u Internet Exploreru - posjetitelj ce jedva vidjeti
nekoliko slova koje je unio u ta polja.
Iskoristit cemo cinjenicu da Netscape 4.7 vrlo lose podrzava CSS,
pa ce <FORM> tekst polja biti priblizno jednako siroka. Jednostavno
cemo tekstualnom polju (ovdje je to <INPUT>) dodati CSS definiciju
sirine:
<input type="text" style="width:130px" size="15">
Netscape 4.7 ce ignorirati sirinu u STYLE atributu i prikazati SIZE
sirinu. Internet Explorer (i svi ostali moderni browseri, ukljucujuci
i Netscape 6.x) ce ignorirati SIZE atribut i prikazati sirinu koju
ste zadali s WIDTH.
Podesite si WIDTH i SIZE vrijednosti kako bi se polja prikazivala
priblizno jednako siroko.
Stranica se ne ucitava zbog nepostojeceg CSS fajla
Ako Netscape 4.7 ne moze pronaci CSS fajl koji ste definirali
u <LINK> tagu unutar <HEAD> elementa, javit ce
gresku i uopce nece htjeti prikazati stranicu. Ovaj gadni
bug moze se jednostavno ispraviti ako putanju do CSS fajla
definirate apsolutno.
Umjesto relativnog patha:
<link REL="stylesheet" HREF="/stilovi.css">
upisite cijeli, apsolutni path:
<link REL="stylesheet"
HREF="http://www.domena.com/stilovi.css">
Naravno, ovu putanju iz primjera zamijenite svojom putanjom.
Velicina slova zadana pomocu CSS-a je drukcija u Netscapeu
Znate li da se preporucuje koristenje relativnih velicina
slova (small, x-small, medium, big...) kako bi slabovidni
mogli u browseru namjestiti velicinu koja im najvise odgovara?
Ako velicinu slova u CSS-u zadate pomocu piksela ili pointova,
slabovidni ce biti osudjeni na buhice po ekranu. Takodjer, neki
ljudi preferiraju veca slova i to im pravo ne biste smjeli
oduzeti.
Nazalost, tako zadana velicina slova razlicito se prikazuje u Netscapeu.
Ono sto je pod Internet Explorerom malo, u Netscapeu je potpuno necitljivo
(npr. xx-small tekst se pod Netscapeom uopce ne da procitati). Ono
sto je u Netscapeu prihvatljivo, u ostalim je browserima preveliko.
Sreca je sto postoji jedna Javascript metoda s kojom cemo detektirati
koji browser surfer koristi. Ako koristi Netscape, ucitat ce se CSS
fajl prilagodjen Netscapeu, a ako koristi bilo koji drugi browser, ucitat
ce se normalni CSS fajl.
Prvo kreirajte dva CSS fajla, jedan za Netscape i jedan za sve ostale
browsere. Zatim umetnite sljedeci kôd u u <HEAD> sekciju web
stranice:
<script language="JavaScript">
if (navigator.appName == "Netscape")
document.write('<link rel="stylesheet"
type="text/css"
href="http://www.domena.com/netscape.css">');
else
document.write('<link rel="stylesheet"
type="text/css"
href="http://www.domena.com/standard.css">');
</script>
Putanju iz primjera zamijenite svojom putanjom.
Mi smo do ovih saznanja dosli na najtezi nacin - osjetili
smo ih na vlastitoj kozi (sajtu :-) Vi budite pametniji i
ucite na nasim greskama.
O autoru:
Visnja Zeljeznjak je Chief
Content Manager na Webmajstori.net. Na grbaci ima jos tri
sajta: Besplatne-Stvari.com,
Newsletteri.com
i Top-Lista.com. Omiljene
teme su joj web usability, pisanje za web i online marketing.
Jedna je od idejnih zacetnika ovog sajta.
|
Vi pitate, mi odgovaramo
> Kakav je ovo tag:
> <meta name=aesop content=links>)
> i cemu sluzi?
Radi se meta tagu koji koristi Aesop search engine
(www.aesop.com).
Taj se tag upotrebljava da se aesop-u da do znanja o
kojem se tipu web stranice radi, nakon cega ce se kod
prezentiranja rezultata surferu pored svakog linka prikazati
grafikica koja prezentira sadrzaj koji je na siteu.
Tako zele pomoci surferu da lakse i ugodnije pretrazuje
posto ce znati sto ga iza kojeg linka ceka. Tako postoje
kategorije: sales (pokazuje znak dolara) koja daje do
znanja da se ispod tog linka krije site na kojem je
moguce kupovati, multimedia (znak zvucnik) predstavlja
site ciji se sadrzaj sastoji od audio, video i grafickih
fileova... U gornjem tagu je kao content stavljen links
(znak karike lanca) sto znaci da se na tom siteu uglavnom
nalaze linkove na druge internet adrese.
Inace Aesop je trazilica sa prilicno malim brojem searcheva
tako da nema neke prevelike koristi gubiti vrijeme na
postavljanje ovog taga.
Na pitanje odgovorio:
Marko Radelic
|
|
Pretplatnika: 2712