REŠENO:Dodavanje forme preko slike

REŠENO:Dodavanje forme preko slike

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.
offline
  • 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...



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?

offline
  • 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...

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.

offline
  • 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...

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. Sad Oprostite na uznemiravanju ali me ovo baš muči, a na internetu ne mogu da pronađem rešenje...

offline
  • 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...

offline
  • Nemanja
  • Web Designer and Developer
  • Pridružio: 24 Jan 2007
  • Poruke: 266

Napisano: 16 Maj 2012 0:06

Druže, poslao sam ti Smile

Dopuna: 16 Maj 2012 3:27

Rešeno Smile

.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>

Ko je trenutno na forumu
 

Ukupno su 549 korisnika na forumu :: 12 registrovanih, 1 sakriven i 536 gosta   ::   [ Administrator ] [ Supermoderator ] [ Moderator ] :: Detaljnije

Najviše korisnika na forumu ikad bilo je 3466 - dana 01 Jun 2021 17:07

Korisnici koji su trenutno na forumu:
Korisnici trenutno na forumu: Areal84, DucicM, havoc995, helen1, Kaplar2, Kruger, laze2, stug, Suva planina, Trpe Grozni, VladaKG1980, yufighter