PDA

Pogčedajte punu verziju : Početničko nerazumevanje DIV koncepta


mucky
13. 08. 2006., 21:01
Na svoju žalost, moram sam da napravim svoj mali sajt, a pošto bih želeo da usput nešto i naučim, odlučio sam se da batalim tabele i da malo budem "u modi" da DIV kontejnerima i CSS pozicioniranjem.

Posle dosta uloženog vremena naučio sam neke stvari, i *skoro* da sam skontao kako da kontrolišem sadržaj koji će se prikazivati, ali jednu stvar nikako da skontam do kraja.


<DIV ID="parent">
<DIV ID="child1">Some content x 10</DIV>
<DIV ID="child2">Some content x 20</DIV>
</DIV>


Kako da nateram parent-a da njegov width i height "prati" width i height njegovih child-ova? Odnosno, kako da nateram child kontejnere da mi razvlače parenta tako da sadržaj uvek bude unutar DIV kontejnera? Redovno mi se dešava da, kada im svima stavim bordere čisto da vidim dokle se protežu, parent bude jedna mala tanka linijica desetak piksela puta 2 piksela, a child kontejneri se razvuku kud koji mili moji? Ili, još gore, sadržaj iz child kontejnera izađe i iz svojih kontejnera kao i iz parenta?

Što je najgore, nekad parent hoće da isprati svoju decu, a nekad neće, i uopšte mi nije jasno šta bi mogao da radim pogrešno...

Napominjem da ni parent ni child nemaju stavljeno position: absolute, niti float: left/right, kao i da nemaju stavljene fiksne vrednosti za širinu/visinu..

Da li postoje neke uobičajene situacije zbog kojih se ovako nešto dešava? Da li postoji neki CSS koji može da utiče na ovakvo ponašanje?

Hvala unapred na odgovorima :)

xippi
13. 08. 2006., 22:00
kada imas elemente koji foatuju jedan pored drugog moras necim da ocistis container da bu se prikazao
pogledaj http://www.positioniseverything.net/easyclearing.html
za jedanku visinu kolona pogledaj http://www.positioniseverything.net/articles/onetruelayout/equalheight

Dragan Babić
14. 08. 2006., 00:53
Pogledaj ovu stranicu u browseru kako bi pojasnio sebi floatove (nadam se :)).

<!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>Dnevnik eklektika &middot; Clearing floats</title>
<link rel="shortcut-icon" href="http://dnevnikeklektika.com/favicon.ico" />

<style type="text/css">

body{
padding:10%;
}
p{ margin:0; padding:1em 0; }

.floated{
float:left;
width:48%;
background:#ccc;
}
.float-wrap1, .float-wrap2, .float-wrap3{
overflow:hidden;
background:#555;
border:2px solid red;
color:red;
}
.float-wrap{ background:#555; border:2px solid red; }
.float-wrap2{
width:100%;
}

</style>

</head>

<body>


<h1>Clearing floats</h1>

<div class="float-wrap">
<div class="floated"><p>They have floated me, bastards!</p></div>
<div class="floated"><p>They have floated me, bastards!</p></div>
</div>

<p>Floats above are not cleared.</p>

<div class="float-wrap1">
<div class="floated"><p>They have floated me, bastards!</p></div>
<div class="floated"><p>They have floated me, bastards!</p></div>
</div>

<p>This above is just with <code>overflow:hidden</code>.</p>

<div class="float-wrap2">
<div class="floated"><p>They have floated me, bastards!</p></div>
<div class="floated"><p>They have floated me, bastards!</p></div>
</div>

<p>This one above has <code>width:100%</code>.</p>

</body>
</html>

mucky
14. 08. 2006., 14:33
Uspeo sam da namestim, i to tako što sam parent kontejneru rekao da bude display: block; umesto display: inline; isključio sam mu height i stavio overflow: hidden;

Ovaj primer koji si mi poslao Dragane nisam baš razumeo, jer em se različito prikazuje u Firefox i IE, em mi nije baš najjasnije šta se dešava tj. koji primer tu radi ono što meni treba? Konfuzno mi je jako, ali opet hvala na trudu!

Takođe hvala xippi-ju na linkovima, pojasnili su mi neke stvari :)

xippi
14. 08. 2006., 14:40
div je block element tako da mu je ta vrednost po defaultu
koliko vidim ne bi bilo lose da procitas i http://www.w3.org/TR/REC-CSS2/visuren.html

Dragan Babić
14. 08. 2006., 16:36
Primer ti pokazuje "čišćenje" (clearing) floatovanih elemenata.

Prvi primer nije "očišćen", vidiš po tome što element sa crvenim borderom ne obmotava dva floatovana siva elementa.

Drugi primer je očišćen sa CSS osobinom overflow:hidden na parent elementu (sa crvenim borderom).

Na žalost, IE i starije Opere zahtevaju navođenje još neku od dimenzija da bi očistili floatove, stoga je u trećem primeru dodata osobina width:100% da bi se i IE i Opera ponašali normalno.

Dakle prvi primer nije očišćen, drugi ne radi u IE, a treći radi svudge.

mucky
14. 08. 2006., 16:42
Znači suština je da float-wrap2 klasa "radi" zato što ima stavljeno overflow: hidden; i width: 100%; ??

I praktično si tako očistio nešto?

Nije mi jasno šta se tu "čisti" pre svega :) Šta je uprljano? :)

xippi
14. 08. 2006., 17:25
pogledaj ovo

mucky
15. 08. 2006., 13:49
Da... Meni je u stvari trebao onaj prvi primer, da unutrasnji sadrzhaj "ispuni" spoljashnji.

Hvala mnogo na trudu i odgovorima, sjasnilo mi se malo shta chemu sluzhi :)

Ako odete na http://www.mooral.com/sudoku.php videcete za chega mi je trebala cela ova pricha u stvari. Imam jedan DIV koji obuhvata sadrzhaj (bez header i footer), a unutar njega imam dva DIV kontejnera, levi sa opisom i desni u kom je telefon i download box. Problem mi je bio shto ta dva unutrashnja DIV-a nisu ispunjavala onaj koji obuhvata sadrzhaj, a chak i sadrzhaj njih samih je izlazio van njihovih granica. Sada mi se chini da je sve OK, osim samog sajta kome fali grafika i josh shtoshta ali bice i toga jednog dana :)