Allineamento css + Flash

[Stephanicchio]

Salve a tutti...
ho fatto un bel pò di ricerche nel forum senza trovare nulla di utile, un po perchè non mastico bene i css un po perche sull'argomento div/css ci saranno non so quanti post...perdonatemi se in giro esiste già la soluzione....non sono riuscita a trovarla...

Ho un swf (sito) in flash a cui ho dato (sempre tramite software) un allineamento centrale in orizzontale e verticale. Date le dimensioni di 800x600 si adatta a qualsiasi risoluzione...fin qui ok.

Ora avrei bisogno di inserire negli angoli inferiori e superiori della pagina ,delle immagini o testi (o filmati flash) che siano indipendenti da quello centrale...per indipendenti intendo che devono rimanere sempre negli angoli scelti a prescindere dalla risoluzione del monitor.Per comprendere meglio ecco qui un disegnino esemplificativo generale.
http://imageshack.us/photo/my-images/138/esempiow.jpg/

Come vedete i quattro elementi esterni verranno posti accanto all'swf centrale e non al di sotto e al di sopra di esso. Devono muoversi solo orizzontalmente a seconda della risoluzione dello schermo e (possibilmente) "fermarsi" una volta raggiunto l'estremo dell'elemento centrale (limite rappresentato dalla linea tratteggiata nel disegno sopra). Insomma se la risoluzione è troppo bassa (o la pagina viene ridimensionata) questi elementi non devono sovrapporsi al filmato centrale (ovviamente aggiungerei)...non importa se verranno visualizzati solo a risoluzioni più ampie...sono elementi di "contorno"...
Ho provato le varianti più strane ma ,ripeto, non ho molta pratica nell'utilizzo dei css...perchè immagino dovrò usare quelli giusto? con i div vero?

Grazie della pazienza e a presto.

Stefano

[Mich_]

Anzitutto ti consiglio di inserire i SWF dentro <div> definiti nell'HTML: questo per favorire la resa uguale in tutti i browser.

Quindi il contenitore di tutto avra`
width: 100%;
min-width: XXXpx; /* la larghezza minima del pezzo centrale piu` i due pezzi laterali piu` eventuali bordi */
position: absolute;
left: 50%
margin-left: -YYYpx; /* meta` di XXX */

naturalmente html e body andranno dimensionati
width: 100%;
altrimenti le dimensioni in % dei blocchi successivi non hanno significato

I contenitori dei tuoi SWF poi saranno posizionati:
quello centrale: centrato rispetto al contenitore
quelli laterali: in posizione assoluta a distanza fissa dai bordi

NOTA: ho preso in considerazione solo le larghezze: probabilmente dovrai settare anche le altezze, ma potrebbe essere un problema da affrontare successivamente.

NOTA2: queste considerazioni valgono per oggetti inseriti tramite HTML: per oggetti SWF potrebbe essere necessario fare degli aggiustamenti per IE (vedi i numerosi post sull'argomento posizion* SWF)

Potrebbe esserci una non-centratura perfetta in finestre larghe o molto larghe.

[Stephanicchio]

Grazie dell'aiuto innanzitutto...

ho provato,attraverso le mie scarse capacità con questi css e div, a fare come mi hai suggerito. O meglio ci ho provato...il risultato che più si avvicina è questo qui...

struttura file.css:

body, html {    
height: 100%;    
width: 100%;  }  

#contenitore {     
position: absolute;     
min-width: 982px; 	
min-height: 600px; 	
left: 50%;     
margin-left: -450px; }  

#colonnasinistra{     
float: letf; 	 	 }  

#colonnacentrale{     
float: left; 	
width: 900px; 	
height: 600px;     }  

#colonnadestra{     
float: left; 	 
}

Con questo ho parzialmente l'allineamento desiderato nel senso che; L' SWF viene posto al centro, le due immagini di prova si posizionano rispettivamente in alto a destra e in alto a sinistra del filmato swf....(solo che le due immagini non sono alla stessa altezza fra loro e neanche alla tessa altezza del filmato)...inoltre non si trovano agli angoli dello schermo ma subito prima e subito dopo della parte centrale....

Immagino che il codice postato non sia corretto...infatti mi avevi detto di usare la posizione assoluta ma così facendo i div scomparivano sotto l'swf centrale...

Ti ringrazio dell'aiuto di nuovo...a presto

[Stephanicchio]

sono sempre io...
aggiornamenti ....usando questo css ho migliorato di poco la situazione. Diciamo che come allineamento ci siamo. Ho creato le tre colonne dove, in quella centrale vi è il filmato flash e nelle due laterali altri due elementi che vanno a posizionarsi sullo stesso livello negli angoli alti dello schermo...unico incoveniente è che quando viene ridimensionata la pagina del browser il il div della terza colonna si posiziona sotto gli altri due...come posso fare per tenerlo sempre in alto a destra?....ecco il css:

#contenitore { 
width: 100%; 
margin: 0px auto; 
clear: none; 
height: 100%;   
}    

#divsx
{ 
width:40px; 
height:40px; 
float:left; 
margin: 0 auto;  
}  

#divcentro { 
width:900px; 
height:600px; 
float:left;  }  

#divdx{ 
width:40px;
height:40px; 
float:right; 
margin: 0 auto; 
}

grazie mille ancora.....

[Mich_]

Anzitutto ti manca

#contenitore { 
  width: 100%;
  min-width: 980px;
}

devi usare sia il width che il min-width (espressi con unita` diverse)

E non puoi usare i float: il float non e` compatibile con il posizionamento esatto: e il comportamento del float e` proprio di scivolare sotto se lo spazio in larghezza manca

Usa i posizionamenti assoluti come ti ho consigliato nella mia prima risposta.

[Stephanicchio]

Caro Mich ,i tuoi consigli funzionano ed ho raggiunto l'obbiettivo. Grazie.
Ho però un riscontro negativo inaspettato che spero tu possa risolvere o consigliare una soluzione a riguardo.Come al solito posto il codice:

#contenitore { 
width: 100%; 
min-width: 1150px;
margin: 0px auto; 
height: 100%;  
}    

#divsx{ 
width:125px;
height:15px; 
position:absolute; 
bottom:10px; 
left:5px;    
}  

#divcentro { 
width:900px; 
height:600px; 
position:absolute; 
top:50%; 
left:50%; 
margin-left:-450px; 
margin-top: -300px;  
}  

#divdx{ 
width:128px; 
height:41px; 
position:absolute; 
bottom:10px; 
right:10px;   
}

Il div centrale è stato centrato come puoi vedere, mentre i due elementi angolari sono stati posizionati con propietà "assoluta" e utilizzando allineamento "left" e "right"...tutto ok ,il layout è proprio come lo desideravo. L'unico problema che riscontro (e che credevo potesse risolversi col "min-width:;..." del contenitore) è che quando ridimensiono la pagina del browser questi elementi angolari vengono nascosti proprio dall'swf centrato nella pagina. Io vorrei invece che , in caso di ridimensionamento della finestra si "bloccassero" una volta raggiunto il margine dell'swf ...sostanzialmente , in caso di ridimensionamenti considerevoli della finestra non si vedrebbero lo stesso perchè quest'ultima non è sufficientemente grande da contenerli...ma non importa....è antiestetico vedere queste immagini e parole scomparire lentamente dietro un'altro elemento...Spero di essermi spiegato bene...ti ringrazio ancora e spero tu possa aiutarmi...Alla prox...

Stefano

[Stephanicchio]

P.S ...ho tentato invano di modificare il titolo della discussione perchè credo poco attinente all'argomento trattato...pardon!!!

[Mich_]

Anzitutto vedo errori di calcoli.

125+5 px per il blocco sinistro
128+10 px per il blocco destro
900 px per il centrale
totale: 1168 px (se non ho sbagliato io)
Mentre il tuo min-width e` solo 1150 px


Poi se guardi con il browser IE e la tua pagina ha DTD transitional, non vedrai mai quello che vuoi, ma quello che aveva in testa il programmatore Microsoft qualche decennio fa.
Prova con un browser standard.

[Stephanicchio]

Non sono errori di calcoli...errori nel riscrivere il codice originale ...cmq ho risolto mettendo tutto all'interno di un'altro div con posizione relativa e centrato nella pagina...
quindi ho un div relativo con min-width di 1160px (il minimo per contenere tutti gli elementi) e height impostato al 100% (con allinemaetno centrale)...al suo interno invece ci sono i div che ho impostato prima, ossia il contenitore ,ed i tre div...in questo modo il contenitore relativo mantiene bloccato il layout della pagina.

Non so se la soluzione migliore sia questa ma funziona molto bene...

grazie mille dell'aiuto ....