Pagina 1 di 2 1 2 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 13
  1. #1
    Utente di HTML.it
    Registrato dal
    Feb 2017
    Messaggi
    117

    DIV Centrato nella pagina

    Salve.
    Ho un div di dimensioni variabili in base al contenuto. Vorrei che fosse sempre al centro della pagina a prescindere da quale contenuto ci venga messo dentro ed ho fatto così:
    codice HTML:
    <script>
    $(document).ready(function(){
        var loginheight = $("#login").height();
        var loginmargint = -loginheight/2;
        $("#login").css("margin-top", loginmargint);
        var loginwidth = $("#login").width();
        var loginmarginl = -loginwidth/2;
        $("#login").css("margin-left", loginmarginl);
    });
    </script>
    
    <div id="login"><input></div>
    codice HTML:
    #login {margin: auto; width: auto; position: absolute; top: 50%; left: 50%;}
    Di per sé il codice funziona, ma quando accedo da mobile, se clicco sull'input per inserire del testo, compare la tastiera che stringe l'altezza dello schermo ed il div si sposta, andando a finire sopra/sotto ad altri elementi.
    Ho provato anche ad inserire "transform: translate(-50%, -50%);" nel CSS ma il risultato è il medesimo.
    Cosa fareste voi al posto mio?

  2. #2
    Utente di HTML.it
    Registrato dal
    Feb 2017
    Messaggi
    117
    Up.

  3. #3
    Moderatore di Javascript L'avatar di ciro78
    Registrato dal
    Sep 2000
    residenza
    Napoli
    Messaggi
    8,505
    sembra un problema di css
    Ciro Marotta - Programmatore JAVA - PHP
    Preferisco un fallimento alle mie condizioni che un successo alle condizioni altrui.


  4. #4
    Utente di HTML.it
    Registrato dal
    Feb 2017
    Messaggi
    117
    Chiudete pure allora. Riapro nella sezione css.

    Edit: non avevo visto che era già stata spostata.

  5. #5
    Utente di HTML.it
    Registrato dal
    Feb 2017
    Messaggi
    117
    Non funziona.
    Ho disattivato il javascript che centrala il #login al centro esatto della pagina.
    Ho aggiunto "display: table" al body ed ho aggiunto "display: table-cell; vertical-align: middle" al #login (che ha il body come parent).
    Il login ha adesso come css questo:
    codice HTML:
    #login {margin: 0 auto; position: absolute;}
    Questo è l'HTML:
    codice HTML:
    <body style="display: table">
    
    <header><a href="index.php" id="logo"><img src="http://www.axive.it/images/logo.png"></a></header>
    
    <div id="login" style="display: table-cell; vertical-align: middle;">
    <form method="post" action="dbconnection.php">
    <span class="formlabel">Username</span>
    <input style="text-transform: none" type="text" name="username"><br><br>
    <span class="formlabel">Password</span>
    <input style="text-transform: none"  type="password" name="password"><br><br><br>
    <input style="text-transform: none"  type="submit" name="userlogin" class="button" id="loginsubmit" value="">
    </form>
    </div>
        
    </body>
    Eppure il #login me lo trovo in alto a sinistra.

  6. #6
    Utente di HTML.it
    Registrato dal
    Feb 2017
    Messaggi
    117
    Ancora non è cambiato nulla. Questo è il mio HTML
    codice HTML:
    <html>
    <head>
    <title>Axive Login</title>
    <link rel="icon" href="http://www.axive.it/images/favicon.png" type="image/png">
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    </head>
    <body style="min-height: 100%;">
    
    <header><a href="index.php" id="logo"><img src="http://www.axive.it/images/logo.png"></a></header>
    
    <div style="display: table">
    <div id="login" style="display: table-cell; vertical-align: middle;">
    <form method="post" action="dbconnection.php">
    <span class="formlabel">Username</span>
    <input style="text-transform: none" type="text" name="username"><br><br>
    <span class="formlabel">Password</span>
    <input style="text-transform: none"  type="password" name="password"><br><br><br>
    <input style="text-transform: none"  type="submit" name="userlogin" class="button" id="loginsubmit" value="">
    </form>
    </div></div>
    
    </body>
    </html>
    Questo il CSS (trovi il paragrafo LOGIN)
    http://www.axive.it/style.css

  7. #7
    Utente di HTML.it
    Registrato dal
    Feb 2017
    Messaggi
    117
    Grazie dei consigli. I <br> me li ero scordati.
    Comunque allineato orizzontalmente ma verticalmente ancora nulla, guarda tu stesso:
    http://www.axive.it/login.php

  8. #8
    Utente di HTML.it
    Registrato dal
    Feb 2017
    Messaggi
    117
    Ci avevo fatto caso. Il problema è che mettere un height in px mi impedisce di centrare perfettamente il div ad una sola risoluzione, mentre se gli do height: 100% non fa alcuna differenza.

    EDIT: ho dato 100% anche all'html, ora è a posto.
    Grazie mille!
    Ultima modifica di fluxKami; 06-06-2017 a 16:03

  9. #9
    Utente di HTML.it
    Registrato dal
    Feb 2017
    Messaggi
    117
    Ci avevo già provato ma sia il body che html hanno un'altezza di circa 160px (l'altezza del #login), non so per quale motivo. Quel div che dici tu prende il 100% di quei 160px e non so per quale motivo. Se tolgo height: 100% dal body e dall'html non si allinea verticalmente.
    Ultima modifica di fluxKami; 07-06-2017 a 10:06

  10. #10
    Utente di HTML.it
    Registrato dal
    Feb 2017
    Messaggi
    117
    Questo è il mio HTML:
    codice HTML:
    <? session_start(); ?>
    <!DOCTYPE html>
    <html>
    <head>
    <title>Axive Login</title>
    <link rel="icon" href="http://www.axive.it/images/favicon.png" type="image/png">
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    </head>
    <body>
    
    <header><a href="index.php" id="logo"><img src="http://www.axive.it/images/logo.png"></a></header>
    
    <div style="display: table; margin: 0 auto; height: 100%;">
    <div id="login">
    <form method="post" action="dbconnection.php">
    <span class="formlabel">Username</span>
    <input style="text-transform: none; margin-bottom: 20px;" type="text" name="username"><br>
    <span class="formlabel">Password</span>
    <input style="text-transform: none"  type="password" name="password"><br>
    <input style="text-transform: none; margin-top: 30px;"  type="submit" name="userlogin" class="button" id="loginsubmit" value="">
    </form>
    </div></div>
    
    </body>
    </html>
    Questo il CSS
    http://www.axive.it/style.css

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.