Posizione assoluta di div: come imposto il punto di riferimento?

[santino83]

salve,

devo impaginare una pagina e mi serve di posizionare dei div uno sopra l'altro...quindi, avendo letto la guida dei css di html.it, pensavo di usare la position:absolute e lo z-index... solo che ho un problema: come faccio ad impostare il punto di riferimento?

nel senso, io ho un div contenitore così:

<div align="center" width=XXX height=XXX id="contenitore">

all'interno di questo div ci voglio far apparire gli altri div posizionati in maniera, diciamo assoluta....però voglio che questi div non escano fuori dal div contenitore ma si "muovano" all'interno dell'area indicata dal div contenitore...mi dite come posso fare?

please altrimenti mi tocca fare un'immagine unica di tutta la pagina e mi sembra una soluzione un pò pesante

gracias

[Mich_]

I posizionamenti assoluti non sono l'unico sistema.
Con il posizionamento assoluto, la cosa e` complicata dal fatto che i blocchi posizionati escono dal normale flusso, per cui si sovrappongono al resto della pagina (vedi ad es. "zio Sam" nel forum "off topic").


Potresti posizionare tutti i tuoi <div> nello stesso posto, e visualizzarne uno alla volta:

<div id="contenitore> 
  <div id="interno1" style="display:none;">contenuto</div>
  <div id="interno2" style="display:none;">contenuto</div>
  <div id="interno3" style="display:none;">contenuto</div>
  ...
</div>

Poi per far vedere uno dei blocchi, cambi il display tramite JS:
document.getElementById('interno1').style.display= 'block';

[santino83]

eheh ma io li devo vedere tutti insieme

[Mich_]

Allora non ho capito.
Se devono stare nella stessa posizione, ne puoi vedere uno alla volta; gli altri sono nascosti.
Oppure pensavi da dare sfondo trasparente?

[santino83]

no, non mi sono spiegato

io ho metti 5 div ognuno contenente un'immagine diversa (con sfondo trasparente) che si devono sovrapporre per alcune parti...

[Mich_]

Ora ho capito (forse).

Obiezione:
Perche` 5 div ciascuno contentente un'immagine?
Non sarebbe meglio 5 immagini delle stesse dimensioni (con sfondo trasparente) che si devono sovrapporre? (la cosa dal punto di vista logico/funzionale non dovrebbe cambiare, ma diminuisce il numero di oggetti da inserire nella pagina).

Nota che l'attributo position, possiede 4 valori possibili:
- static The element is placed in a normal position (according to the normal flow). With the value of "static" we do not use the "left" and "top" properties
- relative Moves an element relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position
- absolute With a value of "absolute" the element can be placed anywhere on a page. The element's position is specified with the "left", "top", "right", and "bottom" properties
- fixed ( http://www.w3schools.com/css/pr_class_position.asp )

Mi pare che se vuoi inserire i 5 oggetti nella stessa posizione, devi usare il relative.
Poi ciascun oggetto dovra` avere lo stesso top e left (piu` semplice e` metterli a 0 ambedue), e naturalmente z-index diversi.

Esempio di codice:

HTML:
<div id="contenitore"> 
  [img]imm1.gif[/img]
  [img]imm2.gif[/img]
  ...
</div>

CSS:
#contenitore {
  width: ...; /* larghezza e altezza di tutte le immagini */
  height: ...;
}
#contenitore img {
  position: relative;
  top:0; 
  left: 0;
}
#sovr1 {
  z-index: 10; 
}
#sovr2 {
  z-index: 20; 
}
...

[santino83]

se vuoi vedere quello che ho fatto:

www.duiliocalzature.it

come puoi leggere dal codice ho dato ai div contenenti le varie immagini posizioni assolute...solo che così facendo non posso centrarli nell pagina perchè quello varia a seconda delle dimensioni dello schermo che ognuno ha...una palla insomma

non so se hai idea di come fare ciò...cmq grazie per le risposte

[Mich_]

E` semplice, e te l'ho gia` detto: centri il contenitore, ed usi il position:relative.


Altri problemi:
1. Il codice e` sporco: la programmazione moderna richiede di separare contenuto da presentazione: quindi gli stili non devono essere inlinea; e` tollerato metterli nella pagina (nella head).

2. Usi attributi HTML di formattazione (es: bgcolor="#000000"): questo crea confusione: qualche browser potrebbe dare priorita` a tali attributi, qualche altro al CSS.

3. Se metti un link <a href="#" ..., aggiungi anche onclick="return false;" , in modo che la pagina non si sposti se uno clicca.

4. Usi le tabelle per formattare: e` una modalita` di lavoro da HTML2: la formattazione si fa con i CSS.

[santino83]

sinceramente non so neanche cosa sia html2....diciamo che in linea di massima scrivo codice asp, non css/xhtml... per cui è normale che sia codice sporco

a me basta che in explorer e massimo firefox si veda + o - come dico io, poi il resto amen...magari un giorno mi perfeziono

mi piace la dritta del onclick="return false;" che in effetti potrebbe dare fastidio...anche se tanto quei pulsanti poi punteranno ad altre pagine

mi incuriosiva il discorso del punto4 cmq...in che senso adesso si usano i css? si fa molto ricorso ai div? peccato perchè erano tanto belle le tabelle....

[santino83]

butta via quello che ho detto fino ad ora!!!!!!!!!!!!!!!!

a morte le tabelle!!!!!!!!!!!!!!!


guarda un pò cosa ho combinato: www.duiliocalzature.it

direi che c'è un abisso tra l'html di prima e quello di adesso...prima era ingovernabile il tutto, ora è perfettamente allineato (almeno in ie )

se fai www.duiliocalzature.it/stile.css c'è il css

alla fine la soluzione era:

div contenitore con sfondo grigio
 |
 |-div contenitore sfondo arancione con position:relative
     |
     |-immagini posizionate in asolute

in pratica ho finalmente capito la guida ai css che c'è qui in html.it... per la position, absolute si riferisce all'ultimo contenitore con position diversa da static. se non c'àè si riferisce alla pagina html...per questo il contenitore arancione l'ho messo con position:relative (almeno poi lo spostavo da quello grigio nella parte alta)

fantastico fantastico c'ho messo 1 ora ma alla fine ho ottenuto esattamente quello che volevo fare

altri commenti?problemi? suggerimenti?

grazie mille cmq