Početničko nerazumevanje DIV koncepta

mucky · 13. 08. 2006.

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.

Kôd:

<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.

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/...ut/equalheight

Dragan Babić · 14. 08. 2006.

Pogledaj ovu stranicu u browseru kako bi pojasnio sebi floatove (nadam se

).

Kôd:

<!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.

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.

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.

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.

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.

pogledaj ovo

mucky · 15. 08. 2006.

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

13. 08. 2006.	#1
mucky novi član Datum učlanjenja: 13.08.2006 Lokacija: Novi Sad Poruke: 4 Hvala: 0 0 "Hvala" u 0 poruka	Početničko nerazumevanje DIV koncepta 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. Kôd: <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

14. 08. 2006.	#6
Dragan Babić Designer guy Wrote a book Datum učlanjenja: 06.06.2005 Lokacija: Novi Sad Poruke: 1.373 Hvala: 55 42 "Hvala" u 22 poruka	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. __________________ Plakatt — objavi, razglasi i saznaj za događaje DnevnikEklektika.com \| Sprawsm

Alati teme
Pogledajte verziju za štampanje Pošaljite email-om ovu stranu
Način prikaza
Linearni prikaz Prebacite u hibridni prikaz Prebacite u prikaz po temama

Slične teme
Tema	Početna poruka teme	Forum	Odgovori	Poslednja poruka
Novi forum - početnička pitanja	bluesman	Sva početnička pitanja	24	26. 05. 2011. 02:58
Još jedno početničko....o .ME domenima	dark_mark	Sva početnička pitanja	1	16. 01. 2008. 00:35
Početničko pitanje vezano za pozadinu	mirko	Sva početnička pitanja	20	20. 11. 2007. 00:27
zend framework - početnički problem	DakiPro	PHP	5	20. 06. 2006. 23:33
Moje viđenje koncepta DevProTalk foruma	mungos	Obaveštenja, predlozi i pitanja	48	17. 07. 2005. 14:27

13. 08. 2006.	#2
xippi xippster Master Datum učlanjenja: 16.06.2005 Lokacija: Beograd Poruke: 681 Hvala: 102 138 "Hvala" u 84 poruka	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/...ut/equalheight

15. 08. 2006.	#9
mucky novi član Datum učlanjenja: 13.08.2006 Lokacija: Novi Sad Poruke: 4 Hvala: 0 0 "Hvala" u 0 poruka	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