Newsgroup: it.comp.www
Titolo: ORCM INFORMATICA NEWS

ORCM INFORMATICA NEWS
=======================
Per iscriverti manda una mail a 
or...@orcm.net
 specificando nel subject
"SUBSCRIBE" oppure utilizza il modulo che trovi all'url 
www.orcm.net
Per i tuoi commenti, idee, suggerimenti e richiesta di numeri arretrati
(specificando nel subject "Richiesta arretrati") scrivici all'indirizzo
or...@orcm.net
Se ritieni che i contenuti della nostra News possano essere di aiuto a
qualcuno di tua conoscenza spediscine pure una copia.
Posizionamento di precisione degli oggetti nella pagina web - prima parte
Il browser Microsoft Internet Explorer 4 consente al webmaster di gestire
con precisone la posizione degli oggetti (immagini, tabelle, testo) presenti
all'interno di una pagina web.
Le tecniche utilizzate si basano sugli attributi CSS.
Nell'HTML tradizionale il testo ed i tag vengono visualizzati dal browser
come un flusso di testo che inizia in alto a sinistra e va a capo in
prossimità del margine destro della pagina senza dividere le parole.
Mediante l'utilizzo di tag quali <P>, <DIV> e <BR> consente di inserire il
testo all'inizio di una nuova riga, ma il flusso di testo è sempre dall'alto
al basso e da sinistra verso destra.
Mediante le tecniche di posizionamento possiamo controllare gli oggetti
inseriti nella pagina.
Prima di inziare a vedere come utilizzare gli attributi CSS, ecco due
tabelle riassuntive:
Tab. 1 - Attributi CSS per posizionare e dimensionare gli oggetti
      Attributo CSS
     Specifica
      Position: absolute, relative, static
     La posizione dell'oggetto e se può essere spostato
      Top: dimensione, percentuale, auto
     La distanza tra il punto più alto dell'elemento di livello superiore e
il punto più alto dell'oggetto
      Left: dimensione, percentuale, auto
     La distanza tra il lato sinistro dell'elemento di livello superiore e
il lato sinistro dell'oggetto
      Widht: dimensione, percentuale, auto
     La larghezza dell'oggetto
      Height: dimensione, percentuale, auto
     L'altezza dell'oggetto
      z-index: numero, auto
     La posizione nel caso di più oggetti sovrapposti
      Visibility: visible, hidden, inherit
     Visibilità dell'oggetto. Un oggetto nascosto occupa comunque spazio all
'interno della pagina
      Display: none
     Visibilità e spazio occupato. Un oggetto con display impostato su none
è invisibile e non occupa spazio all'interno della pagina
      Clip: forma, auto
     Una parte visibile di un oggetto
      Overflow: scroll, hidden, visible, auto
     Tratta un oggetto che supera le dimensioni consentite
      Float: left, right, none
     Specifica se il testo circostante deve scorrere intorno all'oggetto e
da che parte del testo deve apparire l'oggetto.
Tab. 2 - Unità di misura per il valore DIMENSIONE degli attributi CSS
      Unità
     Abbreviazione
     Esempio
      Pixel (predefinito)
     Px (o nulla)
     50px o solo 50
      Punti
     Pt
     20pt
      Proporzionali
     Em
     -0,9em
      Pollici
     In
     2in
      Centimetri
     Cm
     3,5cm
      Percentuale
     %
     25%
POSIZIONAMENTO ASSOLUTO
Abbiamo visto quali attributi CSS occorre avere conoscere per assegnare ad
un oggetto una posizione assoluta all'interno di un documento HTML.
Vediamo ora un esempio pratico, essendo necessario aggiungere al tag HTML
dell'oggetto i seguenti attributi, all'interno dei quali valore rappresenta
un numero espresso in una delle unità di misura di cui in Tab. 2:
STYLE="position:absolute; top:valore; left:valore"
Attribuiamo ad esempio ad un tag <img>:
<HTML>
<HAD>
<TITLE>Posizionamento assoluto di oggetti nella pagina</TITLE>
</HEAD>
<body bgcolor="#FFFFFF">
<img src="immagine.GIF" style="position:absolute; top:20; left:150"
width="100" height="100">
</body>
</html>
Abbiamo aggiunto al tag <img> le impostazioni dell'attributo STYLE:
STYLE="position:absolute; top:20; left:150"
L'angolo superiore sinistro si trova esattamente a 20 pixel dal lato
superiore e a 150 pixel dal lato sinistro della finestra del documento.
Un oggetto collocato in posizione assoluta nella pagina risulta distaccato
da ogni altro elemento esterno all'oggetto, non potendo gli oggetti in
posizione assoluta muoversi attorno agli oggetti circostanti e viceversa.
Ignorandosi a vicenda, gli oggetti si possono sovrapporre.
Volendo possiamo trarre quasi un "teorema": "Ogni elemento esterno ad un
oggetto posizionato si comporta come se l'oggetto posizionato non esistesse
affatto".

Le tecniche utilizzate si basano sugli attributi CSS.
Bene, ma hai dimenticato di specificare che i "Cascading Style Sheet"
livello 1 e 2 (css1, css2) sono uno standard creato dal consorzio W3C
(vedi 
http://www.w3.org
) e quindi supportati da altri browser, ad
esempio Netscape (mi pare sia stato il primo browser a supportarli),
Opera ecc...  Il discorso puo' essere esteso anche a questi ultimi.
 ciao