perchè se cambio il position da absolute a relative, non vai èiù lo script?

[vikey89]

ciao a tutti ragazzi, ho un problema praticamente ho una slideshow sul sito che sto creando, soltando che il css dello slideshow ha postion: absolute, ma se lo trasformo in relative, lo slideshow non va più, perchè?
Per rendere l'idea meglio posto il cidece css e il codice javascript e il sito
Codice CSS

<style type="text/css"> 
body { 
background: #faf1df url(sfondo.jpg) repeat-x; 
} 
ul.ppt { 
position: relative; 
}
 .ppt li { 
list-style-type: none; 
position: absolute; 
top: 10px; 
left: 225px; 
} 
.ppt img { 
border: 1px solid #e7e7e7; 
padding: 5px; 
background-color: #ececec;
 }
 #box {
 margin-top: 420px; 
} 
#logo {
 margin-bottom: 0px; 
} 
</style>

Codice JAVASCRIPT

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript"> 
$('.ppt li:gt(0)').hide(); 
$('.ppt li:last').addClass('last'); 
var cur = $('.ppt li:first'); f
unction animate() { 
cur.fadeOut( 1000 );
 if ( cur.attr('class') == 'last' ) 
cur = $('.ppt li:first'); 
else cur = cur.next(); 
cur.fadeIn( 1000 ); 
} 

$(function() { 
setInterval( "animate()", 5000 ); 
} ); 
</script>

COME POSSO FARE PER RISOLVERE IL PROBLEMA DI POSITION:ABSOLUTE?

[Mich_]

Mi sembra piu` un problema legato al Javascript, ma prima ci sono implicazioni CSS che devi risolvere.

Anzitutto devi capire cosa vuol dire posizionare.
Questi due articoli sono un sunto molto interessante, ma se non li capisci devi rivederti per bene tutto il capitolo sui posizionamenti (che a mio parere sono una delle cose piu` complesse dei CSS):
I posizionamenti assoluti
Capire i posizionamenti relativi

[vikey89]

Ti spiego, io se lascio postion:absolte, lo script va perfettamente, appena provo position:relative, lo script non funziona più? So tutte le differenze tra i vari position ma non capisco perchè appena cambio il valore a position non va più lo script

[Mich_]

Non so come funzioni il tuo JS. D'altronde non ne hai postato il listato e anche se lo postassi sarebbe molto complesso e lungo (e probabilmente di difficile interpretazione da chi non mastica JS tutti i giorni).
Quindi ti do un'informazione generale, senza essere sicuro che la cosa sia effettivamente applicabile al tuo caso.

Mi par di capire che la tua slideshow fa vedere una immagine da una lista lunga, spostando la parte visibile della lista come se fosse un nastro di cui si vede un pezzetto in una finestra.
Per posizionare i vari elementi del "nastro" vengono usati i posizionamenti e gliattributi top e left (oppure bottom e right in rari casi)
Ora in questi casi si puo` posizionare in modo assoluto oppure relativo, ma nei due casi il conto da eseguire e` diverso: gli attributi top e left hanno infatti comportamenti diversi nei due casi: con posizionamento assoluto sono assoluti rispetto al contenitore posizionato, con posizionamento relativo si sommano alla posizione che avrebbe l'elemento se avesse posizionamento statico.
Di solito e` piu` semplice usare il posizionamento assoluto, che da` meno problemi di calcoli soprattutto in presenza di immagini non perfettamente dimensionate (chi ha programmato lo script probabilmente ha preso in considerazione molte variabili, ma non che l'utente potesse dare il posizionamento relativo)

Pertanto non mi meraviglia che se cambi tipo di posizionamento la cosa non funzioni piu`: sarebbe molto strano il contrario.

[vikey89]

Bene e quindi come posso risolvere questo problema?

[Mich_]

Originariamente inviato da vikey89
Bene e quindi come posso risolvere questo problema?

Non lo so.

Non so quale sia il problema.
Ma non puoi lasciare il posizionamento assoluto? Cosa te lo impedirebbe?

In alternativa devi trovare uno script diverso.

[vikey89]

Io potrei lasciare il postion:absolute, però ovviamente appena andrò a visualizzare il sito in una risoluzione diversa, la pagina risulta sballata..quindi come si può fare non lo so

[Mich_]

Originariamente inviato da vikey89
Io potrei lasciare il postion:absolute, però ovviamente appena andrò a visualizzare il sito in una risoluzione diversa, la pagina risulta sballata..quindi come si può fare non lo so

In che senso?

Usare i posizionamenti assoluti e` piu` complesso, ma non impossibile.
Occorre tener presenti varie variabili, occorre molta cura nel calcolo delle posizioni, ma si puo` risolvere.

Ci possono essere vari modi di procedere: i piu` semplici sono (chiamo "JS" il blocco gestito dal JS) :
1. posizionare in modo assoluto gli elementi piu` esterni, fino al "JS" ed i suoi fratelli, poi nei blocchi non gestiti dal JS procedere come al solito;
2. posizionare come sempre tutti i blocchi in modo statico e dare posizionamento relativo al "JS".

Nel caso 1. occorre farsi un po' di conti, ma una volta fatti tutto funziona. E` piu` facile se le dimensioni dei blocchi antenati (genitori, nonni, ...) e dei fratelli del "JS" sono fisse in px.
Nel caso 2 non ci sono problemi, e si possono usare anche i float, ma occorre far attenzione alle dimensioni del blocco "JS" che probabilmente sono fisse e magari sbordano dalla finestra visibile (questo puo` trarre in inganno).

Potresti aver necessita` di usare l'attributo overflow per sistemare alcuni elementi.

[vikey89]

Finalmente ho risolto ho messo il margin-left e right: auto e width:80%, adesso si centra con tutte le risoluzioni..

Grazie cmq..