Kako napraviti meni koji ce videti svi brouzeri

[ slamone @ 10.01.2006. 20:41 ] @

naime, ako stavim malu tabelu sa 4 td-a i u svaki sliku koju upakujem u <a> dobicu inline meni, jel tako...
medjutim IE5 nece da prihvati ovakav <a>, dakle na hover preko slike ne dogadja se nista i slika se ne ponasa kao link.
Zanima me kako izbeci ovaj problem ili kako naterati IE5 da slicice iz menija tretira kao validne linkove sto oni i jesu

Ja sam pokusao da sa CSS-om postavim da background od svakog <li> iz <ul> bude zeljena slika, i eto radi, a onda se vratim u firefoks i nema apsolutno nicega..
Primetio sam da ova varijanta radi ali ako je <ul><li> ostavljen da bude display: block, ali u mom slucaju on je li {display: inline} i to ne radi

Da se ispravim: ovo je bila i prvobitna ideja ali nikako nisam mogao da nateram FF da prikaze meni dok je IE5 pokazao, tek sam se onda odlucio za <table> sa 4 <td> i u svakim <img>
Cisto da dodam: kapiram da se ovo u kasnijim verzijama IE-a i vidi i radi super ali ja trenutno nemam IE5+ verzije, ali i hocu da mi to radi i sa IE5

Hvala na pomoci unapred. Ognjen

[ dragancesu @ 11.01.2006. 14:41 ] @

Kako si napisao nemam predstavu kako izgleda tvoj meni, ali u svakom slucaju zahtev da se vidi u svim browserima nije uopste mali. Ali resenje postoji pa pogledaj recimo http://www.sothink.com/product/dhtmlmenu/index.htm ili nesto slicno

Po reklami podrzava sve poznate i manje poznate browsere

[ slamone @ 11.01.2006. 15:24 ] @

ok aj ovako stavicu kod

html

Code:

<div id="header">
<table id="manu" cellspacing="0" cellpadding="0">

<td><a href=# id="manu1"><img src="images/layout/manu/manu_01.gif"></a></td>
<td><a href=# id="manu2"><img src="images/layout/manu/manu_02.gif"></a></td>
<td><a href=# id="manu3"><img src="images/layout/manu/manu_03.gif"></a></td>
<td><a href=# id="manu4"><img src="images/layout/manu/manu_04.gif"></a></td>

</table>

a CSS-om pozicioniram ovu tabelu uspesno i to je to

to je sada resenje koje ganjam, radi u FF ali ove slicice se ne ponasaju u IE5 kao linkovi, ne mozes da kliknes na njih, znaci ne postoji navigacija na sajtu za korisnike IE5, sem u futeru font manu ali mi je to bas mala uteha i neslavno resenje.

dakle prosla verzija koju sam ganjao ide ovako:

html

Code:

<div id="header">
<ul id="mainManu">

<li><a href=# id="manu1"></a></li>
<li><a href=# id="manu2"></a></li>
<li><a href=# id="manu3"></a></li>
<li><a href=# id="manu4"></a></li>

</ul>

opet nema potrebe da pisem CSS, uglavno pozicioniram ovaj <ul> lepo, a to je unutar svog <div id="header">, odvojim ga od vrha nekih 200px, taman ispod header slike i sto je bito:: stavim da je
#mainManu li { display: inline; haight: taj i taj; i jos tu definicija, nebitno }
zatim za svaki od <li> (oni imaju svoje id-ove) postavim da je recimo
#manu1 { background: url(putanja do slicice, za svaki manu item posebna) no-repeat top left; width: tacno onoliko px koliko je svaka slicica ponaosob;}

Naravno dobijem ono sto sam vec objasnio gore, dakle ovo radi u IE5, a uopste nece da se pojavi u FF, nema uopste slicica, neme menija..
Sada bih ja mogao da postavim pitanje, kako ovo naterati da radi, ali tu cu se vec nekako i snaci, pokusacu sam...

Vise me zanima zasto IE5 ne pokazuje <a href=# id="manu1"><img src="images/layout/manu/manu_01.gif"></a> kao link, zasto ne reaguje na sliku ubacenu u <a></a> i kako ga naterati da to uradi??

p.s. nadam se da sam ok objasnio :)

_{[Ovu poruku je menjao slamone dana 11.01.2006. u 16:26 GMT+1]}

[ dragancesu @ 12.01.2006. 16:29 ] @

Mozda bi bilo najbolje da das link prema toj strani, ovako ce ti tesko neko pomoci.

Obrati paznju da ti na FF radi kako treba, mislim da je bolji za tvoj slucaj, tacnije kod prikazuje kako si napisao bez (auto) ispravki sto IE zna da radi. Jednostavan primer ti je recimo background="AABBCC", jasno je da nedostaje # (mada kad je veliki kod tesko je primetiti). E sad, dreamveawer to prikaze lepo, IE isto tako, cak i Opera ali u FF ne radi. Sad je pitanje sta sad i ko ne radi kako treba?

[ slamone @ 20.01.2006. 13:44 ] @

e hocu javicu ovde cim postavim negde kao fazon test server,
ali bojim se da ce do tada tema da postane neaktuelna

Ali ne kapirak sta nije jasno i bez linka, mislim ne moras da vidis da bih shvatio o cemu govorim..
Najobicniji meni i umesto slova stavljene slicice, uradjene u fotoshopu.. Poenta je da sa ovim kodom IE5 nema hover, ne mozes da kliknes na njih, mislim mozes ali se ne desava nista. Kako naterati IE5 da prihvati ove slicice kao linkove, to je sve.

[ jablan @ 20.01.2006. 15:33 ] @

Probaj ovo:

Code:

<html>
<head>
<style>
a {
display: block;
background-image: url('images/menu1.png');
width:100px;
height: 20px;
}
a:hover {
background-image: url('images/menu1over.png');
}
</style>
</head>
<body>

<a href="#"></a>
</body>
</html>

[ sojic @ 21.01.2006. 14:31 ] @

Jablane.... U vezi a:hover. Vise mi se svidja ideja sa promenu pozicije slike nego ucitavanje druge slike (nema da ima problem sa preloada, ustedis na requeste i sl.).

Nadam se da znas na sta mislim. Jedan fajl duplo veci (po dimenzije) koji sadrzi dve slike. a:hover samo menjas poziciju.

[ slamone @ 21.01.2006. 15:02 ] @

Citat:

Ja sam pokusao da sa CSS-om postavim da background od svakog <li> iz <ul> bude zeljena slika, i eto radi, a onda se vratim u firefoks i nema apsolutno nicega..
Primetio sam da ova varijanta radi ali ako je <ul><li> ostavljen da bude display: block, ali u mom slucaju on je li {display: inline} i to ne radi

[ slamone @ 21.01.2006. 15:08 ] @

Citat:

sojic: Jablane.... U vezi a:hover. Vise mi se svidja ideja sa promenu pozicije slike nego ucitavanje druge slike (nema da ima problem sa preloada, ustedis na requeste i sl.).

Nadam se da znas na sta mislim. Jedan fajl duplo veci (po dimenzije) koji sadrzi dve slike. a:hover samo menjas poziciju.

Da naravno ali to je samo tehnika da odradis download jedne slike za jedan manu
da se ne bi desilo kad hoverujes da izgubis sliku i moras da cekas da brouzer downloaduje hover slicicu.
To ume da zbuni korisnika, ta tehnika uzimanja dela slike je tkz "css sprites" i to je skroz ok, ali nisam na to konkretno mislio.. ali hvala u svakom sl.

[ sojic @ 22.01.2006. 11:47 ] @

NE znam na sto mislis, ali evo ti primer: http://www.mbinc.com.mk. Pogledaj kod i slikicu http://www.mbinc.com.mk/images/navigation.png

[ slamone @ 23.01.2006. 15:24 ] @

da da to je to evo linka
http://www.alistapart.com/articles/sprites/

by the way sredio sam menu pa kad budem okacio stavicu ovde link da moze da se pogleda

hvala vam na predlozima i sugestijama, srecan rad