[ asyk @ 02.04.2008. 20:27 ] @
Pozdrav znalci. Imam dizajn kojim sam jako zadovoljan i sad bi ga radio cijelog u css-u, bez tablica, ali me ubija sto ne znam kako da napravim za glavni div unutar kojeg treba ici cijeli content pozadinsku sjenu. Da li netko mozda zna kako da postignem css-om ove sive rubove na desnoj i bottom margin - naravno, da su fluidni, tj da se layout spusta i dize ovisno o kolicini contenta unutar tog diva.

Evo o cemu govorim:
[ mluddn @ 02.04.2008. 23:23 ] @
Nešto ovako?

U style stavi
Code:

body{
background:#ccc;
}

#okvir{
width: 800px;
margin: 0 auto;
background: #fff;
border-right: thin solid #999;
border-bottom: thin solid #999;
}


A u <body>
Code:

<div id="okvir">
Sadržaj koji je uokviren... 
</div>
[ asyk @ 03.04.2008. 12:18 ] @
Da, to je slično onome što mi treba ali ne i doslovno što mi treba. ovo sam i ja uradio, ali nebi htjeo tako nebi tocno ovako kao sto tvoj css kaze nego da mi u right margini u topu sjena pocinje iskosa malo (ako pogledas screenshot primjetit ces to), kao i na krizanju right i bottom margine (right bottom i bottom right) te u bottomu na left strani. Na sva tri mjesta sjena je zamisljena kao malo iskosa a ne da ide ravnomjerno odmah ispod contenta. To me zanima :)

Usput, hvala na trudu i za ovo
[ NeonDragon @ 03.04.2008. 13:49 ] @
mogao bi da napravis dva id-ja, i da od podloge napravis 3 slike (za gornji deo, za donji deo i za ovo izmedju). onda za prvi id postavis kao pozadinsku sliku gornji deo (naravno i visinu i sirinu) i isto tako uradis i za drugi id/donji deo. onda, na glavni okvir podesis za pozadinsku sliku treci sliku (dakle sredinu) i to je to

mislim da bi onda html kod ovako izgledao:

Code:

<div id="okvir">
    <div id="gornji_deo"></div>
    izmedju ide sadrzaj
    <div id="donji_deo"></div>
</div>




a css ovako:

Code:

body{
background:#ccc;
}

#okvir{
width: 800px;
margin: auto;
background: white url(sredina.gif) top center repeat-y;
}

#gornji_deo, #donji_deo {
width: 800px;
height: Xpx; /* visina */
background: white top center no-repeat;
}

#gornji_deo { background-image: url(gornji.gif); }
#donji_deo { background-image: url(donji.gif); }


kao sto vidis, ovde moras da iseces gornji i donji deo da budu istih visina. naravno, mogao bi da olaksas sebi ako bi, npr napravio header i footer i koristio njih za postavljanje senki.
[ pajaja @ 03.04.2008. 14:06 ] @
Da li ti je sirina strane fiksna ili ne?

Prvo sto mi pada na pamet je da stavis za pozadinu beli gif 1*X px sa 4 piksela sivog sa desne strane, a da te zaobljene gore ivice dobijes tako sto ces da apsolutno pozicioniras u gornji desni cosak jedan mali gif (boje pozadine) kojim ces da prekrijes piksele od te 'ivice' koje ne zelis da se vide. Slican metod i za donju senku, a ako je sirina fiksna onda je jos lakse posto znas dimenzije pa ti ne trebaju 2 gif-a.

Ovo moze na jos nekoliko nacina da se uradi, zavisi od ostalih elemenata koje imas na strani, i koji mogu mozda da se iskoriste za to sto hoces.

/edit:
ulete NeonDragon :p
U svakom slucaju moras da razbijes taj box na 2-3 diva. Ako ne zelis da se mislis da li ce IE itd da ti prave probleme sa apsolutnim pozicioniranjem, NeonDragon-ov primer ce da ti zavrsi posao. Pogledaj da li mozes da `kamufliras` te img-ove u neki vec postojeci elemnt, cisto da ne pravis nove prazne tagove bez potrebe.
[ asyk @ 03.04.2008. 16:13 ] @
Riješio! Super radi, hvala svima na pomoći!