3 diva jedan ispod drugog - sadržaj varira

[davorr]

Zdravo, evo moj prvi post na ovom forumu
Uhvatio sam se malo css-p, da me ne pregazi vrijeme No opet me muči problem kojeg ne mogu savladati već duže vrijeme...
Dakle želim napraviti tri diva jedan ispod drugoga, ali problem je u tome što veličina sadržaja svakog diva varira, stoga ne mogu odrediti fixnu poziciju svakog diva (mislim na position: absolute; top: xy px).
evo ako će pomoći ovo je css prvog:

Code:

#content_right1 { position: absolute; top: 223px; left: 199px; margin: 10px; padding: 5px; width: 473px; border: 1px solid #aedaf9; background-color: #ffffff; }

dakle njegov sadržaj (a time i atribut height varira). ispod njega dolazi drugi, pa treći (njihova kol sadržaja također varira)
hvala unaprijed

[nel`chee]

zašto uopće ideš na fiksno pozicioniranje? baš nema smisla.

[davorr]

radim fiksno jer sam to "pokupio" sam w3schools.
netko mi je bio preporučio da radim sa float ali ne mogu pronaći nikakve tutoriale. općenito svi tutoriali ili css codovi na koje sam naišao objašnjeni su kao 2-column, 3-column, i sl., statično.
ako me možeš uputiti na neki tutorial ili reći što da izbacim iz koda?

evo stavio sam strukturu stranice (kako bi trebalo to izgledati):

[r3dsc0rpi0n]

davorr wrote:

ljevi dio floataj ljevo

ova tri diva floataj desno a na footer stavi clear: both;

ili floataj sve divove ljevo

http://www.w3schools.com/css/pr_class_clear.asp
http://www.positioniseverything.net/easyclearing.html
http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/

[Sulien]

apsolutno pozicioniranje koristiš tek kad si CSS layout majstor... prije toga ti zabranjujemo. seriously

[davorr]

hvala pokušat ću pa se čujemo

Sulien wrote:

apsolutno pozicioniranje koristiš tek kad si CSS layout majstor... prije toga ti zabranjujemo. seriously

neću više nikada

[maratz]

davorr wrote:

Code:

#wrapper { width: 700px; padding: 0 10px; /* tu ubaciš bg image */} #header { width: 700px; } #content { width: 700px; float: left; } #sidebar { width: 200px; float: left; } #main_content { width: 500px; float: left; } #footer { width: 700px; clear: both; } <div id="wrapper">     <div id="header">         <!-- zaglavlje -->     </div>         <div id="content">         <div id="sidebar">             <!-- lijevo -->         </div>         <div id="main_content">             <!-- glavno -->         </div>     </div>         <div id="footer">         <!-- podnožje -->     </div> </div>

[davorr]

hvala svima gotovo sam napravio layout samo imam (za sada ) još jedan problem.
rubove sam napravio na dva dijela (lijevi i desni).
lijevi mi se ispravno prikazuje dok desnog nema
kodovi su:

Code:

#rub_lijevo { width: 12px; padding-left: 12px; background-image: url("images/obrub_lijevo_inc.gif"); } #rub_desno { width: 12px; padding-right: 0px; background-image: url("images/obrub_desno_inc.gif"); }

mislim da je i u jednom i u drugom rubu problem jer u IE-u kada kliknem refresh vidim da se lijevi rub proteže preko čitave stranice, samo se ne vidi preko contenta jer sam stavio background-color: #ffffff za sve divove

btw. cijelu stranicu sam stavio u container da je dobijem na sredinu ekrana

Code:

#container { position: relative; margin: 0 auto; width: 733px; background-color: #ffffff; }

[maratz]

za rubove se ne koriste dodatni HTML elementi, nego CSS, dakle containeru staviš padding: 0 12px; i onda ga obojiš ili staviš u pozadinu vertikalno ponavljajuću sliku po cijeloj njegovoj širini. Elementima koji idu unutar njega staviš pozadinu na bijelo ili koje ti već paše...

BTW, ovakvo nabacivanje bez konkretnog primjera je jalov posao. Puno bi pomogao online testni page.

[davorr]

ok, ali moji lijevi i desni rubovi su različiti, pa ne mogu staviti jedan wrapper nego bi trebala biti dva. također moram imati onda i container da mi pomoću margin ravna site na sredinu
ili se varam?

[maratz]

lijevi i desni (različiti) grafički element ti mogu biti na krajevima jedne jedine pozadinske slike (koja je široka koliko i layout, tj. wrapper)

[davorr]

pametno,
ja sam do sada izrezao lijevi i desni elemenat svaki za sebe, a kako sam shvatio stavim pozadinsku sliku širine kao i stranica, na njezine rubove elemenat za rub lijevo i desno i peglam ga sa background-image: url(...) u css fajlu.
hvala, probat ću sutra neda mi se više palit dreamweaver

[maratz]

davorr wrote:

hvala, probat ću sutra neda mi se više palit dreamweaver

da si ovo rekao na početku, odmah bih ti savjetovao da pogledaš u DW help :)
CSS layouti se kucaju u nekom text editoru, Dramweaver je old school.
BTW, imaš ovdje na forumu CSS resurse

[davorr]

evo samo da se zahvalim svima koji su pomogli spasiti jedan mladi život . složio sam layout, radi i u FF, IE i operi.
samo je u IE-u margina lijevo uz sidebar veća nego što bi trebala biti (10px). malo sam probao mijenjati pixele i kada stavim recimo 5px, u ff i operi je ok ali ie prikazuje 5px kao cca 7px. ??? i to samo lijevo od sidebara, kod main_contenta je u redu.
ako mi možete pomoć na slijepo, inače se javim kada postavim na net, u međuvremenu možda i sam fixam

[davorr]

riješio sam problem tako da sam napravio novi css dokumenat za ie i podesio mu lijevu marginu sidebara na 5px, tako da izgleda kao i u ff.
ali glupo je zbog jedne brojke imat poseban .css.

[nel`chee]

ne, nije glupo. navikni se

[maratz]

davorr wrote:

riješio sam problem tako da sam napravio novi css dokumenat za ie i podesio mu lijevu marginu sidebara na 5px, tako da izgleda kao i u ff. ali glupo je zbog jedne brojke imat poseban .css.

za element koji je floatan lijevo i ima lijevu marginu definiranu, IE podupla tu marginu, a stvar se riješava sa display: inline:

Code:

float: left; display: inline; margin-left: 10px;

[davorr]

hvala

[corporate]

Sulien wrote:

apsolutno pozicioniranje koristiš tek kad si CSS layout majstor... prije toga ti zabranjujemo. seriously

možeš malo pojasniti ovo?

[Sulien]

Početnici u tableless (CSS) designu imaju problema razumijeti što je flow i zašto je on dobar

Apsolutno pozicioniranje je "easy way out" za probleme kod kolumna, headera... ali ono izvadi element van iz flow-a i može zadati mladom coderu velike glavobolje kad prekasno skuži da ne zna što će sa contentom koji se širi vertikalno

Shaun Inman razvio je metodu "absolute clearing" ali to je advanced usage

Početnici dakle ne bi trebali koristiti apsolutno pozicioniranje da bi imali priliku koristiti puno teže i puno zahvalnije koncepte negativnih margina i floatanja

[Tristan]

A zato treba kretat od osnova do advanced...