Kako centrirati DIV-ove koji imaju osobine "float:left" ?

[ raaddd @ 29.01.2010. 19:49 ] @

Pozdrav svima,

Naime, pokušavajući prethodnu noć da rešim problem na koji sam naišao, i nakon višečasovnog mozganja da li je uopste logično to što pokušavam, odlučio sam da redukujem kod i posavetujem se sa vama.

Problem je sledeći:
Imam DIV koji se prostire određenom širinom (width:800px;padding:20px) koji unutar sebe sadrži manje DIV-ove koji "plutaju" jedan za drugim.
Ovi unutrašnji DIV-ovi imaju u sebi neke forme, grafike, druge block elemente - header-e, p... Oni se generišu dinamički i njihov broj se menja, mislim da ih najviše može biti 4 mada to i nije sad važno. Imaju konačne dimenzije (200px). Height i border su u kodu samo da bi se DIV-ovi videli, naravno.

Danas sam potražio slične teme na netu, ali moram priznati da nisam uspeo da nađem rešenje. Spominju se ovakvi problemi (čak i varijante sa javascript-om i php-om) ali nigde ne vidim rešenje koje to potvrđuje, niti je kod primenjen na ovaj moj dao ikakve promene. Probao sam različite display vrednosti, ali ništa. Čak ni neki bug za IE na koji sam naišao (navodno bi IE treba ovo da prikaže kako želim zbog nekog bug-a ?!) ne radi : )

Evo ga kod:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Title</title>
        <style type="text/css">
            html, body, div, #container, .holder {
                margin: 0;
                padding: 0;
                }

            html, body    {
                width:100%;
                background-color:#CCC;
                }

            #container {
                position:relative;
                margin:100px auto 20px;
                padding:20px;
                background-color:#FFF;
                width:800px;
                overflow:hidden;
                text-align:center; /* Neuspeli pokusaj centriranja blok elementa kao da je inline */
                }

            .holder { /* Holder-i bi sadrzali blok elemente i neku sliku npr. */
                position:relative;
                float:left;
                width:200px;
                height:200px;
                margin:0 10px 0 0;
                border:1px solid #CCC;
                }
        </style>
    </head>

    <body>
        <div id="container">
            <div class="holder"> </div>
            <div class="holder"> </div>
            <div class="holder"> </div>
        </div>
    </body>
</html>

Zanima me čisto CSS i XHTML razmišljanje - ukoliko je moguće, i ako je moguće rad sa DIV-ovima - ako se radi sa tabelama ovo je lakše izvesti - ili mi se bar tako čini :-/
Svaka pomoć, bilo u vidu koda ili linkova bi mi značila. Hvala u napred.

[ valjan @ 29.01.2010. 21:44 ] @

Mislim da ako bi margin-left i margin-right za sve unutrasnje DIV-ove postavio na auto, da bi dobio to sto tebi treba, ali ne znam sta smatras pod "centrirati" - vertikalno, horizontalno, u odnosu na sta...?

[ raaddd @ 29.01.2010. 22:00 ] @

Naravno, izvini, mislim na horizontalno centriranje. Auto margine ne rade na floated elementima.

[ valjan @ 30.01.2010. 01:16 ] @

Mozes ici "seljackom" varijantom - kreiras DIV klase spacer, koji ce biti sirine 100px (pola sirine DIV-a klase "holder"), i ubacis ih ispred prvog i iza poslednjeg holdera po formuli 4-n, gde je n broj prikazanih holdera. Znaci, ako imas 3 holdera, stavis po jedan spacer ispred i iza, ako imas dva holdera, stavis po dva spacera ispred i iza, ako imas samo jedan holder, onda stavis 3 spacera, itd. Posto kazes da se holderi kreiraju dinamicki, onda se nadam da i spacere mozes tako da ubacis, odnosno da im menjas broj.

Inace, u tvoj container ne mozes nikako da naguras 4 holdera, jer najpre imas padding 20px (znaci unutrasnja sirina ti je 800px-2x20px=760px, tako da 4x200px>760px), a imas i desnu marginu 10px, sto znaci da je svaki holder u stvari sirine 210px, tako da 4x210px-760px=80px manjka. Plus ako zadrzis bordere oko holdera, sirinu bordera puta dva dodas na sirinu holdera, tako da 800px containera definitivno nikako ne moze da obuhvati 4 holdera...

Edit: ili u container ubacis jedan subcontainer koji ima sirinu koliko i svi holderi zajedno, ubacis holdere u njega i podesis mu levu i desnu marginu na auto...

_{[Ovu poruku je menjao valjan dana 30.01.2010. u 04:16 GMT+1]}

[ raaddd @ 30.01.2010. 10:29 ] @

Hmmm, zanimljivo... jeste malo "seljačko" rešenje, ali probaću večeras da se poigram sa spacerima, pa javljam ishode.

E da, u pravu si za ovo da neće stati sva 4 holdera u ovaj container, mada je to samo ogoljen primer za demonstraciju i nebitno je da li ih je jedan, dva, tri itd. Važno je samo da mogu nekako da ih postavim da se nižu oko iste (centralne) ose - ako je jedan u pitanju - onda taj jedan u sredini, ako ih je dva holder-a, onda jedan levo od ose, drugi desno itd. Kao kad bi npr. postojao "padding:0 auto" : )

Citat:

Edit: ili u container ubacis jedan subcontainer koji ima sirinu koliko i svi holderi zajedno, ubacis holdere u njega i podesis mu levu i desnu marginu na auto...

Ovo može biti rešenje na neki način. Ako sam dobro razumeo, to bi značilo da dinamički menjam širinu ovog novog subholder-a (svaki ima svoj ID sa odgovarajućim širinama, npr.) u odnosu na broj prikazanih holdera?
Mislio sam na koderski malo čistije rešenje od ovoga, trudim se da ne opterećujem programera sa dizajerskim problemima ili neznanjem :), već da nađemo rešenje putem CSS-a. Na kraju krajeva, takve stvari se uvek nekako nabudže upravo uz njihovu pomoć, ali ovaj put mi zaista nije važno "samo da proradi".
Svakako ću probati obe metode.

Ako nešto nisam dobro razumeo, molio bih te da priložiš kod koji odgovara primeru koji si naveo.

Hvala na odgovoru svakako.

[ valjan @ 30.01.2010. 12:29 ] @

Sa ovom drugom varijantom upravo eksperimentisem na firminom sajtu - nije odrzavan godinama, ja sam se izlanuo da se malo razumem u to, i odmah su mi uvalili da radim na njemu. Sajt je razvijan pre vise godina sa fiksno pozicioniranim DIV-ovima, fiksne sirine i visine, u koje se onda dodaje sadrzaj, ali je to radjeno dok je 1.024x768 jos bila relativno retka pojava. Sada je, naravno, sa ovim savremenim rezolucijama ekrana pola ekrana prazno, sa sadrzajem zalepljenim uz levu ivicu, tako da sam ja praznine pokusao da opticki umanjim tako sto sam sve centrirao (pomocu JavaScripta, koji nakon ucitavanja ocita sirinu prozora, pa na osnovu nje proracuna i postavi left parametar za sve DIV-ove). Nisam dizajner, pa problem resavam sa programerske strane. Trazio sam neko elegantnije resenje od toga, i nedavno sam naleteo na ovaj savet sa margin:auto (ucio sam to pre par godina na studijama, ali ko ce se svega setiti ako nije koristio duze vreme), tako da upravo u lokalu prepravljam i testiram kod, tj. ubacujem celu stranicu u jedan veliki DIV, i izgleda da funkcionise, samo moram da poradim na drugacijim lokacijama za unutrasnje DIV-ove.

A sto se spacera tice, koristim ih za vertikalno centriranje, vec sam ovde na forumu postovao "trik" sa span i br tagom, pri cemu spanu dodelim font-size onolike velicine, koliko mi pixela treba da bih centrirao sadrzaj...

Evo kako sam ja postavio subcontainer na primeru sa tri holdera:

Code:
        #subcontainer {
                position:relative;
                background-color:#FFF;
                width:636px;
                overflow:hidden;
                margin-left:auto;
        margin-right:auto;
                border:1px solid #CCC;
                }

s tim sto sam u holderu margine promenio u:

Code:
margin:0 5px 0 5px;

a divovi onda izgledaju otprilike ovako:

Code:
<div id="container">
               <div id="subcontainer">
                     <div class="holder"> </div>
                     <div class="holder"> </div>
                     <div class="holder"> </div>
               </div>
        </div>

[ raaddd @ 30.01.2010. 20:47 ] @

Hvala ti Janko, i na trudu i na odvojenom vremenu. Ovo definitvno radi, čak i ako iscimam kolegu programera da poziva neke ID-eve, nije ništa strašno ako dobro pripremim stvari sa svoje strane. A i JavaScript koji radi isti posao dolazi u obzir. Ja sam uporno pokušavao nađem čisto CSS rešenje, mada glava ne boli od kojeg "if"-a : )
Zanosio sam se mnogo sa display experimentisanjem i izgubio vreme pokušavajući da to postignem nekim tabelarnim rešenjem. Ovo je krajnje prosto i logično, kako to obično biva.

Ovo sa spacerima mi se uopste ne sviđa, tako da ga neću ni testirati, deluje mi suviše prljavo za markup. Možda sam umislio, izvinjavam se za to : )

Evo ga i kompletan kod:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Title</title>
        <style type="text/css">
            html, body, div, #container, .holder {
                margin: 0;
                padding: 0;
                }

            html, body    {
                width:100%;
                background-color:#CCC;
                }

            #container {
                position:relative;
                margin:100px auto 20px;
                padding:20px;
                background-color:#FFF;
                width:800px;
                overflow:hidden;
                }

            .holder {
                position:relative;
                float:left;
                display:inline; /* zbog IE 3px bug-a */
                width:200px;
                height:200px;
                margin:0 5px 0 5px;
                border:1px solid gray;
                }

                #subholder {
                    position:relative;
                    width:636px;
                    background-color:#FFF;
                    overflow:hidden;
                    margin:0 auto;
                    border:1px solid #ccc;
                }
        </style>
    </head>

    <body>
        <div id="container">
            <div id="subholder">
                <div class="holder"> </div>
                <div class="holder"> </div>
                <div class="holder"> </div>
            </div>
        </div>
    </body>
</html>

Molio bih još nekog za eventualne alternative, ako postoje. Ovo rešava problem, ali me zanimaju još neka rešenja ukoliko neko ima ideju. Hvala još jednom Janko i pozdrav.

[ valjan @ 01.02.2010. 07:31 ] @

Kad malo bolje pogledas, i varijanta sa subcontainerom i sa spacerim izadje na isto - unutrasnja sirina je zbir sirina svih holdera i svih njihovih margina, odnosno padinga containera. Nesto otprilike: x=2y+z (x je raspoloziva sirina, y su margine holdera ili pading containera sa krajnje leve i krajnje desne strane, z je ukupna sirina holdera sa njihovim medjumarginama). Znaci, ili podesis padding containera da popuni prazninu, ili podesis krajnju levu i krajnju desnu marginu (ono sto smo mi uradili sa margin:auto), ili postavis left koordinatu za krajnji levi holder pa da se svi nizu iza njega, ili ubacis nove DIV-ove da popune prazninu (spacer varijanta). Uglavnom ti za sve treba i mala pomoc JavaScripta, da bi se vrednosti mogle menjati dinamicki.

[ Nemke_BG @ 01.02.2010. 11:07 ] @

a mozes i da uradis nesto slicno:

Code:

            #container {
                position: relative;
                margin: 100px 0 20px;
                padding:20px;
                background-color:#FFF;
                width:800px;
                display: inline;
                float: left;
                left: 50%
                }
                #subholder {
                    position: relative;
                    width: 800px;
                    background-color:#FFF;
                    margin:0;
                    left: -50 %;
                    border:1px solid #ccc;
                }

nisam testirao u ovom primeru da li radi, ali ovaj fazon sam primenjivao x puta, cross browser je i radi na svim rezolucijama...

@valjan nem' pojma sta si hteo da kazes, al' ti svaka cast na tome koliko si se potrudio...

...mene bi mrzelo toliko da pisem...

[ valjan @ 01.02.2010. 11:13 ] @

Pa lepo kazem da nisam dizajner pa problemima sa CSS-om pristupam sa matematicke strane :-) Kolege me u poslednje vreme zafrkavaju da radim web design pomocu kalkulatora, sto i nije daleko od istine - kad sve proracunas kako treba, radi u svakom browseru isto u dlaku :-)