[HTML] - Allineare due immagini dentro un blocco

riprendendo questo 3d e continuando il discorso predento un problema analogo.

Ho dentro un blocco div 2 immagini da allineare più un testo.
vorrei disporli come segue.

I M M A I
G I N E M
testo G

bel codice ho scritto prima la stringa dell'img 1, poi il testo e poi la stringa dell'img 2.

il codice e l'intera pagina per farvi un'idea più dettagliata la trovate qui:
http://faber882.altervista.org/prova.html
Mi manca qualcosa nell'ingranaggio settaggio allineamento per farlo funzionare correttamente.

nota importante: il testo vorrei che stesse sotto la prima img!!

Bada bene che non vorrei utilizzare dei sotto blocchi o tabelle, ma semplicemente settarli tramite gli allineamenti - ovviamente se é possibile!! :=):

non ho capito bene cosa vuoi fare...cmq se vuoi inserire un testo allineato ad un'immagine basta operare le tabelle e quindi inserire il testo nella stessa cella dell'immagine.

Non ho tempo di testarlo, cmq dovrebbe avvicinarsi a quel che vuoi
Di fondo, l'immagine a destra la sposti per prima e gli imposti il float right, il resto è semplicemente messo dov'è, senza float o altro e sicuramente così la scritta va a finire sotto al titolo_sito

Codice HTML:

---

<img src="_img/titolo_02.gif" alt="questo é il titolo del sito" style="float:right; border: 0px; width: 100px; height: 250px" />
<img src="_img/titolo_sito.gif" alt="Faber Gray" style="border: 0px; width: 370px; height: 129px" />
<br />
        <cite>ma anche il mio quasi vero nome.</cite>

---

ahhh...ora ho capito....vuoi due immagini allineate e la scritta che compaia sotto la seconda immagine!!

Beh, la soluzione di heracleum l'ho provata e non funziona. L'immagine rimane sempre sotto la prima, ma si potrebbe fare anche con le tabelle, anche se hai detto che non ti sarebbe servito, le tabelle sono le più compatibili con tutti i tipi di browser:

Codice:

---

<table cellspacing="0" cellpadding="0" border="0"><tr><td>Immagine n°1</td><td>Immagine N°2</td></tr><tr><td>&nbsp</td><td>Testo sotto la seconda immagine</td></tr></table>

---

Se mi viene in mente qualche metodo con i css uso l'EDIT e te lo posto.

ciao

@silverseraph,
coff coff..

Citazione:

---

Originalmente inviato da NoWhere

Bada bene che non vorrei utilizzare dei sotto blocchi o tabelle, ma semplicemente settarli tramite gli allineamenti - ovviamente se é possibile!! :=):

---

-.-
p.s. perchè hai postato anche nell'altro 3d cui ho riportato il link in alto??
cioè, non l'ho riesumato io che ne potevo avere i motivi visto l'inerenza dell'argomento, non vedo perchè sei andato a dare una risposta a un 3d già risolto oltretutto!! :???:

hera, ora testo la tua soluzione, però se dò alla seconda img il foalt right non rischio di mandare a quel parse la visualizzazione della struttura intera??
cioè, considera che sta dentro a un altro div - che é il blocco del corpo - e tutto a destra c'é un'altra colonna dove ci starà dentro dell'altro...

penso sia importante sapere quanto sono alte e larghe le immagini

almeno credo:roll:


http://www.html.it/guida/html_27.htm

Ok ora ho più tempo.

Silverseraph:
non so come hai utilizzato il mio codice per dire "non funziona" ma già quello faceva le cosette come richieste.

L'unica cosa che la fretta (e lo scrivere codice a occhio senza poterlo testare) non ha permesso di rifinire era:
1) l'osservazione che il float dell'immagine alta potesse andare a rompere le scatole nelle righe sottostanti (e lo risolve il clear:both, vedi codice sotto)
2) il fatto che un div parent impostasse l'allineamento centrato del testo, quindi (poco male) l'img titolo in alto e la frasetta tendevano alla centratura, seppur spostati a sinistra dal float dell'img a destra.

Comunque questo è il codice del div interessato con le due aggiunte di perfezionamento :wink:

Codice HTML:

---

      <div style="text-align:left; border: 2px solid #000000; border-top-color: red; padding: 5px; margin: auto">
        <img src="_img/titolo_02.gif" alt="questo &egrave; il titolo del sito" style="float:right; border: 0px; width: 100px; height: 250px" />
        <img src="_img/titolo_sito.gif" alt="Faber Gray" style="border: 0px; width: 370px; height: 129px" /><br />
        <cite>ma anche il mio quasi vero nome.</cite>
                <br style="clear:both" />
      </div>

---

edit:
ho tolto anche il vertical-align: top dell'img (che ci fai? nella riga c'è solo la img non serve)
e la "é" meglio sostituirla con l'entity è (o meglio come l'hai scirtta sarebbe é ma in italiano si usa l'accento grave per è :tongue )

provato il codice hera, very compliments, funzia alla grande, ora basta che sistemo qualche piccolo accorgimento nel div superiore e l'allineamento nella pagina sarà ok!! :=D:

strano questo uso di clear+float.. devo studiarlo meglio, sembra interessante per alcune soluzioni!! :razz: