Ciao a tutti, ho un problema con il mio codice HTML: ho creato una pagina con vari button, immagini e textarea però provando ogni volta a vedere i vari posizionamenti con la finestra web ingrandita al massimo. Ora però quando provo a ridurre la finestra e/o cambiare le dimensioni, mi ritrovo con tutti gli elementi che si muovono singolarmente e vanno in posizioni assurde.
Come posso fare perfar si che come in ogni pagina web (tipo questa su cui sto scrivendo) se rimpicciolisco la finestra mi rimane tutto nella sua posizione (e di conseguenza mi muovo con scrollbar)? Vi posto una piccola parte di codice cosi mi sapete dire cosa aggiungere/dove aggiungere qualcosa:
codice:<style> body{ margin: 0; padding: 0; background: #fff; color: #fff; font-family: Arial; font-size: 12px; } .body{ position: absolute; top: -20px; left: -20px; right: -40px; bottom: -40px; width: auto; height: auto; -webkit-filter: blur(5px); z-index: 0; } .grad{ position: absolute; top: -20px; left: -20px; right: -40px; bottom: -40px; width: auto; height: auto; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.65))); /* Chrome,Safari4+ */ z-index: 1; opacity: 0.7; } .image{ position: absolute; top: calc(50% - 330px); left: calc(50% - 0 px); z-index: 2; } .name{ position: absolute; top: calc(50% - 330px); right: calc(50% - 740px); z-index: 2; } .name div{ float: left; color: #fff; font-family: 'Exo', sans-serif; font-size: 35px; font-weight: 200; } .name div span{ color: #5379fa !important; } </style> <body> <div class="body"></div> <div class="grad"></div> <div class="name"> <div><span> Ciao, {{ namehtml }} </span> </div> </div> <br> <div class= "image"> <img src="{{url_for('static', filename = 'ivl.png')}}" /> </div> </body>
Rispondi quotando