Meni je problem sa marginama, ono sta kaze da mora bit odmaknuto 5px forma od slike ja sam to isao sa marginama napravit jer ne znam funckija koja ima ko hspace ali samo sa desne strane da je…i kad stavim marginu background color mi pobjegne gore a ne smije, pa ako mi netko moze vidit ovo sta sam napravio jer mi se neda sa ovim zezat.
Ovako sam ja napravio, ali sam mjenjao pa sad nznm kak sam pocetno napravio
.wrap {
width: 960px;
margin: 0 auto;
overflow: hidden;
}
img {
float: left;
margin-right: 5px;
border: 1px solid #333;
background-color: #666;
padding: 5px;
}
form {
background-color: lightgray;
float: left;
padding: 10px;
}
Auto Show Zagreb
<div class="wrap">
<h1>Naslov</h1>
<img src="http://creatifapps.com/img/apps/server-box.gif" alt="car" />
<form action="" method="post">
Vaše ime i prezime
Želim rezervirati vozilo za testnu vožnju
</form>
</div>
[/HTML]
Evo ga jednostavno i brzo. Css si prebaci u zaseban file i to je to. Stavio sam ti background, padding i border na image da vidiš da se forma zaista odmaknula od slike za 5 px.
Pa ti si onda napravio sve isto ko ja koliko vidim na primjeru samo sta bi tebi islo background-color: white; da se vidi taj razmak?, jer ja nisam imao ideju kako to pomaknut, ja sam mislio stavit samo margin-right i da pozadinu bijelu ima isto kao ti, znaci to se jedino tako moze napravit, nema neka funkcija tipa hspace koja radi to?
Ma kuzim ja to, bio sam ja ovo mjenjao, kod sam stavio tek tako, ali bio sam napravio isto to, a on napravi ako se ne varam da border boja ide preko boje od background-a od forme, tj. background color od slike je zapravo margina te boje koja ide preko background od forme?, jel tako? xD, ja sam isto to napravio bio samo me zanimalo da li ima neka shema da se ono bas pomakne, meni je bio sam problem pomaknut taj sivi background za tih 5px…
Mislim da po pitanjima koja postavljaš tebi fali elemntarno znanje iz HTML i CSS, a ako dobor milsim imam jedan dobar link :
, besplatno!!!
S obzirom da nisam skužio tvoje pitanje niti najmanje ne mogu ti odgovoriti, bilo bi dobro kad bi svoju nedoumicu malo bolje razjasnio i napisao neo konciznije pitanje. Tada bih ti mogao pomoći.
Razlike između moga i tvoga koda:
[HTML]
/* moj kod /
/ element kojim smo sve omotali da bi mogli pozicionirati sve skupa na sredinu /
.wrap {
width: 960px;
margin: 0 auto; / margine: gore/dolje lijevo/desno /
overflow: hidden; / ovo je umjesto clear both diva kako se floatanje nebi nasljedilo nakon zadnjeg floatanog elemnta, u našem slučaju forma */
}
img {
/* floatanje na lijevo, element uzmiče na lijevu stranu i gubi svojstvo display: block, a to znači da bi sad mogao odrediti visinu i širinu tog elementa trebao bi eksplicitno navesti display: block u css-u, do njega se povlači sljedeći element u nizu, u našem slučaju forma. */
float: left;
margin-right: 5px; /* za ovoliko ćeš pomaknuti sljedeći element od desnog ruba slike */
border: 1px solid #333; /* ovo */
background-color: #666; /* ovo */
padding: 5px; /* i ovo ti ne treba uopće, ja sam ti to tu stavio tek toliko da vidiš da se forma odmaknula od slike s obzirom da slika nema nikakav obrub */
}
form {
background-color: lightgray; /* pozadinska boja forme, nije nužna /
float: left; / puštamoo formu da floata na lijevo i na taj način joj dopuštamo da bude uz image /
padding: 10px; / koliko su elementi unutar forme odmaknuti od njenog ruba, dakle ovo nije svojstvo koje se koristi kako bi neki element odmaknuli od nekog susjednog elementa, nego je to svojstvo koji određujemo koliko će child elementi biti odmaknuti od parent elementa */
}
/* tvoj kod /
/ ok, ovo su osnovne postavke koje nemaju veze sa samim problemom */
body{
font-size:18px;
color:black;
}
/* ne treba ti div za naslov kad imaš h1 tag za to */ #naslov{
font-size:18px;
color:blue;
}
/* zašto formu stavljati u div??? / #forma{
background-color:lightgray;
border:0px;
padding: 30px 0px 0px 0px; / ovime si child element odmaknuo 30px od vrha forme, isto kao da si napisao padding-top: 30px. Inače kada koristiš skraćeno svojstvo kao npr. padding onda ti vrjednosti računaju ovako:
padding: padding-top padding-right padding-bottom padding-left, dakle u smjeru kazaljke na satu počevši od 12:00 */
/* Inače tu ti fali još float:left kako bi mogao koristiti svojstvo margin na slici */
}
/* Čemu slika u zaseban div??? / #slika{
float: left; / ovo je ok /
padding: 0px; / i ovo je ok /
display:inline; / Čemu ovo??? ovime poništavaš float i nema nikakvu ulogu /
margin: 5px; / ovime si odredio ovo margin-top: 5px; margin-right: 5px; margin-bottom: 5px; margin-left: 5px;, a mislim da ti to nije bila namjera. */}
[/HTML]
Ne znam koliko ti je sad jasnije, ali ti u svakom slučaju preporučam da pregledaš link koji sam ti dao, ukoliko ti još nešto nije jasno slobodno pitaj.
Nisi pogledao zadatak koji sam stavio u link, zato sam stavljao div a ne img i form u css-u i zato nisam na sredinu stavljao jer zadatak to ne trazi od mene, mene je samo zanimalo da li postoji neki drugaciji nacin za rijesit ovaj problem…znam html i css relativno dobro pa mi nisi trebao pisat ovo sve ali hvala :), ono sto sam htio pitati je da li postoji koji drugaciji nacin za to pomicanje, jer ako stavim padding-right recimo on nista ne napravi ako img nema bg color, sto znaci da on pomakne to za 5px ali mu ostane boja od forme, a ovako on stavi boju od margine samo preko sivog bg-a od forme, ako me kuzis sta ocu rec, pa me zanimalo da li postoji neka funkcija koja to drugacije radi
Mislima da nisi stavio div ili br element nakon gotovih floatanja i da ti zato ruši stranicu. Stvai ga nakon forme ili prije zatvaranja div-a u kojem je forma. (ja si obićno napravim klasu samo za to da nemoram stalno piskarat.)
npr isto za div (sam pogledaj clear na w3cShoolu za detalje) obićno to zna bit problem.
