 |
|
| mucky |
13. 08. 2006. 21:01 |
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 :) |
| xippi |
13. 08. 2006. 22:00 |
|
| Dragan Babić |
14. 08. 2006. 00:53 |
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 · 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 |
|
| 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 |
1 Prilog(a)
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 :) |
| Vreme je GMT +2. Trenutno vreme je 05:41. |
|
Powered by vBulletin® Verzija 3.6.8
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
Copyright © DevProTalk. All Rights Reserved.
Mišljenja, saveti, izjave, ponude ili druge informacije ili sadržaji nastali na Sajtu su vlasništvo onoga ko ih je kreirao, a ne DevProTalk.com, tako da ne morate da se oslanjate na njih.
Autori poruka su jedini odgovorni za ovakve sadržaje. DevProTalk.com ne garantuje tačnost, kompletnost ili upotrebnu vrednost informacija, stavova, saveta ili datih izjava. Ne postoje uslovi pod kojima bi mi bili odgovorni za štetu ili gubitak koji je posledica bilo čijeg oslanjanja na nepouzdane informacije, ili bilo kakve informacije nastale kroz komunikaciju između registrovanih članova.Web sajt može sadržavati linkove na druge web sajtove na Internetu ili neke druge sadržaje. Ne kontrolišemo niti podržavamo te druge web sajtove, niti smo pregledali bilo kakve sadržaje na takvim sajtovima. Mi nećemo biti odgovorni za legalnost, tačnost ili prikladnost bilo kog sadržaja, oglasa, proizvoda, usluga ili informacije lociranim na ili distribuiranih kroz druge web sajtove, niti za bilo kakvu štetu nastalu kao posledica takvih informacija. DevProTalk.com drži i čuva druga prava vlasništva na web sajtu. Web sajt sadrže materijale zaštićene copyright-om, zaštitne znakove i druge informacije o pravu vlasništva ili softver. Članovi mogu poslatu informacije zaštićene pravima vlasništva njihovih nosilaca i ona ostaju zaštićena bez obzira da li su oni koji prenose te informacije to naveli ili ne. Osim informacija koje su u javnom vlasništvu ili za koje dobijete dozvolu, nemate pravo da kopirate, modifikujete ili na bilo koji način menjate, objavljujete, prenosite, distribuirate, izvršavate, prikazujete ili prodajte bilo koju informaciju zaštićenu pravima vlasništva. Slanjem informacija ili sadržaja na bilo koji deo DevProTalk.com, Vi automatski dozvoljavate i predstavljate garanciju da imate pravo da dozvolite DevProTalk.com ili članovima DevProTalk.com bespovratnu, kontinualnu, neograničenu, globalnu dozvolu da koriste, kopiraju, izvršavaju, prikazuju i distribuiraju takve informacije i sadržaje i da iz takvih sadžaja koriste bilo koji deo u bilo koje svrhe, kao i pravo i dozvolu da koriste gore navedene sadržaje. Svi zaštitni znakovi (trademarks), logotipi, oznake usluga, firme ili imena proizvoda koji se pominju na ovom web sajtu su vlasništvo kojim raspolažu njihovi vlasnici.