Strani problemi di posizionamento...

[pr0v4]

Salve a tutti ragazzi, sto lavorando ad un nuovo layout per WordPress, ma, arrivato al posizionamento della barra di navigazione ho incontrato qualche problema...
Il layout che sto cercando di realizzare è abbastanza complesso, almeno a mio parere :P, e fintanto si trattava di posizionare gli articoli non si sono presentati problemi, poi seguendo uno dei layout gala ho iniziato a posizionare la sidebar.

Il problema che viene fuori è che posizionata la sidebar i link che sono contenuti scopaiono! O per essere più precisi, perdono la loro caratteristica di essere cliccabili!!!

Ho preparato due esempi da porvi, il primo ha un margin-left: -250px, dove i link per la categoria boh non sono cliccabili, e per la categoria Senza categoria diventano cliccabili dalla z in poi e comportamento simile anche per le categorie tutorial.

Nel secondo esempio il margine è stato impostato a -200px e tutti i link presenti nella sidebar sono cliccabili!!!!

Il codice xHTML è valido, ed anche il codice CSS quindi non credo ci siano errori di sintassi...

Di seguito vi lascio il mio CSS, tanto per l'xHTML potrete tranquillamente controllarlo visualizzando il codice della pagina:

@charset "UTF-8";
/*
Theme Name: LifeStyle Web
Theme URI: http://www.lifestyleweb.it/
Description: Il tema grafico per il nostro tutorial
Version: 1.0
Author: Andrea Barghigiani
Author URI: http://www.lifestyleweb.it
*/ 
/*Stili Tipografici*/
body { font: 100.01% Arial, Helvetica, sans-serif; text-align: center;}
h1{ font-size: 2.4em;}
h2 { font-size: 1.8em;}
h3 { font-size: 1.4em;}
h4 { font-size: 1.2em;}
h5 { font-size: 1em;}
h6 { font-size: 0.85em;}

/*Line-height*/
p, blockquote, ol, dl, ul, form { line-height: 1.5;}

/* set di base per margini e padding */
html, body{ margin: 0;padding: 0; }
h1, h2, h3, h4, h5, h6{ margin: 0.7em 0 0.2em; }
address, blockquote, dl, form,fieldset, ol, table, p, pre, ul{
  margin-top: 0.2em;margin-bottom: 1.2em; }

/*LyfeStyle Web*/
body{
	background: #c7c7c7;
}
/*Container*/
div#container{
	width: 904px;
	margin: 0 auto;
}
 /* Header */
div#header{
	width: 904px;
	height: 180px;
	background: #ffffff url(images/header.png) no-repeat center top; 
	margin: 10px auto 0;
	text-align: left;
}
div#header a#titolo{
	display: block;
	position: relative;
	top: 30px;
	left: 35px;
	width: 424px;
	height: 71px;
	font: 6px Arial, Helvetica, sans-serif;
	color: #c7c7c7;
}
div#header span{
	position: absolute;
	width: 100%;
	height: 100%;
	background: url(images/logo.png);
}
/*Wrapper*/
div#wrapper{
	margin: 0 auto;
	width: 900px;
	height: auto;
	float: left;
	background-color: #fff;
	border-left: 2px solid black;
	border-right: 2px solid black;
}
/*Content*/
div#content{
	margin-right: 400px;
}
/* Menu */
div#menu ul{
	list-style: none;
	position: relative;
	top: 45px;
	left: -25px;
}
div#menu li{
	float: left;
}
div#menu a{
	margin: 0 10px;
	text-decoration: none;
	color: #9d9d9d;
}
div#menu a:hover{
	border-bottom: #c7c7c7 solid 3px;
}

/*Entry*/
div.entry{
	width: 541px;
	text-align: left;
	background: #ccc url(images/sftit.jpg) no-repeat right top;	
	z-index: 1;
}
div.entry h2{
	height: 89px;
	font-size: 16px;
	position: relative;
	top: 10px;
	left: 140px;
}
div.entry h2>a{
	color: #fff;
}
div.entry p{
	width: 541px;
	background: url(images/corpoparagrafo.jpg) repeat-y;
	/*margin-left: 9px;*/
	margin-bottom: 0;
	margin-top: 0;
	padding: 10px 55px 10px 35px;
}
div.testo p{
	width: 490px;
}
/*Data*/
div.data{
	position: relative;
	top: 45px;
	left: 47px;
}
div.data strong{
	margin-left: 7px
}
/*Categorie*/
div.categorie{
	float: right;
	margin-right: 15px;
	position: relative;
	top: 70px;
	height: 32px;
	padding-left: 34px;
	font: 14px/30px "Trebuchet MS", Arial, Helvetica, sans-serif;
	z-index: 2;
	background: url(images/categorie.png) no-repeat left;
}
div.categorie a{
	text-decoration: none;
	color: #7c0003;
}
div.categorie a:hover{
	text-decoration: underline;
}

/*Metadati*/
div.metadata{
	background: url(images/metadata.png) no-repeat top;
	width: 541px;
	margin: -20px 0 0;
	padding-left: 17px;
}
div.metadata p.scritto{
	text-align: left;
	margin: 0 0 0 17px;
	padding: 25px 23px 23px 27px;
	background: url(images/scritto.png) no-repeat left;
	color: black;

}
div.metadata span{
	color: #7c0003;
}
p.commenti{
	float: right;
	margin: 25px 20px 0 0;
	padding-left: 25px;
	background: url(images/commenti.png) no-repeat left;
}
p.commenti a{
	text-decoration: none;
	color: black;
}
p.commenti a:hover{
	text-decoration: underline;
}

/*Navigazione*/
div.navigation{
	float: left;
	width: 150px;
	margin-left: -200px
}
div.navigation ul{
	list-style: none;
	background: url(images/corposez.jpg) repeat-y;
	padding: 0;
	margin: 0;
}
div.navigation li{
	text-align: left;
	width: 150px;
}
div.navigation h2{
	background: url(images/titsez.jpg) no-repeat;
	font: 17px/37px "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #fff;
	width: 150px;
	height: 39px;
	text-align: center;
}
div.navigation a{
	color: black;
	padding-left: 5px;
	font: 14px "Trebuchet MS", Arial, Helvetica, sans-serif;
	text-decoration: none;
	z-index: 2;
}
li.footersez{
	background: url(images/footersez.jpg) no-repeat bottom;
	width: 150px;
	height: 11px;
}

Ho preferito lasciare il CSS completo in modo da potervi fornire uno sguardo generale, come potete notare ho provato anche ad utilizzare lo z-index in modo da posizionare l'elemento ma con scarsi risultati...

Il problema si presenta soltanto con Firefox e Safari, perchè sia con IE che con Opera questo problema non si presenta.
Per favore, ditemi che avete qualche suggerimento perchè io non riesco proprio a capire come levarci le gambe!!!

[Mich_]

Anzitutto ti sei dimenticato di allegare il codice HTML e il DOCTYPE, e non e` quindi possibile capire esattamente come sono innestati i vari blocchi, e come i browser interpretano il codice.

Comunque mi par di vedere errori di posizionamento: hai inserito degli oggetti posizionati all'interno di blocchi con posizionamento statico (default), e questo vuol dire che i blocchi interni non dipendono da quelli in cui sono inseriti (salvo in IE, che non segue le stesse regole).

Probabilmente il tuo layout si riesce a fare senza posizionamenti, ma se li usi li devi conoscere: ecco due articoli che mi sembrano molto chiari:
I posizionamenti assoluti
Capire i posizionamenti relativi

Esempi di layout ne trovi citati nei "link utili": ti conviene partire da un layout pronto,e fare le eventuali modifiche.

[pr0v4]

Per il discorso del codice xhtml mancante, l'avevo omesso volontariamente per non rendere il thread troppo lungo, con una sbirciata al codice della pagina si può vedere lo stesso.

In secondo luogo, molto probabilmente ho sbagliato qualcosa io nei posizionamento come da te suggerito, passo alla lettura degli articoli da te consigliati e guardo un pò di migliorare la situazione, intanto grazie mille!

[pr0v4]

Adesso che ho letto gli articoli che mi hai indicato mi sembra di aver capito che I link che ho messo nella colonna a destra non sono cliccabili perche' secondo il browser gli elementi che ho posizionato relativamente sono sopra alla mia sidebar, giusto?

Pero' non sono ancora bene riuscito a capire come possa risolvere la situazione... Ovvero non posso agire ad esempio sugli z-index, per far si che i miei link "saltino" sull'asse delle z in modo che diventino cliccabili?

Proprio non ne esco...