Poslao: 15 Maj 2012 17:21
|
offline
- Nemanja
- Web Designer and Developer
- Pridružio: 24 Jan 2007
- Poruke: 266
|
Pozdrav,
imam jedan problem. Definisao sam sliku i mapirao sam oblasti na toj slici. E sad, potrebno mi je da na određeni deo te slike kreiram formu(input type). Mogu da definišem form tagove i kreiram, ali je problem što je slika postavljena da bude u sredini i prilikom razvlačenja pregledača forma mi beži, nije stacionirana na jednom mestu.
Da li postoji neki tag kao što je map, da obeležim deo slike na kom će biti ta forma?
|
|
|
Registruj se da bi učestvovao u diskusiji. Registrovanim korisnicima se NE prikazuju reklame unutar poruka.
|
|
Poslao: 15 Maj 2012 18:52
|
offline
- stogor
- Građanin
- Pridružio: 06 Sep 2008
- Poruke: 150
- Gde živiš: Obrenovac
|
Korišćenjem apsolutnog pozicioniranja možeš bilo šta postaviti bilo gde, pa čak i jedno preko drugog.
Pozdrav...
|
|
|
|
Poslao: 15 Maj 2012 18:53
|
offline
- Nemanja
- Web Designer and Developer
- Pridružio: 24 Jan 2007
- Poruke: 266
|
Da stavim u div tagu: positon="absolute"?
A da li će u tom slučaju prilikom resize-a prozora deformisati se slika?
|
|
|
|
Poslao: 15 Maj 2012 21:12
|
offline
- stogor
- Građanin
- Pridružio: 06 Sep 2008
- Poruke: 150
- Gde živiš: Obrenovac
|
Prvo moraš da čitav deo gde je slika i gde treba da bude forma obuhvaris jednim div-om sa relativnim pozicioniranjem. Ako to ne uradis, može se desiti da apsolutno pozicioniranje bude u odnosu na granice browsera. Otprilike ovako:
<div style="position:relative;">
<div style="position:absolute; left:0px; top:0px; width:400px; height:300px;">
<img src="slika.jpg" alt="" title="" />
</div>
<form>
<div style="position:absolute; left:50px; top:60px;">
<input name="ime" />
</div>
</form>
<div style="position:absolute; left:30px; top:120px;">
Neki tekst...
</div>
</div>
Sa left i top možeš pozicionirati element bilo gde. I možeš ih imati koliko god hoćeš sa apsolutnim pozicioniranjem, sve pre zatvaranja poslednjeg div-a (onaj koji zatvara relativno pozicioniranje).
Slika se neće deformisati.
Pozdrav...
|
|
|
|
Poslao: 15 Maj 2012 21:19
|
offline
- Nemanja
- Web Designer and Developer
- Pridružio: 24 Jan 2007
- Poruke: 266
|
Ovo je .css:
body {
background-color:silver;
}
#formDiv1 {
position:absolute;
width:200px;
height:115px;
z-index:1;
left:520px;
top: 310px;
}
#formDiv2 {
position:fixed;
width:200px;
height:115px;
z-index:1;
left: 1000px;
top: 310px;
}
A ovo je .html:
<HTML>
<HEAD>
<map name="areamap">
<area shape="rect" coords="1029,40,1094,187" href="index.html" alt="Pocetna" />
<area shape="rect" coords="930,250,1092,351" href="novi_unos.html" alt="Forme" />
<area shape="rect" coords="1016,427,1081,559" href ="pregled.html" alt="Izvestaj" />
</map>
<LINK REL="stylesheet" TYPE="text/css" HREF="style.css"/>
</HEAD>
<body>
<div align="center">
<img src="images/background_unos.png" alt="Background" usemap="#areamap" /><br />
</div>
<div id="formDiv1">
<form>
Ime:<br />
<input type="text" alt="ime"><br />
Prezime:<br />
<input type="text" alt="prezime"><br />
Datum Rođenja:<br />
<input type="text" alt="datumrođenja"><br />
Pol:<br />
<input type="radio" name="pol" value="muški" /> Muški<br /><input type="radio" name="pol" value="ženski" /> Ženski
</form>
</div>
<div id="formDiv2">
<form>
Mobilni telefon:<br />
<input type="text" alt="mobilni"><br />
Fiksni telefon:<br />
<input type="text" alt="fiksni"><br />
Fax:<br />
<input type="text" alt="fax"><br />
<br />
<input type="submit" alt="unesi" value="Unesi">
</form>
</div>
</body>
</html>
Kada definišem on opet priliko resize-a pomera i formu.
|
|
|
|
Poslao: 15 Maj 2012 21:49
|
offline
- stogor
- Građanin
- Pridružio: 06 Sep 2008
- Poruke: 150
- Gde živiš: Obrenovac
|
Pa i sliku je potrebno da apsolutno pozicioniras, a to sto hoces da ona bude u sredini resava se sa margin:0 auto;
Pozdrav...
|
|
|
|
Poslao: 15 Maj 2012 22:02
|
offline
- Nemanja
- Web Designer and Developer
- Pridružio: 24 Jan 2007
- Poruke: 266
|
Ovako, dodao sam u .css novi stil:
#background {
position:absolute;
margin:auto;
}
A u .html-u sam prepravio i dodao:
<div id="background">
<img src="images/background_unos.png" alt="Background" usemap="#areamap" /><br />
</div>
Ali ponovo neće da postavi sliku na sredinu. Oprostite na uznemiravanju ali me ovo baš muči, a na internetu ne mogu da pronađem rešenje...
|
|
|
|
Poslao: 15 Maj 2012 22:23
|
offline
- stogor
- Građanin
- Pridružio: 06 Sep 2008
- Poruke: 150
- Gde živiš: Obrenovac
|
Spakuj sve fajlove, ukljucujuci i sliku i posalji na pv, pa cemo ti to resiti.
Pozdrav...
|
|
|
|
Poslao: 16 Maj 2012 03:27
|
offline
- Nemanja
- Web Designer and Developer
- Pridružio: 24 Jan 2007
- Poruke: 266
|
Napisano: 16 Maj 2012 0:06
Druže, poslao sam ti
Dopuna: 16 Maj 2012 3:27
Rešeno
.css
body {
background-color:silver;
}
#omotac {
width:1119px;
height:660px;
margin:0 auto;
padding:0;
background:url(images/pozadina.png) left top no-repeat;
position:relative;
}
#levo {
width:400px;
height:620px;
float:left;
margin:15px 45px 0px 120px;
border:1px solid #f00;
}
#desno {
width:325px;
height:620px;
float:left;
margin:15px 5px 0px 20px;
border:1px solid #0f0;
}
#navigacija {
float:right;
width:198px;
height:649px;
border:1px solid #0f0;
}
.html
<div id="omotac">
<div id="levo">
<!-- end levo --></div>
<div id="desno">
<!-- end desno --></div>
<div id="navigacija">
<img src="images/desno_pocetna.png" alt="" />
<!-- end navigacija --></div>
<!-- end omotac --></div>
|
|
|
|