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

    Newbie in HTML: Posizionamento oggetti

    Ciao a tutti,

    sto creando un piccolo sitoweb su cui voglio posizionare un testo a sx ed un bottone a dx. Inoltre, vorrei che il bottone si posizione al di sotto del testo quando la finestra è stretta (ad esempio quando il sito viene visualizzato con un cellulare). Questo è il mio codice:

    codice HTML:
    <!DOCTYPE html>
    <html>
    <body>
        <button class="btn" style="float:right">Login</button>
    
    <p>PROVA</p>
    
    </body>
    </html>
    In questo modo il bottone viene visualizzato prima del testo quando la finestra è stretta. Qualche suggerimento su come risolvere il problema?

    grazie.

    Ciao
    Ultima modifica di serbring; 30-05-2020 a 20:57

  2. #2
    Utente di HTML.it L'avatar di ninja72
    Registrato dal
    May 2020
    residenza
    -
    Messaggi
    319
    Ciao, devi usare le media-query per fare in modo di gestire gli elementi con il responsive, evita gli style in linea, meglio un file css esterno.

    codice HTML:
    <!DOCTYPE html>
    
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title>mia pagina web</title>
        <style>
            .container {
                display: flex;
            }
    
            .btn {
                position: absolute;
                right: 10px;
            }
    
            @media only screen and (max-width: 414px) {
                .container {
                    display: block;
                    text-align: center;
                }
    
                .btn {
                    position: static;
                    padding-top: 10px;
                }
            }
        </style>
    </head>
    
    <body>
    
        <div class="container">
            <div>
                PROVA
            </div>
            <div class="btn">
                <button>Login</button>
            </div>
        </div>
    
    </body>
    
    </html>

  3. #3
    Grazie molte per la celere risposta. Direi che la procedura mi è chiara. Adesso faccio provo ad insirerirlo nella pagina web.

Tag per questa discussione

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