box centrato con margin 0 auto, come affiancarvi un box a sinistra in verticale?

[blekm]

come da titolo.. ho un box centrato nella pagina, ed ora ho un menu verticale da affiancarvi sul lato sinistra..

ora il menù è allineato completamente a sinistra, io lo vorrei mettere accanto al lato sinistro del box..

prima



dopo



html

<ul class="menu">[*]H O M E [*]A T T I V I T A'[*]W I F I[*]D O V ES I A M O[*]C O N T A T T I[/list]
<div class="contenitore">
</div>

css

body
{
	background: #efe9e9;
	text-align: center;
	padding-bottom: 100px;
	padding-top: 5px;
	margin: 0 auto;
	margin-top: 20px;
}

.contenitore
{
	margin: 0 auto;
	width: 780px;
	text-align: left;
	border: 1px solid black;
	padding: 10px;
	background-color: #2AADF3;
	background-image: url(Pieghe.jpg);
	background-position: bottom;
	background-repeat: no-repeat;
	height: 780px;
}

.menu
{
	list-style: none;
	padding: 10px 0 40px 25px;
	margin: 0;
	width: 25px;
//NON POSSO IMPOSTARE UN VALORE IN PIXEL PERCHè NON HO MAI LA STESSA RESA CROSS-BROWSER
// e perchè su IE mi SI SPOSTA TUTTO,sia con MARGIN che con PADDING
/*	margin-left: 182px;*/ 
	border:1px solid black;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
        float: left;
}







//dettagli grafici del menu, penso si risolva lavorando sul box qua sopra
.menu li
{
	display: block;
	width: 25px;
	margin-bottom: -29px;
}

.menu li a
{
	text-decoration: none;
	color: #fff;
	font-size: 11px;
	line-height: 10px;
}

.menu li a em
{
	display: block;
	width: 25px;
	height: 29px;
	background: url(vertical.gif) left top;
	font-style: normal;
}

.menu li a b
{
	display: block;
	width: 15px;
	padding: 0 3px 29px 7px;
	text-align: center;
	text-decoration: none;
	background: url(vertical.gif) left bottom;
	color: #fff;
}

.menu li a:hover
{
	border: 0;
	position: relative;
	z-index: 100;
	cursor: pointer;
}

.menu li a:hover em
{
	background-position: center top;
}

.menu li a:hover b
{
	background-position: center bottom;
	color: #660;
}

.menu li a.selected, .menu li a:hover.selected
{
	border: 0;
	position: relative;
	z-index: 200;
	cursor: default;
}

.menu li a.selected em, .menu li a:hover.selected em
{
	background-position: right top;
	height: 50px;
}

.menu li a.selected b,.menu li  a:hover.selected b
{
	background-position: right bottom;
	color: #242;
}

[blekm]

ah, dimenticavo

una soluzione sarebbe quella di mettere a .menu e .contenitore float: left; e poi impostare un margin-left sul .menu (quello più esterno) di ~180px , affinchè si sposti fino a sembrare centrato nella pagina

ovviamente, questa cosa su IE6 produce effetti abominevoli, il contenuto va sotto il menù

[Irene80]

Io sono agli inizi
ma se fossi al posto tuo metterei il menu dentro il div contenitore e darei un margin-left negativo secondo necessità al menu
Non so se ho detto una castroneria ma provare non costa nulla

Irene

[Mich_]

Per completare la domanda manca:
- la DTD usata
- il (o i) browser incui hai testato

Invece nel tuo codice ti manca il CSS per l'oggetto HTML (se c'e` non lo hai postato), e ti manca l'impostazione della larghezza per body e per html (altrimenti il margine automatico potrebbe non aver significato).

Comunque io vedo due oggetti a larghezza fissa (indipendentemente dall'unita` di misura), che vanno posizionati direttamente nel body.
Quindi il posizionamento si puo` fare con i margini OPPURE con i posizionamenti assoluti, ed i margini negativi (anchein questo caso puoi usare le unita` di misura piu` opportune).

Concludendo: se il quadrato azzurro deve stare in mezzo lo puoi centrare mediante:

html, body {
  width: 100%;
}
#contenitore {
  position: absolute;
  left: 50%;
  width: XXXpx;
  margin-left: - YYYpx;    /* dove YYY e` la meta` di XXX */
}
#menu {
  position: absolute;
  width: ZZZpx;
  right: 50%;
  margin-right: WWWpx;   /* dove WWW e` la meta` di (XXX+ZZZ) */
}

Nota: non so se ho fatto i conti giusti, ma spero di essermi spiegato sul metodo.
Nota2: la cosa funziona anche si le misure sono in em anziche` px, ma devono essere tutte congruenti.

[blekm]

doctype

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

volevo una reso completamente crossbrowser, quindi su tutti deve funzionare.

ho corretto il tuo codice in

html, body {
  width: 100%;
}
#contenitore {
  position: absolute;
  left: 50%;
  width: 780px;
  margin-left: -390px;   
}
#menu {
  position: absolute;
  width: 25px;
  right: 50%;
  margin-right: 390px;  //il contrario esatto di margin-left del contenitore
}

cosi funziona praticamente su ogni browser

win
Ie6, IE7 (sborda giusto di un pixel, ma usero i commenti condizionali), ff, opera, safari

mac
firefox, safari