login form "fluttuante"

allora pochi giorni fà ho aperto un post dicendo che per la lavorazione del mio gdr ero quasi giunto a conclusione, ora posso dire di aver davvero concluso, da solo, e per le mie poche conoscenze in programmazione sono soddisfattissimo, la land non mi dispiace, magari con un grafico ed un programmatore la si potrà migliorare, ma per lanciarla online direi che manca ben poco, il problema mio ora, è che non sapendo modificare bene il php ho preferito creare la pagina di login in html, inserendo un'immagine e spostando le coordinate del form del login, il problema è che cambiando zoom o risoluzione essendo le coordinate "absolute" queste si iniziano a spostare a destra e a sinistra, e non restano dove preferisco io... la cosa insomma è un po'fastidiosa... come potrei sistemare? in alternativa posso anche postare il codice qui così potrete darci un'occhiata! grazie anticipatamente dell'attenzione :-)

Lineage II ↗
Entra in uno sconfinato mondo fantasy dominato da razze in contrasto tra loro. Scatena i tuoi poteri in uno dei Mmo più famosi al mondo!

quota

Pagine → 1

takkero

SCRIVI

03/03/2012 19:49:52 e modificato da takkero il 03/03/2012 19:50:14

http://xhtml.html.it/guide/leggi/51/guida-html/

http://css.html.it/guide/leggi/208/guida-css3/

http://www.php.net

tutto quello che ti serve è qui dentro

Lineage II ↗
Entra in uno sconfinato mondo fantasy dominato da razze in contrasto tra loro. Scatena i tuoi poteri in uno dei Mmo più famosi al mondo!

quota

carmine_91

SCRIVI

03/03/2012 21:42:25

nicodem ha scritto: Bè già se usi posizione assoluta right,bottom dovresti risolvere...
anche se riduci lo schermo te la ritrovi sempre in basso a destra!

eh lo so, ma io nell'immagine che uso come sfondo ho scritto "uesername" e "password" e quindi i campi del login dovrebbero trovarsi sull'immagine, o al più alla destra dell'immagine, di fianco alle scritte da me fatte su di essa... sennò vabbè era facile mettere un semplice form e piazzarlo dove mi pareva xD...

AlterEgo ↗
Scopri AlterEgo GdR: un incredibile universo narrativo in stile medievale fantasy che cresce, muta e vive giorno dopo giorno grazie ai suoi giocatori!

quota

nuprestige

SCRIVI

03/03/2012 22:16:23

carmine_91 ha scritto:

nicodem ha scritto: Bè già se usi posizione assoluta right,bottom dovresti risolvere...
anche se riduci lo schermo te la ritrovi sempre in basso a destra!

Usa due div, l'immagine sotto la metti nel div relative, e il form nel div absolute, in questo modo la posizione del form dipenderà dall'immagine sotto, e non dalla risoluzione dello schermo.
No ti si muove più, resta fisso come lo metti rispetto all'immagine.
Se lo regoli rispetto alla pagina è ovvio che si sposta quando cambi risoluzione ;)

World of Warship ↗
MMO gratuito con frenetiche battaglie navali ambientate nel ventesimo secolo. Salpa con la tua nave ed affronta i nemici!

quota

carmine_91

SCRIVI

04/03/2012 03:21:53

nuprestige ha scritto:

carmine_91 ha scritto:

nicodem ha scritto: Bè già se usi posizione assoluta right,bottom dovresti risolvere...
anche se riduci lo schermo te la ritrovi sempre in basso a destra!

scusa l'ignoranza... ma potresti dirmi come dovrei fare? xD... ecco il file.htm che ho creato io... se mi dicessi come fare ti sarei infinitamente grato :-)

<body bgcolor="black">
<center>
<center>
<img src="http://apocalyptic.altervista.org/login.png" USEMAP="#login.png" WIDTH=1024 HEIGHT=768 BORDER=0>
<MAP NAME="login.png">
<AREA SHAPE=RECT COORDS="334,671,670,730" HREF="http://apocalyptic.altervista.org/recupero%20password.htm">
<p align="center"/>
<div align="center" style="width: 100px; height: 50px; background-image: url(http://royalcruise.altervista.org/index1_1_.jpg); position: absolute; top: 280px; left: 1200px; background-repeat: no-repeat no-repeat; ">
<form action="login.php" id="do_login" method="post" onsubmit="check_login(); return false;">
<a name="invio">
<input type="text" id="username" name="login1" size="15" name="Login1" maxlength="20" style="background-color: black; color: white; font-size: 10px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; border-top-color: white; border-right-color: white; border-bottom-color: white; border-left-color: white; "/>
</a>
</div>
<a name="invio">
<div align="center" style="width: 100px; height: 280px; background-image: url(http://royalcruise.altervista.org/index1_1_.jpg); position: absolute; top: 410px; left: 1120px; background-repeat: no-repeat no-repeat; ">
<input type="password" id="password" name="pass1" size="15" type="password" name="Pass1" maxlength="20" style="background-color: black; color: white; font-size: 10px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; border-top-color: white; border-right-color: white; border-bottom-color: white; border-left-color: white; "/>
<input type="submit" value="Entra" style="background-color: black; color: gray; font-size: 10px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; border-top-color: black; border-right-color: black; border-bottom-color: black; border-left-color: black; "/>
</div>
</form>
</a>
</map>
</center>
</center>
</body>

Enlisted ↗
Guida la tua squadra di soldati in combattimenti su larga scala, con fanteria, veicoli corazzati e aerei della IIa Guerra Mondiale!

quota

nuprestige

SCRIVI

04/03/2012 11:16:30 e modificato da nuprestige il 04/03/2012 11:21:44

Questa sopra è la tua pagina htm.

Questa sotto è come dovrebbe diventare più o meno. In grassetto le modifiche.

<body bgcolor="black">
<center>
<center>
<div style="position:relative;"><img src="http://apocalyptic.altervista.org/login.png" USEMAP="#login.png" WIDTH=1024 HEIGHT=768 BORDER=0>
<MAP NAME="login.png">
<AREA SHAPE=RECT COORDS="334,671,670,730" HREF="http://apocalyptic.altervista.org/recupero%20password.htm">
<p align="center"/>
<div align="center" style="width: 100px; height: 50px; background-image: url(http://royalcruise.altervista.org/index1_1_.jpg); position: absolute; top: 280px; left: 1200px; background-repeat: no-repeat no-repeat; ">
<form action="login.php" id="do_login" method="post" onsubmit="check_login(); return false;">
<a name="invio">
<input type="text" id="username" name="login1" size="15" name="Login1" maxlength="20" style="background-color: black; color: white; font-size: 10px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; border-top-color: white; border-right-color: white; border-bottom-color: white; border-left-color: white; "/>
</a>
</div>
<a name="invio">
<div align="center" style="width: 100px; height: 280px; background-image: url(http://royalcruise.altervista.org/index1_1_.jpg); position: absolute; top: 410px; left: 1120px; background-repeat: no-repeat no-repeat; ">
<input type="password" id="password" name="pass1" size="15" type="password" name="Pass1" maxlength="20" style="background-color: black; color: white; font-size: 10px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; border-top-color: white; border-right-color: white; border-bottom-color: white; border-left-color: white; "/>
<input type="submit" value="Entra" style="background-color: black; color: gray; font-size: 10px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; border-top-color: black; border-right-color: black; border-bottom-color: black; border-left-color: black; "/>
</div>
</form>
</a>
</map>
</center>
</center>
</div>
</body>

Come vedi non ho fatto niente di che, semplicemente, in termini pratici, gli ho detto di regolare i due div absolute (quindi i due form) in base all'immagine, e non alla pagina. Ora regolali di nuovo in modo che siano al posto giusto, e dopo vedrai che non si muoveranno più.

PS: Comunque c'è un sacco di roba inutile in sta pagina xD specialmente le due immagini di sfondo dei div fluttuanti inesistenti prese da credo un altro gdr (?)
Consiglio, se proprio vuoi prendere pezzi di codice da altri, almeno di "dimagrirli" e renderli essenziali a quello che serve a te. Questa pagina potrebbe essere corta la metà <3

New World Order ↗
Diventa un agente del Nuovo Ordine Mondiale e affronta le forze occulte che minacciano il pianeta Terra in questo GDR Urban Fantasy per Mobile!

quota

carmine_91

SCRIVI

04/03/2012 13:30:49 e modificato da carmine_91 il 04/03/2012 13:39:00

nuprestige ha scritto:

si infatti poi ieri a quell'ora barbara che ho postato su gdr online, mi sono messo ed ho risistemato il codice come hai fatto tu, inserendo lo stesso div e rimuovendo molta robaccia inutile, il problema è stato che non si poteva più cliccare su "recupera password" perdendo la mappa dell'immagine, però ho risolto inserendo un pulsante "input"

<body bgcolor="black">
<center>
<center>
<div align="center" style="width: 1024px; height: 760px; background-image: url(http://apocalyptic.altervista.org/login.png); position: relative;>
<p align="center"/>
<div align="center" style="width: 100px; height: 50px; position: absolute; top: 280px; left: 800px; background-repeat: no-repeat no-repeat; ">
<form action="login.php" id="do_login" method="post" onsubmit="check_login(); return false;">
<a name="invio">
<input type="text" id="username" name="login1" size="15" name="Login1" maxlength="20" style="background-color: black; color: white; font-size: 10px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; border-top-color: white; border-right-color: white; border-bottom-color: white; border-left-color: white; "/>
</a>
</div>
<a name="invio">
<div align="center" style="width: 100px; height: 280px; position: absolute; top: 410px; left: 720px; background-repeat: no-repeat no-repeat; ">
<input type="password" id="password" name="pass1" size="15" type="password" name="Pass1" maxlength="20" style="background-color: black; color: white; font-size: 10px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; border-top-color: white; border-right-color: white; border-bottom-color: white; border-left-color: white; "/>
<input type="submit" value="Entra" style="background-color: black; color: gray; font-size: 10px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; border-top-color: black; border-right-color: black; border-bottom-color: black; border-left-color: black; "/>
</div>
</form>
</a>
<div align="center" style="width: 100px; height: 280px; position: absolute; top: 740px; left: 420px; background-repeat: no-repeat no-repeat; " class="pass_rec">
<form action="recupero password.htm" method="post">
<input type="submit" value="Password smarrita? Clicka qui!" style="background-color: black; color: gray; font-size: 10px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; border-top-color: black; border-right-color: black; border-bottom-color: black; border-left-color: black; "/>
</form>
</div>
</div>
</center>
</center>
</body>

p.s. ho copiato anche il codice che avevi inserito tu, ed era così che avevo tentato senza riuscire la prima volta, infatti con il codice che hai messo tu il problema persisteva, ora con questo non da problemi :-) forse anche stavolta potevo accorciare ulteriormente, ma sinceramente importa più che altro che funzioni xD...