Visualizzazione risultati 1 fino 8 di 8

Discussione: [HTML] - Allineare due immagini dentro un blocco

  1. #1
    L'avatar di NoWhere
    NoWhere non è connesso Moderatore
    Data registrazione
    14-02-2003
    Residenza
    New Balarm
    Messaggi
    4,118

    Predefinito [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!!

  2. #2
    L'avatar di silverseraph
    silverseraph non è connesso AlterGuru
    Data registrazione
    27-04-2005
    Residenza
    Localhost
    Messaggi
    1,104

    Predefinito

    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.

  3. #3
    L'avatar di heracleum
    heracleum non è connesso Utente storico
    Data registrazione
    21-01-2004
    Messaggi
    3,333

    Predefinito

    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>
    Avvertimento: richiedere in privato questioni tecniche produrrà inevitabilmente una supercazzola prematurata come risposta. (5 served)

  4. #4
    L'avatar di silverseraph
    silverseraph non è connesso AlterGuru
    Data registrazione
    27-04-2005
    Residenza
    Localhost
    Messaggi
    1,104

    Predefinito

    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

  5. #5
    L'avatar di NoWhere
    NoWhere non è connesso Moderatore
    Data registrazione
    14-02-2003
    Residenza
    New Balarm
    Messaggi
    4,118

    Predefinito

    @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...
    Ultima modifica di NoWhere : 03-02-2006 alle ore 21.58.50

  6. #6
    Guest

    Predefinito

    penso sia importante sapere quanto sono alte e larghe le immagini

    almeno credo


    http://www.html.it/guida/html_27.htm
    Ultima modifica di ariete666 : 03-02-2006 alle ore 23.38.37

  7. #7
    L'avatar di heracleum
    heracleum non è connesso Utente storico
    Data registrazione
    21-01-2004
    Messaggi
    3,333

    Predefinito

    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
    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 &egrave; (o meglio come l'hai scirtta sarebbe &eacute; ma in italiano si usa l'accento grave per è )
    Ultima modifica di heracleum : 04-02-2006 alle ore 02.08.28 Motivo: aggiutno slash per xhtml
    Avvertimento: richiedere in privato questioni tecniche produrrà inevitabilmente una supercazzola prematurata come risposta. (5 served)

  8. #8
    L'avatar di NoWhere
    NoWhere non è connesso Moderatore
    Data registrazione
    14-02-2003
    Residenza
    New Balarm
    Messaggi
    4,118

    Predefinito

    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!!

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

Regole di scrittura

  • Non puoi creare nuove discussioni
  • Non puoi rispondere ai messaggi
  • Non puoi inserire allegati.
  • Non puoi modificare i tuoi messaggi
  •