Posizionare correttamente il menù verticale

[liolucas]

In questa pagina ho questo menù verticale:
http://liolucas.altervista.org/index.php

però come si vede tra il menù e la finestra delle immagini c'è troppo spazio, vorrei avvicinare il menù alla finestra e centra il tutto nella pagina ma non ci riesco. Riporto il contenuto del file .css:

/**************************************************************

	Image Menu
	v 2.2

**************************************************************/


#imageMenu {
	position: relative;
	width: 100px;
	/* height: 200px; */
	overflow: hidden;
}



#imageMenu ul {
	list-style: none;
	margin: 0px;
	display: block;
	/* height: 200px; */
	width: 100px;

	}

#imageMenu ul li {
	/* float: left; */
}

#imageMenu ul li a {
	text-indent: -1000px;
	background:#FFFFFF none repeat scroll 0%;
	border-top: 2px solid #fff;
	cursor:pointer;
	display:block;
	overflow:hidden;
	width:100px;
	height: 50px;
}

#imageMenu ul li.landscapes a {
	background: url(images/landscapes.jpg) repeat scroll;
}

#imageMenu ul li.people a {
	background: url(images/people.jpg) repeat scroll;
}

#imageMenu ul li.nature a {
	background: url(images/nature.jpg) repeat scroll;
}

#imageMenu ul li.urban a {
	background: url(images/urban.jpg) repeat scroll;
}

#imageMenu ul li.abstract a {
	background: url(images/abstract.jpg) repeat scroll;
}

.clear {
	clear: both;
}

/*************************************************************/

Grazie

[liolucas]

Nessuno?

[StefanoFilter]

tutta la pagina è racchiusa in una tabella con larghezza 100%. e le due colonne anch'esse in percentuale. quindi in base alle diverse risuluzioni dello schermo si allargheranno o si stringeranno creandoti quello spazio tra il menu e i contenuti

se crei un contenitore DIV che contenga interamente la tabella, quest'ultima prenderà la larghezza del div in cui è contenuta.

aggiungi questo nell'html:

<div id="contenitoreEsterno">qui posizionaci la tua tabella</div> 

aggiungi questo nel css (l'asterisco indica che poni a zero tutti i margini e i padding, per evitare incongruenze tra i browser.) e poi setti i margini in auto per centrarlo nella pagina.

*{
margin:0;
padding:0;
}

#contenitoreEsterno{
width:800px;
margin:0 auto;
} 

fammi sapere

[liolucas]

Ti ringrazio stasera provo.

La parte di codice da inserire nel css, la inserisco all'inizio?

Ciao e grazie

[StefanoFilter]

si in alto va bene.

[liolucas]

Come vedi:
http://liolucas.altervista.org/index.php

viene tutto attaccato in alto, vorrei lasciare 20-30 pixel di margine in alto.
Come faccio per farlo visualizzare correttamente da tutti i browser?

Grazie

[StefanoFilter]

basta modificare la proprietà margin collegata al contenitore

#contenitoreEsterno{
width:800px;
margin:30px auto 0px auto;
} 

il primo valore è relativo al margine superiore del tuo contenitore.

[liolucas]

Ok perfetto.

Approfitto della tua competenza:
mettiamo che volessi inserire, sotto la colonna del menù, un'altra piccola riga leggermente più larga del menù, diciamo un quadrato, ed un'altra riga sotto la cornice grande dove scorrono le immagini. Tutte e due con bordo bianco e angoli arrotondati, ome la cornice grande.

Come modifico il css?

Grazie mille

[liolucas]

Originariamente inviato da StefanoFilter
basta modificare la proprietà margin collegata al contenitore

#contenitoreEsterno{
width:800px;
margin:30px auto 0px auto;
} 

il primo valore è relativo al margine superiore del tuo contenitore.

Un'altra domanda: quando clicco su un immagine del menù, mi apre una piccola finestra con riportato l'indirizzo. Dovrebbe aprire al nuova pagina e non la finestra pop up.
Non riesco a trovare il comando per farla a prire correttamente.

Ciao

[liolucas]

Qualcuno sa aiutarmi?