WebSite X5Help Center

 
Mimmo C.
Mimmo C.
User

Layout Sito Responsive  it

Автор: Mimmo C.
Просмотрено 1328, Подписчики 1, Размещенный 0  

Buonasera a tutti.

Ho attivato il responsive sul mio sito realizzato con X5 Pro15, adattando layout e contenuto alle diverse risoluzioni. In una pagina ho inserito una griglia 4x3, nella quale ho collocato un oggetto Menu, un oggetto Testo e un oggetto Html, impostando come stile una cella con immagine di sfondo corrispondente a una carta di credito (v. allegato). 

Nell'allegato ho inserito 9 immagini:

- la prima (F1) mostra la griglia con gli oggetti;

- quelle a sinistra (F2-F4-F6-F8) mostrano l'ordine di visualizzazione degli oggetti alle diverse risoluzioni;

- quelle a destra (F3-F5-F7-F9) mostrano l'immagine del sito quando si ridimensiona la finestra.

Come può notarsi, con risoluzione 720px o 480px l'immagine viene troncata, mentre appare integra con risoluzione 920px o inferiore a 480px.

Cosa posso fare affinché l'immagine non venga troncata alle risoluzioni 720px/480px?

(per verifica, accedere all'Area clienti\Area riservata del sito www.studiococca.it e ridimensionare la finestra).

Grazie anticipatamente.

Размещено
14 Ответы - 1 Полезно - 1 Корректно
Giorgio C.
Giorgio C.
User

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

Читать больше
Размещено От Giorgio C.
Mimmo C.
Mimmo C.
User
Автор
Giorgio C.
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

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

Читать больше
Размещено От Mimmo C.
Giorgio C.
Giorgio C.
User

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

Читать больше
Размещено От Giorgio C.
Mimmo C.
Mimmo C.
User
Автор

Grazie Giorgio,

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

Читать больше
Размещено От Mimmo C.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Лучший пользователь месяца ESЛучший пользователь месяца PT

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

.

Читать больше
Размещено От  ‪ KolAsim ‪ ‪
Mimmo C.
Mimmo C.
User
Автор

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? 

Читать больше
Размещено От Mimmo C.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Лучший пользователь месяца ESЛучший пользователь месяца PT

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

>> Passo 3 - Mappa > Finestra Proprietà Pagina > Le opzioni della Sezione EspertoCodice 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>

.

Читать больше
Размещено От  ‪ KolAsim ‪ ‪
Mimmo C.
Mimmo C.
User
Автор
 ‪ KolAsim ‪ ‪
... prova ad incollare il codice a seguire nella sezione qui indicata di quella pagina...

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

Читать больше
Размещено От Mimmo C.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Лучший пользователь месяца ESЛучший пользователь месяца PT

... non vedo applicato il codice; ...comunque puoi intanto provare a sostituirlo con questo, globale:

<style> #imCellStyle_1 {width:290px} #imCell_1 {width:400px;left:50%;margin-left:-200px} </style>

Читать больше
Размещено От  ‪ KolAsim ‪ ‪
Mimmo C.
Mimmo C.
User
Автор
 ‪ KolAsim ‪ ‪
... non vedo applicato il codice; ...comunque puoi intanto provare a sostituirlo con questo, globale: <style> #imCellStyle_1 {width:290px} #imCell_1 {width:400px;left:50%;margin-left:-200px} </style>

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

Читать больше
Размещено От Mimmo C.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Лучший пользователь месяца ESЛучший пользователь месяца PT

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

Читать больше
Размещено От  ‪ KolAsim ‪ ‪
Mimmo C.
Mimmo C.
User
Автор
 ‪ KolAsim ‪ ‪
... però non vedo ancora il codice applicato in questa pagina:    http://www.studiococca.it/area-riservata.php

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.

Читать больше
Размещено От Mimmo C.
Mimmo C.
Mimmo C.
User
Автор

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

Читать больше
Размещено От Mimmo C.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Лучший пользователь месяца ESЛучший пользователь месяца PT

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

Читать больше
Размещено От  ‪ KolAsim ‪ ‪