da tabelle a css

[rainbow.pino]

salve a tutti
da un pò sto studiando i css (grazie anche ai vari tutorial forniti da questo sito)
e adesso sto provando a utilizzarli, ma...
avendo usato sempre tabelle per posizionare gli elementi della pagina web
mi viene un pò difficile "traslare" i concetti

per esempio
in alcune pagine web ho una tabella che mi serve per la navigazione che visivamente risulta così:


la tabella che realizza questo è:

<table border="0" cellpadding="0" cellspacing="0" width="100%">
  <tr>
	<td width="35%" align="center">
					<% If pagina_attuale > 1 Then %>
							<a href="foto_giga.asp?page=<%=pagina_prec%>">
							[img]/images/freccia_sx_red.gif[/img]</a>
					<% End If %>
	</td>
	<td width="35%" align="center">
					<span class="T08_BLU">Foto <%=pagina_attuale%></span>
	</td>
	<td width="35%" align="center">
					<% If pagina_attuale < pagina_ultima Then %>
							<a href="foto_giga.asp?page=<%=pagina_succ%>">
							[img]/images/freccia_dx_red.gif[/img]
							</a>
					<% End If %> 
	</td>
  </tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
  <tr>
	<td colspan="3" align="center">
		  <table border="0" cellpadding="0" cellspacing="0" width="100%">
			<tr>
				<td width="20%" align="center" valign="middle" bgcolor="#FFFF99">
							   <span class="T08_BLU">Foto 1</span></td>
				<td width="20%" align="center" valign="middle" bgcolor="#FFCC99">
							   <span class="T08_BLU">Foto <%=w_pag_5%></span></span></td>
				<td width="20%" align="center" valign="middle" bgcolor="#FF9966" colspan="2" >
							   <span class="T08_BLU">Foto <%=w_pag_10%></span></td>
				<td width="20%" align="center" valign="middle" bgcolor="#FF6600">
							   <span class="T08_YEL">Foto <%=w_pag_15%></span></td>
				<td width="20%" align="center" valign="middle" bgcolor="#CC0000">
							   <span class="T08_YEL">Foto <%=pagina_ultima%></span></td>
			</tr>
		  </table>
	</td>
  </tr>
</table>

se volessi realizzare la medesima cosa in css?
bye
Pino

[pastoweb]

Per la navigazione si usano spesso ancora le tabelle, se vuoi qualcosa di più pulito potresti usare le liste:

<ul>[*]link foto[*]link foto[*]link foto[/list]

formattandoli da css come un menu orizzontale

[rainbow.pino]

mmmh :master:
la mia domanda ne sottindendeva altre
vediamo di fare un piccolo passo avanti.

oggi realizzo un header con le tabelle più o meno così:

<table width="100%" cellspacing="0" cellpadding="0">
  <tr>
	<td width="33%" align="left">Home</td>
	<td width="34%" align="center">Titolo della pagina</td>
	<td width="33%" align="right">Benvenuto Pippino</td>
  </tr>
</table>

e il risultato in genere è simile a questo:


ho provato ad inserire tre blocchi in linea con i css, ma non riesco ad ottenere il medesimo risultato:

div#boxleft{
	width:33%;
	margin-left:10px; 
	color: #333;
	text-align:left;
	display:inline;}	

div#boxcenter{
	width:34%;
	color: #333;
	text-align:center;
	display:inline;}	

div#boxrigth{
	width:33%;
	margin-right:10px;
	color: #333;
	text-align:right;
	display:inline;}	

...

<div id="boxleft">Home</div>
<div id="boxcenter">Titolo</div>
<div id="boxrigth">Benvenuto pippino</div>

dove sbaglio?

[Myaku]

guarda se questa discussione ti può essere d'aiuto

[rainbow.pino]

Originariamente inviato da Myaku
guarda se questa discussione ti può essere d'aiuto

grazie molto utile
però purtroppo alla fine della discussione non sono chiare le modifiche che portano al risultato desiderato
anch'io infatti arrivo al risultato in cui il menu non si centra:
vedi
e sul mio risultato osservo:
-il menù si centra con i.e. e non con mozilla

-se utilizzo un blocco li senza link il blocco mi va a capo

è così difficile realizzare con css quello che con le tabelle si fa in modo semplice ?

ho letto anche la pillola fabclearing, ma non mi è chiara l'utilità

ciao
Pino

[Myaku]

hai scritto su #menu
margin 0 auto;
invece di
margin: 0 auto;

[qui mi sono fermata, per vedere se ci sono altri errori di sintassi usa i validatori del w3c]

detto in maniera semplice, il float è un tipo di posizionamento che rimuove l'elemento dal normale flusso del documento, per "riportarlo" nel flusso si usa il clear. O nella maniera tradizionale o utilizzanto il metodo spiegato nella pillola di fcaldera

[rainbow.pino]

Originariamente inviato da Myaku
hai scritto su #menu
margin 0 auto;
invece di
margin: 0 auto;

corretto, in effeti Dreamweaver me l'aveva segnalato,
ma purtroppo il risultato non è cambiato
vedi

Originariamente inviato da Myaku detto in maniera semplice, il float è un tipo di posizionamento che rimuove l'elemento dal normale flusso del documento, per "riportarlo" nel flusso si usa il clear. O nella maniera tradizionale o utilizzanto il metodo spiegato nella pillola di fcaldera

il clear "semplice" dove si inserisce?
nel mio caso ho il float dentro menu li:

#menu li {
  margin: 0;                   /* pulisce i margini di default */
  padding: 0;                  /* pulisce i padding di default */
  border: 1px solid;
  border-color: #ccc #888 #555 #bbb;
  background-color:#666666;
  color: #FFFF00;
  list-style-type: none;    /* toglie il punto-elenco */
  float: left;                    /* affianca i vari blocchi */
  width: 15em;              /* da sistemare a piacere */
}

dove e come si inserisce il clear "semplice"?
(confesso che la pillola di fcaldera non mi è stato facile capirla)

bye
Pino

[Myaku]

strano ... :master:
l'unica cosa che mi viene in mente è provare a dichiarare una width anche a #menu

[fcaldera]

clearing semplice sull'elemento <ul>

#menu {menu_box.htm (riga 22)
...
height:auto;
overflow:hidden;
}

se su IE6 non dovesse fare clearing in automatico cambia così

#menu {menu_box.htm (riga 22)
...
height:auto;
_height: 1%;
overflow:hidden;
}

poi: il motivo per cui l'ultimo[*] va a capo è perchè l'elemento <ul> non ha una width definita.
Se stringi la finestra del browser vedrai che vanno a capo anche altri[*]

se vuoi che gli[*] non vadano a capo, semplicemente dai una width a <ul> sufficiente.