position non va bene

[djjunior]

Carissimi,
devo mettere un'immagine ad un punto preciso della mia pagina web e ho utilizzato i css e ho messo position:absolute e indicati left etc.
Ora è al punto giusto alla mia risoluzione dello schermo, mentre ad una risoluzione + grande si trova ad un altro punto.
Come posso ovviare al problema, io voglio mettere l'immagine a quel punto e tutte le risoluzioni devono rispettarlo, come posso fare?
Grazie
G.

[djjunior]

nessun aiuto??

[bionicoz]

Spiegati meglio, perché position:absolute posiziona esattamente dove gli dici tu (relativamente al contenitore, se a quest'ultimo è stata a sua volta definita una posizione)
a qualunque risoluzione.

[marty89]

Potresti provare a utilizzare le misure espresse sotto forma di percentuale. In questo modo ovunque posizioni l'immagine sarà nello stesso punto per qualsiasi risoluzione.
Attenzione però, perché se hai dei suoi contenitori posizionati, l'immagine sarà posizionata rispetto a quell'oggetto, mentre se non ci sono altri elementi posizionati allora prenderà come riferimento tutto lo spazio a disposizione.

[djjunior]

grazie...
per bionicoz: capisco che position:absolute posiziona in un punto specifico, ma se lo prevedo con una risoluzione video bassa ok, ma se la pagina web viene visualizzata con una risoluzione video + alta, non sarà esattamente a quel punto.
marty89, mi fai gentilmente un esempio pratico.
Grazie
G.

[djjunior]

nessun aiuto????

[marty89]

Ciao, ti metto due esempi. Nel primo (quello rosso) il div è all'interno di un contenitore posizionato (relative o absolute è indifferente), quindi verrà messo 20px dall'alto e da destra rispetto al contenitore. Nel secondo esempio (quello verde), invece, il contenitore non è posizionato, quindi la posizione del div sarà rispetto a tutto lo spazio disponibile, infatti è a destra dello schermo.
Codice html:

<div id="contenitore1">contenitore1
	<div id="div1">div1</div>
</div>


<div id="contenitore2">contenitore2
	<div id="div2">div2</div>
</div>

Codice css:

#contenitore1{
	position: relative; 
	border: 1px solid red; 
	width: 300px; 
	height: 300px;
}

#div1{
	background-color: red; 
	width: 200px; 
	height: 200px; 
	position: absolute; 
	right: 20px; 
	top: 20px;
}

#contenitore2{
	border: 1px solid green; 
	width: 300px; 
	height: 300px;
}

#div2{
	background-color: green; 
	width: 200px; 
	height: 200px; 
	position: absolute; 
	right: 20px; 
	top: 20px;
}

Spero che in questo modo sia un po' più chiaro.

[ldetomi]

Ricorda che con il position:absolute posizioni ciascun elemento rispetto al più vicino contenitore che ha un posizionamento diverso dal naturale (e implicito) position:static. In pratica il div posizionato assolutamente verrà posizionato in relazione al più vicino contenitore che sarà stato a sua volta posizionato o absolute o relative. In mancanza di questi div, si posiziona in base al BODY che è ovviamente dipendente dalla risoluzione dello schermo, ecco perché probabilmente cambia la posizione in base allo schermo..

Prendi un qualunque DIV a monte e mettigli position:relative; per lui non cambierà nullla ma ti permetterà di posizionare altri div al suo interno!

[djjunior]

Grazie per il vs aiuto.
Ma purtroppo non riesco ad uscirne.
In pratica ho il body che deve essere posizionato al centro dove contiene tutta la pagina.
Su questo body, ad un punto preciso devo posizionare un'immagine come devo fare????
GRazie 1000
G.

[marty89]

Prova a vedere se riesci a creare qualcosa partendo da questo codice. Poniamo che dentro al body abbia un div, che ho chiamato "contenuto", il quale conterrà tutta la pagina; al suo interno ho inserito un div che ho chiamato "immagine". Questo l'ho messo solo per simulare l'immagine che dovresti posizionare, infatti lo devi sostituire con <img ... />. Il punto principale però è che il contenitore dell'immagine è posizionato (indifferentemente relative o absolute), in questo modo la tua immagine verrà sistemata prendendo come punto di riferimento quel contenitore. Se, invece, l'immagine la vuoi posizionare rispetto tutta la pagina, ovvero rispetto a tutto il body, allora dovresti controllare che qualsiasi contenitore dell'immagine non sia posizionato in nessun modo.

Codice html:

<div id="contenuto">
	<div id="immagine"></div>
</div>

Codice css:

#contenuto{
	margin: 0 auto;
	width: 900px;
	height: 500px;
	border: 1px solid black;
	position: relative;
}

#immagine{
	width: 200px;
	height: 200px;
	background-color: blue;
	position: absolute;
	top: 10%;
	left: 10%;
}

Spero che in questo modo sia chiaro.