Oppure

Loading
17/05/13 14:54
Luk3
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: lucagenzia.altervista.org

CSS:

body {
	margin: 0px;
  	padding: 0px;
  	background: url(bg.jpg);
        background-repeat:no-repeat;
        background-attachment:fixed;
        background-position:center;
  	height: 100%;
	font-family: sans-serif;
}


#login {
	position: fixed;
	left:10%;
	top: 65%;
	width: 25%;
	height: 25%;
	margin: 0 auto;
	background-color: white;
	border-color: black;
        border-bottom-color: white;
	border-style: solid;
	border-width: 2px;
        border-bottom-width: 0;
	padding: 30px 30px 30px 30px;
        -moz-border-radius: 30px 30px 0px 0px;
        -webkit-border-radius: 30px 30px 0px 0px;
}

/*#titagenzia{
	position:relative;
	top: 66%
	left: 15%;
	right: 15%;
	width: 100%;
	height: 100%;
	font-size: 50px;
}
*/
#title {
	position: fixed;
	left:10%;
	top: 0;
	width: 25%;
	text-align: center;
	font-weight: bold;
	font-size: 150%;
	height: 7%;
	margin: 0 auto;
	background-color: white;
	border-color: black;
        border-top-color: white;
	border-style: solid;
	border-width: 2px;
        border-top-width: 0;
	padding: 30px 30px 30px 30px;
        -moz-border-radius: 0px 0px 30px 30px;
        -webkit-border-radius: 0px 0px 30px 30px;
}


#logerr {
	color:red;
}


PHP:
<?php
	session_set_cookie_params(5*10);
	session_start();
?>
<html>
	<head>
		<title>Agenzia - Login</title>
		<link href="agenzia.css" title="Agenzia" rel="stylesheet" type="text/css" />
		<META NAME="author" CONTENT="Cavallin Luca">
		<META NAME ="description" CONTENT="Pagina di accesso alla gestione dell'Agenzia.">
		<META NAME ="copyright" CONTENT="Cavallin Luca">
		<META NAME ="generator" CONTENT="Gedit">
		<META NAME ="DC language" CONTENT="ita" SCHEME="RFC1766">
		<META NAME="robots" CONTENT="index,nofollow">
                <META NAME="viewport" CONTENT="user-scalable=no, width=device-width"/>
	</head>
	<body>
		<div id="title">
				Agenzia
		</div>
		<?php
			$link = mysql_connect('localhost', 'lucagenzia', '');
			if(!$link) {
				die("<br><br>".mysql_error());
			}				
			$db_selected = mysql_select_db('my_lucagenzia', $link);
			if(!$db_selected) {
				die('Impossibile usare il database! '.mysql_error());
			}
			if($_POST["username"]=="") {					
				print "<div id=\"login\">";
				print "<b><center>Login</center></b><br>";				
				print "<form action=\"index.php\" method=\"post\">";
				print "<table>";
				print "<tr><td>Username:</td></tr>";
				print "<tr><td><input type=\"text\" name=\"username\"/></td></tr>";	
				print "<tr><td>Password:</td></tr>";
				print "<tr><td><input type=\"password\" name=\"password\"/></td></tr>";	
				print "<tr><td><input type=\"submit\" value=\"Login\"/></td></tr>";
				print "</table>";
				print "</form>";
				print "</div>";
			} else {	
				$username = $_POST["username"];
				$password = $_POST["password"];
			        $password = md5($password);
				$query = "SELECT * FROM admin WHERE username='$username' AND password='$password'";	
				$result = mysql_query($query);
				
				if(mysql_num_rows($result)!=1){
					print "<div id=\"login\">";
					print "<b><center>Login</center></b><br>";			
					print "<form action=\"index.php\" method=\"post\">";
					print "<table>";	
					print "<tr><td>Username:</td><td><input type=\"text\" name=\"username\"/></td></tr>";
					print "<tr><td>Password:</td><td><input type=\"password\" name=\"password\"/></td>";		print "<td><input type=\"submit\" value=\"Login\"/></td></tr>";
					print "</table></div>";
					print "<br><span id=\"logerr\"><center><b>Nome utente o password errati!</b></center></span>";
					
					print "</form>";
					print "</div>";
				}
				else{
					$_SESSION["username"]=$username;
					header("Refresh:0; panel.php");
				}
			}
			mysql_close($link);
		?>
	</body>
</html>

aaa
18/05/13 11:06
netarrow
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.
aaa
18/05/13 14:13
TheKaneB
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 ( hwfiles.it/articoli/3605/… ) ed in fondo ci sono dei link di approfondimento.
aaa
19/05/13 16:04
Luk3
Perfetta la soluzione di netarrow!
aaa