... OK ... quando il sito è stabilizzato, avvisami ...

... discordanze nella risoluzione intermedia 480<>720:

.

ciao

.

... hai duplicato le bandiere e sdoppiate in posizioni diverse...
...!... quattro bandiere per ogni lingua...!...
... attenta con gli oggetti che usi e con gli incolla che fai...

Non hai letto gli utimi post su quello precedente? C'e la soluzione tra l'altro anticipata anche qui da Kolasim. Ti lascio in buone mani. 

tutto ok Kolasim, le bandiere sono apposto. Grazie anche a te.

i codici extra servono ancora? a Migliorare il mio sito bi-lingue? a me piacevano. grazie per la risposta.

... non hai fatto la correzione al nome pagine, quindi ho dovuto riprogettare la mia invenzione...

... codice per paginazione:

<script>
/** --- MappaDelSitoK + paginatoreK unico ed esclusivo x WebSitex5 - by KolAsim --- **/
const objectK = "#imSideBar_imMenuObject_01_container";
let pathK = window.location.pathname.split("/").pop(); $(document).ready(function () {/*K>*/
const styleK = '<style>#imHeader_imMenuObject_04-menu-opened{z-index:1000001 !important}</style>';$("head").append(styleK);
const styleBtn = 'style="position:fixed;top:4px;left:0px;z-index:1000000;font-size:24px;border-radius:10px;"'; const barraK = `<div id="barraK" style="position:relative;top:0;width:100%;height:40px;z-index:1;text-align:center;"></div>`; const apriBtn = `<button id="apriK" onclick="$('#sitemap-K').show();$('#chiudiK').show();$(this).hide()" ${styleBtn} title="Apre Mappa del Sito">&#9661;&#x1F7E2;</button></button>`; const chiudiBtn = `<button id="chiudiK" onclick="$('#sitemap-K').hide();$('#apriK').show();$(this).hide()" ${styleBtn} style="z-index:10000000;" title="Chiude Mappa del Sito">&#9651;&#x1F7E0;</button>`; const contenitoreK = ` <div id="sitemap-K" style="position:fixed;top:45px;width:auto;max-width:90%;height:50%; background-color:lavender;font-size:20px;z-index:100000;overflow-y:scroll; padding:10px;margin-right:10px;border:solid 5px green;display:none"></div>`; setTimeout(() => {/*K1>*/ $("body").prepend(contenitoreK + barraK + apriBtn); extractLinksK(); $("#sitemap-K .label-wrapper .label-inner-wrapper span.label").hide(); $(".menu-item-icon") .attr("src", "https://www.svgrepo.com/show/70289/bike.svg") .css("left", "130px"); $("#imSideBarObjects div").css("max-width", "190px"); }, 1000);/*K1<<*/ });/*K<<*/ /** --- fK --- **/ function extractLinksK() {/*extractLinksK()>*/ const linksK = $(objectK).html(); const chiudiBtn = `<button id="chiudiK" onclick="$('#sitemap-K').hide();$('#apriK').show();$(this).hide()" style="position:fixed;top:4px;left:0px;z-index:10000000;font-size:24px;border-radius:10px;" title="Chiude Mappa del Sito">&#9651;&#x1F7E0;</button>`; $("#sitemap-K").html(chiudiBtn + linksK); $("#sitemap-K ul li a").wrap('<span style="position:relative;float:left"></span>'); $("#sitemap-K").prepend('<span id="topK"></span>'); $("#sitemap-K a") .prepend('&ensp;&ensp;<br><font color="brown"><b>»</b></font>') .css({ 'text-decoration': 'none', color: 'navy' }); $("#sitemap-K .hamburger-menu-close-button, #sitemap-K img").hide(); paginazioneK(); }/*extractLinksK()<<*/
/** --- fK --- **/
function paginazioneK() {/*paginazioneK()>*/const collegamentiK = $("#sitemap-K a");const TotK = collegamentiK.length;const listalinkK = collegamentiK.map(function () {/*K1>*/return decodeURIComponent($(this).attr("href"));}).get();/*K1<<*/const pathK = decodeURIComponent(window.location.pathname.split("/").pop().trim());const indicePagina = listalinkK.indexOf(pathK);const strpathK = pathK.replace(/-/g, " ").replace(".html", "");const paginatoreK = `<div id="paginazioneK" style="position:fixed;top:0;width:100%;height:50px;z-index:100000;text-align:center;background-color:red;color:green;background-image: linear-gradient(silver, white, silver);"><span style="position:relative;top:10px;background-color:lavender;font-size:22px;padding:5px 10px;border:solid;border-radius:10px;"> <a class="zeroK" style="text-decoration:none;color:green;" title="« Prima Pagina"> «« </a> <a class="indietroK" style="text-decoration:none;color:green;" title="‹ pagina precedente"> ◄ </a> <span id="indiceK" title="${strpathK}" style="cursor:pointer"> [X] </span> <span id="tot_K" style="color:navy"> (${TotK})</span> <a class="avantiK" style="text-decoration:none;color:green;" title="pagina seguente ›"> ► </a> <a class="ultimaK" style="text-decoration:none;color:green;" title="Ultima Pagina »"> »» </a></span></div>`;$("body").prepend(paginatoreK);$("#indiceK").text(`[ ${indicePagina + 1} ]`);if (indicePagina > 0) {/*K2>*/$(".indietroK").attr("href", listalinkK[indicePagina - 1]) .attr("title", "pagina precedente:\n" + listalinkK[indicePagina - 1]) .css("opacity", "1");$(".zeroK").attr("href", listalinkK[0]).css("opacity", "1");} else {$(".indietroK, .zeroK").attr("title", "null") .css("opacity", "0.3") .removeAttr("href");}/*K2<<*/if (indicePagina < listalinkK.length - 1 && indicePagina !== -1) {/*K3>*/$(".avantiK").attr("href", listalinkK[indicePagina + 1]).attr("title", "pagina successiva:\n" + listalinkK[indicePagina + 1]).css("opacity", "1");$(".ultimaK").attr("href", listalinkK[listalinkK.length - 1]).css("opacity", "1");} else {$(".avantiK, .ultimaK").attr("title", "null") .css("opacity", "0.3") .removeAttr("href");}/*K3<<*/ $("#sitemap-K div").css("width", "auto");$("#sitemap-K a").wrapAll("<p>");$("#sitemap-K *").css("line-height", "24px");}/*paginazioneK()<<*/ /**---fine K---**/
</script>

.............................................

.

... codice per altocontrasto:

<script>
$(document).ready(function () {/*K>*/ /**--altocontrasto esculusivo by KolAsim--**/
objectHamburgerK = "#imHeader_imMenuObject_04_container";
const ritardoK = 1; /*nr.secondi*/ let contrastoAttivo = false; let colorK = "transparent"; setTimeout(function () {/*K1>*/ const styleK = ` <style> #imSideBar{background-color:transparent !important;z-index:10000 !important} #imStickyBarContainer { display: none !important; } #cacK { position: fixed; top: 0px; right:0px; z-index: 1000000; border-radius: 50px !important; } #cacK2 { width: 72px; margin: auto; border-radius: 50px; border: solid 4px gray; background-color: beige !important; } #contrastoK, #reloadK { position: relative; width: 30px; border-radius: 50%; border: solid 2px silver; background-color: lavender !important; cursor: pointer; } #contrastoK:hover, #reloadK:hover { border: solid 2px green; } </style> `; $("head").append(styleK); hamburgerK = '<img class="imgHamburgerK" src = "https://www.iconpacks.net/icons/free-icons-7/free-burger-menu-square-rounded-light-gray-icon-24666.png" style= "position:absolute;top:0px;right:0px;width:35px;height:35px;z-index:0;display:none">'; $(objectHamburgerK+" button").append(hamburgerK); const altocontrastoK = ` <div id="cacK"> <div id="cacK2"> <img id="contrastoK" class="contrastoK" src="https://www.svgrepo.com/show/436702/circle-lefthalf-fill.svg" title="hoher Kontrast\nschwarz ◑ weiß"> <img id="reloadK" class="reloadK" src="https://www.svgrepo.com/show/495633/refresh-circle.svg" title="auf Standard zurücksetzen"> </div> </div> `; $("body").append(altocontrastoK); $("#contrastoK").click(function () {/*K2>*/ $(".imgHamburgerK").show(); contrastoAttivo = !contrastoAttivo; if (contrastoAttivo) {/*K3>*/ $("body *:not(#cacK):not(#imCell_3):not(#imCell_3 div):not(#imPageRow_1)") .css("background-color", "black") .css("color", "white"); colorK = "navy"; } else { $("body *:not(#cacK):not(#imCell_3):not(#imCell_3 div):not(#imPageRow_1)") .css("background-color", "white") .css("color", "black"); colorK = "whitesmoke"; }/*K3<<*/ });/*K2<<*/ $("#contrastoK").hover(function () {/*K4>*/ $(this).attr("src", "https://www.svgrepo.com/show/436703/circle-righthalf-fill.svg"); }, function () { $(this).attr("src", "https://www.svgrepo.com/show/436702/circle-lefthalf-fill.svg"); } );/*K4<<*/ $("#reloadK").hover(/*K5>*/ function () { $(this).attr("src", "https://www.svgrepo.com/show/495638/repeat-circle.svg"); }, function () { $(this).attr("src", "https://www.svgrepo.com/show/495633/refresh-circle.svg"); } );/*K5<<*/ $("#reloadK").click(function () {/*K6>*/ location.reload(); });/*K6<<*/ $(".text-innerXX, .text-inner span").hover(/*K7>*/ function () { $(this).data("orig-font-size", $(this).css("font-size")); $(this).data("orig-line-height", $(this).css("line-height")); $(this) .css("font-size", "28px") .css("line-height", "34px") .css("background", colorK); }, function () { $(this) .css("font-size", $(this).data("orig-font-size")) .css("line-height", $(this).data("orig-line-height")) .css("background", "transparent"); } );/*K7<<*/ }, ritardoK*1000);/*K1<<*/ });/*K<<*/
</script>

......................................................

grazie mille volevo dire a te e a Roberto che sto applicando il codice  in lingua estera anche sugli altri siti. Thanks 

Buongiorno. Nel tuo altro post da te chiuso hai chiesto il codice per la bandiera spagnola. Ti metto quelle più in voga. Calcola che a questo punto dovrai allungare nel progetto l'oggetto html in questione.

In ogni caso fai doppio click sull'oggeto HTML, elimina tutto il codice presente e inseriscici questo:

<div class="gtranslate_wrapper"></div>
<script>window.gtranslateSettings =
{"default_language":"it","detect_browser_language":true,"languages":["it", "en", "fr", "es", "de",],"wrapper_selector":".gtranslate_wrapper","flag_size":32}</script>
<script src="https://cdn.gtranslate.net/widgets/latest/flags.js" defer></script>
<style>
.VIpgJd-ZVi9od-aZ2wEe-wOHMyf.VIpgJd-ZVi9od-aZ2wEe-wOHMyf-ti6hGc {
display: none;
}
</style>

Se viceversa vuoi solo mettere la bandiera spagnola quindi lasciar perdere germania e francia inserisci questo:

<div class="gtranslate_wrapper"></div>
<script>window.gtranslateSettings =
{"default_language":"it","detect_browser_language":true,"languages":["it", "en", "es",]  ,"wrapper_selector":".gtranslate_wrapper","flag_size":42}</script>
<script src="https://cdn.gtranslate.net/widgets/latest/flags.js" defer></script>
<style>
.VIpgJd-ZVi9od-aZ2wEe-wOHMyf.VIpgJd-ZVi9od-aZ2wEe-wOHMyf-ti6hGc {
display: none;
}
</style>

Grazie Roberto, ma il codice che mi accedere alla lingua inglese lo devo cancellare? io Volevo aggiungere la lingua spagnola ma per il sito Uliades.altervista.org ed etruriainvicta.altervista.org, perchè me lo hanno richiesto.

Per de facto che è il mio sito non mi interessa. Grazie ancora di cuore

Rivolto a Roberto e se vuole anche a Kolasim, mi chiedono quanto costerebbe un sito fatto da voi? Grazie 

perchè ho fatto un'ottima pubblicità di entrambi, vela meritate tutta

... escludimi, da me niente, non ne faccio, aiuto solo gli amici telefonicamente per WSx5;  ...faccio solo mie invenzioni originali, uniche ed esclusive...
...!... intanto che ci sono, ti avviso che i due miei script sono personalizzati per defacto, quindi se devi usarli per altri siti qualcosa andrebbe rivisto...!...

grazie Kolasim

non siete in competizione, per me siete stati bravi in egual misura.....

1. Il sito è per un licenziatario di website o un privato che gli occorre un sito?
2. Per il traduttore c'è scritto: devi eliminare il codice che c'è e inserire l'altro. 

EDIT ▼▼▼

Buongiorno. Nel tuo altro post da te chiuso hai chiesto il codice per la bandiera spagnola. Ti metto quelle più in voga. Calcola che a questo punto dovrai allungare nel progetto l'oggetto html in questione.

In ogni caso fai doppio click sull'oggeto HTML, elimina tutto il codice presente einseriscici questo:

<div class="gtranslate_wrapper"></div>
<script>window.gtranslateSettings =
{"default_language":"it","detect_browser_language":true,"languages":["it", "en", "fr", "es", "de",],"wrapper_selector":".gtranslate_wrapper","flag_size":32}</script>
<script src="https://cdn.gtranslate.net/widgets/latest/flags.js" defer></script>
<style>
.VIpgJd-ZVi9od-aZ2wEe-wOHMyf.VIpgJd-ZVi9od-aZ2wEe-wOHMyf-ti6hGc {
display: none;
}
</style>

Se viceversa vuoi solo mettere la bandiera spagnola quindi lasciar perdere germania e francia inserisci questo dopo aver eliminato quello che c'era (IT ed EN):

<div class="gtranslate_wrapper"></div>
<script>window.gtranslateSettings =
{"default_language":"it","detect_browser_language":true,"languages":["it", "en", "es",]  ,"wrapper_selector":".gtranslate_wrapper","flag_size":42}</script>
<script src="https://cdn.gtranslate.net/widgets/latest/flags.js" defer></script>
<style>
.VIpgJd-ZVi9od-aZ2wEe-wOHMyf.VIpgJd-ZVi9od-aZ2wEe-wOHMyf-ti6hGc {
display: none;
}
</style>

si Roberto già fatto, grazie, ho letto di fretta prima, ora ho guardato meglio, scusami.

il problema è che il pfrivato teme che ttendo tutte le bandierine , da cellulare si legga male, perchè va a coprire quasi il menù hamburger;

Come fare per accontentarlo?

Sto facendo tante prove di posizionamento del codice, diminuendo l'header, ma purtroppo continuano ad essere 

fuori campo,  da cellulare, che è la configurazionepiù ostica, almeno per me.

vuole saperlo un privato, se siete disposti e quanto è la commissione

Maria a me non risulta. Guarda la demo integrale del tuo sito al cellulare e giudica tu ►CLIKKA QUI DA CELLULARE E POI PURE DA PC

VAI QUI (CLIKKA) E FAMMI SCRIVERE IN PRIVATO. NOn possono essere fatte trattative in tal senso su questo Forum

scusami, non è per de facto il problema ma per Etruria, tanto che ho ripristinato solo l'inglese.

Per Uliades, ho messo tutte le lingue, puoi controllare da cellulare se ho fatto bene? Grazie 

Dirò al privato ciò che mi hai riferito. Grazie 

forse perchè in uliades l'header è scritto a caratteri più piccoli e non è centrato, come per gli altri siti?

Li su quel sito non va bene nulla sempre secondo me. L'oggetto lingue è fuori area di lavoro.Idem per il paginatore tra l'altro neanche responsive. E' tutto da rifeare ma se a te piace alzo le mani.

Grazie Kolasim , il sito de facto è completo, ho inserito il tuo codice extra paginazione e alto contrasto.

No Roberto per niente , 

devo eliminare i codici ? Tutti da Uliades? 

ho provato , come mi hai suggerito ieri a mettere l'oggetto codice sotto il titolo, ma come vedi  non  è risultato

ecco gli screen del lavoro su uliades con bandiere multiple e con tuo codice sotto il titolo per il breakpoint cellulare

1150

720

480

dove ho sbagliato????

Sbagli su tutto. L’area rosso porpora non è decorativa: è una griglia di contenimento. Gli oggetti che escono da lì finiscono fuori header, fuori contesto, fuori controllo. E questo è solo l’inizio.

Il sito ULIADES è visivamente disordinato, strutturalmente incoerente e tecnicamente fragile. I menu non funzionano, le pagine successive sono innavigabili, e l’impaginazione è talmente compatta che sembra fatta per respingere l’utente, non per guidarlo.

INOLTRE, MARIA...

Non so se ci hai messo tu le mani su ULIADES, ma inserire testi dentro le immagini non è scenografico: è un errore da principiante. Su mobile diventa un incubo:

• Non sono scalabili né leggibili
• Non possono essere tradotti
• Non sono accessibili per screen reader (quindi penalizzano SEO e ottimizzazione)
• Non si adattano ai layout responsive

In pratica, si sacrifica la leggibilità per un effetto visivo che non regge su smartphone. Quanto all’audio di sottofondo: non è vintage, è fuori standard. Roba da anni ’80.

Accessibilità e leggibilità

• Contrasto insufficiente
• Font microscopici e non scalabili
• Nessuna attenzione all’usabilità

Responsive design

• Assente. Gli elementi si sovrappongono, escono dai margini, si rompono
• Nessuna gestione dei breakpoint, nessuna flessibilità

Codice e compatibilità

• Script personalizzati per un contesto chiuso (defacto), inutilizzabili altrove
• Mancano titoli coerenti, meta tag, URL parlanti — SEO inesistente

Contenuti

• Testi scollegati, immagini mute, nessuna call-to-action
• Nessuna struttura narrativa, nessuna coerenza comunicativa

Il “casino” nasce da una mancanza di progettazione strutturale. È come costruire una casa senza architetto: magari le idee sono buone, ma senza uno sviluppatore che le organizza, documenta e rende fruibili… il risultato è caotico.

Un sito moderno deve essere responsive, accessibile e usabile. Effetti visivi e sonori non devono compromettere la funzionalità. Se l’obiettivo è comunicare, allora il contenuto deve essere chiaro, leggibile e controllabile da chi lo riceve — non imposto.

E non ricominciamo con il solito “è normale aspettarsi certe critiche sul forum”.

No, non è normale.

È normale pretendere qualità, correggere errori, confrontarsi su basi tecniche. Minimizzare le osservazioni o giustificare il caos non è neutralità: è deresponsabilizzazione. Chi ha competenze dovrebbe usarle per alzare il livello, non per fare il superiore che si tira fuori dalla mischia. Chi sviluppa non è il nulla. È quello che prende l’idea, la rende compatibile, accessibile, riusabile. Senza sviluppo, l’invenzione è solo un file chiuso in una cartella. E chi si limita a dire “io so io”… dimostra solo di non voler costruire nulla con nessuno. Ma ripeto: chissenefrega.

Concludo:

Il tuo sito DEFACTO continua ad avere codici e script inutili e tremila menu che non servono a niente. Ma ripeto: deve piacere a te.

LA HOME DEL TUO DEFACTO RISULTA DECENTRATO

LA MIA DEMO

Il sito di riferimento ULIADES, per come sono fatto, lo rifarei da zero — senza neanche starci a perdere tempo. Per il resto, se il tuo utente vuole info in privato, che mi scriva.

Buon lavoro, Maria.

INoltre un programmatore dovrebbe dirti che avere alto contrasto sui MOBILE è pura incompetenza perchè tutti i browser attuali hanno già le opzioni di accessibilità. 

Grazie Roberto per i preziosi consigli, leggerò attentamente