[CSS] položaj div-ov

Hi!
Najprej slika:


Rumeni pravokotnik predstavlja prvi div, ki ima fiskno širino in je poravnan na sredino strani z margin: 0 auto. Zdaj bi pa rad dal še po en div na vsako stran (rdeča pravokotnika) in sicer tako, da bi se višina teh dveh prilagajala višini rumenega (širina je pa fiksna). Potem bi pa še pod tem vsem skupaj bil modri div.

Kakšen namig predem zgubim živce? :)

Da se z malenkostjo javascripta. Poglej si tole.

Lp!

Ma seveda se da naredit, samo malo več dela je. In to z div, brez javascripta.

Samo vgnezdit jh moraš pravilno.

Najprej narediš div širine celotnega kvadrata (rdeca+rumena+rdeca), background: rdeča. V njega daš div z desno poravnavo širine rumena+rdeca, background: rdeča. V tega pa daš še en div, z levo poravnavo širine rumena backgreound: rumena. Preprosto, samo malo več dela je za naredit. Če rabiš še kotne elemente je še malo več dela. Ko sedaj pišeš v rumenega se le ta viša. Zaradi tega se višata tudi oba "zunanja" diva.

Sej ni treba vedno vse delat s scriptami, ampak očitno se marsikdo raje zaj... s skriptami, kot pa da bi malo pomislil kaj omogoča CSS.
Za modrega pa ni težko poštekat kako ga dodaš (hint: ne sme biti vgnezden).

Jaz imam tako narejeno na eni strani (če hoče kdo link naj mi ZS, da ne bo nepotrebnega nabivanja obiska) in dela lepo tako kot more. Se pa malo zaj... prvič ko delaš.


Ah zdej sem vam izdal big secret ... aaaa.....

EDIT: to ni uporabno samo za ta primer ampak lahko na tak način spreminjaš tudi širino.... Pač malo pametne uporabe in imaš kvadrat z 4 različnimi obrobami, ki se prilagaja vsebini. Lahko je velik samo kot kotni elementi, lahko pa kot slika velikosti 1000x1000.

Vse kar rabiš tukaj je dva diva, fixne širine. V PSju narediš beckgrounde, v zgornjem divu da repeat-y, v spodnjem pa no-repeat. Case closed.

pa kje si še vidu z javascriptom oblikvat strani. da vsakič ko se bo stran naložila se bo moral še nek javascript izvest da bo sploh prav zgledala. bravo.

sem prepričan da se da tole s čist lepim cssjem nardit.

in ne, ni bolje. ko se bo stran nalagal se bo prikazovala narobe, ko bo naložena bo pa mogel browser procesirati javascript da jo bo popravil in bo naenkrat vse skočilo. slaba rešitev, sori.

zate nevem ampak jaz vedno gledam da je stran normalno berljiva in čim bolj lepa tudi če se slike ne nalowdajo. in 4je elementi ti tudi niso nek hud problem ane? 4je prazni divi potem pa itak s cssjem narediš svoje

meni se pač <script> za obliko zdi nesemantičen. sto ljudi, sto čudi :)

nucamo css3 da se takim bedarijam z štirimi vgnezdenimi divi izognemo..

srnjak: A se hecas? V primeru da se ne... kaj pa pridobis? Vec kode, zlorabo elementov, grse obnasanje pri nalaganju... sem kaj izpustil?


CaqKa: res je. Ampak bo se trajalo, preden se bomo lahko na CSS3 zanesli. Trenutno se ne moremo, zato iscemo najboljso alternativo.

ja tale wiki je na ie7 že štala.

Ja, MS lepo opozarja na IE conditional commente, ki bodo zgleda prisli kar prav.