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 :-)

Neverness to Everness ↗
Esplora Hesperia in Neverness to Everness! Un open-world anime tra misteri, auto modificate e spettacolari combattimenti UE5. Gioca ora gratis a NTE!

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

Neverness to Everness ↗
Esplora Hesperia in Neverness to Everness! Un open-world anime tra misteri, auto modificate e spettacolari combattimenti UE5. Gioca ora gratis a NTE!

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!

Project Entropy ↗
Esplora confini interstellari, comanda truppe d'élite e riconquista pianeti alieni. Il destino dell’umanità è nelle tue mani. Gioca a Project Entropy!

nuprestige

SCRIVI

03/03/2012 22:16:23

carmine_91 ha scritto: [quote]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!

Project Entropy ↗
Esplora confini interstellari, comanda truppe d'élite e riconquista pianeti alieni. Il destino dell’umanità è nelle tue mani. Gioca a Project Entropy!

carmine_91

SCRIVI

04/03/2012 03:21:53

nuprestige ha scritto: [quote]carmine_91 ha scritto: [quote]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...[/quote]

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 ;)[/quote]

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>

Fallen Gods ↗
Essere un semidio è solo l’inizio; la tua storia deve ancora cominciare. Vivi avventure moderne e mitologiche con gli amici e con gli dei dell'Olimpo!

nuprestige

SCRIVI

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

New Orleans ↗
La Città dai Mille Volti: Crime, Feste, Mistero, Voodoo, Natura Incontaminata, Fama, Grattacieli, Luci Splendenti e Ombre Profonde.

carmine_91

SCRIVI

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

nuprestige ha scritto: [quote]
<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>

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
[/quote]

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

World of Tanks ↗
Lanciati in epiche battaglie spalla a spalla con altri giocatori. Conquista la supremazia nel mondo dei Carri Armati!

Discussione seguita da › carmine_91

Pagine → 1

Rispondi alla Discussione Segui Discussione Inoltra Discussione Forum Programmazione, Open Source e Hosting Elenco Forum

Articoli, Interviste e altre Risorse!

Guida al Play By Chat

Una guida base per l'utente del Play by Chat scaricabile gratuitamente in formato PDF!

Controversie Ai e PbC

Le controversie sull'uso delle intelligenze artificiali nei giochi Play by Chat!

Sea of Conquest

Vivi un'avventura tra i mari! Dal cuore del Mare del Diavolo, un paradiso piratesco brulicante di magia, tesori e avventure, salperai verso l'ignoto!

Signore del Male

Le 100 cose che farò se mai diventerò un Signore del Male!