Resize testata html

Serenella Angelilli · 21 Lug 2014

Salve sto costruendo la testata di un sito che si appoggia ad un motore gestionale e commerce e mi occorrerebbe adattare la testata a secondo delle risoluzioni dei vari monitor.
Il codice è costituito da un div contenente un'immagine jpg e un div contenente uno script javascript che richiama il lancio di una chat di assistenza.
Con la risoluzione 1920 tutto bene. Se tento di fare il resize della pagina la chat mi scende alla riga sotto :crying:
Se avrete qualche suggerimento ve ne sarei grata.
Allego il codice:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
</head>
<body>
<style>
.flex {max-width: 100%;} 
</style>
<div style="float:left">
<div style="float:left">
<img src="http://www.futek.it/headerchat.jpg" alt="Futek.it" width="1730" class="flex"/></div>
<!-- BEGIN FUSION TAG CODE - DO NOT EDIT! --><div style="float:left"><div id="proactivechatcontainerozufu0jd17"></div><table border="0" cellspacing="2" cellpadding="2"><tr><td align="center" id="swifttagcontainerozufu0jd17"><div style="display: inline;" id="swifttagdatacontainerozufu0jd17"></div></td> </tr><tr><td align="center"><div style="MARGIN-TOP: 2px; WIDTH: 100%; TEXT-ALIGN: center;"><span style="FONT-SIZE: 9px; FONT-FAMILY: Tahoma, Arial, Helvetica, sans-serif;"><a href="http://www.kayako.com/products/live-chat-software/" style="TEXT-DECORATION: none; COLOR: #000000" target="_blank">Live Chat Software</a><span style="COLOR: #000000"> by </span>Kayako</span></div></td></tr></table></div> </div><script type="text/javascript">var swiftscriptelemozufu0jd17=document.createElement("script");swiftscriptelemozufu0jd17.type="text/javascript";var swiftrandom = Math.floor(Math.random()*1001); var swiftuniqueid = "ozufu0jd17"; var swifttagurlozufu0jd17="http://assistenza.futek.it/visitor/index.php?/default_import/LiveChat/HTML/HTMLButton/cHJvbXB0dHlwZT1jaGF0JnVuaXF1ZWlkPW96dWZ1MGpkMTcmdmVyc2lvbj00LjUwLjE2MzYmcHJvZHVjdD1GdXNpb24mZmlsdGVyZGVwYXJ0bWVudGlkPTEsNCZjdXN0b21vbmxpbmU9JmN1c3RvbW9mZmxpbmU9JmN1c3RvbWF3YXk9JmN1c3RvbWJhY2tzaG9ydGx5PQo0MTVkZTIxOGU4OTA4MTIwYjU2OTc1ZDk2N2JiMWRkYzI3ZTMyMDI5";setTimeout("swiftscriptelemozufu0jd17.src=swifttagurlozufu0jd17;document.getElementById('swifttagcontainerozufu0jd17').appendChild(swiftscriptelemozufu0jd17);",1);</script><!-- END FUSION TAG CODE - DO NOT EDIT! -->
</body>
</html>

MAeSI · 21 Lug 2014

Ciao,

se ho capito bene sostituirei max-width con width nello style (che è da spostare in head):

HTML:

<style type="text/css">
.flex {width: 100%;} 
</style>

Eventualmente togli l'attributo width dell'immagine.

borgo italia · 21 Lug 2014

ciao
per prima cosa indenta il codice per renderlo più leggibile, poi verifica che ad ogni div aperto corrisonda la sua chiusura, se non ho contato male manca o un'apertura o una chiusura.

p.s.
il tag <style>..ecc..</style> andrebbe nell'head

criric · 21 Lug 2014

Mi unisco a Borgo, il codice su una riga sola è ILLEGGIBILE.
Io invece ho capito che devi mantenere chat e immagine sulla stessa linea.
In questo caso devi assegnare il width in percentuale : 85 all immagine e 15 alla chat per esempio.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Titolo</title>
    </head>
    <body>

        <div style="float:left;width: 100%;">
            <div style="float:left;width: 85%;">
                <img style="float:left;width: 100%;" src="http://www.futek.it/headerchat.jpg" alt="Futek.it" class="flex"/>
            </div>
            <!-- BEGIN FUSION TAG CODE - DO NOT EDIT! -->
            <div style="float:left;width: 15%;">
                <div id="proactivechatcontainerozufu0jd17"></div>
                <table border="0" cellspacing="2" cellpadding="2">
                    <tr>
                        <td align="center" id="swifttagcontainerozufu0jd17">
                            <div style="display: inline;" id="swifttagdatacontainerozufu0jd17"></div>
                        </td> 
                    </tr>
                    <tr>
                        <td align="center">
                            <div style="MARGIN-TOP: 2px; WIDTH: 100%; TEXT-ALIGN: center;">
                                <span style="FONT-SIZE: 9px; FONT-FAMILY: Tahoma, Arial, Helvetica, sans-serif;">
                                    <a href="http://www.kayako.com/products/live-chat-software/" style="TEXT-DECORATION: none; COLOR: #000000" target="_blank">Live Chat Software</a>
                                    <span style="COLOR: #000000"> by </span>Kayako</span>
                            </div>
                        </td>
                    </tr>
                </table>
            </div> 
        </div>
        <script type="text/javascript">
            var swiftscriptelemozufu0jd17=document.createElement("script");
            swiftscriptelemozufu0jd17.type="text/javascript";
            var swiftrandom = Math.floor(Math.random()*1001); 
            var swiftuniqueid = "ozufu0jd17"; 
            var swifttagurlozufu0jd17="http://assistenza.futek.it/visitor/index.php?/default_import/LiveChat/HTML/HTMLButton/cHJvbXB0dHlwZT1jaGF0JnVuaXF1ZWlkPW96dWZ1MGpkMTcmdmVyc2lvbj00LjUwLjE2MzYmcHJvZHVjdD1GdXNpb24mZmlsdGVyZGVwYXJ0bWVudGlkPTEsNCZjdXN0b21vbmxpbmU9JmN1c3RvbW9mZmxpbmU9JmN1c3RvbWF3YXk9JmN1c3RvbWJhY2tzaG9ydGx5PQo0MTVkZTIxOGU4OTA4MTIwYjU2OTc1ZDk2N2JiMWRkYzI3ZTMyMDI5";
            setTimeout("swiftscriptelemozufu0jd17.src=swifttagurlozufu0jd17;document.getElementById('swifttagcontainerozufu0jd17').appendChild(swiftscriptelemozufu0jd17);",1);
        </script>    
        <!-- END FUSION TAG CODE - DO NOT EDIT! -->
    </body>
</html>

Serenella Angelilli · 21 Lug 2014

Funziona parzialmente

MAeSI ha scritto:
Ciao,

se ho capito bene sostituirei max-width con width nello style (che è da spostare in head):

HTML:

<style type="text/css"> .flex {width: 100%;} </style>

Eventualmente togli l'attributo width dell'immagine.

Ciao innanzitutto grazie per l'aiuto.
Avete ragione per il codice su una riga...scusate ma ho postato al volo. Dunque ho seguito il consiglio di Criric ed ora funziona

Se posso ti chiedo una cosa ulteriore se si può fare...
Se provo il resize vedo che l'immagine jpg del primo div si adatta anche in dimensioni alla pagina mentre l'immagine della chat che viene presa tramite lo script dal portale assistenza rimane comunque delle stesse dimensioni...il che rende la testata un po' sproporzionata...Posso fare in modo che si ridimensioni anche l'immagine della chat? Non so se mi sono spiegata....

MAeSI · 21 Lug 2014

Serenella Angelilli ha scritto:
scusate ma ho postato al volo.

Infatti, solo ora, col codice sistemato dai due mod, sono riuscito a vedere la chat anch'io

criric · 22 Lug 2014

questo è già più complicato: l'immagine è lunga e stretta.
puoi provare a forzare l'altezza minima dell'immagine con min-height, ma, devi testarlo su più browser, dispositivi e risoluzioni.

HTML:

<img style="float:left;width: 100%;min-height:152px;" src="http://www.futek.it/headerchat.jpg" alt="Futek.it" class="flex"/>

Serenella Angelilli · 22 Lug 2014

Grazie criric, ma mi sono espressa male....
Dunque l'immagine da ridimensionare è quella del secondo div quella della chat Kayago per intenderci...che viene richiamata dal javascript finale...non quella verde del servizio recall.
Grazie per il tuo aiuto.

Serenella Angelilli · 22 Lug 2014

Ciao...Criric inoltre ora che ho pubblicato mi fa saltare i parametri della pagina e il sito su firefox non è visibile si vede solo la testata (www.futek.it)

criric · 22 Lug 2014

Puoi aggiungere

Codice:

clear:both;

alle regole css del container

Serenella Angelilli · 22 Lug 2014

criric ha scritto:
Puoi aggiungere

Codice:

clear:both;

alle regole css del container

Ciao per info ho risolto così (ma sono legata anche alle rigide regole del gestionale e commerce quindi da prendere con i guanti):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<style>
.flex {width:100%;}
</style>
</head>
<body>
<table>
<tr>
<td><a href="http://www.futek.it"><img src="http://www.futek.it/1h.png" class="flex"/></a></td>
<td><a href="javascript: void(0);" onclick="javascript: window.open('http://assistenza.futek.it/visitor/index.php?/Default/LiveChat/Chat/Request/_sessionID=/_promptType=chat/_proactive=0/_filterDepartmentID=4/_randomNumber=5db4szmlggkwq0ec7pdsz164hhzff1xv/_fullName=/_email=/', 'livechatwin', 'toolbar=0,location=0,directories=0,status=1,menubar=0,scrollbars=0,resizable=1,width=600,height=680');" class="livechatlink"><img src="http://www.futek.it/2h.png" alt="Futek.it" class="flex" /></a></td></tr></table>
</body>
</html>

Praticamente ho messo in tabella due immagini statiche...e poi agganciato lo script della chat alla seconda immagine.
La classe flex mi fa correttamente il resize a seconda delle risoluzioni. L'unica cosa ho dovuto rinunciare alle immagini ad hoc della chat che autocaricavano lo status online offline pausa dello staff...mettendo un'immagine generica.

Ora sono ok, l'unica cosa che ancora non va è che su l'ipad non vedo correttamente il sito ma mi lascia un margine a destra. Per quanto riguarda gli smartphone invece ho la versione mobile che va correttamente.

Se avessi qualche dritta per la risoluzione su ipad, ti pregherei di suggerirmela.

Grazie di tutto

Serenella Angelilli · 22 Lug 2014

Resize menu orizzontale

Serenella Angelilli ha scritto:
Ciao per info ho risolto così (ma sono legata anche alle rigide regole del gestionale e commerce quindi da prendere con i guanti):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<style>
.flex {width:100%;}
</style>
</head>
<body>
<table>
<tr>
<td><a href="http://www.futek.it"><img src="http://www.futek.it/1h.png" class="flex"/></a></td>
<td><a href="javascript: void(0);" onclick="javascript: window.open('http://assistenza.futek.it/visitor/index.php?/Default/LiveChat/Chat/Request/_sessionID=/_promptType=chat/_proactive=0/_filterDepartmentID=4/_randomNumber=5db4szmlggkwq0ec7pdsz164hhzff1xv/_fullName=/_email=/', 'livechatwin', 'toolbar=0,location=0,directories=0,status=1,menubar=0,scrollbars=0,resizable=1,width=600,height=680');" class="livechatlink"><img src="http://www.futek.it/2h.png" alt="Futek.it" class="flex" /></a></td></tr></table>
</body>
</html>

Praticamente ho messo in tabella due immagini statiche...e poi agganciato lo script della chat alla seconda immagine.
La classe flex mi fa correttamente il resize a seconda delle risoluzioni. L'unica cosa ho dovuto rinunciare alle immagini ad hoc della chat che autocaricavano lo status online offline pausa dello staff...mettendo un'immagine generica.

Ora sono ok, l'unica cosa che ancora non va è che su l'ipad non vedo correttamente il sito ma mi lascia un margine a destra. Per quanto riguarda gli smartphone invece ho la versione mobile che va correttamente.

Se avessi qualche dritta per la risoluzione su ipad, ti pregherei di suggerirmela.

Grazie di tutto

Ciao approfitto della vostra disponibilità...vorrei fare un resize anche del menu orizzontale che in questo momento invece se accorcio la risoluzione a 1024x768 ad esempio mi elimina alcuni pulsanti... potete verificare il sito è www.futek.it.
Grazie per gli eventuali suggerimenti.

criric · 22 Lug 2014

non è il massimo, ma, se togli altezza al div menu i bottoni non scompaiono

Serenella Angelilli · 23 Lug 2014

criric ha scritto:
non è il massimo, ma, se togli altezza al div menu i bottoni non scompaiono

...Si infatti non mi piace molto...per l'ipad nessuna idea?

Cerca

Cerca

Resize testata html

Serenella Angelilli

Nuovo Utente

MAeSI

Utente Attivo

borgo italia

Super Moderatore

criric

Super Moderatore

Serenella Angelilli

Nuovo Utente

MAeSI

Utente Attivo

criric

Super Moderatore

Serenella Angelilli

Nuovo Utente

Serenella Angelilli

Nuovo Utente

criric

Super Moderatore

Serenella Angelilli

Nuovo Utente

Serenella Angelilli

Nuovo Utente

criric

Super Moderatore

Serenella Angelilli

Nuovo Utente

Discussioni simili