Posizionamento relativo, relativo a cosa?

**giorgiogio48** · 03-07-2008, 08:18

Ciao amici,
mi sono studiato l'argomento del posizionamento relativo di un div all'interno di una pagina html attraverso un css esterno. Ma non ho capito ancora a quale contenitore posizionamento è relativo.
nel mio caso infatti nella pagina html sopra al div che mi interessa ho solo un altro div e una form.
Nel mio css esterno ho creato un id che è questo:

codice:

#mioid1 {text-align: center; font-size:24; color:yellow; top: 50px; position: relative}

.
Vi chiedo: il mio Top di 50 px a quale contenitore è relativo?
Grazie.

**fcaldera** · 03-07-2008, 09:21

al primo elemento con position: static non floattato che lo precede

**giorgiogio48** · 03-07-2008, 15:00

Ciao fcaldera,
grazie per la risposta. Ma come faccio a sapere quale è l'elemento con position static non floattato? Scusa l'ignoranza.

**fcaldera** · 03-07-2008, 16:31

1) guarda il codice html

2) cerca l'elemento con id 'mioid1'

3) inizia a guardare ad uno ad uno gli elementi che lo precedono (cioè quelli tra l'elemento stesso e <body>), da quelli più vicini fino ad arrivare all'apertura del body

4) a quell'elemento hai dichiarato position: absolute o relative;? oppure hai dichiarato float: left o right? se sì controlla l'elemento immediatamente precedente e ritorna al punto 4), altrimenti

5) hai trovato l'elemento.

**giorgiogio48** · 04-07-2008, 15:17

Riciao fcaldera,
non mi pare che negli elementi sopra il mio id ci siano dichiarazioni left, right, absolute o float. Comunque per sicurezza ti posto la parte del codice html interessata, forse ci capiremo meglio:

codice:

<body style="color:#000000; font-size: 100%; text-align: center;"; background-color: "#00FFFF"; alink="white" link="white" vlink="white" bgcolor="#009966">


	


<div style="text-align: center;"><span style="color: rgb(255, 255, 153);"></span><a style="font-weight: bold; font-family: Verdana;" href="scienza/sulla_scienza.html"><span style="color: white;">Sulla
scienza, contro la scienza rottame</span></a><span style="color: white; font-family: Verdana;"> </span><span style="font-family: Verdana;"></span><a style="font-weight: bold; font-family: Verdana;" href="depressione/sulla_depressione.html">Prevenire
o combattere l'ansia e la depressione</a><big style="color: white; font-family: Times New Roman;"><small style="font-weight: bold; font-family: Verdana;"><span style="font-family: Verdana;">
</span>Forum
</small></big></div>


<FORM ACTION="http://search.freefind.com/find.html"
METHOD="GET" accept-charset="utf-8" target="_self">  
<font size=1 face="arial,helvetica" >
<A HREF="http://search.freefind.com/find.html?id=20927908">
</a>     
powered by FreeFind

<INPUT TYPE="HIDDEN" NAME="id" VALUE="20927908">
<INPUT TYPE="HIDDEN" NAME="pid" VALUE="r">
<INPUT TYPE="HIDDEN" NAME="mode" VALUE="ALL"> 
<INPUT type="HIDDEN" name="n" value="0">
<INPUT TYPE="HIDDEN" NAME="_charset_" VALUE="">
<INPUT TYPE="HIDDEN" NAME="bcd" VALUE="&#247;">
<INPUT TYPE="TEXT" NAME="query" SIZE="40">
<INPUT TYPE="SUBMIT" VALUE="Cerca nel sito"><input type="SUBMIT"
name="sitemap" value="Mappa del sito">

</font></FORM>


 <P  ALIGN="CENTER" id ="image">
   
</P>
    
        <div id="mioid1">
            
            Questo
sito sarà dedicato alla scienza vera. Dobbiamo difenderci dalla scienza rottame che consiste in teorie che non hanno corrette basi scientifiche.
L'uomo, in assenza di buone basi
per le
sue convinzioni, non deve accontentarsi di basi cattive, ma deve cercare disfarsi dei pregiudizi per appropriarsi delle basi corrette della scienza.</div>

e grazie ancora.

**fcaldera** · 04-07-2008, 15:21

è relativo al paragrafo che lo precede immediatamente

**giorgiogio48** · 08-07-2008, 18:18

Riciao fcaldera,
scusami se ti rispondo con un certo ritardo, ma avevo degli impegni importanti.
Sono riuscito ad adattare una pagina web a varie risoluzioni.
Però: certamente mi sarò spiegato male, ma non capisco ancora.
Allora vado con ordine. Ti posto il mio foglio di stile alla risoluzione 1024x768

codice:

#mioid {text-align: center; font-size: 19.2px; color:white; position: relative; top: 0}
#image {position: absolute; width: 637; height:120;
    background: url(Galileo1024.gif); left: 194 }



#mioid1 {text-align: center; font-size: 19px; color:yellow; position: relative; top: 168}

#mioid2 {text-align: center;  font-size: 19px;  color:#CCFFFF; position: relative; top: 184 }
#mioid3 {text-align: left;  position: relative; top: 280}

Il #mioid3 non è settabile in relazione agli altri id perchè sennò finisce fuori della pagina perciò lo ho settato empiricamente.
Poi, se metto il Top del #mioid3 uguale a zero l'id finisce al centro dell'immagine. Come mai? La relativa semplice pagina web è: http://galileo2007.altervista.org/
Non capisco, potete aiutarmi?
Grazie.

**fcaldera** · 09-07-2008, 09:18

non capisco perchè tu abbia usato i posizionamenti relativi quando non ce n'era bisogno

quella pagina può essere realizzata con pochi elementi (immagini, paragrafi e liste di link) che puoi distanziare tra loro semplicemente usando un margin

**giorgiogio48** · 11-07-2008, 11:06

Ciao,
si, l'utilizzo dela comando margin è molto comodo, anche per piazzare un elemento al fondo della pagina. Bisogna dichiarare la position come absolute.
Grazie ancora.

**fcaldera** · 11-07-2008, 12:42

secondo me è meglio se eviti anche il posizionamento assoluto... vedo il testo giallo sopra l'immagine

Discussione: Posizionamento relativo, relativo a cosa?

Strumenti discussione

Ricerca discussione

Visualizza

Posizionamento relativo, relativo a cosa?

Permessi di invio