Lista (li) inline con titoli, è possibile?

[AltF4]

Buongiorno a tutti, ho fatto alcune ricerche per vedere se l'argomento era già stato trattato, ma probabilmente non riesco ad inserire le parole giuste.

Ho creato una lista inline:

ul.Lista li {
	display:inline;
	list-style-type: none;
	margin-left: 0px;
	padding-right: 0px;
}

Dovrei visualizzare 4 elementi sulla stessa linea che però sono composti da un'immagine ed un titolo, in questo modo:

Titolo1____|_____Titolo2_____|_____Titolo3_____|__ ___Titolo4__

Immagine_____Immagine________Immagine________Immag ine___

Ho provato in questo modo, ma niente da fare:

<ul class="Lista">	[*]

Titolo1</p>[img]immagine.jpg[/img][*]

Titolo2</p>[img]immagine.jpg[/img][*]

Titolo3</p>[img]immagine.jpg[/img][*]

Titolo4</p>[img]immagine.jpg[/img][/list]

Non capisco se e come si possa realizzare

[Mich_]

Probabilmente la cosa piu` corretta e` inserire l'immagine come sfondo (background).

Pero` se vuoi dare le dimensioni ai[*] non puoi usare il display:inline. Usa invece il float.

Comunque di menu fgatti bene e funzionanti ce ne sono molti in giro. Tra i "link utili" ci sono alcuni riferimenti, altri li trovi in rete.

[AltF4]

Innanzitutto ti ringrazio per aver risposto, ma non dovrei realizzare proprio un menu.

Si tratta di una lista di prodotti che ha la foto ed il nome del prodotto.

Nella pratica con <LI> mi troverei benissimo, il problema è proprio il titolo. Vorrei evitare di fare una tabella, sto cercando di non utilizzarle più.

[Mich_]

Anche se non e` un menu, le tecniche da utilizzare sono le stesse.

Da quanto ho cpaito, tu hai una serie di[*] dentro a ciascuno dei quali hai vari elementi.

Quindi tratti i tuli[*] come contenitori, all'interno dei quali puoi metterci:
- l'immagine di sfondo
- delle scritte
- dei link
- anche delle immagini <img>, se queste fanno parte del contenuto e non dello sfondo
- ecc.

Poi come sono posizionati i[*] interessa poco agli elementi interni (salvo che non hai bisogno di usare il float, che non puoi usare sia dentro che fuori, salvo trucchetti che si imparano con il tempo)

[AltF4]

Dunque non ho alternative, inserisco il titolo direttamente nell'immagine?

Anche se il titolo a testo poteva servirmi per l'indicizzazione oltre ad avere un peso inferiore..

[Mich_]

NO, quello e` un errore semantico.
Il titolo va inserito in chiaro.

Ora, per poter decidere come inserire i vari elementi, sarebbe bene conoscere il significato semantico degli stessi.

Comunque la cosa potrebbe essere:

HTML:[*]
  <h3>titolo</h3>
  [img]...[/img]


CSS:
li {
  float: left;
  ...
}
li h3 {
  margin: 0 auto;     /* funziona se il li ha width definita */
  ...
}
li img {
  ....
}

[AltF4]

Grazie mille per la dritta, H3 è stata una felice intuizione, non l'avevo mai utilizzato questo tag, mi scuso per l'immensa ignoranza

Ho cambiato qualcosa rispetto a quanto suggerito, visivamente sembra ok, spero non ci siano errori che non riesco a vedere, ecco:

HTML:

<ul class="Lista">	[*]<h3>Titolo1</h3>
  <a href="#">[img]immagine.jpg[/img]<a>
[*]<h3>Titolo2</h3>
  <a href="#">[img]immagine.jpg[/img]<a>
[*]<h3>Titolo3</h3>
  <a href="#">[img]immagine.jpg[/img]<a>
[*]<h3>Titolo4</h3>
  <a href="#">[img]immagine.jpg[/img]<a>[/list]

CSS:

.Lista {
	width: 400px;

}


ul.Lista li {
	display: inline-table;
	list-style-type: none;
	margin-left: 0px;
	margin-bottom: 30px;
	padding-left: 30px;
	padding-right: 30px;
	text-align: center;
	background-color: #FF5544;
			
}

ul.Lista h3 {
	FONT-SIZE: 12px; 
	color: #000000;
	margin-bottom: 10px;
	background-color: #FF9999;
}

Speriamo bene..

[Mich_]

Attenzione agli errori.

Sintassi:
l'attributo CSS FONT-SIZE non esiste nello standard, e qualche browser potrebbe non riconoscerlo. Usa invece font-size

Accessibilita`:
nel tag HTML <img> e` obbligatorio inserire l'attributo alt

Problemi di browser:
il valore inline-table dell'attributo CSS display non e` riconosciuto da varie versioni di IE: occorre inserire degli hack opportuni

[AltF4]

Originariamente inviato da Mich_
Attenzione agli errori.

Sintassi:
l'attributo CSS FONT-SIZE non esiste nello standard, e qualche browser potrebbe non riconoscerlo. Usa invece font-size

Ok, grazie, non sapevo che fosse differente. Ho corretto tutto in minuscolo!

Originariamente inviato da Mich_
Accessibilita`:
nel tag HTML <img> e` obbligatorio inserire l'attributo alt

C'era, l'avevo cancellato nel copia ed incolla, come per le dimensioni, avevo evitato di riportarle.

Originariamente inviato da Mich_
Problemi di browser:
il valore inline-table dell'attributo CSS display non e` riconosciuto da varie versioni di IE: occorre inserire degli hack opportuni

Hai una dritta per questo?

Grazie ancora!!!

[AltF4]

Riprendo questa discussione di qualche settimana fa, ho un dubbio che riguarda lo stesso ambito.

Grazie all'aiuto di Mich_ sono riuscito ad ottenere questo risultato:


Titolo1____|_____Titolo2_____|_____Titolo3_____|__ ___Titolo4__

Immagine_____Immagine________Immagine________Immag ine___


Ora dovrei inserire al di sotto dell'immagine un piccolo testo, in questo modo:

Titolo1____|_____Titolo2_____|_____Titolo3_____|__ ___Titolo4__

Immagine_____Immagine________Immagine________Immag ine___

testo1____|_____testo2_____|_____testo3_____|_____ testo4__


Ho fatto in questo modo:

<ul class="Lista">	[*]<h3>Titolo1</h3>
  [img]immagine.jpg[/img]testo1
[*]<h3>Titolo2</h3>
  [img]immagine.jpg[/img]testo2
[*]<h3>Titolo3</h3>
  [img]immagine.jpg[/img]testo3
[*]<h3>Titolo4</h3>
  [img]immagine.jpg[/img]testo4[/list]

Diciamo che può funzionare o almeno sembra che funzioni, ma vorrei evitare di inserire il testo in questo modo , vorrei inserirlo con uno specifico TAG, ma non saprei proprio quale utilizzare, forse SPAN?