ciao, visind.
Personalmente, ritengo che usare un editor stile word sia solo molto dispendioso, in tempo perso. Comunque, se posso darti un consiglio sul modo migliore di fare questa struttura, penso che la cosa migliore sia di usare width fisso, con height variabile. Cioè la pagina verrà sempre visualizzata centrata al browser, ma con width di 900px.
Per far questo, la proprietà CSS fondamentale è il float (generalmente uso il float:left, per tutti gli elementi portanti)
Per prima cosa crea una struttura di 4 div, che rappresentano l'header, dove mettere il banner ed il logo del sito, insomma, le due colonne, dx e sx, ed il centro della pagina.
Questi quattro div, che chiami con 4 id diversi per non confonderti, li metti in un 5 div, che fungerà da contenitore principale.
La struttura sarà alla fine simile a questa:
Codice PHP:
<div id="Total">
<div id="Header">
</div>
<div id="Left">
</div>
<div id="Center">
</div>
<div id="Right">
</div>
</div>
Ora si tratta di dare la giusta formattazione.
la pagina, a parte l'header, non avrà un'altezza fissa, ma varierà a seconda del contenuto che gli verrà inserito. Tuttavia, dato che vuoto non si vede, gli daremo un'altezza minima usando min-height. Tutti gli elementi, a parte Total, avranno float:left, in modo da potersi allineare in modo orizzontale.
Codice PHP:
/*
Per prima cosa, assicuriamoci che tutti gli elementi non abbiano margin o padding che ci alterino la formattazione
*/
*{
margin: 0px;
padding: 0px;
}
/*
Definiamo la larghezza (width) del Total a 900px, la somma della larghezza di tutti gli elementi orizzontale dovrà essere, per forza, 900px
*/
#Total{
width: 900px;
height: auto;
min-height: 50px;
margin: 20px auto; /*Nota questa proprietà: significa, dal sopra e sotto metti spazio 20px, ma dai lati lascia lo stesso spazio tale che vada a riempire il resto della pagina. In parole povere centra il div alla pagina*/
}
/*
Dal punto di vista del CSS, Left e Right non hanno alcuna differenza, starà al Browser, quando interpreta la pagina, andare a posizionarli allo stesso modo.
Questi Div hanno la proprietà float:left; che permette di slegare gli elementi dal flusso della pagina, in modo che vadano a posizionarsi tutti col fianco sinistro appoggiato all'elemento contenitore o al precendente elemento con float:left; senza andare a capo.
L'elemento andrà a capo solo quando la somma della propria larghezza con quella di tutti gli elementi della stessa riga, sarà superiore alla larghezza dell'elemento superiore.
*/
#Left, #Right{
width: 200px;
min-height: 50px;
float: left;
background-color: red;
}
/*
Center è identico alle colonne, con la differenza che ha la larghezza impostata in modo da raggiungere esattamente 900px, se sommata a quella delle due colonne.
*/
#Center{
width: 500px;
min-height: 50px;
float: left;
background-color: yellow;
}
/*
Dato che voglio che Header stia su di una riga sola, imposterò la sua larghezza a 100% in modo che sia 900px la larghezza dell'elemento contenitore, aggiungo anche l'altezza, dato che non dovrà cambiare nel tempo.
*/
#Header{
float: left;
height: 200px;
background-color: blue;
width: 100%;
}
Ho inserito dei colori di sfondo alle pagine, in modo da vederne l'effetto.
L'unica cosa che devi fare è inserire l'embed con il flash nel div Centro, sarebbe meglio se avesse la stessa larghezza, poi vedrai che anche ridimensionando la pagina non vi saranno problemi di visualizzazione.
