Newsgroup: it.comp.www.html
Titolo: domanda

Ciao ragazzi! Come posso, in html, sovrapporre un'immagine ad un'altra? poi
con il tag <table> mi aggiusto io la posizione.. e poi volevo chiedervi un
bel link dove mi viene spiegato il tag <map>.
Thanx a lot
Gioba

HO scritto:
|| Come posso, in html, sovrapporre un'immagine ad un'altra?
E già che ci sono, come posso scrivere, sopra un'immagine? mettiamo che io
mi prepari due disegni, due cerchi.
Voglio mettere il cerchio più piccolo e di colore giallo dentro quello
grande e di colore blu, e in mezzo il cerchio giallo scrivere "w la
patonza". è un esempio del cazzo, ma spero renda l'idea..
grazie!
Gioba

Gyoba ha scritto
| Ciao ragazzi! Come posso, in html, sovrapporre un'immagine ad un'altra? poi
| con il tag <table> mi aggiusto io la posizione.. e poi volevo chiedervi un
| bel link dove mi viene spiegato il tag <map>.
Ciao Gyoba,
    in html non č possibile, lo fai con i css. Si tratta di innestare due div con le due
immagini di background.Se per esempio vuoi inserire i due cerchi uno dentro l' altro
e metterci dentro la scritta "w la patonza!" come hai chiesto, ecco come fare:
<div style="width: 200px;height: 200px;background: transparent url(cerchioblu.gif) no-repeat center center">
    <div style="width: 200px;height: 200px;background: transparent url(cerchiogiallo.gif) no-repeat center center">
        <p style="margin-top: 95px;text-align: center">WWW la patonza!</p>
    </div>
</div>
Sappi che ci sono altri modi per farlo, per esempio usare il tag <img> e il posizionamento
assoluto o relativo. Ti scriverei un esempio ma sto x scendere.
Per il tag map:
http://www.w3schools.com/tags/tag_map.asp
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_areamap
Per i css: 
www.w3schools.com
www.brainjar.com
www.richinstyle.com
Ciao!
    SantaKlauss

"SantaKlauss" ha scritto:
|| <p style="margin-top: 95px;text-align: center">WWW la patonza!</p>
e se il non volessi posizionare il testo esattamente al centro ma
leggermente spostato dovrei utilizzare una tabella? come dovrei fare?
Gioba

Puardati i posizionamenti assoluti e/o relativi coi CSS.
Puoi regolare la posizione di un elemento a livello di pixel. Un div ha una
coordinata top e left che possono essere riferite sia alla pagina che
all'elemento contenitore.......

Ciao SantaKlauss. Ho letto la tua interessante risposta sul centramento di
un div. Credo siano invertite le coordinate top e left...o mi sbaglio?

SantaKlauss ha scritto e Gyoba ha risposto:
| || <p style="margin-top: 95px;text-align: center">WWW la patonza!</p>
| e se il non volessi posizionare il testo esattamente al centro ma
| leggermente spostato dovrei utilizzare una tabella? come dovrei fare?
Tabella vade retro! Puoi sempre usare i margini, il padding o il posizionamento relativo.
Se nel div vuoi posizionare il testo per esempio a 20px a sinistra e 40px dall'alto:
<p style="margin: 40px 0 0 20px">WWW la patonza!</p>
<p style="padding: 40px 0 0 20px">WWW la patonza!</p>
<p style="position: relative; top: 40px; left: 20px">WWW la patonza!</p>
Nb: margini e posizionamento relativo in questo caso danno lo stesso effetto.
Ti sconsiglio l' uso del padding quando le dimensioni del paragrafo sono fissate,
a causa del box model male interpretato da ie.
Si può usare anche con il posizionamento assoluto, basta specificare "position: relative"
nel div che contiene il paragrafo di modo da permettere al paragrafo di riferirsi alle
coordinate del div contenitore, ma, dato che ci sono soluzioni + semplici non credo sia
il caso.
Ciao,
    SantaKlauss

Cekko ha scritto:
| Ciao SantaKlauss. Ho letto la tua interessante risposta sul centramento di
| un div. Credo siano invertite le coordinate top e left...o mi sbaglio?
Ooops.. hai ragione! Capita...Ecco la rettifica:
Se le dimensioni del div da centrare sono in percentuale,
ecco come fare:
<style type="text-css">
div#container{
    position: relative; /*serve per consentire il posizionamento assoluto degli elementi al suo interno*/
    /*ecc...*/
    }
div#container div#centered{
    position: absolute;
    top: 30%;
    left: 20%;
    width: 60%;
    height: 40%;
    border: 1px solid #f00
    }
</style>
Nota che 2*left+width deve darti 100%, cosi come 2*top+height.
..fine rettifica_
Ciao,
    SantaKlauss