Dinamička navigacija

Ovako… htio bih napraviti dinamičku navigaciju koja će za pozadinu(e) imati zaobljene uglove da izgleda kao da je button. Sada ću dati primjer, siguran sam da ćete shvatiti što želim postići:

imam 3 slike - button_left.png, button_mid.png, button_right.png
button_left.png je lijevi zaobljeni ugao i height je 30px, a width 11px. Isto je i sa button_right.png
button_mid.png je height 30px, a width 1px.

Ono što bih ja htio postići je da mi pozadina tih linkova bude dakle sastavljena od te tri slike, s time da se button_mid.png ponavlja onoliko puta koliko je dugačka riječ koja je zapravo link. Nadam se da sam uspio objasniti.

Lijep pozdrav i hvala unaprijed.

[quote=“toniperic”]Ovako… htio bih napraviti dinamičku navigaciju koja će za pozadinu(e) imati zaobljene uglove da izgleda kao da je button. Sada ću dati primjer, siguran sam da ćete shvatiti što želim postići:

imam 3 slike - button_left.png, button_mid.png, button_right.png
button_left.png je lijevi zaobljeni ugao i height je 30px, a width 11px. Isto je i sa button_right.png
button_mid.png je height 30px, a width 1px.

Ono što bih ja htio postići je da mi pozadina tih linkova bude dakle sastavljena od te tri slike, s time da se button_mid.png ponavlja onoliko puta koliko je dugačka riječ koja je zapravo link. Nadam se da sam uspio objasniti.

Lijep pozdrav i hvala unaprijed.[/quote]

a šta trebaš,css ili html i css?

evo početnički pristup…

.link-wrapper{height:30px; background-image:url(…/images/path.gif); background-repeat:repeat-x; width:auto; position:relative; float:none; clear:none;}

.link-lijevo { height:30px; width:11px; background-image:url(…/images/path.gif); position:absolute; left:0px; top:0px;background-repeat:no-repeat}

.link-desno {height:30px; width:11px; background-image:url(…/images/path.gif); position:absolute;right:0px;top:0px;background-repeat:no-repeat;}

html:

(tu ide link)

Ovo bi se dalo danas riješiti i kompletno bez upotrebe bitmapa u browserima koji podržavaju CSS property rounded-corner. Mislim da to radi u zadnjoj verziji svih bitnijih browsera (sa -moz- i -webkit- prefiksima). Dobro je što će oni koji to ne podržavaju samo prikazati kvadratne botune.

To što si naveo je super riješenje, ali koliko sam upućen IE to uopće ne podržava još uvijek. Ili sam u krivu? Ja na svom IE 8 vidim da to ne šljaka, a IE koriste mnogi i još starije verzije tako da njih ne bih htio izostaviti. Kako da to riješim?

IE je uvijek svrab. :frowning: Postoji rjesenje:

http://jonraasch.com/blog/css-rounded-corners-in-all-browsers

Ali moras sam procijeniti sto ti je manje posla i zezanja. S obzirom da će IE 9 to podržavati i da što vrijeme više odmiče to će slična rješenja biti normalnija, možda je dobro razmišljati unapred. Barem je to moj stav.
Recimo pogledaj što se da učiniti CSSom sa buttonima (koristi FireFox ili Chrome):

https://www.locusto.com/login.php

[quote=“Riba”]S obzirom da će IE 9 to podržavati i da što vrijeme više odmiče to će slična rješenja biti normalnija, možda je dobro razmišljati unapred. Barem je to moj stav.
[/quote]

Slažem se.


Copyright © 2020 WM Forum - AboutContact - Sponsored by: Mydataknox & Webmaster.Ninja