Galleria di immagini inline e testo

[desty nova]

Ciao a tutti. Questa è la pagina index delle gallerie di immagini in questione. Se passate sopra una delle 3 immagini, c'è un commento che indica il nome della singola galleria. Io vorrei mettere sopra (o sotto) ognuna delle 3 immagini il nome della galleria (Foto matte, Foto artistiche, Foto varie). Così facendo però mi si scasina tutto il layout.
La mia domanda è: esiste un modo per creare na galleria di immagini inline con del testo sopra (o sotto) le immagini?

[oronze]

non puoi mettere un div all'interno del quale carichi l'img e poi
testo?

[desty nova]

Ho già provato mettendo un "div" all'interno di ogni "li". Ho provato anche con "p" e con "span" ma cmq mi scasina tutto il layout.

[oronze]

li?, postami il codice della pagina e domani se ho tempo vedo

[desty nova]

Questo è il codice xhtml:

<div class="postspace2"><ul id="thumb">[*][*][*] [/list]</div>

e questa la parte di foglio di stile associata:

* {
margin: 0px;
padding: 0px;
}

ul#thumb {
padding: 0;
margin: 0;
list-style-type: none;
}

ul#thumb li {
display: inline;
}

.postspace2 {
width: 440px;
height: 0px;
margin: 0px;
padding: 0px;
}

PS: il layout di base è un classico layout a 2 colonne con float tipo questo.

[oronze]

Eh, ecco, tu non usare[*], perchè lo fai?
<div class="postspace2">
<div><a>IMMAGINE UNO
TESTO UNO</a></div>
<div><a>IMMAGINE DUE
TESTO DUE</a></div>
<div><a>IMMAGINE TRE
TESTO TRE</a></div>
</div>

[Mich_]

Originariamente inviato da oronze
Eh, ecco, tu non usare[*], perchè lo fai?

In realta` se e` una lista il tag piu` corretto e` proprio il[*].
Comunque si puo` usare il[*] come se fosse un <div>, salvo che occorre tenerne conto quando si sistema il CSS.

<ul class="postspace2">[*]<a>[img]...uno.jpg[/img]
TESTO UNO</a>[*]<a>[img]...due.jpg[/img]
TESTO DUE</a>[*]<a>[img]...tre.jpg[/img]
TESTO TRE</a>[/list]

CSS:

ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}
ul li {
  padding: 0;
  margin: 0;
  list-style-type: none;
  float: left;
}
ul a {
  display: block;
  width: 100%;
  height: 100%;
  text-align: center;
  border: ...;   /* se si vuole */
}

Volendo si puo` definire width e height per le <img> e/o per i blocchi[*] (ad esempio per avere tutto blocchi delle stesse dimensioni)

I testi si possono anche inserire dentro dei tag

(ma non e` obbligatorio: il testo puo` stare direttamente dentro il[*]).

Nota che margin e padding devono essere definiti sia dentro <ul> che dentro[*] (i browser hanno dei default particolari - e diversi tra i vari browser - per questi tag)

[desty nova]

Grazie a tutti, ho risolto, con il consiglio di Mich_.

Originariamente inviato da oronze
Eh, ecco, tu non usare[*], perchè lo fai?

Perchè se non uso una lista, ottengo delle immagini una sotto l'altra, invece io le voglio una affianco all'altra.

@ Mich_: Wow! Funziona! Solo una curiosità: tu hai usato "float:left"... perchè se sostituisco "display:inline" a "float:left" le immagini si vedono una sotto l'altra?

[Mich_]

Non puoi usare l'inline: i blocchi possono contenere altri oggetti di qualsiasi tipo, gli elementi inline non possono contenere altri blocchi.
Per cui ritengo che il tuo display: inline sia stato sovrascritto da qualche altra proprieta` con cui non era compatibile.

Di default i blocchi vengono inseriti uno sotto l'altro; ma con il float vengono resi flottanti e possono quindi affiancarsi.


Nota: con il float avrebbe funzionato anche con i <div>, ma i tag <ul> e[*] sono corretti dal punto di vista semantico, i <div> non lo sarebbero (con difficolta` di capire da parte di utenti con browser particolari o utenti disabili).

[desty nova]

Credo di aver capito. Grazie ancora. Ciao.