[es] - kako napraviti sliku pored menija u CSS

crnogorac081
M-N (Pg)

Član broj: 13088
Poruke: 179
195.242.169.*

Profil

kako napraviti sliku pored menija u CSS

^{30.09.2008. u 14:13 - pre 189 meseci}

kao npr na sajtu livescore, da postavim neki img pored menija pa kad se postavi mis preko te stavke da se slika promijeni.. ??

Aleksandar Ružičić
Software Architect, Appricot d.o.o.
Beograd

Član broj: 26939
Poruke: 2881

Jabber: krckoorascic@gmail.com
Sajt: krcko.net

+44 Profil

Re: kako napraviti sliku pored menija u CSS

^{30.09.2008. u 14:56 - pre 189 meseci}

Code:

.rolover .hover, .rolover:hover .normal { display: none; }
.rolover:hover .hover, .rolover .normal { display: inline; }

Code:

<a href="#" class="rolover"><img src="normal-state-picture.png" class="normal" /><img src="hovered-state-picture.png" class="hover" /></a>

rafforum.rs - Forum Računarskog Fakulteta

crnogorac081
M-N (Pg)

Član broj: 13088
Poruke: 179
195.242.169.*

Profil

Re: kako napraviti sliku pored menija u CSS

^{30.09.2008. u 15:18 - pre 189 meseci}

jel se i donji code pise u istom css fajlu ?

Aleksandar Ružičić
Software Architect, Appricot d.o.o.
Beograd

Član broj: 26939
Poruke: 2881

Jabber: krckoorascic@gmail.com
Sajt: krcko.net

+44 Profil

Re: kako napraviti sliku pored menija u CSS

^{30.09.2008. u 15:48 - pre 189 meseci}

prvi je css drugi ti je html

rafforum.rs - Forum Računarskog Fakulteta

enLIGHTen
Beograd

Član broj: 66314
Poruke: 33
85.222.176.*

Profil

Re: kako napraviti sliku pored menija u CSS

^{30.09.2008. u 18:44 - pre 189 meseci}

Moze se upotrebiti trick postizanja rollover-a sa samo jednom slikom (koja se na startu ucita).
Primer.
Naime, zeljene slike (original i rollover) su sirine 120px i visine 60px.Nameste se jedna pored druge, cime ukupna duzina iznosi 240px, dok je visina nepromenjena.
Zatim pomocu pseudo-klasa se definise pozadina koju reprezentuje leva polovina, dok :hover aktivira desnu polovinu iste slike, tako da se rollover efekat postize pomeranjem slike ulevo.

Napomena: u <a> odeljku nema <img> elementa.

html

Code:
<a href="link.html" class="rollover">naziv_slike</a>

css

Code:
.rollover    {
    display: block;
    width: 240px;
    height: 60px;
    background-image: url(rollover.gif);
    background-repeat: no-repeat;
    text-indent: -9999px;
}
a.rollover:link, a.rollover:visited, a.rollover:active    {
    background: url(rollover.gif) no-repeat;
}
a.rollover:hover    {
    background-position: -120px 0;
}

Aleksandar Ružičić
Software Architect, Appricot d.o.o.
Beograd

Član broj: 26939
Poruke: 2881

Jabber: krckoorascic@gmail.com
Sajt: krcko.net

+44 Profil

Re: kako napraviti sliku pored menija u CSS

^{30.09.2008. u 23:07 - pre 189 meseci}

moze i tako naravno ali nije to trazio (mada nisam bas siguran ni da je on siguran sta mu tacno treba) a i nedostatak te tehnike je sto element mora (uglavnom) da bude display:block da bi se videla cela pozadinska slika, a <a> element je inline...

rafforum.rs - Forum Računarskog Fakulteta

enLIGHTen
Beograd

Član broj: 66314
Poruke: 33
*.opera-mini.net.

Profil

Re: kako napraviti sliku pored menija u CSS

^{01.10.2008. u 01:48 - pre 189 meseci}

Svaki pristup krase prednosti i mane (recimo sa dva img-a rizikuje pojavljivanje "lag-ova" pri brzom prelasku misa ili usled zaglusenja konekcije), ali korisno je upoznati sto vise varijacija, kako bi se nacinio pravi izbor...

crnogorac081
M-N (Pg)

Član broj: 13088
Poruke: 179
78.155.45.*

Profil

Re: kako napraviti sliku pored menija u CSS

^{01.10.2008. u 01:50 - pre 189 meseci}

pa ja sam fino objasnio, istu foru ko na livescore da ubacim u svoj template... znaci ono na onmouseover ide jedna slika a kad se makne druga.. e sad to ja umijem u code-u napisati kada pisem obicni html, samo ne znam kako da integrisem u CSS i index.php u templateu... valjda je to taj code sto je Aleksandar napisao ? nadam se da me ukapirao :)

/////////

Evo provalio sam jedan dio

Code:

#avmenu li a {
font-weight:bold;
height:20px;
text-decoration:none;color:#505050;
display:block;
padding:6px 0 0 10px;
background:#ffffff url(img/menu.gif) bottom left no-repeat;
border-top:1px solid #d8d8d8;
border-right:1px solid #d8d8d8;
border-bottom:1px solid #d8d8d8;
border-left:4px solid #cccccc;
}

e sad mi u tom polju gdje mi je stavka menija stoji naziv stavke i ova slika lijevo ali posto je backgr. dio teksta ide iza slike... kako da pomjerim ovo za sirinu slike ?

_{[Ovu poruku je menjao crnogorac081 dana 01.10.2008. u 03:30 GMT+1]}

enLIGHTen
Beograd

Član broj: 66314
Poruke: 33
85.222.176.*

Profil

Re: kako napraviti sliku pored menija u CSS

^{01.10.2008. u 13:46 - pre 189 meseci}

Ukoliko sam dobro razumeo, trenutni problem je u padding left,

Code:
padding:6px 0 0 10px

ovde ovih 10px treba povecati kako bi se tekst sa linka pomerio udesno.

Sto se tice rollover-a, Aleksandar je ponudio elegantno i prakticno resenje, tim pre ukoliko je u pitanju slicica manjih dimenzija.

crnogorac081
M-N (Pg)

Član broj: 13088
Poruke: 179
195.242.169.*

Profil

Re: kako napraviti sliku pored menija u CSS

^{01.10.2008. u 14:36 - pre 189 meseci}

e hvala proradilo je :)