[es] - problem s backgroundom glavnog diva (wrappera)

asyk

Član broj: 46486
Poruke: 55
*.adsl.net.t-com.hr.

Profil

problem s backgroundom glavnog diva (wrappera)

^{02.04.2008. u 20:27 - pre 195 meseci}

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:

Odgovor na temu

mluddn

Član broj: 120497
Poruke: 43
79.101.65.*

Profil

Re: problem s backgroundom glavnog diva (wrappera)

^{02.04.2008. u 23:23 - pre 195 meseci}

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>

Odgovor na temu

asyk

Član broj: 46486
Poruke: 55
*.adsl.net.t-com.hr.

Profil

Re: problem s backgroundom glavnog diva (wrappera)

^{03.04.2008. u 12:18 - pre 195 meseci}

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

Odgovor na temu

NeonDragon
onaj odande
Pančevo

Član broj: 169069
Poruke: 184
*.adsl-1.sezampro.yu.

Sajt: www.neondragon.iz.rs

Profil

Re: problem s backgroundom glavnog diva (wrappera)

^{03.04.2008. u 13:49 - pre 195 meseci}

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.

what would master yoda do? your but, kick it, he would.

Odgovor na temu

pajaja
Beograd

Administrator
Član broj: 41598
Poruke: 3430
*.dynamic.sbb.rs.

Jabber: pajaja@elitesecurity.org
ICQ: 253317269

+144 Profil

Re: problem s backgroundom glavnog diva (wrappera)

^{03.04.2008. u 14:06 - pre 195 meseci}

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.

_{xxx

mali mali mali kamičak...nebo plave boje.

In Memoriam: Madzone Zeka(15.09.2005-16.09.2005)}

Odgovor na temu