posizionamento relative

[fiber81]

Ciao,
ho un contenitore che deve contenere 3 div, uno sotto l'altro.
L'unica cosa che devo posizionarli ad una certa distanza dal margine di sinistra del contenitore principale.
Quindi ho assegnato a questi div position:relative, la domanda è questa:
le proprietà dei div sottostanti al primo, per esempio top e left, si riferiscono al contenitore o al div superiore?

Vi allego il codice
Grazie

#home_main
{
	width:950px;
	height:100%;
	background: #D6E6F5 url(img/sfondo_home.jpg) no-repeat left top;

}

#home_sup
{
	width:480px;
	position:relative;
	left:370px;
	top:60px;
	float:left;
	text-align:left;
	font-size:12px;
}

#home_sup img
{
	float:left;
	margin-right:25px;
}

#home_centro
{
	width:480px;
	position:relative;
	left:370px;
	top:80px;
	float:left;
	text-align:left;
	font-size:12px;
	font-weight:bold;
}

#home_centro img
{
	float:left;
	margin-right:25px;
}

#home_inf
{
	width:480px;
	position:relative;
	left:475px;
	top:80px;
	float:left;
	text-align:left;
	font-size:12px;
	font-weight:bold;
}

e l'html

				<div id="home_main">
					<div id="home_sup">
						[img]img/iqnet.gif[/img]
						aaaaa			
					</div>

					<div id="home_centro">
						[img]img/csq.gif[/img]
						bbbbb
					</div>

					<div id="home_inf">
						ccccc
					</div>
				
				</div>

[Sgro]

Position:relative non significa affatto quel che tu credi

Position:relative applicato a un elemento block level (come un div) indica ai suoi elementi figlio che, se verranno posizionati in maniera assoluta, le coordinate di riferimento per il posizionamento dovranno essere quelle del div contenitore, e non quelle del body (o di un eventuale elemento più esterno posizionato in maniera relative).

Per fare quello che vuoi tu non devi specificare nessun posizionamento. Devi semplicemente applicare, agli attributi figlio, la proprietà margin-left : XXpx, dove XX è il numero di pixel. Oppure puoi semplicemente applicare al DIV contenitore la proprietà padding-left : XXpx, stando però attento che il padding si somma alla dimensione di un elemento, quindi se ad esempio dichiari il DIV largo 30px con 10px di padding sinistro, la dimensione finale sarà di 40px, di cui 10 non utilizzabili (padding) e 30 utilizzabili.

Ripulendo il tuo CSS diventa:

#home_main
{
	width:950px;
	height:100%;
	background: #D6E6F5 url(img/sfondo_home.jpg) no-repeat left top;
	font-size:12px;
}

#home_sup
{
	width:480px;
	margin-left:370px;
	margin-top:60px;
	text-align:left;

}

#home_sup img
{
	float:left;
	margin-right:25px;
}

#home_centro
{
	width:480px;
	margin-left:370px;
	margin-top:80px;
	text-align:left;
	font-weight:bold;
}

#home_centro img
{
	float:left;
	margin-right:25px;
}

#home_inf
{
	width:480px;
	margin-left:475px;
	margin-top:80px;
	text-align:left;
	font-weight:bold;
}

[H5N1_Aviaria]

In accordo con quanto descritto in http://www.w3.org/TR/REC-CSS2/visure...ve-positioning il posizionamento è "relativo" (appunto) alla posizione che avrebbe se fosse posizionato in "normal flow" cioè senza specificarne la proprietà "position".
Il posizionamento relativo è utilizzato, difatit, per far in modo che la posizione di un BOX non influenzi il posizionamento di BOX adiacenti.
Attenzione ai diversi BOX model dei diversi Browser...

[fiber81]

Attenzione ai diversi BOX model dei diversi Browser...

Infatti, su IE7 funziona, mentre su firefox i div sotto il primo si allineano male e si crea uno spazio che non so da dove arriva,che non appartiene al contenitore padre

Poi, ho provato ad usare o margin o padding..ma mi sembra il contrario di quello che mi hai detto tu, Sgro. Dato che il contenitore padre è largo 950px, anche i filgi gli fisso a 950px, se metto padding di 370 va bene, se metto margin mi sborda di 370px!

Questo è il link:
http://www.vedani.it/new_graph/home2.htm

[Sgro]

Chiariamo bene. O metti padding al DIV CONTENITORE oppure metti MARGIN a tutti i div figli. E comunque nel caso la somma di padding (del padre) e larghezza dei figli, oppure margin (dei figli) e larghezza dei figli non deve superare la dimensione complessiva del div padre.

Purtroppo ora non ho tempo di fare una prova pratica, se dopo riesco ci guardo meglio.

[H5N1_Aviaria]

In realtà è Internet Explorer a visualizzare male la pagina forzando lo stile della tabella (è un bug di IE).
Quello che vedi in Firefox è lo stesso che vedi in Opera e Safari: corretto.
Non capisco perchè usi quella tabella e posizioni con i div gli elementi nella tabella.

[fiber81]

Cioè..è corretto la visualizzazione ma si vede sbagliato?
Uso la tabella solamente per far diventare l'altezza della pagina alta il 100%, con un header e footer di altezza fissa al bottom della pagina, mentre il corpo centrale variabile.
Posso fare in un altro modo?

[H5N1_Aviaria]

SSSSSssst!
Non farti sentire!!!!
Se lo sentono "gli amici del W3C" ti si mangiano vivo!
Le tabelle NON SERVONO per la formattazione.
Esistono in funzine dell'organizzazione dei dati tabellari.
Tutto si può fare.

[fiber81]

Per Sgro ho capito quello che dici..però la cosa strana è che mentre su firefox mettendo il padding al contenitore principale e diminuendo la dimensione è ok...ma non lo è più su IE perchè la dimensione si riduce a quella settata....

Per H5... sono abbastanza neofita dei css...mi sembrava solamente di semplificare il problema...parlerò più sottovoce

[H5N1_Aviaria]

Originariamente inviato da fiber81
[...]..ma non lo è più su IE perchè la dimensione si riduce a quella settata....

E così dovrebbe essere.