DevProTalk

Forumi IT profesionalaca
web development, web design, e-business, SEO


Idite nazad   DevProTalk > Web development i web aplikacije > (X)HTML, JavaScript, DHTML, XML, CSS
Želite da se reklamirate ekskluzivno na ovoj poziciji? Javite se

(X)HTML, JavaScript, DHTML, XML, CSS Client scripting tehnologije, Dynamic HTML, Cascading Stylesheets, XML i standardi

Odgovori
 
Alati teme Način prikaza
Staro 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
mucky is on a distinguished road
Default 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
mucky je offline   Odgovorite uz citat
Staro 13. 08. 2006.   #2
xippi
xippster
Master
 
Avatar xippi
 
Datum učlanjenja: 16.06.2005
Lokacija: Beograd
Poruke: 681
Hvala: 102
138 "Hvala" u 84 poruka
xippi će postati "faca" uskoroxippi će postati "faca" uskoro
Default

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
xippi je offline   Odgovorite uz citat
Staro 14. 08. 2006.   #3
Dragan Babić
Designer guy
Wrote a book
 
Avatar Dragan Babić
 
Datum učlanjenja: 06.06.2005
Lokacija: Novi Sad
Poruke: 1.373
Hvala: 55
42 "Hvala" u 22 poruka
Dragan Babić će postati "faca" uskoro
Pošaljite poruku preko Skype™ za Dragan Babić
Default

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>
Dragan Babić je offline   Odgovorite uz citat
Staro 14. 08. 2006.   #4
mucky
novi član
 
Datum učlanjenja: 13.08.2006
Lokacija: Novi Sad
Poruke: 4
Hvala: 0
0 "Hvala" u 0 poruka
mucky is on a distinguished road
Default

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
mucky je offline   Odgovorite uz citat
Staro 14. 08. 2006.   #5
xippi
xippster
Master
 
Avatar xippi
 
Datum učlanjenja: 16.06.2005
Lokacija: Beograd
Poruke: 681
Hvala: 102
138 "Hvala" u 84 poruka
xippi će postati "faca" uskoroxippi će postati "faca" uskoro
Default

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
xippi je offline   Odgovorite uz citat
Staro 14. 08. 2006.   #6
Dragan Babić
Designer guy
Wrote a book
 
Avatar Dragan Babić
 
Datum učlanjenja: 06.06.2005
Lokacija: Novi Sad
Poruke: 1.373
Hvala: 55
42 "Hvala" u 22 poruka
Dragan Babić će postati "faca" uskoro
Pošaljite poruku preko Skype™ za Dragan Babić
Default

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.
Dragan Babić je offline   Odgovorite uz citat
Staro 14. 08. 2006.   #7
mucky
novi član
 
Datum učlanjenja: 13.08.2006
Lokacija: Novi Sad
Poruke: 4
Hvala: 0
0 "Hvala" u 0 poruka
mucky is on a distinguished road
Default

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?
mucky je offline   Odgovorite uz citat
Staro 14. 08. 2006.   #8
xippi
xippster
Master
 
Avatar xippi
 
Datum učlanjenja: 16.06.2005
Lokacija: Beograd
Poruke: 681
Hvala: 102
138 "Hvala" u 84 poruka
xippi će postati "faca" uskoroxippi će postati "faca" uskoro
Default

pogledaj ovo
Priloženi fajlovi
Tip fajla: html floats.html (1,2 KB, 668 pregleda)
xippi je offline   Odgovorite uz citat
Staro 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
mucky is on a distinguished road
Default

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
mucky je offline   Odgovorite uz citat
Odgovori


Alati teme
Način prikaza

Pravila pisanja
Možete ne započinjati nove teme
Možete ne slati odgovore
Možete ne slati priloge
Možete ne izmeniti svoje poruke
vB kôd je Uključen
Smajliji su Uključen
[IMG] kod je Uključen
HTML kôd je Isključen
Pogledajte forum

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. 03:58
Još jedno početničko....o .ME domenima dark_mark Sva početnička pitanja 1 16. 01. 2008. 01:35
Početničko pitanje vezano za pozadinu mirko Sva početnička pitanja 20 20. 11. 2007. 01:27
zend framework - početnički problem DakiPro PHP 5 21. 06. 2006. 00:33
Moje viđenje koncepta DevProTalk foruma mungos Obaveštenja, predlozi i pitanja 48 17. 07. 2005. 15:27


Vreme je GMT +2. Trenutno vreme je 01:24.


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.