Questo sito utilizza cookies solo per scopi di autenticazione sul sito e nient'altro. Nessuna informazione personale viene tracciata. Leggi l'informativa sui cookies.
Username: Password: oppure
HTML / CSS - Dimensioni e posizione cambiano
Forum - HTML / CSS - Dimensioni e posizione cambiano

Avatar
Luk3 (Ex-Member)
Guru


Messaggi: 615
Iscritto: 16/08/2008

Segnala al moderatore
Postato alle 16:54
Venerdì, 17/05/2013
Salve a tutti.
Sto sviluppando un piccolo sito web come esercizio scolastico.
Il problema è che non riesco ad impostare nel css delle regole che vengano sempre rispettate, provando infatti a cambiare
la risoluzione, si vedono i componenti sempre spostati.

Vorrei tanto che il titolo "Agenzia" in alto fosse pù grande, e che sia questo sia i componenti per il login siano sempre perfettamente dentro i loro
riquadri bianchi.

Vi allego tutto:

Sito: http://www.lucagenzia.altervista.org

CSS:

Codice sorgente - presumibilmente Plain Text

  1. body {
  2.         margin: 0px;
  3.         padding: 0px;
  4.         background: url(bg.jpg);
  5.         background-repeat:no-repeat;
  6.         background-attachment:fixed;
  7.         background-position:center;
  8.         height: 100%;
  9.         font-family: sans-serif;
  10. }
  11.  
  12.  
  13. #login {
  14.         position: fixed;
  15.         left:10%;
  16.         top: 65%;
  17.         width: 25%;
  18.         height: 25%;
  19.         margin: 0 auto;
  20.         background-color: white;
  21.         border-color: black;
  22.         border-bottom-color: white;
  23.         border-style: solid;
  24.         border-width: 2px;
  25.         border-bottom-width: 0;
  26.         padding: 30px 30px 30px 30px;
  27.         -moz-border-radius: 30px 30px 0px 0px;
  28.         -webkit-border-radius: 30px 30px 0px 0px;
  29. }
  30.  
  31. /*#titagenzia{
  32.         position:relative;
  33.         top: 66%
  34.         left: 15%;
  35.         right: 15%;
  36.         width: 100%;
  37.         height: 100%;
  38.         font-size: 50px;
  39. }
  40. */
  41. #title {
  42.         position: fixed;
  43.         left:10%;
  44.         top: 0;
  45.         width: 25%;
  46.         text-align: center;
  47.         font-weight: bold;
  48.         font-size: 150%;
  49.         height: 7%;
  50.         margin: 0 auto;
  51.         background-color: white;
  52.         border-color: black;
  53.         border-top-color: white;
  54.         border-style: solid;
  55.         border-width: 2px;
  56.         border-top-width: 0;
  57.         padding: 30px 30px 30px 30px;
  58.         -moz-border-radius: 0px 0px 30px 30px;
  59.         -webkit-border-radius: 0px 0px 30px 30px;
  60. }
  61.  
  62.  
  63. #logerr {
  64.         color:red;
  65. }



PHP:
Codice sorgente - presumibilmente Delphi

  1. <?php
  2.         session_set_cookie_params(5*10);
  3.         session_start();
  4. ?>
  5. <html>
  6.         <head>
  7.                 <title>Agenzia - Login</title>
  8.                 <link href="agenzia.css" title="Agenzia" rel="stylesheet" type="text/css" />
  9.                 <META NAME="author" CONTENT="Cavallin Luca">
  10.                 <META NAME ="description" CONTENT="Pagina di accesso alla gestione dell'Agenzia.">
  11.                 <META NAME ="copyright" CONTENT="Cavallin Luca">
  12.                 <META NAME ="generator" CONTENT="Gedit">
  13.                 <META NAME ="DC language" CONTENT="ita" SCHEME="RFC1766">
  14.                 <META NAME="robots" CONTENT="index,nofollow">
  15.                <META NAME="viewport" CONTENT="user-scalable=no, width=device-width"/>
  16.         </head>
  17.         <body>
  18.                 <div id="title">
  19.                                 Agenzia
  20.                 </div>
  21.                 <?php
  22.                         $link = mysql_connect('localhost', 'lucagenzia', '');
  23.                         if(!$link) {
  24.                                 die("<br><br>".mysql_error());
  25.                         }                              
  26.                         $db_selected = mysql_select_db('my_lucagenzia', $link);
  27.                         if(!$db_selected) {
  28.                                 die('Impossibile usare il database! '.mysql_error());
  29.                         }
  30.                         if($_POST["username"]=="") {                                   
  31.                                 print "<div id=\"login\">";
  32.                                 print "<b><center>Login</center></b><br>";                             
  33.                                 print "<form action=\"index.php\" method=\"post\">";
  34.                                 print "<table>";
  35.                                 print "<tr><td>Username:</td></tr>";
  36.                                 print "<tr><td><input type=\"text\" name=\"username\"/></td></tr>";    
  37.                                 print "<tr><td>Password:</td></tr>";
  38.                                 print "<tr><td><input type=\"password\" name=\"password\"/></td></tr>";
  39.                                 print "<tr><td><input type=\"submit\" value=\"Login\"/></td></tr>";
  40.                                 print "</table>";
  41.                                 print "</form>";
  42.                                 print "</div>";
  43.                         } else {       
  44.                                 $username = $_POST["username"];
  45.                                 $password = $_POST["password"];
  46.                                 $password = md5($password);
  47.                                 $query = "SELECT * FROM admin WHERE username='$username' AND password='$password'";    
  48.                                 $result = mysql_query($query);
  49.                                
  50.                                 if(mysql_num_rows($result)!=1){
  51.                                         print "<div id=\"login\">";
  52.                                         print "<b><center>Login</center></b><br>";                     
  53.                                         print "<form action=\"index.php\" method=\"post\">";
  54.                                         print "<table>";       
  55.                                         print "<tr><td>Username:</td><td><input type=\"text\" name=\"username\"/></td></tr>";
  56.                                         print "<tr><td>Password:</td><td><input type=\"password\" name=\"password\"/></td>";            print "<td><input type=\"submit\" value=\"Login\"/></td></tr>";
  57.                                         print "</table></div>";
  58.                                         print "<br><span id=\"logerr\"><center><b>Nome utente o password errati!</b></center></span>";
  59.                                        
  60.                                         print "</form>";
  61.                                         print "</div>";
  62.                                 }
  63.                                 else{
  64.                                         $_SESSION["username"]=$username;
  65.                                         header("Refresh:0; panel.php");
  66.                                 }
  67.                         }
  68.                         mysql_close($link);
  69.                 ?>
  70.         </body>
  71. </html>



PM Quote
Avatar
netarrow (Admin)
Guru^2


Messaggi: 2502
Iscritto: 12/05/2004

Segnala al moderatore
Postato alle 13:06
Sabato, 18/05/2013
Per non far uscire il contenuto dai blocchi usa min-width al posto di width. Così se le dimensioni della pagina sono troppo piccole il blocco smetterà di rimpicciolirsi evitando di far uscire il contenuto.

Poi ti consiglio sul div login di non mettere top: 65% ma piuttosto bottom: 0px, così è ben aderente al bordo inferiore della finestra.

Per la dimensioni del testo Agenzia non capisco la domanda, se aumenti il font-size non ti funziona? Ho provato un 300% e ci sta.

Per quanto riguarda il cambio di risoluzione il comportamento che assume la pagina è corretto per quello che hai scritto, essendo tutto in percentuale di fatto il tuo è un layout liquido e si adatta al cambiare della risoluzione.

Quello che potrebbe migliorare l'aspetto su risoluzioni con ratio diverso è mettere il max-height al posto di height sui due blocchi bianchi, così eviti di rovinare troppo le proporzioni.

Come test ho provato su Firefox con firebug la modalità "visualizzazione flessibile" che ti permette di selezionare la risoluzione al volo e vedere come cambia la UI.

Prova queste modifiche a fammi sapere.

PM Quote
Avatar
TheKaneB (Member)
Guru^2


Messaggi: 1792
Iscritto: 26/06/2009

Segnala al moderatore
Postato alle 16:13
Sabato, 18/05/2013
ciao, volendo puoi usare regole CSS differenziate in base alla risoluzione.
Ad esempio potresti volere un layout fisso per risoluzioni troppo piccole o troppo grandi e un layout fluido per quelle intermedie.

Per fare questo si usa il costrutto "mediaquery".

Ho scritto un articolo introduttivo qui ( http://www.hwfiles.it/articoli/3605/ottimizzazione-dei-sit ... ) ed in fondo ci sono dei link di approfondimento.

PM Quote
Avatar
Luk3 (Ex-Member)
Guru


Messaggi: 615
Iscritto: 16/08/2008

Segnala al moderatore
Postato alle 18:04
Domenica, 19/05/2013
Perfetta la soluzione di netarrow!

PM Quote