Problemi con il position absolute.

**Fever1808** · 18-03-2009, 13:13

Salve, questo è il mio primo messaggio, e spero possiate aiutarmi. Da circa un anno mi sono avvicinato al mondo dell'html del Css,e con molta pratica sono riuscito a realizzare un sito internet da solo, senza l'ausilio di nessun programma se non il blocco note di Windows, così potevo vedere direttamente cosa scrivevo... ed è stato molto utlile. Detto questo, con il tempo ho deciso di realizzare qualcosa di più complesso cercando di ottenere una buona visualizzazione in quasi tutti i browser. Ora sto disegnando il nuovo layout per il mio sito, ho realizzato l'header che consiste in un'unica immagine di 800 px * 248 px.

A questa imamgine, in quel triangolino rosa che vedete a sinistra ho pensato di inserire un'immagine con slide tramite javascript. Per posizionarla in quel punto ho utlizzato questo codice:

. Faccio una premessa: sia il codice javascript che il codice del DIV style li ho presi da un sito che li utilizza, quindi dicamo chiaramente che l'ho copiato. Ora il punto è questo: in Firefox con le coordinate che leggete si vede perfettamente, mentre in Internet Explorer 6 no. Mi chiedo perchè,dato che il sito da cui ho prelevato il codice utilizza lo stesso codice con coordinate diverse ovviamente, e il tutto si vede perfettamente, sia in Explorer che in Firefox. In più, quando provo a ridimensionare la finestra dei due browser l'immagine con slide si sposta di molti pixel, proprio in base al ridimensionamento della finestra, e questo accade con entrambi i browser. Ovviamente, al sito da cui ho prelevato questo codice ciò non accade.

Qualcuno sa dirmi dove sbaglio?

Perchè ci sto lavorando da alcuni giorni, ho utilizzato Hack (che hanno risolto in parte il problema) ma non riesco a venirne fuori. Spero di essere stato chiaro. Se così non fosse, posso postare l'indirizzo dei due siti e potete verificare di persona.

Grazie in anticipo

**Straystudios** · 18-03-2009, 15:41

Finché maneggiamo DIV a dimensione fissa in pixel, tutto rimane fattibile.
Questa è UNA soluzione, e si avvale di questo: con absolute possiamo definire in % percentuale il punto top/left di "fissaggio absolute" del DIV sullo screen; che è dove ritroveremo lo spigolo superiore sinistro del DIV, spigolo che se ridimensioni la finestra si manterrà sempre al centro di questa.
Poi applichiamo una correzione con un margin-left negativo pari alla metà della dimensione del DIV.
margin è un' altra proprietà di stile, come è padding, che interviene per conto suo, che ci sia o meno un position: absolute;

Ecco il trucco applicato a due DIV che rimangono così "gemellati":

codice:

<html><head>
</head><body>

<div style="position:absolute; width: 800px; height: 248px; top: 8px; left: 50%; margin-left: -400px; 
            background-color: #FFFFFF; border: 1px dashed black;">
</div>

<div style="position:absolute; width: 220px; height: 70px; top: 173px; left: 50%; margin-left: -388px; 
            background-color: #FFFFFF; border: 1px dashed blue;" >
 [img][/img]
</div>


</body>
</html>

Lo stesso principio torna buono anche per centrare verticalemnte.
La pecca è che riducendo la finestra oltre la dimensiona del DIV, questo diventa "irrecuperabile" con la barra di scorrimento.

**Straystudios** · 18-03-2009, 16:08

Un' altra soluzione dove il 2º DIV è contenuto dentro il 1º; se fosse solo, lo ritroveremo in alto sx nel DIV contenitore.
Ma c'è anche il Tag IMG che già occupa tutto lo spazio e "spinge fuori" il 2º DIV; lo facciamo "rientrare" con nuovamente un valore negativo di margin-top

Per centrare il DIV contenitore impiego margin: auto;
Attenzione che IExplorer richiede un valido !DOCTYPE XHTML altrimenti non riconosce il margin: auto;

codice:

<html><head><title>margin: auto;</title>
</head><body>

<div style="width: 800px; height: 248px; margin: 0 auto; 
            background-color: #FFFFFF; border: 1px dashed red;">

 [img][/img]

 <div style="width: 220px; height: 70px; margin-top: -85px;  margin-left: 12px; 
            background-color: #FFFFFF; border: 1px dashed blue;" >
  [img][/img]
 </div>

</div>


</body>
</html>

**Fever1808** · 18-03-2009, 17:35

Ciao e grazie per la risposta

Allora, ho provato entrambi i metodi. Con il primo sono riuscito a posizionare esattamente l'immagine nel punto in cui desidero,ed è visualizzabile correttamente sia in explorer che in firefox ma rimane purtroppo il problema del ridimensionamento della finestra e della sucessiva "scomparsa" dell'immagine. La seconda soluzione invece non risolve il problema. Non so se questo è causato da un mio errore, o dal DOCTYPE non esatto. Il dubbio però che continua ad affliggermi è: come mai il sito da cui ho prelevato i due codici (div style e javascript), ha lo stesso codice DIV STYLE, e nessuno dei miei problemi?

Discussione: Problemi con il position absolute.

Strumenti discussione

Ricerca discussione

Visualizza

Problemi con il position absolute.

Permessi di invio