Newbie za CSS boxes

[ DusanSukovic @ 15.01.2006. 11:16 ] @

Kako da izvedem da imam dva boxa jedan kraj drugog? Zamisao je da u bijelo polje stavim neki login, ili text ali da ovako izgledaju:

http://madness.tmok.com/~sukovic/boxes_css.JPG

Neka ideja, fragment koda? Pozdrav :-)

[ jablan @ 15.01.2006. 14:39 ] @

Code:

<html>
  <head>
    <title></title>
    <meta content="">
    <style>
.blok {
    width: 150px;
    border: solid 2px black;
    float: left;
    margin: 10px;
}
.heder {

    height: 20px;
    border-bottom: solid 2px black;
}
</style>

</head>
<body>

<div class="blok">
    <div class="heder" style="background-color: red;">
    </div>

    sajdhf alkshfdlkasjd hflkja hfdslakj hfdslkahfdslkja hdsflkjas hdflka hfdlaksd
</div>
<div class="blok">
    <div class="heder" style="background-color: blue;">
    </div>

    sajdhf alkshfdlkasjd hflkja hfdslakj hfdslkahfdslkja hdsflkjas hdflka hfdlaksd
    lshuf soifdu zslifduh zsliudf hlziux gliufdh gxliud hgliudxhf lighufdx lgihufdx g
</div>
</body>
</html>

[ maric1 @ 15.01.2006. 15:20 ] @

i mene bi neto interesovalo a nisam bas nesto mnogo vest u ovome pa ako moze pmoc

pravim neki prezentaciju i kako bih mogao da ovaj jedan pravougaonik da stavim u tabelu i da li bih moga da se ispose tekst u ovim crvenim i plavim poljima

veliki pozdrav

[ DusanSukovic @ 15.01.2006. 15:28 ] @

Puno hvala! Upravo onako kako sam i mislio! Jos jednom puno hvala!

Dusan

[ jablan @ 15.01.2006. 15:29 ] @

Citat:

maric1:kako bih mogao da ovaj jedan pravougaonik da stavim u tabelu

Kako misliš kako? Napraviš tabelu i premestiš jedan ovaj DIV u jedno njeno polje.

Citat:

i da li bih moga da se ispose tekst u ovim crvenim i plavim poljima

Može, jesi li probao?

[ maric1 @ 15.01.2006. 21:08 ] @

nisam jer se ne snamazim sa codom bas ba bi me interesovalo gde bi trebalo da se napise

izvinjavam se ako sam pocetnik a za ovo u tabeli puno hvala nisam znao za ovu foru ja radio u tabeli ubacivao sliku koju sam napravio da izgleda ovako pa ubacivao kao pozadinu

pozdrav

[ pajaja @ 15.01.2006. 21:35 ] @

Citat:

maric1: nisam jer se ne snamazim sa codom bas ba bi me interesovalo gde bi trebalo da se napise

U dreamweaveru postoje 3 mogucnosti pregleda strane. menja se sa:

View >
1. code,
2. split [ code & design ]
3. design.

kad prebacis na code, tu pises.

[ maric1 @ 15.01.2006. 23:11 ] @

izvni ja opet dosadan znam to ali gde u codu na kom mestu treba to upisati

pozdrav

[ noviKorisnik @ 15.01.2006. 23:21 ] @

Da li je pajaja pogodio da koristite Dreamweaver?

Ako pretpostavim da jeste (a verujem da jeste), meni View, pa tamo izbor Code. Copy/Paste koda koji je jablan ostavio, snimite stranicu i pogledate je u browseru.

[ Br@nkoR @ 16.01.2006. 08:09 ] @

Opa, novi moderatori, čestitamo, svaka čast, _{jadni mi :)}
Nadam se da će se sada srediti neke stvari na ovom forumu.

[ maric1 @ 16.01.2006. 14:44 ] @

ok je to sam uradio ali sammislio gde u coku samom da napisem tj da podesim da mi taj prozorcic bude u celiji recimo u 2 redu i 2 koloni

[ jablan @ 16.01.2006. 14:55 ] @

Prouči ovo:

http://www.w3schools.com/html/...ilename=tryhtml_table_elements

[ DusanSukovic @ 16.01.2006. 15:55 ] @

Imam par "dummie" pitanja:

Nije mi jasno kako ovaj kod formira box:

Code:
.blok {
    width: 150px;
    border: solid 2px black;
    float: left;
    margin: 10px;
}

width: 150 px; /*sirina boxa*/
border: solid 2px black; /*ovo je osobina linije boxa, debljina, sirina boja?*/
float: left; /* gdje je box pozicioniran?*/
margin: 10px; /*udaljenost od vrha stranice?*/

Code:
<div class="blok">
    <div class="heder" style="background-color: red;">
    </div>

    sajdhf alkshfdlkasjd hflkja hfdslakj hfdslkahfdslkja hdsflkjas hdflka hfdlaksd
</div>

Ovdje je header ubacen bloku, ali ne vidim nigdje precizno gdje mu je receno da stoji na vrhu boxa?

Samo sam malo zbunjen, anyway hvala unapred! :)

_{[Ovu poruku je menjao DusanSukovic dana 16.01.2006. u 16:56 GMT+1]}

[ pajaja @ 16.01.2006. 16:01 ] @

<div> je block element [znaci on pravi taj box ne css] a taj css kod ga samo blize 'odredjuje',
a header stoji na pocetku <div class="blok"> pa se samim tim nalazi na vrhu.

_{[Ovu poruku je menjao pajaja dana 16.01.2006. u 17:06 GMT+1]}

[ jablan @ 17.01.2006. 08:40 ] @

Citat:

DusanSukovic: Imam par "dummie" pitanja:

To je ok, postavljaš prava pitanja.

Citat:

width: 150 px; /*sirina boxa*/

Tako je. Ako se ne specificira, DIV se širi koliko može.

Citat:

border: solid 2px black; /*ovo je osobina linije boxa, debljina, sirina boja?*/

Da.

Citat:

float: left; /* gdje je box pozicioniran?*/

Kako se box ponaša u odnosu na prethodni element. Float znači da se "lepi" uz element levo od sebe, odnosno "nastavlja" odmah iza prethodnog elementa i ne prelazi u novi red ako ima mesta u produžetku.

Citat:

margin: 10px; /*udaljenost od vrha stranice?*/

Margina. Prazan prostor oko elementa. To jest, toliko će element biti udaljen od svih okolnih elemenata. Ako voliš SF filmove, to je nevidljivi shield sa svih strana oko elementa. Postoje pojedinačni stilovi margin-top, margin-left itd. za definisanje margina sa svake strane pojedinačno.

Citat:

Ovdje je header ubacen bloku, ali ne vidim nigdje precizno gdje mu je receno da stoji na vrhu boxa?

Po pravilu se elementi ređaju sleva nadesno, odozgo nadole. Podrazumeva se da je na vrhu boxa u kome se nalazi. Ako hoćeš da ga spustiš, postaviš mu gornju marginu.