Menu Tab - Titoli lunghi

[Denton]

Ciao a tutti,
Ho realizzato un semplice menu orizzontale a tab seguendo un articolo trovato su HTML.it (http://css.html.it/articoli/leggi/41...abs-con-i-css/)

Il mio codice è esattamente quello dell'esempio quindi non sto a ripostarlo

La mia domanda è semplicissima:" E' possibile secondo voi fare in modo che i titoli lunghi vadano su due righe all'interno dello stesso tabs?" "

Ho fatto una ricerca nel forum e anche su google ma non ho trovato nulla in nessuna lingua :master:

Grazie dell'aiuto!

[Mich_]

Dovrebbe essere quasi semplice, ma non ho fatto prove specifiche.
Per prima cosa devi inserire un
dentro i vari titoli ...

PERO`.
Volendo fare le tab su due righe, devi rinunciare a qualcosa. Potresti perdere la scalabilita` automatica rispetto alla dimensione del carattere.
E comunque devi definire un'altezza del tab, che dev'essere almeno circa 2.5em (che mi pare non serva se e` di una unica riga).
Poi per centrarlo non ti basta il line-height, ma devi usare un blocco all'interno del tab stesso (ad esempio un

) e devi quindi centrare il

all'interno del tab.

[Denton]

Grazie mille, faccio un po' di prove e ti faccio sapere se è OK!

[Denton]

Niente non mi funziona. :master:

Vediamo, posto qualche info in più:

Questo è il risultato così com'è:



Il titolo più lungo vorrei spezzarlo in due righe anche riducendo la dimensione del carattere

il codice è questo:

<table cellspacing="0" cellpadding="0" border="0" align="center" width="100%" ID="Table1">
<tr id="trMenu">
	<td>
		<ul id="menu">
			<li id="current">
				Prova 1
			[*]
				Prova 2
			[*]
				Prova 3
			[*]
				Prova 4 quella lunga da spezzare
		[/list]
	</td>
</tr>
</table>

e questo è il CSS:

tr#trMenu
{
	vertical-align:top;
	background-color: White;
	font-size:x-small;
	color:White;
	height: 30px;
}

ul#menu 
{
  margin: 0;
  padding: 7px 0;
  text-align: left;
  border-bottom: 1px solid #ACACDC;
  
  }

ul#menu li {
  display: inline;
  padding: 7px 7px 7px 0;
  margin-left: 3px;
  background: url(Immagini/tabBk.png) no-repeat top right;
  }

ul#menu a {
  padding: 7px 0 7px 7px;
  background: url(Immagini/tabBk.png) no-repeat top left;
  text-decoration: none;
  color: #555;
  }

ul#menu li#current, ul#menu li#current a {
  background-image: url(Immagini/tabBkActive.png);
  border-bottom: 1px solid #FFF;
  }

ul#menu li#current a, ul#menu li a:hover {
  color: #003;
  }
  
  * html ul#menu li {
  padding:0 4px 0 0;
  }  

*:first-child+html ul#menu li {
  padding:0 4px 0 0;
  }  BODY

Ho provato a settarlo come dici tu, ma il risultato è questo:



Magari sono io che son DURO e non capisco...

[Mich_]

Non direi che hai fatto quanto dici.

Anzitutto sei partito da una struttura tabellare (che contrasta con la struttura a tab).
Poi hai usato formattazione HTML (che contrasta coni CSS).
Non hai inserito il

(o altro) all'interno dei vari[*] (necessario per poterlo poi posizionare)
Non hai definito l'altezza dei vari[*]

Anche il display: inline che usano anche loro non e` molto compatibile con le "due righe". Meglio sarebbe usare il float.


Prova a veder anche questo articolo, sempre di Alessandro: Tab con solo i CSS, un po' piu` recente.

[Denton]

Hai ragione ho fatto un po' di casino.

Ti ringrazio dell'aiuto!