[es] - CSS - slika sa leve i desne strane linka

mish_ns
Miloš Krstin

Član broj: 159930
Poruke: 1105
212.178.240.*

+18 Profil

CSS - slika sa leve i desne strane linka

^{23.12.2010. u 23:30 - pre 162 meseci}

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!

Prikačeni fajlovi

slika.PNG - 1.63k

Odgovor na temu

SStudio

Član broj: 254071
Poruke: 586

+308 Profil

Re: CSS - slika sa leve i desne strane linka

^{24.12.2010. u 01:30 - pre 162 meseci}

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
}

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

Odgovor na temu

mish_ns
Miloš Krstin

Član broj: 159930
Poruke: 1105
..106.109.adsl.dyn.beotel.net.

+18 Profil

Re: CSS - slika sa leve i desne strane linka

^{24.12.2010. u 09:12 - pre 162 meseci}

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

Code:

#menu ul {
    margin: 1px;
    padding: 0;
    list-style: none;
    position: relative;
    left: 50%;
    float: left;
}

#menu li {
    display: inline;
    background: url(images/img03.gif) no-repeat; /*img03 je slika ivice*/
    position:relative;
    float:left;
    right:50%;
}

#menu a {
    display: block;
    float: left;
    padding: 17px 20px 17px 20px;
    text-transform: uppercase;
    text-decoration: none;
    font: bold 12px "Trebuchet MS", Arial, Helvetica, sans-serif;
    color: #D8D8D8;
}
.
.
.

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???

Odgovor na temu

Sapphire
Denis Biondić
.NET software developer
Nürnberg, Germany

Član broj: 213086
Poruke: 290
212.39.113.*

+6 Profil

Re: CSS - slika sa leve i desne strane linka

^{24.12.2010. u 09:38 - pre 162 meseci}

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...

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

Odgovor na temu

mish_ns
Miloš Krstin

Član broj: 159930
Poruke: 1105
..106.109.adsl.dyn.beotel.net.

+18 Profil

Re: CSS - slika sa leve i desne strane linka

^{24.12.2010. u 09:51 - pre 162 meseci}

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

Code:

<li><img style="float:right" src="images/img03.gif" alt="desna ivica"/><a href="#kontakt" >Kontakt</a> </li>

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? :)

Prikačeni fajlovi

meni.PNG - 6.91k

meniIE.PNG - 7.78k

Odgovor na temu

s4djan
Student
Tu iza coska

Član broj: 220356
Poruke: 82
*.adsl.eunet.rs.

Sajt: www.erecepti.com

+2 Profil

Re: CSS - slika sa leve i desne strane linka

^{24.12.2010. u 10:39 - pre 162 meseci}

Evo ti primer:

html:

Code:

<div class="holder">
<ul>
    <li><a href="#">item</a></li>
    <li><a href="#">item</a></li>
    <li><a href="#">item</a></li>
    <li><a href="#">item</a></li>
    <li><a href="#">item</a></li>
    <li><a href="#">item</a></li>
</ul>
</div>

css:

Code:

.holder{
    height: 45px
}
/* II */
.holder ul {
    list-style: none;
    margin: 0 10px;
    padding: 0;
    height: 100%;
    background: transparent url(images/img03.gif) bottom left no-repeat;
}
.holder li {
    float: left;
    height: 100%;
    padding: 0 15px;
    background: transparent url(images/img03.gif) bottom right no-repeat;
}

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

Odgovor na temu

mish_ns
Miloš Krstin

Član broj: 159930
Poruke: 1105
..106.109.adsl.dyn.beotel.net.

+18 Profil

Re: CSS - slika sa leve i desne strane linka

^{24.12.2010. u 12:33 - pre 162 meseci}

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?

Odgovor na temu

SStudio

Član broj: 254071
Poruke: 586

+308 Profil

Re: CSS - slika sa leve i desne strane linka

^{24.12.2010. u 12:47 - pre 162 meseci}

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>
<li><a href="#">test1</a></li>
<li><a href="#">test1</a></li>
<li><a id="zadnji" href="#">test1</a></li>
</ul>
</body>

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

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

Odgovor na temu

Sapphire
Denis Biondić
.NET software developer
Nürnberg, Germany

Član broj: 213086
Poruke: 290
212.39.113.*

+6 Profil

Re: CSS - slika sa leve i desne strane linka

^{24.12.2010. u 13:19 - pre 162 meseci}

Citat:

mish_ns:
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?

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

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

Odgovor na temu

mish_ns
Miloš Krstin

Član broj: 159930
Poruke: 1105
..106.109.adsl.dyn.beotel.net.

+18 Profil

Re: CSS - slika sa leve i desne strane linka

^{24.12.2010. u 14:15 - pre 162 meseci}

OK, hvala...

Sve proradilo :)

Odgovor na temu

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: CSS - slika sa leve i desne strane linka

^{24.12.2010. u 14:33 - pre 162 meseci}

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 :)

rafforum.rs - Forum Računarskog Fakulteta

Odgovor na temu

mish_ns
Miloš Krstin

Član broj: 159930
Poruke: 1105
..106.109.adsl.dyn.beotel.net.

+18 Profil

Re: CSS - slika sa leve i desne strane linka

^{24.12.2010. u 15:19 - pre 162 meseci}

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

Ako ima jos predloga samo napred :)

Odgovor na temu

Sapphire
Denis Biondić
.NET software developer
Nürnberg, Germany

Član broj: 213086
Poruke: 290
212.39.114.*

+6 Profil

Re: CSS - slika sa leve i desne strane linka

^{25.12.2010. u 02:35 - pre 162 meseci}

Citat:

Aleksandar Ružičić:
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 :)

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

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

Odgovor na temu

Nemke_BG

Član broj: 163822
Poruke: 341
*.static.sbb.rs.

Jabber: Nemke_BG@elitesecurity.org
Sajt: https://www.nmdesign.rs

+45 Profil

Re: CSS - slika sa leve i desne strane linka

^{28.12.2010. u 08:53 - pre 162 meseci}

Svim elementima koji su po defaultu inline mozes da dodelis inline-block prikaz i radice cross browser bez problema...

...

Odgovor na temu