Pagina 1 di 2 1 2 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 14

Discussione: centrare un div dentro ad un altro

  1. #1

    centrare un div dentro ad un altro

    Ciao a Tutti, avrei bisogno di un aiutino

    dovrei sovrapporre 2 immagini centrando la piu piccola al centro della piu grande
    usando i DIV e style in line nel HEAD

    per ora ho fatto questo ma non ho ottenuto il risultato che volevo, potreste aiutarmi please?

    (ecco il risultato che vorrei ottenere)


    ecco il codice che ho usato senza ottenere il risultato desiderato:

    codice:
    <html>
    <head>
    <meta charset="utf-8">
    <title>Documento senza titolo</title>
    
    
        <style>
        
        #contenitore
        { 
        width: auto;
        height: auto;
        position: ;
       }
            
            #BG
        {
        position: ;
        }
        
        #GIF
        {
        position: absolute;  
        }
    
    
        </style>
    
    
    </head>
    
    
    <body>
        <div id="contenitore" >    
                 
                     <div id="GIF">
                           <img src="url_GIF" alt="nl"  />
                      </div>
                 
              <div id="BG">
                  <img src="url_BG" alt="nl"  />
              </div>
                  
        </div>
    
    
    </body>
    </html>

  2. #2
    Moderatore di XHTML e HTML L'avatar di Vincent.Zeno
    Registrato dal
    May 2003
    residenza
    Emilia-Romagna (tortellini und cappelletti land!)
    Messaggi
    17,798
    ciao,
    chiarisci i nome dei contenitori e della posizione che devono avere, a me non è chiaro.

    i contenitori #gif e #bg li devi riempire con altro o conterrebbero solo le immagini? si possono eliminare? se si possono eliminare posizioniamo solo le immagini.

  3. #3
    Quote Originariamente inviata da Vincent.Zeno Visualizza il messaggio
    ciao,
    chiarisci i nome dei contenitori e della posizione che devono avere, a me non è chiaro.

    i contenitori #gif e #bg li devi riempire con altro o conterrebbero solo le immagini? si possono eliminare? se si possono eliminare posizioniamo solo le immagini.
    Ciao vincent, Grazie per la risposta,

    allora nei contenitori andrebbero solo immagini,

    in pratica ho bisogno di centrare una GIF al centro esatto di un immagine JPG, riesco a sovrapporre la GIF alla JPG utilizzando i DIV e la position: Absolute
    ma non riesco a centrare la GIF al centro della JPG, non so se sono riuscito a spiegarmi, ma spero di si

  4. #4
    Inanzitutto devi usare delle misure e scrivere gli ID in minuscolo. poi pova così:
    Esempio
    codice:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Documento senza titolo</title>
    <style type="text/css">
    #contenitore {
        margin: 0px;
        padding: 0px;
        height: 600px;
        width: 600px;
        position: relative;
        background: #AAA2A2;
    }
    #gif {
        position: absolute;
        top: 50%;
        left: 50%;
        padding: 0px;
        height: 300px;
        width: 300px;
        margin: -150px 0 0 -150px;
    }
    #bg {
        position: absolute;
        top: 0;
        left: 0;
        padding: 0px;
        height: 60px;
        width: 150px;
        margin: 10px;
    }
    </style>
    </head>
    
    <body>
    <div id="contenitore">
      <div id="gif">
          <img src="01.jpg" width="300" height="300" alt=""/>
        <img id="bg" src="02.jpg" width="150" height="60" alt=""/> </div>
      
    </div>
    </body>
    </html>
    “Che le cose siano cosi, non vuol dire che debbano andare così. Solo che quando si tratta di rimboccarsi le maniche e incominciare a cambiare, vi è un prezzo da pagare. Ed è allora che la stragrande maggioranza preferisce lamentarsi più che fare”.

    Giovanni Falcone

  5. #5
    Quote Originariamente inviata da carlomarangoni Visualizza il messaggio
    Inanzitutto devi usare delle misure e scrivere gli ID in minuscolo. poi pova così:
    Esempio
    codice:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Documento senza titolo</title>
    <style type="text/css">
    #contenitore {
        margin: 0px;
        padding: 0px;
        height: 600px;
        width: 600px;
        position: relative;
        background: #AAA2A2;
    }
    #gif {
        position: absolute;
        top: 50%;
        left: 50%;
        padding: 0px;
        height: 300px;
        width: 300px;
        margin: -150px 0 0 -150px;
    }
    #bg {
        position: absolute;
        top: 0;
        left: 0;
        padding: 0px;
        height: 60px;
        width: 150px;
        margin: 10px;
    }
    </style>
    </head>
    
    <body>
    <div id="contenitore">
      <div id="gif">
          <img src="01.jpg" width="300" height="300" alt=""/>
        <img id="bg" src="02.jpg" width="150" height="60" alt=""/> </div>
      
    </div>
    </body>
    </html>
    ho provato così ma comunque non riesco a centrarlo in questo modo, cerco di spiegarmi meglio perchè se do più info forse è piu facile per voi esperti.

    allora ho un immagine alta 1387px larga 697px ( JPG )

    e un altra immagine alta 312px e larga 312px ( GIF )

    ho bisogno di centrare la GIF al centro assoluto della JPG, ho bisogno di farlo tramite DIV e css in line nell head perchè altrimenti il tutto non verrebbe visualizzato da alcuni client.

    ecco i link delle 2 immagini:

    http://imagizer.imageshack.us/v2/640...924/u2Hsct.jpg


    http://imageshack.com/a/img923/4737/IfPFnP.gif

  6. #6
    Il codice che ti ho dato fa proprio quello che tu dici e funziona alla perfezione modifica le misure vhe ho messo io come esempio e vedrai che riesci
    “Che le cose siano cosi, non vuol dire che debbano andare così. Solo che quando si tratta di rimboccarsi le maniche e incominciare a cambiare, vi è un prezzo da pagare. Ed è allora che la stragrande maggioranza preferisce lamentarsi più che fare”.

    Giovanni Falcone

  7. #7
    Quote Originariamente inviata da carlomarangoni Visualizza il messaggio
    Il codice che ti ho dato fa proprio quello che tu dici e funziona alla perfezione modifica le misure vhe ho messo io come esempio e vedrai che riesci
    giuro che ci sto provando ma non riesco ad ottenere il risultato giusto, mi sono avvicinato modificando un po il codice ma comunque non ottengo il risultato desiderato

    codice HTML:
    <!doctype html><html>
    <head>
    <meta charset="utf-8">
    <title>Documento senza titolo</title>
    <style type="text/css">
    #contenitore {
        margin: 0px;
        padding: 0px;
        height: 1387px;
        width: 697px;
        position: relative;
        background: #AAA2A2;
    }
    #gif {
        position: absolute;
        top: 50%;
        left: 50%;
        padding: 0px;
        height: 312px;
        width: 312px;
        margin: ;
        
    }
    #bg {
        position: relative;
        top: 0;
        left: 0;
        padding: 0px;
        height: 1387px;
        width: 697px;
        margin: 0px;
    }
    </style>
    </head>
    
    
    <body>
    <div id="contenitore">
      <img id="bg" src="01.jpg" width="697" height="1387" alt=""/>
      <div id="gif">
          <img src="02.gif" width="312" height="312" alt=""/>
       </div>
    </div>
    </body>
    </html>

  8. #8
    Moderatore di XHTML e HTML L'avatar di Vincent.Zeno
    Registrato dal
    May 2003
    residenza
    Emilia-Romagna (tortellini und cappelletti land!)
    Messaggi
    17,798
    codice:
    <!DOCTYPE html>
    <html>
    
    
    <head>
    
    
    <style type="text/css">
    div#contenitore { width:697px; height:1387px; padding:0;  }
    img#jpg { position:absolute; z-index:1; width:697px; height:1387px; }
    img#gif { position:relative; z-index:2; top:50%; left:50%; margin-top:-156px; margin-left:-156px; width:312px; height:312px; }
    </style>
    </head>
    
    
    <body>
    <div id="contenitore">
    <img src="http://imagizer.imageshack.us/v2/640x480q90/924/u2Hsct.jpg" id="jpg" >
    <img src="http://imagizer.imageshack.us/a/img923/4737/IfPFnP.gif" id="gif" >
    </div>
    
    
    </body>
    
    
    </html>

  9. #9
    Quote Originariamente inviata da Vincent.Zeno Visualizza il messaggio
    codice:
    <!DOCTYPE html>
    <html>
    
    
    <head>
    
    
    <style type="text/css">
    div#contenitore { width:697px; height:1387px; padding:0;  }
    img#jpg { position:absolute; z-index:1; width:697px; height:1387px; }
    img#gif { position:relative; z-index:2; top:50%; left:50%; margin-top:-156px; margin-left:-156px; width:312px; height:312px; }
    </style>
    </head>
    
    
    <body>
    <div id="contenitore">
    <img src="http://imagizer.imageshack.us/v2/640x480q90/924/u2Hsct.jpg" id="jpg" >
    <img src="http://imagizer.imageshack.us/a/img923/4737/IfPFnP.gif" id="gif" >
    </div>
    
    
    </body>
    
    
    </html>
    Ottimo, così mi ci sono trovato meglio, ho dovuto scrivere tutto lo style in line nel body, ma ha funzionato alla perfezione! grazie mille a tutti!

  10. #10
    Quote Originariamente inviata da Marco_gaso Visualizza il messaggio
    Ottimo, così mi ci sono trovato meglio, ho dovuto scrivere tutto lo style in line nel body, ma ha funzionato alla perfezione! grazie mille a tutti!
    ora devo capire perchè se la mando via mail il la gif si posizione sotto al contenitore del jpg

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 © 2017 vBulletin Solutions, Inc. All rights reserved.