Visualizzazione dei risultati da 1 a 6 su 6

Discussione: Sovrapporre immagini

  1. #1
    Utente di HTML.it
    Registrato dal
    Dec 2017
    Messaggi
    45

    Sovrapporre immagini

    Buonasera Forum,
    ho la necessità di sovrapporre due immagini per migliorare la visibilità e rendere il layout delle tabelle nella pagina uniforme.
    Importo immagini che non sono tutte della stessa dimensione e ridimensiono con gli attributi max-widht e max-height. Mi piacerebbe sovrapporre una trasparente di 150x150px.

    Ho provato in questo modo senza esito:

    codice:
     <td>
           <div style="background: url('transparent_150x150.png')>
    
                <img title="<%=RS("NOME")%>" alt="<%=RS("NOME")%>" src="<%=RS("FOTO")%>" border="0" style="max-width:100px;max-height:100px;">
    
           </div>
    
      </td>
    Come posso ottenere il risultato desiderato?
    Grazie

  2. #2
    Moderatore di XHTML e HTML L'avatar di Vincent.Zeno
    Registrato dal
    May 2003
    residenza
    Emilia-Romagna (tortellini und cappelletti land!)
    Messaggi
    19,100
    sezione errata, segnalo per spostamento

  3. #3
    Utente di HTML.it
    Registrato dal
    Dec 2017
    Messaggi
    45
    Mi scuso per l'errore, ho postato in questa sezione per via del codice asp con cui si estraggono le immagini.
    Grazie per l'attenzione.

  4. #4
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,347
    Non mi è chiara la situazione che descrivi. A parte il codice che hai postato, puoi linkare la pagina in questione?
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 15% tra i post del forum; il 9% sul web.
    Ti resta l’1% ... usalo bene!

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  5. #5
    Utente di HTML.it
    Registrato dal
    Dec 2017
    Messaggi
    45
    Ciao LillerWorm, ho risolto così:
    codice:
    <style>
    #jpg {
    position:absolute;
    right: 0;
    }
     
    #gif-div {
    position:relative;
    top: 0;
    }
    </style>
     
    <div id="gif-div">
    <img id="gif" src="<%=RS("FOTO")%>" border="0" style="max-width:150px;max-height:150px;">
    <img id="jpg" title="<%=RS("nome")%> " alt="<%=RS("nome")%>" src="transparent_150x150.png" />
    </div>
    Grazie lo stesso per l'attenzione.

  6. #6
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,347
    Bene, giusto qualche suggerimento riguardo il codice che hai postato:

    - mi pare di capire che nella pagina avrai più elementi simili a quello; in tal caso fai attenzione a non usare id duplicati perché sono da considerarsi un errore; piuttosto, se questo è il tuo caso, è più appropriato usare delle classi.

    - l'attributo border (applicato sul tag img) è deprecato in HTML5; in qualunque caso è preferibile eventualmente usare l'analoga proprietà border CSS se ti serve impostare il bordo in qualche modo, ma considera che gli elementi <img> non hanno bordi di default, per cui è totalmente inutile quel border="0" nel tuo codice.

    - è consigliabile mantenere lo stile, quanto più possibile, separato dal codice HTML; evitare quindi di usare stile in linea ma includerlo piuttosto come file CSS esterno o in un blocco <style> dento <head>. Nel tuo caso, il CSS che hai messo nel tag <img> puoi spostarlo opportunamente tra le regole che hai definito nel CSS incluso. Non è una regola fissa ma è una buona pratica di programmazione web (qui un articolo tra tanti).

    - se hai interesse ad avere un codice valido, l'attributo alt è obbligatorio per ogni elemento <img>, eccetto alcuni particolari casi.

    Per verificare la validità del tuo codice puoi usare un validatore, ad esempio questo: https://validator.w3.org/

    Chiaramente questi vogliono essere giusto dei consigli in aggiunta al tema della discussione.

    Buon proseguimento
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 15% tra i post del forum; il 9% sul web.
    Ti resta l’1% ... usalo bene!

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.