adattare cella a browser

[mark00]

Modificato la posizione di una cella col valore left negativo,si posiziona dove voglio ma, pur inserendo position:absolute-fixed-relative quando ridimensiono il browser ( quindi testando su vari dispositivi compreso tablet e iphone),gli elementi del sito si ridimensionano automaticamente ma la cella  rimane al suo posto visualizzandosi tagliata a sinistra.

[stesil]

Ciao,

sì, attribuendo un valore di left negativo è normale che succeda quello che descrivi.

Io vedo due alternative, ma magari ce ne sono altre e senza nulla vedere di quello che vuoi ottenere non è detto che siano buone:
scrivi il codice per la cella in un div posizionato prima del tag </body>, a cui attribuisci position:absolute e un valore di left positivo (o in percentuale). In questo caso il valore di left imposta la distanza dal lato sinistro della finestra del browser.

Oppure, mantenendo la cella generata dal programma, si inseriscono due righe di codice javascript per attribuire il valore negativo di left alla cella solo se la larghezza della finestra è maggiore di larghezza del sito + valore assoluto di left della cella. In questo modo la cella si posiziona a sinistra rispetto ai div contenitori generati dal programma solo se risulta interamente visibile, altrimenti resta nella sua posizione predefinita. Una cosa tipo questa:

Codice:

Only registered users can see contents. Please click here to Register or Login.

[mark00]

Ringraziandoti  comunque rispondo che col valore left positivo la cella si posiziona alla distanza dal lato sinistro della finestra del browser ma non si posiziona dove mi serve. Nel secondo caso nn capisco dove inserire i valori.

[stesil]

Lo script va inserito in head della pagina. I valori in rosso sono da personalizzare ed indicano rispettivamente la larghezza del sito, il valore negativo di left che vuoi attribuire alla cella e l'id che identifica la cella da spostare:

<script>
$(document).ready(function(){
position_left();
});
$(window).resize(function(){
position_left();
});
function position_left(){
var x=$(window).width();
var larghezza_sito=960;
var left_cella=-100;
if(x  > (larghezza_sito-left_cella)){
$('#imCell_1').css('left', left_cella);
}
else {
$('#imCell_1').css('left','0');
}
}
</script>

[mark00]

Ti invio i link alla pagina del sito così sarà piu chiaro.

[stesil]

Ah, il sito è fatto con la versione 8 .... non è detto che quello che ho scritto funzioni a dovere. Io l'avevo provato sulla 9.

Per provarlo devi allegare anche la libreria jquery (evo9 l'ha inclusa di default). Non so se l'hai già usata, altrimenti la scarichi da qui.

Rinomina il file scaricato come jquery.js ed esportalo nella cartella files.

Aggiungi prima del codice l'inclusione per la libreria:

Codice:

Only registered users can see contents. Please click here to Register or Login.
I parametri da inserire sono 988 (larghezza del sito), -200 (margin-left), imCel0_00 come id della cella.

E' un po' di tempo che non uso più la versione 8 ... forse c'è qualche altra possibilità. Intanto sposto questo topic nella sezione corretta ...

[mark00]

Anche aumentando il valore negativo, la cella non va oltre la larghezza diciamo del footer. Forse dovrebbe essere svincolata dalla larghezza del sito?diciamo come il logo...

[stesil]

E' la prima alternativa che ti avevo scritto ... posizionare il codice per la cella in modo assoluto, con un valore di left positivo ... come hai fatto per il logo.

Ho comunque provato anche il codice js con la 8, e, con queste modifiche, mi sembra funzioni. Devi togliere dal codice css personalizzato la riga che assegna il valore di left alla cella.

Codice:

Only registered users can see contents. Please click here to Register or Login.
Ti mando via mp il link alla "brutta copia" della tua pagina con il codice js funzionante, così vedi se corrisponde a quello che vuoi ottenere. Ma, secondo me, la prima alternativa è più "pulita".

[mark00]

Risolto grazie!!