sto "cercando" di posizionare un <div> che a sua volta contiene un altro div, ho scoperto che il position posso settarlo in:
absolute - inherit - relative - static
qual è il comportamento dei due div utilizzando i vari tipi di position? Questo perchè provando i div in una pagina vuota riesco a metterli dove voglio, quando li carico nella pagina in cui mi servono non ci capisco più nulla!
il fatto è che usando absolut riesco a piazzare i div dove voglio, ma basta un browser diverso che ottengo differenze di posizione anche di 10 px. Essendo questa una sorta di barra di strumenti, non è molto carino che un pezzo della barra (quella con i all'interno dei div) sia disallineata con l'altra
sono l'unico che ha questo problema? Sono riuscito ad usare static per il primo div, in modo che dove sta rimane, e fin qui tutto bene, ma per il secondo div, contenuto dal primo e che al click del mouse si sovrappone al primo, se uso static o inherit (ereditato) mi si piazza in un posto stranissimo. Se uso absolute e lo piazzo a mano nel posto giusto, è sufficente che l'utente usi una risoluzione più bassa di quella per cui il sito è stato progettato che il secondo div ovviamente non si sovrapponga più al primo!! Nessun consiglio?
Per quel che ne so...
'absolute' posiziona il livello in maniera assoluta nella pagina,
'relative' posiziona il livello rispetto all'elemento immediatamente precedente,
faccio un esempio
<DIV style: position absolute; top: 40px, left: 40px; etc.>
oppure lo stesso livello
<DIV style: position relative; top: 40px, left: 40px; etc.>
se nella pagina c'è una tabella che parte da 10px (top), 0px (left) ed è alta 300px ed il livello si trova subito dopo la tabella
</TABLE>
<DIV ....>
con 'absolute' sarà in posizione 40px dall'alto / 40px da sx;
con 'relative' sarà in posizione 340px dall'alto / 40px da sx
(cioè sarà a 40px dal bordo inferiore della tabella);
con 'static' si posizionerà immediatamente sotto la tabella e completamente a sinistra nella pagina;
con 'inherit' a quanto pare fa lo stesso che con 'static' ma è la prima volta che lo sento, indagherò.
Per quanto riguarda i browser, posso solo dirti che molti problemi di distanze disuguali io li ho risolti badando bene di specificare tutte le misure con il suffisso 'px' quindi ad es.: top:40px e non solo top:40, ma non risolvi tutto perchè ad esempio i bordi vengono gestiti in modo diverso da IE e da NS per cui una tabella con dieci celle in cui le celle avessero dei bordi da 2px possono sfalsare di 20px da un browser all'altro, questo perchè un browser considera i bordi come esterni l'altro come interni alla dimensione dell'oggetto.
Luxx (°)
Chi sa dica, chi non sa chieda.
grazie delle delucidazioni, sono riuscito in questo preciso istante a risolvere la cosa. Innanzi tutto inherit sta per eredita, ma non mi sono preoccupato di vedere come funzionava. Ho proceduto nel seguente modo, il primo div l'ho dichiarato relative, di modo che si posizionasse automaticamente all'interno di una tabella. Con il secondo div, interno al primo, ho scoperto che le coordinate assolute (absolute) ripartono da 0,0 al punto di partenza del primo div, quindi basta usare le coordinate assolute opportunamente calcolate in base al primo div che a seconda delle risoluzioni usate il secondo div si posiziona sempre allo stesso posto. Grazie per la collaborazione, spero di essere stato comprensibileOriginariamente inviato da Luxx100
Per quel che ne so...
'absolute' posiziona il livello in maniera assoluta nella pagina,
'relative' posiziona il livello rispetto all'elemento immediatamente precedente,
faccio un esempio
<DIV style: position absolute; top: 40px, left: 40px; etc.>
oppure lo stesso livello
<DIV style: position relative; top: 40px, left: 40px; etc.>
se nella pagina c'è una tabella che parte da 10px (top), 0px (left) ed è alta 300px ed il livello si trova subito dopo la tabella
</TABLE>
<DIV ....>
con 'absolute' sarà in posizione 40px dall'alto / 40px da sx;
con 'relative' sarà in posizione 340px dall'alto / 40px da sx
(cioè sarà a 40px dal bordo inferiore della tabella);
con 'static' si posizionerà immediatamente sotto la tabella e completamente a sinistra nella pagina;
con 'inherit' a quanto pare fa lo stesso che con 'static' ma è la prima volta che lo sento, indagherò.
Per quanto riguarda i browser, posso solo dirti che molti problemi di distanze disuguali io li ho risolti badando bene di specificare tutte le misure con il suffisso 'px' quindi ad es.: top:40px e non solo top:40, ma non risolvi tutto perchè ad esempio i bordi vengono gestiti in modo diverso da IE e da NS per cui una tabella con dieci celle in cui le celle avessero dei bordi da 2px possono sfalsare di 20px da un browser all'altro, questo perchè un browser considera i bordi come esterni l'altro come interni alla dimensione dell'oggetto.
Permessi di invio
Rispondi quotando