|
Poslao: 25 Jan 2015 00:58
|
offline
- Pridružio: 10 Jan 2012
- Poruke: 975
|
Napisano: 24 Jan 2015 19:17
Evo da objasnim tu sliku
znaci imam jedan najveci div na pocetku on je oznacen kao 1.
U tom 1 imam 2 diva velika , oznaceni kao brojevi 2 i 3.
u 3. div-u imam 3 dodatna mala div-a.
Ta 3 diva tesko da sllozim da budu u jednom redu!
U ta 3 diva je smestena slika, mislim to i nije valjda vazno, je li se pozicionira div kao i svaki div , to ako je u njemu img src tag manje je vazno.
ja stavio i 4 i 5 float:left, a onom 6 stavio right ne vredi!
Dopuna: 25 Jan 2015 0:58
Muku mucim , pre ovoga redao 2 diva u jendoj liniji sada nece, odnosno stavi ih u jednu liniju, ali je problem sto okolni glavni div koji je imenovan kao banner4 on je samo pola prikazan, nema paddinga sa svih strana, vec samo od gore.
Evo HTML kod:
<div id="banner4">
<div id="banner4Tekst">
<p id="banner4Naslov"> This is the fourth banner!</p>
<p id="banner4Podnaslov"> Ovo je cetvrti banner! </p>
</div>
<div id="banner4Button">
<button id="banner4BT"> CONTACT US TODAY </button>
</div>
</div>
CSS kod:
#banner4{
background-color:#e0e0e0;
margin-left:3.6%;
border-left: solid;
border-width:7px;
border-color:#0099FF;
width:92%;
border-radius: 7px;
}
#banner4Tekst{
padding:30px;
float:left;
}
#banner4Naslov{
font-family:Times New Roman;
font-size:30px;
}
#banner4Podnaslov{
font-family:Times New Roman;
font-size:17px;
}
#banner4BT{
background-color:#0099FF;
padding: 8px;
border:none;
border-radius: 4px;
color:white;
font-family: Cambria;
}
#banner4Button{
margin-left:55%;
padding-top:40px;
}
|
|
|
|
|
Registruj se da bi učestvovao u diskusiji. Registrovanim korisnicima se NE prikazuju reklame unutar poruka.
|
|
|
Poslao: 25 Jan 2015 11:39
|
offline
- m4rk0
- Administrator
- Administrator tech foruma
- Marko Vasić
- Gladijator - Maximus Decimus Meridius
- Pridružio: 14 Jan 2005
- Poruke: 15766
- Gde živiš: Majur (Colosseum)
|
nike992 ::Muku mucim , pre ovoga redao 2 diva u jendoj liniji sada nece, odnosno stavi ih u jednu liniju, ali je problem sto okolni glavni div koji je imenovan kao banner4 on je samo pola prikazan, nema paddinga sa svih strana, vec samo od gore.
css treba ovako da izgleda
#banner4{
background-color:#e0e0e0;
margin-left:3.6%;
border-left: solid;
border-width:7px;
border-color:#0099FF;
width:92%;
border-radius: 7px;
display: inline-block;
}
#banner4Tekst{
padding:30px;
float:left;
}
#banner4Naslov{
font-family:'Times New Roman';
font-size:30px;
}
#banner4Podnaslov{
font-family:'Times New Roman';
font-size:17px;
}
#banner4BT{
background-color:#0099FF;
padding: 8px;
border:none;
border-radius: 4px;
color:white;
font-family: Cambria;
}
#banner4Button{
margin-left:55%;
padding-top:40px;
}
U odnosu na tvoj, divu sa id-ijem banner4 zadao sam display: inline-block (div je po defaultu block elemenat pa si zato imao problem); kako bi wrapovao svoje child elemente. Takodje sam stavio navodnike na 'Times New Roman' jer uvek treba stavljati navodnike na fontove ciji se naziv sastoji od vise od jedne razdvojene reci.
|
|
|
|
|
|
|
Poslao: 25 Jan 2015 12:17
|
offline
- Pridružio: 10 Jan 2012
- Poruke: 975
|
Ja probao sad umesto inline block stavio float:left; radi isto kako treba, ima li razlike koje ??
|
|
|
|
|
|
|
Poslao: 25 Jan 2015 12:41
|
offline
- m4rk0
- Administrator
- Administrator tech foruma
- Marko Vasić
- Gladijator - Maximus Decimus Meridius
- Pridružio: 14 Jan 2005
- Poruke: 15766
- Gde živiš: Majur (Colosseum)
|
Napisano: 25 Jan 2015 12:37
nike992 ::
Evo da objasnim tu sliku
znaci imam jedan najveci div na pocetku on je oznacen kao 1.
U tom 1 imam 2 diva velika , oznaceni kao brojevi 2 i 3.
u 3. div-u imam 3 dodatna mala div-a.
Ta 3 diva tesko da sllozim da budu u jednom redu!
U ta 3 diva je smestena slika, mislim to i nije valjda vazno, je li se pozicionira div kao i svaki div , to ako je u njemu img src tag manje je vazno.
ja stavio i 4 i 5 float:left, a onom 6 stavio right ne vredi!
evo nesto nabrzaka, al to je u sustini ono sto trazis (ja sam stavio klase, ti mozes i id-jeve ako ih neces koristiti vise ni na jednom mestu na stranici pod tim nazivom).
html:
<div class="jedan">JEDAN
<div class="dva"><p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p><img src="http://earlstevensselections.com/wp-content/uploads/2014/05/ess-5-750x280.jpg" alt=""></div>
<div class="tri">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
<div class="cetiri">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div>
<div class="pet">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div>
<div class="sest">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div>
</div>
<div class="clearfix"></div>
</div>
</body>
css:
.jedan {
width: 100%;
background-color: pink;
}
.dva {
float:left;
background-color: red;
width: 45%;
margin-top: 2%;
margin-bottom: 2%;
}
.dva img {
width:100%;
}
.tri {
float: right;
background-color: cyan;
width: 45%;
margin-top: 2%;
margin-bottom: 2%;
}
.cetiri {
float: left;
background-color: grey;
width: 30%;
}
.pet {
float: left;
background-color: yellow;
width: 30%;
margin-left: 5%;
}
.sest {
float: right;
background-color: blue;
width: 30%;
}
.clearfix {
clear:both;
}
Dopuna: 25 Jan 2015 12:41
nike992 ::Ja probao sad umesto inline block stavio float:left; radi isto kako treba, ima li razlike koje ??
Ok, al uvak imaj na umu kad radis sa float da je potrebno i ocistiti (uraditi clear) float pozicioniranje kada ne zelis da se i naredni elementi tako pozicioniraju.
|
|
|
|
|
|
|
Poslao: 25 Jan 2015 18:02
|
offline
- Pridružio: 10 Jan 2012
- Poruke: 975
|
@M4rk0 gospodin si veliki,hvala za onaj kod sto si iskucao, ne znam kako meni nije radilo, isto sam stavio za ona tri onako isto float, prva 2 left treci right.
Samo sto nisam zadao tom divu u kojem se nalaze ta 3 diva, njemu nisam zadao float:right kao ti, da nije do toga?
Pitanjca koja zleim da razjasnim, ja krojim sajt, a ostaje mi nesto nerazjasnjeno.
1. Je li kad god stavljam div glavni moram mu dodeliti neki float?
2. Kada hocu da pozicioniram 2 diva u jendoj liniji, ja samo lijevom divu dam float:left, ovog desnog pozicioniram,njemu ne zadajem nista osim margina? Je li gresim tu?
3. Kada da koristim clear:both; , je li cim imam napisan float:left za bilo koji div u glavnom divu ili ne?
4. Malo pre pozicionirao ono sto mi je M4rk0 pomogao za inline:block, ja stavio samo float:left pa je radilo uredno, on rekao moram staviti clear i staviosam clear:both, mejdutim kada sam napravim novi div koji ide ispod, htio sam pomeriti taj div od onog gornjeg nisam mogao sa margin-top niti top obicni, morao sam <br/> tag koristiti i sada tek nakon petog <br/> taga je poceo da se pomera mi ovaj div, je li to zbog ovoga sto sam morao raditi clear:both da popuni duzinu gornjeg diva?
Je li problem sto sam naredao 7-8 <br/> tagova, jer durgacije ne bih mogao odmaknuti div od diva, kao sto rekaoh margin top nije reagovalo nikako, malo sam oduzio nadam se da se razume
Hvala!
|
|
|
|
|
|
|
Poslao: 25 Jan 2015 18:53
|
offline
- m4rk0
- Administrator
- Administrator tech foruma
- Marko Vasić
- Gladijator - Maximus Decimus Meridius
- Pridružio: 14 Jan 2005
- Poruke: 15766
- Gde živiš: Majur (Colosseum)
|
Napisano: 25 Jan 2015 18:38
nike992 ::@M4rk0 gospodin si veliki,hvala za onaj kod sto si iskucao, ne znam kako meni nije radilo, isto sam stavio za ona tri onako isto float, prva 2 left treci right.
Samo sto nisam zadao tom divu u kojem se nalaze ta 3 diva, njemu nisam zadao float:right kao ti, da nije do toga?
Da, zato ti nije radilo. A verovatno nisi ni clear float-a odradio gde je trebalo.
Citat:1. Je li kad god stavljam div glavni moram mu dodeliti neki float?
Naravno da ne moras da stavljas. Stavljas samo ako taj div hoces da floatujes u odnosu na neki drugi div/element.
Citat:2. Kada hocu da pozicioniram 2 diva u jendoj liniji, ja samo lijevom divu dam float:left, ovog desnog pozicioniram,njemu ne zadajem nista osim margina? Je li gresim tu?
Da, gresis. Ako hoces u liniji da ti budu a zadao si prvom divu float:left, moras i drugom divu zadati float.
Citat:3. Kada da koristim clear:both; , je li cim imam napisan float:left za bilo koji div u glavnom divu ili ne?
Koristis nakon poslednjeg diva koji si float-ovao kako ne bi ostali divovi koje kasnije ukucas nastavili da float-uju u odnosu na defaultnu poziciju. U nasem slucaju to je bila klasa sest.
Citat:4. Malo pre pozicionirao ono sto mi je M4rk0 pomogao za inline:block, ja stavio samo float:left pa je radilo uredno, on rekao moram staviti clear i staviosam clear:both, mejdutim kada sam napravim novi div koji ide ispod, htio sam pomeriti taj div od onog gornjeg nisam mogao sa margin-top niti top obicni, morao sam <br/> tag koristiti i sada tek nakon petog <br/> taga je poceo da se pomera mi ovaj div, je li to zbog ovoga sto sam morao raditi clear:both da popuni duzinu gornjeg diva?
Je li problem sto sam naredao 7-8 <br/> tagova, jer durgacije ne bih mogao odmaknuti div od diva, kao sto rekaoh margin top nije reagovalo nikako, malo sam oduzio nadam se da se razume
br tagovi su nuzno zlo. Njih koristiti samo ako treba neki tekst da se prelomi a ni na koji drugi nacin to ne moze da se uradi. Na ostatk poslednjeg pitanja ti odgovaram kasnije, sad zurim.
Dopuna: 25 Jan 2015 18:53
Evo sto se tice poslednjeg pitanja. Dodao sam jos dva diva (.sedam i .osam) ciji je parent div ponovo klasa 1 i bez problema ih odvojio marginama u odnosu na ostale divove. na sve to sam dodao jos jedan div sa klasom devet koji nigde ne floatuje tako da bih ti pokazao kada ne moras da stavljas clear. I taj div sa klasom devet sam isto bez problema odvoji marginama od ostalih divova.
<div class="jedan">JEDAN
<div class="dva"><p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p><img src="http://earlstevensselections.com/wp-content/uploads/2014/05/ess-5-750x280.jpg" alt=""></div>
<div class="tri">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
<div class="cetiri"><img src="http://worldofdtcmarketing.com/wp-content/uploads/2014/01/html-magnifying-glass-225x300.jpg" alt=""></div>
<div class="pet"><img src="http://worldofdtcmarketing.com/wp-content/uploads/2014/01/html-magnifying-glass-225x300.jpg" alt=""></div>
<div class="sest"><img src="http://worldofdtcmarketing.com/wp-content/uploads/2014/01/html-magnifying-glass-225x300.jpg" alt=""></div>
</div>
<div class="clearfix"></div>
</div>
<div class="jedan">
<div class="sedam">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div>
<div class="osam">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div>
<div class="clearfix"></div>
</div>
<div class="devet">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div>
.jedan {
width: 100%;
background-color: pink;
}
.dva {
float:left;
background-color: red;
width: 45%;
margin-top: 2%;
margin-bottom: 2%;
}
.dva img {
width:100%;
}
.tri {
float: right;
background-color: cyan;
width: 45%;
margin-top: 2%;
margin-bottom: 2%;
}
.cetiri {
float: left;
background-color: grey;
width: 30%;
}
.pet {
float: left;
background-color: yellow;
width: 30%;
margin-left: 5%;
}
.sest {
float: right;
background-color: blue;
width: 30%;
}
.clearfix {
clear:both;
}
.sedam {
float: left;
background-color: blue;
width: 45%;
margin-top: 2%;
margin-bottom: 2%;
}
.osam {
float: right;
background-color: turquoise;
width: 45%;
margin-top: 2%;
margin-bottom: 2%;
}
.devet {
background-color: #104E8B;
width: 100%;
margin-top: 4%;
margin-bottom: 4%;
}
|
|
|
|
|
|
|
Poslao: 27 Jan 2015 01:23
|
offline
- Pridružio: 10 Jan 2012
- Poruke: 975
|
Hvala Marko, a pazi ovo sada,obrati paznju na sledeci kod, odradio sam nesto i okej je sve, samo nije mi to to nekako kada ja presaberem se, odnosno logiku ne razumem nije mi jasno detaljno, ali ipak odradim izguglam i resim, ali hocu da razjasnim to.
Ovde sam psoavio kod http://jsfiddle.net/zkuqr38e/
Dakle imam jedan veliki div i u njemu 4 diva.
Prva 3 diva su float:left; cetvrti div nije nista postavljeno, jer samo tako mzoe da bude u jednom redu, eto to mi nije jasno kao prvo?
Ako mozes pogledaj i kod kako ti se cini, gde gresim i slicno, hvala ti puno brate, ovo mi puno znaci, napredujem primecujem bas, guglanje guglanje + mycity = 10
|
|
|
|
|
|
|
Poslao: 27 Jan 2015 18:23
|
offline
- m4rk0
- Administrator
- Administrator tech foruma
- Marko Vasić
- Gladijator - Maximus Decimus Meridius
- Pridružio: 14 Jan 2005
- Poruke: 15766
- Gde živiš: Majur (Colosseum)
|
Suvise dugacak kod da bih zalazio u detalje ali prva greska koju vidim je da si glavni div floatovao bez potrebe. Sto se tice unutrasnjeg cetvrtog diva verovatno ne moze da floatuje kao i ostala tri posto postoji mogucnost da nisi dobro presabrao sirine elemenata ( imaj na umu da se racunaju i sirina i pading i margine i border). Takodje br tag koristis pogresno. Izbegavaj ga a posebno izbegavaj nacin na koji ti koristis. Dva elementa radvajaj paddingom/marginom a ne br tagom. Samo ako u nekoj recenici (iz nekog razloga) hoces da napravis prelom na tacno odredjenm delu teksta, u tom slucaju bi br imao smisla.
|
|
|
|
|
|
