Uso dei div

[mix]

Uso dei div

SAllora ragazzi dopo una bella discussione con Stuart, monto costruttiva, sto cercando di ottimizzare un pò tutto il sito eliminando dove è possibile le tabelle e sostituendole con i div, e qui iniziano i problem:

Inizio dalla tabella piu semplice ( QUELLA DEL FOOTER DELLA PAGINA )

CODICE VECCHIO CON LA TABELLA

				
				<table width="100%" border="0" cellspacing="0" cellpadding="0" class="footer_table">
  				<tr>
    				<td align="center">[url="<? echo BASE_URL; ?>#"]Chi Siamo</td>
					<td align="center">[url="<? echo BASE_URL; ?>contatti.htm"]Contatti</td>
					<td align="center">[url="<? echo BASE_URL; ?>#"]FAQ</td>
					<td align="center">[url="<? echo BASE_URL; ?>#"]Glossario</td>
					<td align="center">[url="<? echo BASE_URL; ?>#"]Site Map</td>
					<td align="center">[url="<? echo BASE_URL; ?>#"]link</td>
					<td align="center">[url="<? echo BASE_URL; ?>staff.htm"]Lo Staff</td>
					<td align="center">[url="<? echo BASE_URL; ?>utenti.htm"]Utenti</td>
					<td align="center">[url="<? echo BASE_URL; ?>pubblicita.htm"]Pubblicità</td>
  				</tr>
				</table>
				

CSS ASSOCIATO

.footer_table{
	border:1px solid #cdd6dd;
	}

A.menu_footer{font-family:Tahoma;font-size:11px;color:#575757;text-decoration:none;}
A.menu_footer:hover{font-family:Tahoma;font-size:11px;color:#6b8bb4;text-decoration:none;}

STESSO MENU MA CON I DIV

<div id="footer_table">
	[url="<? echo BASE_URL; ?>#"]Chi Siamo
	[url="<? echo BASE_URL; ?>contatti.htm"]Contatti
	[url="<? echo BASE_URL; ?>#"]FAQ
	[url="<? echo BASE_URL; ?>#"]Glossario
	[url="<? echo BASE_URL; ?>#"]Site Map
	[url="<? echo BASE_URL; ?>#"]link
	[url="<? echo BASE_URL; ?>staff.htm"]Lo Staff
	[url="<? echo BASE_URL; ?>utenti.htm"]Utenti
	[url="<? echo BASE_URL; ?>pubblicita.htm"]Pubblicità
</div>

CSS ASSOCIATO

#footer_table{
	text-align:center;
	border:1px solid;
	}	

A.menu_footer{font-family:Tahoma;font-size:11px;color:#575757;text-decoration:none;}
A.menu_footer:hover{font-family:Tahoma;font-size:11px;color:#6b8bb4;text-decoration:none;}

Ma il risultato non è lo stesso come posso ovviare ?

Nella prima soluzione i vari link si distribuiscono uniformemente per tutto il rigo, nella seconda invece i vari link sono tutti allineati al centro.

[mix]

Ho fatto in questo modo ma ancora nulla:

<div id="footer_table">
	<div id="footer_link">[url="<? echo BASE_URL; ?>#"]Chi Siamo</div>
	<div id="footer_link">[url="<? echo BASE_URL; ?>contatti.htm"]Contatti</div>
	<div id="footer_link">[url="<? echo BASE_URL; ?>#"]FAQ</div>
	<div id="footer_link">[url="<? echo BASE_URL; ?>#"]Glossario</div>
	<div id="footer_link">[url="<? echo BASE_URL; ?>#"]Site Map</div>
	<div id="footer_link">[url="<? echo BASE_URL; ?>#"]link</div>
	<div id="footer_link">[url="<? echo BASE_URL; ?>staff.htm"]Lo Staff</div>
	<div id="footer_link">[url="<? echo BASE_URL; ?>utenti.htm"]Utenti</div>
	<div id="footer_link">[url="<? echo BASE_URL; ?>pubblicita.htm"]Pubblicità</div>
</div>

CSS ASSOCIATO

#footer_table{
	text-align:center;
	border:1px solid #cdd6dd;
	}
#footer_link{
	width:85px;
	}

[webmas]

Potresti provare a definire i vari link in una lista ed ordinarla in orizzontale.
In questa pagina http://www.cssplay.co.uk/menus/centered2.html trovi tre esempi di menu' con allineamento a sinistra, centrato ed a dex.

[mix]

Allora ecco il problema mio solito dei div LA POSIZIONE

Io ha creato questo menu con i div:

CSS

.menu a{
  float: left;
  padding: 2px;
  margin: 1px;
  border: 1px solid #cdd6dd;
  width:100px;
  text-align:center;
  text-decoration:none;
  font-weight:bold;
  }
.menu a:hover{
background-color: #003366;
color:#FFF;
}

#barranav{
position:absolute;
top:20px;
left:20px;
padding:2px;
}

XHTML

<div id="barranav">
  <div class="menu">[url="<? echo BASE_URL; ?>#"]Chi Siamo
  <div class="menu">[url="<? echo BASE_URL; ?>contatti.htm"]Contatti</div>
  <div class="menu">[url="<? echo BASE_URL; ?>#"]FAQ</div>
  <div class="menu">[url="<? echo BASE_URL; ?>utenti.htm"]Glossario</div>
  <div class="menu">[url="<? echo BASE_URL; ?>pubblicita.htm"]Site Map </div>
  <div class="menu">[url="<? echo BASE_URL; ?>pubblicita.htm"]Link</div>
  <div class="menu">[url="<? echo BASE_URL; ?>pubblicita.htm"]Lo Staff </div>
  <div class="menu">[url="<? echo BASE_URL; ?>pubblicita.htm"]Utenti</div>
  <div class="menu">[url="<? echo BASE_URL; ?>pubblicita.htm"]Pubblicità</div>

</div>

Questo menu deve stare all'interno di un td lo posiziono li dentro... ma poi se ne va dove vuole lui... come posso ovviare?

[webmas]

@mix said:

XHTML

<div id="barranav">
 <div class="menu">[url="<? echo BASE_URL; ?>#"]Chi Siamo
 <div class="menu">[url="<? echo BASE_URL; ?>contatti.htm"]Contatti</div>

Questo menu deve stare all'interno di un td lo posiziono li dentro... ma poi se ne va dove vuole lui... come posso ovviare?

Prova a chiudere il div di "Chi siamo".

[mix]

Non era il div il problem ma il position cmq ora ho risolto, piccolo problema che mi è rimasto non riesco a centrare il div ...

Pagina principale dove verrà stampato il footer

<tr>
  	  	<td align="center"><? include&#40;"menu/menu_fuut.php"&#41;; ?></td>
	</tr>

XHTML

<div id="barranav">
  <div class="menu">[url="<? echo BASE_URL; ?>#"]Chi Siamo</div>
  <div class="menu">[url="<? echo BASE_URL; ?>contatti.htm"]Contatti</div>
  <div class="menu">[url="<? echo BASE_URL; ?>#"]FAQ</div>
  <div class="menu">[url="<? echo BASE_URL; ?>utenti.htm"]Glossario</div>
  <div class="menu">[url="<? echo BASE_URL; ?>pubblicita.htm"]Site Map </div>
  <div class="menu">[url="<? echo BASE_URL; ?>pubblicita.htm"]Link</div>
  <div class="menu">[url="<? echo BASE_URL; ?>pubblicita.htm"]Lo Staff </div>
  <div class="menu">[url="<? echo BASE_URL; ?>pubblicita.htm"]Utenti</div>
  <div class="menu">[url="<? echo BASE_URL; ?>pubblicita.htm"]Pubblicità</div>

</div>

CSS ASSOCIATO

.menu a{
  float: left;
  padding: 2px;
  margin: 1px;
  border: 1px solid #cdd6dd;
  width:75px;
  font-size:11px;
  text-align:center;
  text-decoration:none;
  font-weight:bold;
  }
.menu a:hover{
font-size:11px;
color:#6b8bb4;
}

#barranav{
font-size:11px;
padding:1px;
}

[vale76]

@webmas said:

Potresti provare a definire i vari link in una lista ed ordinarla in orizzontale.

scusate l'intromissione in questo topic
se volessi imparare come si fanno le liste dei link, sarebbe fattibile anche con HTML 4.01?

[spaccioman]

XHTML

Se per liste intendi gli elenchi puntati si fa in questo modo:

<ul type="disc">
										* [nome sito](http://www.nomesito.it)
										

[vale76]

uhmmm.. non proprio anche se forse non sarebbe male neanche un elenco puntato.. (come verrebbe esteticamente? come i classici elenchi puntati di Word? )
Cmq spiego meglio quello che intendo:

Caso 1)
metti che ho che so 10 links dotati della stessa classe, messi in fila uno a uno, alla fine dei quali andare a capo, tutti centrati nella pagina, è il caso di creare qualcosa di particolare o anche usare i semplicissimi
per andare a capo è una soluzione (semplicistica, sicuramente :bho: ) ma valida?

Caso 2) [più particolare]
metti che anziché creare un menu di navigazione delle aree principali con bottoni o altre soluzioni avanzate, lo abbia con dei semplicissimi link testuali; in questo caso ho la necessità di posizionarli, per ragioni di estetica e distribuzione ragionevole dello spazio, non tutti sulla stessa riga, ma magari su due, e ovviamente, ogni link ha classi diverse, e devono essere posizionati comunque tutti al centro della pagina, devo creare una lista?
L'uso del "div id" (che non ho ancora imparat0 ) sarebbe quello che ci vuole in questo caso?
Perdonate la domanda sicuramente banale, ma come sapete sono ancora una principiante

[massy]

caso 1:

<ul style="list-type:none">
 * item1
 * item2
 * item3
.....
 * item10

caso 2:

crei due liste, e le posizioni dove vuoi...

<ul style="float:left; width:200px">
....
....

<ul style="float:left; width:200px">
....
....

<sometag style="clear:left" /> tanto per fare un esemipio al volissimo