[ mish_ns @ 23.12.2010. 23:30 ] @
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!

[ SStudio @ 24.12.2010. 01:30 ] @
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
}
[ mish_ns @ 24.12.2010. 09:12 ] @
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???
[ Sapphire @ 24.12.2010. 09:38 ] @
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...
[ mish_ns @ 24.12.2010. 09:51 ] @
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? :)
[ s4djan @ 24.12.2010. 10:39 ] @
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.
[ mish_ns @ 24.12.2010. 12:33 ] @
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?
[ SStudio @ 24.12.2010. 12:47 ] @
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.
[ Sapphire @ 24.12.2010. 13:19 ] @
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
[ mish_ns @ 24.12.2010. 14:15 ] @
OK, hvala...

Sve proradilo :)
[ Aleksandar Ružičić @ 24.12.2010. 14:33 ] @
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 :)
[ mish_ns @ 24.12.2010. 15:19 ] @
Probao sam i ovo...odlicno radi...hvala.

Ako ima jos predloga samo napred :)
[ Sapphire @ 25.12.2010. 02:35 ] @
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)?
[ Nemke_BG @ 28.12.2010. 08:53 ] @
Svim elementima koji su po defaultu inline mozes da dodelis inline-block prikaz i radice cross browser bez problema...