Posizione di un DIV

[ivy_76]

Ciao

ho un problema con il posizionamento dei DIV. Il mio ragionamento è questo: Ho un div "contenitore" che racchiude tutta la pagina. Creo 2 DIV che devono essere posizionati nel contenitore in modo relativo.
In pratica però è diverso e i 2 DIV relativi non prendono le impostazioni che dico io. Tanto per dirne una i due DIV "LOGO" e "MENU" vengon messi al centro della pagina e non a sinistra. Vi posto un po di codice

- FOGLIO DI STILE ---
#contenitore
{
position:absolute;
border:1px solid black;
background-color:white;
width : 85%;
height : 1000px;
}
#logo
{
position : relative;
left : 0px;
top : 0px;
}

#menu
{
position : relative;
left : 0px;
top : 150px;
color : black;
border : 1px dotted black;
width : 250px;
}
--- FINE FOGLIO DI STILE ----

-- INDEX.HTM ---

<div id='contenitore' width='85%' align='center'>
<div id='logo'>
Immagine del logo
</div>



<div id='menu' align='left'>
+ Home page

+ Gallery

+ Contatti


</div>

</div>

[ricman]

Posizionali con float:left (togliendo i vari top e left)

[ricman]

[darkmavis]

Personalmente uso il posizionamento solo quando non ho altre scelte, finche' posso vado di floating, cmq a parte queste opinioni personali, prova a mettere uno z-index ai due elementi

#contenitore
{
position:absolute;
border:1px solid black;
background-color:white;
width : 85%;
height : 1000px;
z-index:1;
}
#logo
{
position : relative;
left : 0px;
top : 0px;
z-index:2;
}

#menu
{
position : relative;
left : 0px;
top : 150px;
color : black;
border : 1px dotted black;
width : 250px;
z-index:3;
}

[ivy_76]

Ho corretto il messaggio perché avevo sbagliato nel modificare foglio CSS. Se però volessi avere uno spazio di qualche pixel, come devo adattare il FLOAT?

[gengix]

ho un problema con il posizionamento dei DIV. Il mio ragionamento è questo: Ho un div "contenitore" che racchiude tutta la pagina. Creo 2 DIV che devono essere posizionati nel contenitore in modo relativo.
In pratica però è diverso e i 2 DIV relativi non prendono le impostazioni che dico io. Tanto per dirne una i due DIV "LOGO" e "MENU" vengon messi al centro della pagina e non a sinistra. Vi posto un po di codice

Se vuoi utilizzare i posizionamenti in modo corretto, al contenitore devi dare una position:relative, mentre ai figli una position:absolute, non viceversa come hai fatto te.

#contenitore
{
position:relative;
border:1px solid black;
background-color:white;
width : 85%;
height : 1000px;
}
#logo
{
position : absolute;
left : 0px;
top : 0px;
}

#menu
{
position : absolute;
left : 0px;
top : 150px;
color : black;
border : 1px dotted black;
width : 250px;
}

In genere i posizionamenti utilizzali solo quando è necessario. In questo caso puoi farne tranquillamente a meno.

[gengix]

Ho corretto il messaggio perché avevo sbagliato nel modificare foglio CSS. Se però volessi avere uno spazio di qualche pixel, come devo adattare il FLOAT?

Se il risultato in questo caso è quello di due div posizionati a sinistra uno sotto l'altro puoi anche evitare i float.

	#contenitore{
	border:1px solid black;
	background-color:white;
	width : 85%;
	height : 1000px;
	text-align:left; 
	}
	#logo, #menu{
	margin:0 auto;
	margin-left:0;
	border:1px solid black;/*per vedere i contenitori*/
	width:200px;/*larghezza di prova*/
	height:200px;/*altezza di prova*/
	}

[JackDaniels83]

Il primo problema grave sta, come detto anche da gengix, nei position...che vanno corretti come indicato da lui.
In riferimento al solo problema da te enunciato credo sia dovuto al settaggio automatico di alcuni browser della proprietà margin:auto;
Per ottenere l'allineamento a sinistra allora ti basta indicare nei div (contenuti) la proprietà margin-left:0;

[ivy_76]

Grazie ragazzi, ho risolto e mi avete schiarito le idee.