Visualizzazione dei risultati da 1 a 2 su 2

Discussione: posizionare gli elementi Responsive

  1. #1

    posizionare gli elementi Responsive

    ciao a tutti ,
    non capisco la dichiarazione da usare per fare questo: (vedi allegato)

    in pratica ho uno sfondo responsive e se ridimensiono il browser lo sfondo si adatta, questo non succede per il nome
    e per la foto , non restano "agganciate" allo sfondo ma si spostano sballando i posizionamenti.

    ecco il CSS del foglio di stile

    codice:
    .blocco-sfondo { 
        
        width: 100%;
        height: 768px;
        background-image: url('https://miosito/immagine.jpg');
        background-repeat: no-repeat;
        background-size: contain;
        border: 1px solid red;
      
    }
    
    .nome { 
      
      position: absolute;
      top: 80px;
      left: 10px;
      text-align:center;
      font-size:40px;
      color:#d67f03;
    
    }
    
    .foto {  
      margin:auto;
      position: absolute;
      top: 185px;
      left: 45px;
       
    }
    mi chiedo quale dichiarazione devo usare per nome e foto

    grazie
    Immagini allegate Immagini allegate

  2. #2
    Utente di HTML.it L'avatar di m4rko80
    Registrato dal
    Aug 2008
    residenza
    Milano
    Messaggi
    2,482
    Ciao, provando questo, mi pare funzioni tutto correttamente, a meno che non intendevi perchč testo e foto non si ridimensionano col ridurre delle dimensioni dello schermo
    codice:
    <html>
    <head>
    <style>
    
    
    .blocco-sfondo { 
        
        width: 100%;
        height: 768px;
        background-image: url('immagine.jpg');
        background-repeat: no-repeat;
        background-size: contain;
        border: 1px solid red;
      
    }
    .nome { 
      
      position: absolute;
      top: 80px;
      left: 10px;
      text-align:center;
      font-size:40px;
      color:#d67f03;
    
    
    }
    
    
    .foto {  
      margin:auto;
      position: absolute;
      top: 185px;
      left: 45px;
       
    }
    </style>
    </head>
    <body>
    
    
    <div class="blocco-sfondo">
    <div class="nome">
      IL MIO NOME
    </div>
    <div class="FOTO">
       <img src="image.png">
    </div>
    </div>
    
    
    
    
    
    
    </body>
    </html>
    Attualemente foto e testo hanno dei posizionamenti fissi che ovviamente non cambiano sulle diverse sizes di schermo.

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