Newsgroup: it.comp.www.html
Titolo: Problema con position

Sto cercando di imparare malizie con CSS, per passare definitivamente
ad abbandonare le <table> per impaginare, appena mi sentiro` del tutto
sicuro. Ergo chiedo a qualche anima pia di aiutarmi a "seguire la
retta via" risolvendomi un problemuccio che con i <table> risolverei,
ma che mi sto incaponendo a risovere con i soli CSS.
Dunque, ho due immagini e voglio che una vada sopra l'altra (per la
precisione voglio che la img2 vada sopra la img1 in un punto preciso
della img1). Tutto qui. 
Ma sbaglio qualcosa con position, per cui, se utilizzo
position:absolute la img2 va a collocarsi correttamente, ma rispetto
al foglio e non a img2, che voglio centrata sul foglio,
indipendentemente dalla risoluzione.
Se utilizzo position:relative, img "sparisce" dietro img1.
Il codice che posto e` certamente una schifezza, ma vi prego di avere
pieta` e comprensione.
------ codice inizio (semplificato in parti non influenti) ------
<div align="center">
   <img src="img1.gif" width="500" height="500" alt="xxx">
 
   <div style="position:relative; top:400px; left:100>px;">
       <img src="img2.gif" width="10" height="10" alt="yyy"></a>
   </div>
</div>
------ fine codice -----------
Grazie in anticipo per ogni consiglio o indicazione che vorrete darmi.
A.M.

 della img1). Tutto qui.
Position:absolute posiziona l'elemento relatiamente al contenitore che ha un 
posizionamento DIVERSO dal default che è static, se non c'è quell'elemento, 
si posiziona rispetto al body.
Prova questo:
   <img src="img1.gif" width="500" height="500" alt="xxx" 
style="position:relative; display:block">
    <img src="img2.gif" width="10" height="10" alt="yyy" 
style="postion:absolute; top:50px; left:20px; display:block">
Non ho provato questo codice, faccio a memoria.
Nello.

della img1). Tutto qui. 
Allora. Spero di aver ben capito.
I criteri che chiedi siano rispettati sono
1- l'immagine dev'essere centrata indipendentemente dalla larghezza
della finestra;
2- img2 deve posizionarsi toccando il bordo superiore di img1, in un
punto orizzontale che decido io e che deve rimanere fisso anche
variando la dimensione della finestra del browser;
Il punto 1 lo risolvi impostando un div con una larghezza fissa e i
margini destro e sinistro con valore "auto".
Per il punto 2, prova con questi due esempi, copincolla cosi' com'e'
(controlla solo il percorso dei file "imgN.gif")
*********************************************************************
<body style="margin: 0px; padding: 0px;">
<!-- 
* Esempio 1 con position:relative 
* Per posizionare nel punto desiderato
* img2.gif, cambiare il valore 
* "left: 200px" nel <div> che la 
* contiene; nota la furbata del margin:-10px
* all'interno del tag <img>; variando quel valore,
* vari la posizione verticale dell'immagine;
* la posizione relativa dichiarata nel tuo esempio 
* "falliva" perche' non c'era nessuna posizione 
* "assoluta" a cui far riferimento. 
* Occhio al margin-bottom  del div contenitore, 
* che probabilmente non ti servira'.
-->
<div style="width: 500px; margin: auto; margin-top: 50px;
margin-bottom: 500px;">
 
	<div style="position: absolute; margin: 0px; padding: 0px;">
	<img style="margin: 0px; padding: 0px;" src="img1.gif"
width="500" height="500" alt="xxx">
	</div>
 
	<div style="position: relative; margin: 0px; padding: 0px;
top: 0px; left: 200px;">
	<img style="display: block; position:relative; margin: 0px;
padding: 0px; top: -10px; margin: 0px; padding: 0px;"  src="img2.gif"
width="10" height="10" alt="yyy">
	</div> 
 
</div>
<!-- 
* Esempio 2 con flusso normale di <div> 
* Per posizionare nel punto desiderato
* img2.gif, cambiare il valore 
* "padding-left: 200px" nel <div> che la 
* contiene; in questo caso l'ordine in 
* cui sono richiamate le due immagini e' 
* l'opposto; questo esempio non mi funziona
* perfettamente su IE, mentre il precedente si'.
-->
<div style="width: 500px; margin: auto; margin-top: 50px; padding:
0px; border: 0px;">
 
	<div style="margin: 0px; padding: 0px; padding-left: 200px;">
   	<img style="margin: 0px; padding: 0px; border: 0px;"
src="img2.gif" width="10" height="10" alt="xxx">
	</div>
	<div style="margin: 0px; padding: 0px; border: 0px;">
   	<img style="margin: 0px; padding: 0px; border: 0px;"
src="img1.gif" width="500" height="500" alt="yyy">
	</div>
</div>
</body>
*********************************************************************
Anche nel secondo caso puoi ottenere, oltre che un "contatto ai
bordi", una sovrapposizione della 2 sulla 1; se e' questo cio' che
cerchi, fai attenzione ai valori di z-index, sempre negli style. 
Ovviamente, ti consiglio di eliminare 'sti <..style:"blablabla"..> e
di demandare il controllo della rappresentazione dei contenuti ai CSS.
Spero di esserti stato d'aiuto, ciao!
-- 
cyb

Nello.
Ti ringrazio, ma non sono riuscito nel mio intento. Vedi la mia
risposta a "Cyb".
A.M.

Spero di esserti stato d'aiuto, ciao!
Prima di tutto ti ringrazio.
Ci ho lavorato un bel po', perche' ho applicato pedissequamente il tuo
codice, ma mi sono saltati fuori due problemi, che non sono riuscito a
risolvere, per cui rieccomi qua.
Primo problema: a me su IE il tutto resta ancorato in alto a sinistra,
invece che a centro pagina.
Secondo e piu` importante problema: in verita` mi ero spiegato male,
quindi credo che la cosa vada fatta diversamente. Dunque, cerco di
spiegarmi: sopra l'img1 devo posizionare varie "img2", che sono dei
quadratini rossi da cliccare, indirizzando l'utente su pagine diverse.
Il tutto e` generato dinamicamente. Vedo che il sistema posiziona i
quadratini in modo sfalzato, sempre piu`, via via che li colloca,
seguendo l'ordine dato dalla query. Cioe` il primo quadratino e`
sfalzato di poco, rispetto alle coordinate date, ma guesto non sarebbe
troppo grave, se non fosse che il secondo e` saflzato un po' di piu` e
il terzo ancor di piu` e cosi` via. Direi inoltre che sono tutti
sfalzati degli stessi pochi pixel sull'asse orizzontale, mentre e` su
quello verticale che questo fenomeno progressivo si manifesta.
Ho provato e riprovato, ma non sono riuscito ad individuare ne'
l'errore e tanto meno la strada da seguire.
A.M.

quadratini rossi da cliccare, indirizzando l'utente su pagine diverse.
Avevo sottovalutato quel "da clickare". C'e' un tag in piu' da gestire
(<a>, immagino), e indentato in esso c'e' il tag <img> che io trattavo
come "blocco". 
Nel codice che ti posto (l'ho reso un po' piu' pulito separando css e
html), le img2 sono dei link. Io ho realizzato il tutto ponendo come
img1 una gif quadrata di 500px di lato e come img2 una gif quadrata di
10px di lato. La prima prova, falla creando due immagini come queste
(magari con due colori diversi per vedere i "confini"), due quadrati
uno grande e uno piccolo; copincolla il codice che ti posto in un file
htm, salvalo nella stessa cartella delle immagini e guarda come si
vede. Se e' questo quello che cerchi, dovresti essere in grado di
riprodurlo anche generando dinamicamente i quadratini.
Direi che, per generare i quadratini dinamicamente, sei a posto per
quanto riguarda l'asse verticale; per l'orizzontale, ti consiglierei
di "tarare il tutto" modificando il margine della classe "float" in
proporzione al numero di link-quadratini che ti serve mettere.
Questo e' il codice:
*****************************************************************************
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
    "
http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd
">
<html xmlns="
http://www.w3.org/1999/xhtml
" xml:lang="it">
<head>
<!-- 
.
header vari
.
 -->
<title>Prova a.float</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<style type="text/css">
body {
	margin: 0px;
	padding: 0px;
}
div#center {
	width: 550px;
	margin: auto;
}
a.float {
	display: block;
	float: left;
	line-height:0em;
	margin: 30px;
	margin-bottom: 0px;
 
}
img {
	border: 0px;
}
img.fixed {
	margin: 0px;
	display: block;
	clear: both;
	float: none;
	padding: 0px;
}
</style>
</head>
<body style="margin: 0px; padding: 0px;">
<!-- 
* Questo div dovrebbe portare tutto al centro
-->
<div id="center">
<!-- 
* I quadratini da clickare
-->
	<a href="#" class="float"><img src="img2.gif" alt="text"/></a>
	<a href="#" class="float"><img src="img2.gif" alt="text"/></a>
	<a href="#" class="float"><img src="img2.gif" alt="text"/></a>
	<a href="#" class="float"><img src="img2.gif" alt="text"/></a>
	<a href="#" class="float"><img src="img2.gif" alt="text"/></a>
	<a href="#" class="float"><img src="img2.gif" alt="text"/></a>
<!-- 
* L'immagine grande sotto
-->
	<img class="fixed" src="img1.gif" alt="text" />
</div>	
</body>
</html>
****************************************************************************************
Ciao!
-- 
cyb