from Table to Div

[MRj92]

Ciao ragazzi!
Mi sono appena evoluto e ho deciso di scrivere il mio sito senza i tag <table> e quindi usando i div e i css.

il problema è che io per creare una barra che fungeva da menu con le tabelle facevo:

<table width="60%">
<tr>
<td width="10%">Home</td>
<td width="10%">Ciao</td>
<td width="10%">miao</td>
<td width="10%">sdfs</td>
<td width="10%">sddsad</td>
<td width="10%">dadada</td>
</tr>
</table>

e i sottomenu risultavano su un unica linea.

ora però senza tabelle non so come fare!
ho creato un div chiamato menu e gli associatoil foglio di stile che segue:

<div id="Menu">
</div>

#Menu{
	/* Size */
	width:60%;
	height:20px;
	/* Border */
	border:solid 1px;
	border-color:#666666;
	/* Display */
	display:block;
	/* Position */
	position:relative;
	right:20%;
	left:20%;
	top:70px;
	/* Color */
	background-color:#FFFFFF;
	color:#83EE4F;
}

e qui ho creato una semplice barra. Ora devo inserire le varie voci del menu ma non so come fare! come mi consigliate di fare?
Avevo provato così:

<div id="Menu">
<div class="MenuItem"></div>
<div class="MenuItem"></div>
<div class="MenuItem"></div>
<div class="MenuItem"></div>
<div class="MenuItem"></div>
<div class="MenuItem"></div>
</div>

In questo caso però non riesco a far stare i div in una retta come facevo con l'elemento <tr>!

E poi non so se sia la via giusta!

Illuminatemi ragazzi!

[ricman]

Se leggi qualche guida vedrai che non viene consigliato di usare i div come hai fatto tu, bensì lw Liste... esempio:

<ul>[*]<a href...>voce1</a>[*]<a href...>voce2</a>[*]<a href...>voce3</a>[/list]

[MRj92]

Si ma con le liste ho un menu verticale! io lo volevo un a barra orizzontale!

[Sgro]

Dunque? L'html non definisce la presentazione degli elementi, ma solo il loro significato. Un menu è a tutti gli effetti una lista, quindi va usato <ul>. Per vederlo poi in orizzontale lo formatti coi css, ad esempio:

display : inline;
float:  left;

Teoricamente basterebbe display:inline ma poi IE6 non lo riconosce bene. Fai comunque qualche prova per ottenere il risultato che preferisci.

[ricman]

Originariamente inviato da Sgro
Teoricamente basterebbe display:inline

Personalmente uso solo "float:left" sugli LI e mi trovo bene...