PDA

Pogledaj cijelu verziju : HTML/CSS skripta



Ripaz
19-10-2008, 18:41
Treba mi skripta za border od malih slikica. Imam 8 malih dijelova koji bi trebali ovako ici:

1. gornji lijevi kut
2. donji lijevi kut
3. gornji desni kut
4. donji desni kut
5. donja crta
6. gornja crta
7. lijeva crta
8. desna crta

Npr. neka mala slika

1-6-6-6-3
7-slika-8
2-5-5-5-4

Znaci kutovi bi trebali ostati na mjestu dok bi se crte trebale kopirati prema širini i dužini slike.

Ne znam kako da drugačije objasnim :(

Bartuc
19-10-2008, 18:51
To ti se inače radi ovako:

1) Gornja 2 kuta + gornja crta = 1 slika (dimenzije koje želiš za širinu stranice)
2) Donja 2 kuta + donja crta = 1 slika (iste dimenzije kao gore)
3) Bočne crte se naprave u PNG formatu. Slika bude dimentija koliko želiš da ti stranica bude široka i potegneš po rubu slike, sa svake strane, jednu crticu veličine par pixela, vertikalno okrenutu.

Onda kuteve i horizontalne crte ubaciš kao image u div koji ima dimenzije te slike. A bočne crte ubaciš kao background koji se ponavlja po y osi.


U div za bočne stranice ubaciš ovakav kod:

{
background-image: url(images/bočne_linije.png);
background-repeat: repeat-y;
}

U div za gornji i donji rub ubaciš ovakav kod:

images/gornji_rub.pngS

- ovo xxx će biti dimentija tvoje slike i ona ti dirigira širinu stranice. To se sve crta u Photoshopu.


PS: Znači to nije skripta, sve se barata sa divovima ili tablicama...

Ripaz
19-10-2008, 19:07
E sad te ne kontam. Zagubio sam se na 1 i 2.

Meni treba ovakav stil kao sto je na slici
http://img122.imageshack.us/img122/6141/supportcreativitybyputrll4.png

Znaci svaki kut i stranica je drugačija.

Jeli zna kako se ova tehnika/stil zove da malo poguglam po netu?

Bartuc
19-10-2008, 20:09
Ja sam te skužio da ti trebaju ravne crte za okvir, ne nazubljene.

Ja bi onda u tvom slučaju uzeo Photoshop, otvorio sliku na kojoj ti trebaju ti rubovi i dodao bi ih drito na sliku. Ili bi napravio samo čitav okvir (opet u Photoshopu), dimenzije si uzmeš koliko ti treba i taj okvir stavio u DIV/tablicu kao background, pa onda u isti DIV/tablicu centrirao sliku.

Znači background ti se ne ponaša kao slika. Tako da možeš na background staviti i sliku.


Evo primjer. Imaš sliku 500x500 pixela. U photoshopu otvoriš stranicu od 510x510 pixela i po tom rubu od 10px nacrtaš rubove te sliku spremiš u png formati tako da bude transparentna (da se vide samo rubovi). Na stranici staviš tu sliku kao background i dobiješ samo rubove, pa ponovno u isti div stavljaš sliku tako da bude unutar tih rubova. To ti je najlakši način kojega mogu smisliti...

Nadam se da si skužio :( :D

Ripaz
20-10-2008, 13:29
Jesam skužio sam ja ti ubiti to mi je prvo došlo na pamet ali posto cu stavljat masovni broj slika nije mi isplativo.

Bartuc
20-10-2008, 20:46
Isplativo ti je ako su ti sve slike istih dimenzija, onda ti je dovoljan 1 background. Ali ako su ti slike različitih dimenzija, onda bi trebao skombinirati nešto kao ono što sam ti napisao u prvom postu. Ili jednostavno koristi ravnu crtu kao border, a u tom slućaju možeš koristiti drito CSS naredbu da ti slika ima border.

Naredba ti je ovakva:


images/slika.jpg

images - folder sa slikama. Ako nemaš folder sa slikama, već su ti slike pobacane u isti folder gdje i html dokument, onda izbaciš taj images dio. Ako su ti slike u folderu koji se zove slike, onda pišeš "slike/slika.jpg"

slika.jpg - ime tvoje slike. Ja sam ovo dao samo kao primjer.

??? - tu dolaze dimenzije u pixelima.


EDIT:

Dok sam se kupao sam se sjetio da ti nisam dao kod za CSS već za ono što dođe unutar DIV-a (*.html-a). Mogu ti i napisati za CSS ako treba!?

Ripaz
21-10-2008, 13:34
Ma znam ja to napravit u css ali sam zapeo za taj okvir da ne možeš vjerovat. Onda mi jedino ostaje neki obični border :(

Bartuc
21-10-2008, 14:55
Pa nacrtaj okvir. Ako mora biti onaj šiljasti, onda ga crtaš tako da dođeš do pola šiljka, tako da kada se slika ponavlja po x ili y osi, da se drito poklope dvije polovice šiljka i da se ne vidi prijelaz. To ti je fakat lagano za napraviti...