[ Milan M. Radovic @ 30.08.2010. 21:41 ] @
Evo ovako, nadam se da cu uspeti da objasnim.
IMam recimo #content DIV tag i unutar tog taga i u njemu imam

div#d1
div#d2
div#d3
div#d4

I svaki ima svoj TOP i LEFT parametar.... e sad kako da namestim pozicioniranje po X i Y kordinati (tj. top i left) tako da ne dolazi do njihovih kolizija, tj. da se lepe kao nlepnice....a ne da mi ih sibci u sledeci red i sl...) ??
Jedan od nacina je da jedan bude float left, drugi na right, treci na none... ali za cetvrti... problem je. dali preko z-index... nemam pojma :(

Tnx!
[ problems2006 @ 31.08.2010. 07:01 ] @
jesu velicine d1...d4 tolike da svojom ukupnom duzinom mogu stati u container?
[ Milan M. Radovic @ 31.08.2010. 08:54 ] @
Da,jesu.Znaci poenta je, ako je moguce da budu razlicitih Z-indexa i da mogu slobodno da prelaze jedni preko drugih unutar parent DIV taga (position relative).
[ problems2006 @ 31.08.2010. 09:35 ] @
Nadam se da će ti ovo donekle pomoći, ako ništa da shvatiš koncept. Iskreno, ne razumijem baš šta misliš pod naljepnice. Iskopiraj ovo dole u HTML editor koji koristiš i vidi je li otprilike to-to. Ako nije, molim te nacrtaj u Paintu par kvadrata da vidim kako se preklapaju.

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>Untitled Document</title>

<style type="text/css" media="all">

#container {
    
    width: 400px;
    height: 400px;
    margin: auto;
    background-color: #000;
    z-index: 0;
}

#box1 {
    position: absolute;
    float: left;
    width: 140px;
    height: 50px;
    margin-left: 20px;
    margin-top: 100px;
    background-color: #00F;
    z-index: 1;
}

#box2 {
    position: absolute;
    float: left;
    width: 90px;
    height: 50px;
    margin-left: 30px;
    margin-top: 130px;
    background-color: #F00;
    z-index: 2;
}

#box3 {
    position: absolute;
    float: left;
    width: 100px;
    height: 50px;
    margin-left: 40px;
    margin-top: 120px;
    background-color: #FF0;
    z-index: 3;
}
#box4 {
    position: absolute;
    float: left;
    width: 110px;
    height: 50px;
    margin-left: 50px;
    margin-top: 100px;
    background-color: #0F0;
    z-index: 4;
}
</style>
</head>

<body>
<div id="container">

<div id="box1">
</div>
<div id="box2">
</div>
<div id="box3">
</div>
<div id="box4">
</div>
</div>
</body>
</html>
[ Milan M. Radovic @ 31.08.2010. 09:48 ] @
Da, to je to :) Samo jos da izvalim zasto onda to kod mene nije radilo.... mozda zbog float:left..
meni su bili u container-u ali kad stavim absolute position, krecu pozicioniranje od nulte koordinate stranice cele...
[ problems2006 @ 31.08.2010. 09:48 ] @
Ili, ovako :), ako je važno relative pozicioniranje:

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>Untitled Document</title>

<style type="text/css" media="all">

#container {
    
    width: 400px;
    height: 400px;
    margin: auto;
    background-color: #000;
    z-index: 0;
}

#box1 {
    position: relative;
    float: left;
    width: 140px;
    height: 50px;
    margin-left: 20px;
    margin-top: 100px;
    background-color: #00F;
    z-index: 1;
}

#box2 {
    position: relative;
    float: left;
    width: 90px;
    height: 50px;
    margin-left: -30px;
    margin-top: 130px;
    background-color: #F00;
    z-index: 2;
}

#box3 {
    position: relative;
    float: left;
    width: 100px;
    height: 50px;
    margin-left: -40px;
    margin-top: 120px;
    background-color: #FF0;
    z-index: 3;
}
#box4 {
    position: relative;
    float: left;
    width: 110px;
    height: 50px;
    margin-left: -50px;
    margin-top: 100px;
    background-color: #0F0;
    z-index: 4;
}
</style>
</head>

<body>
<div id="container">

<div id="box1">
</div>
<div id="box2">
</div>
<div id="box3">
</div>
<div id="box4">
</div>
</div>
</body>
</html>


[ Milan M. Radovic @ 31.08.2010. 15:35 ] @
Radi perfektno :) Samo jos da vidim sad zasto u mom kodu nije to tako lepo bilo....
HVALA!