Resize testata html

Serenella Angelilli

Nuovo Utente
21 Lug 2014
7
0
0
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>
 
Ultima modifica di un moderatore:

MAeSI

Utente Attivo
13 Apr 2014
71
1
8
quellidelcucuzzolo.blogspot.it
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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.042
149
63
PR
www.borgo-italia.it
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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
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

Nuovo Utente
21 Lug 2014
7
0
0
Funziona parzialmente

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

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
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

Nuovo Utente
21 Lug 2014
7
0
0
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.
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Puoi aggiungere
Codice:
clear:both;
alle regole css del container
 

Serenella Angelilli

Nuovo Utente
21 Lug 2014
7
0
0
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

Nuovo Utente
21 Lug 2014
7
0
0
Resize menu orizzontale

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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
non è il massimo, ma, se togli altezza al div menu i bottoni non scompaiono
 
Discussioni simili
Autore Titolo Forum Risposte Data
L [PHP] controllo dimensione immagine per il resize PHP 2
bubino8 [Javascript] Resize add/remove Class Javascript 1
T [PHP] Problema resize di immagine da db PHP 16
C [HTML] Modal Dialog + Loading Animation + Resize Modal Dialog HTML e CSS 3
F resize di un'immagine dopo l'upload. PHP 0
F upload + resize + crop jQuery 1
P asp upload image con resize peso senza componenti? Classic ASP 0
U aggiungere resize a script che effettua slideshow dei file contenuti in una cartella Javascript 0
voldemort Image resize con ASP.Net ASP.NET 1
B upload con resize in php PHP 5
Z problemi con le funzioni di creazione thumbs e resize PHP 1
SolidSnake4 problema resize PHP 1
M Drag and Resize Javascript 0
JellyBelly Upload Img+Resize Ajax 1
C resize di immagini - MySQL Blob PHP 2
C script resize immagini su tutta la pagina Javascript 0
F galleria immagini upload e resize... PHP 4
borgo italia resize anticipato PHP 9
D resize e upload qualcosa non va PHP 4
7 Problema resize immagini lato server ASP.NET 1
Q image resize PHP 0
T resize immagini + taglio PHP 0
M resize di immagini Classic ASP 4
E errore con resize di un'immagine ASP.NET 0
ecosito [WordPress] Immagine di testata responsive su mobile WordPress 0
Z [HTML] Testata fissa home page HTML e CSS 3
enzonero creare testata con foto in random WordPress 4
Pepper Immagine testata WordPress 0
M Eliminazione inserzione immagini in testata WordPress 2
M Differenze di visualizzazione della slide di testata WordPress 2
V Dreamweaver: problema immagine testata HTML e CSS 7
H Menu e testata in flash HTML e CSS 3
R Immagini html HTML e CSS 1
K File audio in html, chi mi può aiutare? HTML e CSS 0
K Aiuto con file audio in html HTML e CSS 1
Antonio67 Lanciare file shell bash da html HTML e CSS 2
M Riportare in tabella HTML dati estratti con query SQL MySQL 0
G Codice html Javascript 1
M Collegamento tra form html e script php PHP 4
L Ricezione dei dati su file php da modulo html PHP 6
F Creare elementi html con javascript Javascript 4
G Appicazione HTML per inserimento dai in Database Access Microsoft HTML e CSS 0
W visualizzare solo file html e sottocartelle di una cartella PHP 1
C Dopo chiusura del tag php la stringa html va a capo PHP 1
G img html HTML e CSS 3
M Come fare un countdown in HTML? HTML e CSS 4
D Stampa a video in altra pagina html Database 3
A inserire variabile php colore in div html PHP 2
F Tv in html Offerte e Richieste di Lavoro e/o Collaborazione 1
N Script elenco file HTML HTML e CSS 5

Discussioni simili