CSS - slika sa leve i desne strane linka

Pozdrav svima...

Interesuje me kako pomocu CSS-a izvesti da sa leve i desne strane linka tj. list itema postavim sliku.
Pravio sam meni koji ima background-image (npr. neka uska slika koja predstavlja ivicu linka).
E sad posto su mi svi linkovi oiviceni sa leve strane, zanima me kako da poslednji link u horizontalnom meniju oivicim i sa desne strane.(crvena ivica na slici)

Hvala!

To što želiš radi se opcijom border left right
<a id="test" href="#">test</a>

#test {
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #F00;
border-left-color: #F00
}

Potpis

Kada imas cekic sve ti lici na ekser
Simplicity is the ultimate sophistication.

Mislim da se nismo razumeli....
Imam ovakav CSS za meni:



Na ovaj nacin uvek kada dodam link dobijam levu ivicu. E sad me interesuje kako da dodam istu takvu ivicu za poslednji link i sa njegove desne strane???

Evo ovako, za pocetak css ne podrzava da imas 2 background-a u isto vrijeme (CSS < v3), a kako ti dodajes tu ivicu pomocu slike (iako je u 95% slucajeva bolje da koristis border, jedino ako radi dizajna ne moze bas, on ok), moras koristiti neki trik. Sve zavisi do konkretne implementacije menija, i koliko kontrole imas nad njim (da li se automatski generise, itd...).

Mislim da CSS (barem do verzije 3) nema mogucnost selektovanja zadnjeg elementa u nekom container-u. Za to ti treba ili JS (jQuery) ili neki trik.

Mozes recimo staviti neki "fake" prazan element na kraj sa lijevim borderom. Mozes koristiti jQuery da samo za posljednji element primjenis neki style. Mozda mozes da ti parent element ima lijevi border, a onda svi child elementi desni, tako da dobijes da onaj prvi ima obe strane itd...

Daj pravu sliku menija, pa cemo malo bolje pogledati...

Potpis

My programs don’t have bugs, they just develop random features.

Sto se tice firefox-a uspeo sam :) IE mi je problem.



Sa ovim sam uspeo u firefoxu, ali u IE stavi ivicu skroz na desnu stranu menija...

I ovo moje centriranje menija ne radi u IE...jel ima neka caka za to? :)

Evo ti primer:

html:


css:


Evo ovo sam otprilike uradio a sva sustina je u tome da <ul> pokriva prvi levi kraj a <li> sve desne krajeve.

Da, to je to...ja pomocu javaScript-a menjam backround-image i zbog toga sam imao ovaj problem...
U svakom slucaju to je resenje :)

Jos me interesuje kako centrirati meni pomocu CSS a da on bude centriran i u FF i u IE...
Ovako kako sam ja centrirao dobro je u svim browser-ima osim u IE...
Jel ima neko ideju?

Ako je efekat koji želiš da postigneš to da imaš na prvom <li> levu crvenu crtu i na zadnjem <li> desnu crvenu crtu onda probaj u tvom editoru ovo i vidi da li ti odgovara, mnogo je bolje kad na sajtu nema nepotrebnih js

<head>
<style type="text/css">
#prvi {border-left:solid #F00}
#zadnji { border-right:solid #F00}
</style>
</head>

<body>
<ul>
<li><a id="prvi" href="#">test1</a></li><!--prvi link -->
<li><a href="#">test1</a></li>
<li><a href="#">test1</a></li>
<li><a id="zadnji" href="#">test1</a></li><!--zadnji link -->
</ul>
</body>

To je za te krajeve a ostalo formatiranje po želji.

Potpis

Kada imas cekic sve ti lici na ekser
Simplicity is the ultimate sophistication.

Kod menija ti je problem sto se cesto ne moze postaviti width/height fiksan (pa da se koristi margin: auto), jer je broj elemenata varijabilan. Ovo je jedan od CSS trikova:
http://matthewjamestaylor.com/...cks-full-cross-browser-support

Potpis

My programs don’t have bugs, they just develop random features.

OK, hvala...

Sve proradilo :)

vidim da si resio oba problema ali evo da pomenem i drugi nacin da se to uradi (ako nekome bude zatrebalo jos):

sto se tice tih bordera pogledaj "sliding doors" tehniku, veoma je jednostavna i korisna

sto se tice horizontalnog centriranja menija jos jedan nacin da se to postigne je da "holder" elementu (koji ima 100% width i u kome se nalazi meni) stavis text-align: center i onda ul i li elementima dodelis display: inline-block. isto veoma jednostavno :)

Potpis

rafforum.rs - Forum Računarskog Fakulteta

Probao sam i ovo...odlicno radi...hvala.

Ako ima jos predloga samo napred :)

Samo ukratko, da sad ne testiram, da li je ovo bas cross-browser rjesenje (naglasak naravno na IE6/7)?

Potpis

My programs don’t have bugs, they just develop random features.