Grafica, posizionare gli oggetti   Se avete letto la parte dedicata ai ...:: selettori ID ::... vi sarete resi conto che i CSS non servono solo per assegnare stili al testo ma sono quanto di meglio si potesse avere anche per il posizionamento degli oggetti sulla propria pagina web. Per oggetti si intende tutto quello che fa parte di una pagina: immagini, testo, tabelle, forms e qualsiasi altra cosa venga racchiusa in un contenitore virtuale, di solito l'elemento (tag) html <DIV>.

I metodi per creare questi contenitori virtuali ancora una volta sono diversi, per cui ognuno di voi adopererà quello che meglio preferisce, a prima vista sembrerebbe più semplice fare uso di un selettore ID che contenga la posizione del contenitore e associare poi il nome del selettore al contenitore stesso, ma è anche vero che un risultato identico lo si avrebbe specificando in linea lo style, assegnando cioè all'elemento interessato i vari parametri di posizionamento in modo diretto.

Vi ricordate ...:: le classi ::... ?
Si creava una classe perché questa poteva essere richiamata da più parti, adesso invece trattandosi di immagini da dover posizionare, non servirebbe a molto usare una classe in quanto se venisse richiamata da più di un oggetto, questo si sovrapporrebbe all'altro dando così origine a qualcosa di molto simile ad un pasticcio grafico.

E' (forse) questa  la spiegazione al fatto che un selettore ID può essere adoperato una sola volta all'interno della stessa pagina web ?.

Comunque non credo si possa vedere come una limitazione, al contrario  credo invece sia a garanzia che non vengano commessi errori in questo senso, e poi è tutto a vantaggio di maggiore versatilità, visto che si possono richiamare classi e ID dallo stesso unico contenitore, anche se è meglio sperimentare questa cosa solo dopo aver acquisito una certa esperienza e quindi maggiore familiarità. :-)

Ora creammo un selettore ID con questi parametri:

<style type="text/css">
<!--
#valvasev {
position : absolute;
     top : 700 px;
    left : 500 px; 
  zindex : 1;
       }
 -->
</style>

E poi lo si richiami dell'elemento (tag) HTML <div> :

Oppure, che si adoperino gli stessi parametri in linea e cioè direttamente associati all'elemento (tag) HTML <div>:

il risultato sarà perfettamente identico, entrambi infatti visualizzeranno quello che si troverà contenuto all'interno degli elementi <div></div> rispettando tutti gli attributi di stile impostati, per cui se abbiamo inserito un'immagine, quale potrebbe essere questa: la stessa sarà posizionata a partire da 1300 pixel dal bordo superiore e 50 pixel dal bordo laterale sinistro con uno z-index, cioè un livello di profondità, uguale a 1. Provate a portarvi in quella zona, dovreste trovare la stessa immagine ma con una notevole differenza: il testo si troverà sopra all'immagine, questo effetto è reso possibile oltre che dal posizionamento assoluto anche da z-index che ne stabilisce il livello di visualizzazione. In HTML invece avremo potuto soltanto girargli intorno: a destra, a sinistra o al centro, proprio come in questo caso.

A questo punto ogni altro esempio sarebbe superfluo, è fin troppo evidente quale potenzialità si possa avere dall'utilizzo di questa tecnica. Immagini trasparenti potrebbero essere sovrapposte totalmente o parzialmente, dipende soltanto da voi, gli eventi poi di un linguaggio di script quale JavaScript potrebbero nascondere o scoprire questi contenitori dando vita a delle pagine dinamiche, cioè vive! che cambiano a seconda di quello che fa il vostro visitatore, da qui il nome DHTML; per cui è grazie alla combinazione di questi due sistemi ( CSS e JavaScript) che sono praticamente caduti tutti quei limiti che html poteva avere, adesso è tutto più "solido" e alla base resta proprio il buon "vecchio" html che a quanto pare regge.

Come spesso accade però non è tutto oro quello che luccica, così anche per questa tecnica che apparentemente sembrerebbe offrire soltanto vantaggi; esistono invece alcuni problemi, specie nel caso in cui si combinassero dei posizionamenti assoluti combinati a testo e immagini in html normale. Il problema infatti nascerebbe a seconda della risoluzione video del visitatore il quale potrebbe vedere il tutto in modo decisamente molto diverso da quello che ci eravamo prefissati.

Provate infatti ad immaginare un'immagine a 400 pixel dal bordo superiore, questa essendo una misura fissa sarà sempre rispettata, risulterà al centro di un monitor con risoluzione 800 x 600 ma  quello che  si trova al suo fianco o al di sotto, molto probabilmente si sposterà a seconda delle impostazioni video. Non dipende soltanto dalla risoluzione grafica adoperata, ma anche dal fatto se la navigazione avviene a tutto schermo o in una finestrella ristretta.

Si e voluto riportare l'esempio sopra, quello delle due immagini affiancate, e lasciato sotto di esse del normalissimo testo contenuto in una tabella html, tutto questo proprio per permettervi di notare cosa accade se allargate o restringete la vostra finestra del browser.

Fate dunque attenzione quando adoperate i posizionamenti assoluti.

Un piccolo trucchetto: e quello di Inserire la Pagina che contiene il posizionamento assoluto, richiamandola in un IFRAME, posto nella Pagina, che lo deve mostrare. cosi siete certi che a Qualsiasi risoluzione video, non si sposterà di una virgola, rimanendo sempre al suo Posto senza sballare. dove e possibile naturalmente, in questo caso sopra il testo non si potrebbe fare, in quanto l' IFRAME aprirebbe un buco non colmabile dal testo.

Un Esempio in questi tre siti da me costruiti : -   Yorkshire Susy  -  NatiNautica - Syncrosat -Se si usa il PHP. e meglio fare uso dei "pseudo Frames" molto più efficienti.

La Pagina index.htm, contiene un IFRAME che richiama la index2.htm che non e altro che la pagina con l'animazione in Javascript, fatta con il sistema del posizionamento, posizionamento che a risoluzione 1024, si sballa tutta.

Ma cosi facendo l'animazione e sempre Ben centrata in pagina, alle diverse risoluzione.

Naturalmente più grande e la risoluzione, più piccola diventa la pagina.

Comunque anche gli " IFRAME " hanno i loro inconvenienti. scegliete voi !!!