Cudno cimanje menija pri slicici na hover svojstvu?

[USBboy]

Pozdrav, imam jedan mali problem sa menijem.
Pokusavam da ubacim neku slicicu koja bi se pojavljivala iza svake stavke u meniju na hover svojstvu. Slicica je png, i pojavljuje se kada se misem predje preko stavke menija. Medjutim iamam problem, kada pokusavam da predjem preko svih stavki menija, posto se javlja kao neko "Cimanje" celog prozora i svi elementi se nekako "zatresu" i to traje sve dok pregledavam meni.

Pokusao sam da na hover stavim:

backround: none;

moze li pomoc kako ovo da resim?

Kod:

<div id="glavni_meni">
<ul>

<li><a href="index.html">Početna</a></li>
<li><a href="o_nama.html">O nama</a></li>
<li><a href="proizvodi.html">Proizvodi</a></li>
<li><a href="kontakt.html">Kontakt</a></li>

</ul>

</div>

#glavni_meni {

background: url(images/meni_slice.jpg) repeat-x;
width:990px;
height:33px;
padding: 17px 0 10px;
text-align:center;

}


#glavni_meni ul {
padding: 0;
margin: 0 auto;
max-width:990px;
font: bold 14px/15px Arial, Helvetica, sans-serif;
}

#glavni_meni li {
padding: 0;
color:#ffffff;
text-decoration:none;
display:inline-block;
margin: 0 15px 0 0;

}

#glavni_meni ul li a{

color:#ffffff;
text-decoration:none;
background:none;
}

#meni ul li a:hover{
color:#FFF;
background: transparent url(images/cover.png) no-repeat; width: 70px; height:25px;

}

[vili]

Ne znam da li si primetio, ali link (a tag) ti nema definisanu sirinu i visinu u normalnom stanju, vec samo na hover, pa je i logicno da ce doci do nekog "mrdanja".

[zlatiborac]

Ja sam za to da se u Client scripting sekciji foruma kao obaveza prilikom postavljanja ovakvih pitanja mora postaviti i link koji vodi ka stranici koja je problematichna. 90% postova se zasniva na tome shto neko postavi kod i misli da svi imaju vremena da detaljno pregledaju svaku liniju i da gatamo koje su dimenzije slika (tipa images/cover.png). Nevidim gde je problem pa ljudi izbegavaju tu praksu? Jedino ako nije neki supertajni projekat pa je zabranjeno ali i onda moze da se izvuche problematichni segment na jednu stranicu pa onda da se pogleda...
A ima i onih koji ni kod nece da postave. Ti valjda misle da smo mi Merlini ili shta vec.

[USBboy]

@vili

razumem sta hoces da kazes, pokusacu vec nesto...

@zlatiborac

Slazem se sa tobom da nije jednostavno pomagati drugima, jer je ipak ovo forum i neophodan je dobar uvid u problem, a ovde se moze desiti da vrlo lako dodje do nekog nesporazuma.
Pored svega forumasi trebaju da cene vas trud, jer se kroz tu pomoc uci, a vi nemate odgovarajucu satisfakciju nakon resavanja necijeg problema. Licno, puno ste pomogli i nemam zamerke na vas i vase komentare.
Sto se tice linka ka sajtu, smatram da je pozeljno ali da ne bi trebalo biti i obavezno i mislim da bi to trebalo da bude licno odluka postavljaca posta.
Naravno da bi verovatno pomoglo da se brze resi problem, to stoji.
Ali mozda neko jednostavno nije siguran da li je spreman da svoj rad iznese u javnost (ovo je ipak javnost), gde rad moze biti podlozan raznim kritikama na koje on nije spreman. Mozda bi to dovelo da ga demotivise da radi dalje? Osetljiva je to tema, jer smo ovde da ucimo.
Ja predlazem da se urade podsekcije foruma za pocetnike client scriptinga, jer ovako se svi postovi mesaju.

Pozz

[Gosevski]

^ Pa iskreno kad vidim ovako kod, nemam nameru da se udubljujem nesto preterano da provalim gde ti je greska. Da si ubacio demo page neki verovatno bih ti rekao gresku i bez gledanja koda. A ako je tvoj projekat supertajni, sumnjam da ti je onda i potrebna pomoc oko ovako nekih pocetnickih stvari.

[Trunks]

Nije problem ko je početnik i ko nije, samo bi stvarno bilo lakše ljudima da pomognu ako se nešto okači online. Ne moraš prikazivati dizajn, dovoljno je tih par div tagova, sličica i problematičan deo CSS-a da okačiš negde.

@USBboy: da ne shvatiš lično, ovo pričam uopšteno. U tvom konkretnom slučaju svakako nije neophodno jer se odmah vidi iz koda, ali je uvek poželjno.

[zlatiborac]

Nikoga ja nisam kritikovao, nego kazem samo kao i Gosevski, da kad vidim parche koda izbacheno ovako na stranicu stvarno odmah izgubim zelju da pomognem, jer nemam vremena (a i opekao sam se vishe puta) da sedim i gledam shta je ko pisao i kako je zamislio sve u svojoj glavi (kazem to jer, a i Trunks zna da smo nekoliko puta diskutovali privatno o tome, ne pishemo svi istovetno CSS kod a kamoli neki ozbiljniji).
Ti si generalno samo trebao da ovaj kod koji si stavio ovde, prekopirash na neku praznu HTML stranicu, dodash pre njega <html><body>, zatvorish iste, i linkujesh samo ka svom CSS fajlu kako bi pokupio definicije. I odgovor bi dobio odmah, a chak mozda i neki savet shta josh da promenish.
Nismo mi ovde zli, nego samo, ako nauchish da poshtujesh tudje vreme, i tvoje ce vredeti mnogo vishe.

[hiSamuraj]

^ Pa iskreno kad vidim ovako kod, nemam nameru da se udubljujem nesto preterano da provalim gde ti je greska. Da si ubacio demo page neki verovatno bih ti rekao gresku i bez gledanja koda. A ako je tvoj projekat supertajni, sumnjam da ti je onda i potrebna pomoc oko ovako nekih pocetnickih stvari.

Isti slucaj samnom, samo sam preleteo okom preko koda. Ne da me mrzi da ga citam, nego sam poceo da mrzim kodiranje, joj sto to zna biti naporno. I nema potrebe da krijes rad, mislim uvek mozes napraviti najobicnije kockice i inekoliko boja da bi predstavio problem. Na taj nacin ces sacuvati svoj "originalni" dizajn ili sta god vec da krijes.

Eve ja cu da otkrijem svoju "tajnu" pff, nazovimo je tajnom....
Kako ja radim ono sto neznam a treba mi hitno: GOOGLE!!! Naucis termine i izraze, engleski obavezno i guglaj.
Eve i ja sam skoro nesto radio http://www.dizajnzona.com/forums/index.php...=90220&st=0, meshavina flesha html-a a nista u pocetku nisam znao sto se tice kodiranja u fleshu. Ma nisam znao ni buton da linkujem kako treba i provalio sam sve to sto mi je trebalo, cak sam uspeo i da zavrsim i nokog nisam nigde pitao jer nemam strpljenja danima da cekam na neki odgovor koji mogu i sam saznati uz malo cimanja, a i brze je. Bas ako nemogu da sam nesto shvatim ili nemogu naci guglom, ondak tek pitam ali samo za smernice.

Evo da nebude da samo filozofiram uzeo sam testirati kod u drimvejver i nista, meni se nista nepomera, verovatno fali i zavisi od ostalog koda, nemogu nista da zakljucim iz samo ovog. Mozda problem prave slicice, ili png, ako nisi dobro odsekao u fotosopu pravit ce problem i u pixel.

[vili]

Jedan savet za USBboy, a i ostale - ukoliko zelite da koristite pozadinske slike za linkove, a pogotovo u navigaciji, anchor element (a) mora da bude block (display: block ili inline-block)

[zlatiborac]

Sad im samo objasni kada koristiti block a kada inline-block i zashto

[USBboy]

Sad im samo objasni kada koristiti block a kada inline-block i zashto

Da, definitivno je dobro da se ubaci i neki live primer, sto da ne, za ubuduce zbog lakse analize, mada je i vazna citljivost samog koda tj da nije tek tako nabacano. Generalno ovde svi treba da pomazu jedni drugima i da postoji neka online kolegijalnost

[zlatiborac]

Pa to bi bilo lako da si ti stavio live primer tvog problema ovako sumnjam da ce da uradi osim da objasni shta se zadrzava kad se koristi inline a shta ne

[vili]

Evo jedan jako koristan tekst o razlikama izmedju block (sa float:left) i inline-block, koje su prednosti i koje mane svakog od njih: http://www.ternstyle.us/blog/float-vs-inline-block

A evo i banalizovanog objasnjenja zasto za link sa pozadinskom slikom treba koristiti display:block ili inline-block:
anchor element (a) je po prirodi inline element i kao takav (sama rec kaze in-line) nema velicinu, vec zauzima samo onoliko prostora koji zauzme njegov sadrzaj. Ako hoces tom elementu da dodelis neke dimenzije, on mora da bude block (ili inline-block).

[USBboy]

Drugari, resio sam problem cim mi je jos @vili preporucio da mi fale definisane dimenzije u a linku, pored onih u hoveru.

Ostatak diskusije je bio posvecen necemu drugom ali verovatno korisnom

Dok ovako zustro niste reagovali ne bi ni razmisljao da vam je potreban live primer.
Do sada znam da je uvek bio dovoljan samo kod, da sam znao da treba drugacije, uradio bih po pravilima. Pravila su pravila i moraju se postovati!

Pozz

[vili]

Ponekad je kod dovoljan, ali nekad i nije. Da bi i sebi i drugima uskratio muke, najbolje je postaviti primer online.

[Trunks]

USBboy: ma tebe smo slučajno nagazili, izvini, bilo je brda ljudi pre toga pa zato.