Visualizzazione dei risultati da 1 a 3 su 3
  1. #1

    Anomalia con immagini che si deformano a seconda di browser e risoluzione schermo

    Ciao a tutti. Scusate la domanda, che presumo sia stata fatta mille altre volte in maniera molto similare, ma purtroppo sto riscontrando un'anomalia.

    Sto utilizzando la stessa parte di codice css dove nel sito1 rimane invariata in forma e posizioni di immagini e testo; nel sito2 invece cambia tutto a seconda della risoluzione dello schermo, e persino dal tipo di browser.

    Ho provato ad impostare la prima immagine del codice sia su relative, che su absolute, che su fixed. Ma non cambia nulla. E sono sicuro che dalla prima immagine dovrebbe dipendere che le posizioni di tutte NON varino a prescindere dalla risoluzione schermo.

    Mi dareste una piccola dritta?

    Grazie in anticipo.

    codice:
    .up { display: block; position: relative; margin: auto; }
    
    .left { display: inline-block; position:absolute; top: 75%; left: 0; }
    
    .right { display: inline-block; position:absolute; top: 75%; left:71.35%; }
    
    .down { display: inline-block; position:absolute; top: 2223%; left: 0; }
    
    .middle { display: inline-block; position:absolute; top: 830%; left: 1.5%; }
    
    .logo { display: inline-block; position:absolute; top: 30%; left: 21.5%; }
    
    .folder { display: inline-block; position:absolute; top: 120%; left: 3%; }
    
    .title { display: block; font: 1.3rem/1.0 Verdana; position: absolute; top: 340%; left: 23.6%; }
    
    .text { display: block; font: 1.05rem/1.2 Arial; color: white; position: absolute; top: 1010%; left: 2.3%; }
    
    .moretext { display: block; font: 0.95rem/1.1 Tahoma; position: absolute; top: 1280%; left: 2.75%; }
    
    .signup { display: block; font: 1.2rem/0.7 Arial Black; color: red; position: absolute; top: 720%; left: 32%; }
    
    .object1 { display: inline-block; position:absolute; top: 305px; left: 32px; }
    
    .object2 { display: inline-block; position:absolute; top: 305px; left: 171px; }
    
    .object3 { display: inline-block; position:absolute; top: 305px; left: 309px; }
    
    .object4 { display: inline-block; position:absolute; top: 305px; left: 448px; }

  2. #2
    EDIT: Ho aggiunto un po' di codice che delimiti dei margini:

    #content { float: left; width: 600px; height: 439px; }

    E il 90% di immagini e scritte rimangono in posizione, a prescindere da risoluzine e browser...
    ...però l'immagine ".down" è ribelle, e continua invece a variare e spostarsi a seconda delle condizioni...
    Uff, non ci capisco più nulla
    Ultima modifica di danielepalmas88; 23-05-2017 a 17:46

  3. #3
    Soluzione: bastava usare px anziché % nel posizionare gli oggetti.

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