Per prima cosa, non lasciare mai delle celle vuote, se proprio devi lascire degli spazi (ma non mi sembra il tuo caso) riempili con oggetti testo che lascerai vuoti.

La pagina che hai postato la metterei in questo modo

Per quanto riguarda la visualizzazzione della carta di credito tagliata:

Ti succede in quanto hai inserito l'immagine con il codice html senza dare nessun foglio di stile.

Prova ad utilizzare l'oggetto immagine o dare un  width:100% allo stile dell'immagine

Ciao

Ho modificato il posizionamento degli oggetti come mi hai consigliato (v. allegato), ma adesso non riesco più a far rientrare i campi del login nell'immagine della cella (carta di credito).

Non so come fare per dare "un foglio di stile" e "un width 100% allo stile dell'immagine", perché non conosco bene X5 né conosco alcun linguaggio di programmazione web. Perciò, ti prego di esaminare le immagini che ho allegato e dirmi cosa è sbagliato e cosa devo fare. 

Ti trascrivo, qui di seguito, anche il codice inserito nell'oggetto Html che, se ho ben capito, crea i campi del login (che non sono in grado di modificare).

Grazie infinite per l'aiuto.

---------------------------------------

<!-- Private Area.Login: START -->
<div id="imLogin" style="width: 200%; max-width: 200px">
<form method="post" action="area-riservata.php">

<div class="imLoginBlock" style="width: 50%;">
<label for="imUname"><span style="font-weight: normal; font-style: normal;font-family:Tahoma; font-size:10pt; color: #FFFFFF">E-mail:</span></label><br />
<input type="text" name="email" id="imUname" style="box-sizing: border-box; font-weight: normal; font-style: normal;border: 1px solid #ccc; font-family:Tahoma; font-size:10pt; background-color: #FFFFFF; color: #000000; width: 200%; max-width: 200px"><br />
</div>
<div class="imLoginBlock" style="width: 50%;">
<label for="imPwd"><span style="font-weight: normal; font-style: normal;font-family:Tahoma; font-size:10pt; color: #FFFFFF">Password:</span></label><br />
<input type="password" name="password" id="imPwd" style="box-sizing: border-box; font-weight: normal; font-style: normal;border: 1px solid #ccc; font-family:Tahoma; font-size:10pt; background-color: #FFFFFF; color: #000000; width: 200%; max-width: 200px"><br />
</div>
<div class="imLoginBlock" style="width: 125%; margin-top: 10px; text-align: center">
<input type="submit" name="login" value="Accedi" class="imLoginSubmit" style="font-weight: normal; font-style: normal;border: 1px solid #ccc; background-color: #DDDDDD; font-family:Tahoma; font-size:10pt; color: #000000">
<input type="button" onclick="location.href='recupera-password.php'" class="imLoginSubmit" style="font-weight: normal; font-style: normal;border: 0px; background-color: transparent; font-family:Tahoma; font-size:10pt; color: #f00; margin-left:10px" value="Recupera Password">
</div>
</form>
</div>

<!-- Private Area.Login: END -->

No, lascia stare il codice di login.

Devi lavorare sulle dimensioni dell'immagine, la carta di credito, che deve essere appena più grande del modulo di login, tipo 300px e la metti come sfondo dello stile cella del login.

Poi modifichi i margini del vcontenuto login

Grazie Giorgio,

In pratica, dovrei sostituire il codice Html con Login&Logout?

... secondo me, se si abbina grafica al form forse! si sbaglia approccio o impostazioni; ...

... comunque, per quel che vedo, se conosci (*) o hai familiarità con le opzioni della modalità esperto, penso che potresti risolvere con un semplice rigo di codice personalizzato per il controllo dello stile...

(*) - e nel caso fatti risentire...

.

Grazie Kolasim,

Purtroppo, non ho familiarità con gli script. Il codice indicato nel mio post del 25 giugno veniva creato direttamente da X5 (se non erro dalla versione EVO13, con la quale ho iniziato a progettare il sito). Ricordo che, quando si sceglieva il Login o il Logout, il relativo codice veniva scritto automaticamente nell'oggetto Html. Poi, ho comprato il PRO e non ho fatto altro che importare il vecchio progetto, senza stravolgerlo con le nuove funzionalità: mi sono solo sforzato di rendere il sito responsive, ma ho incontrato le difficoltà che ho illustrato nella presente discussione.

Ho provato a non lasciare celle vuote, come consigliava Giorgio, ma l'effetto è stato quello di avere l'immagine di sfondo (carta di credito) intera, a tutte le risoluzioni, ma con i campi spostati a sinistra (come puoi vedere dallo screenshot allegato).

Vi è la possibilità di modificare il codice postato il 25 giugno in modo che i campi siano posizionati all'interno della carta di credito? 

... prova ad incollare il codice a seguire nella sezione qui indicata di quella pagina...

>> Passo 3 - Mappa > Finestra Proprietà Pagina > Le opzioni della Sezione Esperto | ▪Codice personalizzato | ▼-Prima della chiusura del tag HEAD

<style> @media (max-width: 919px) and (min-width: 480px) { #imCellStyle_1 { width: 290px !important;}
#imCell_1 { width: 400px !important;left:50%;margin-left:-200px} } </style>

.

Ho inserito il codice e il problema è stato risolto per tutte le risoluzioni eccetto che per quella desktop.

Ho sostituito il codice, sempre in Proprietà/Esperto/Prima della chiusura del Tag Head, e l'immagine viene posizionata a destra e non a centro (v.allegato).

... però non vedo ancora il codice applicato in questa pagina:    http://www.studiococca.it/area-riservata.php

... se trovo un attimo di tempo, proverò a fare un clone temporaneo della tua pagina se non trovo ostacoli ed il PC fa il bravo, per vedere cosa avverrebbe...

No, non l'ho pubblicato, perché il sito è attivo ed è utilizzato quotidianamente dai clienti: ho inserito il tuo codice nel progetto e sto facendo le prove in locale.

Ho RISOLTO posizionando meglio l'oggetto Html nella pagina e modificando l'allineamento, naturalmente inserendo il codice globale inviatomi da KolAsim, che ringrazio di cuore per l'aiuto e la professionalità.

... ottimo! ... mi stavo connettendo adesso per il clone, e meglio così che hai risolto, ed ho visto che funge...