- 3,530
- 516
- CPU
- Phenom II X 4 945 @ 3 GHz
- Scheda Madre
- Asus M3A78-CM
- HDD
- Seagate 500 GB
- RAM
- 4096 MB DDR2
- GPU
- nVidia GeForce 9800 GT
- Audio
- Integrato
- Monitor
- HP 21.5" 16:9
- PSU
- Cooler Master
Buongiorno, ho avuto diversi problemi con la formattazione con questa pagina che ho scritto :
index5.php
header5.php
style2.css
L'aspetto grafico della pagina è orribile e viene in questo modo :
Le caselle di testo relative a tipi di dato numerici non si ridimensionano.
index5.php
Codice:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html charset=utf-8">
<meta name="author" content="Tarchini Maurizio">
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
<title>Regioni, province, comuni | Your Inspiration Web</title>
<script type="text/javascript">
$(document).ready(function(){
var scegli = '<option value="0">Scegli...</option>';
var attendere = '<option value="0">Attendere...</option>';
$("select#province").html(scegli);
$("select#province").attr("disabled", "disabled");
$("select#comuni").html(scegli);
$("select#comuni").attr("disabled", "disabled");
$("select#regioni").change(function(){
var regione = $("select#regioni option:selected").attr('value');
$("select#province").html(attendere);
$("select#province").attr("disabled", "disabled");
$("select#comuni").html(scegli);
$("select#comuni").attr("disabled", "disabled");
$.post("select.php", {SiglaRegione:regione}, function(data){
$("select#province").removeAttr("disabled");
$("select#province").html(data);
});
});
$("select#province").change(function(){
$("select#comuni").attr("disabled", "disabled");
$("select#comuni").html(attendere);
var provincia = $("select#province option:selected").attr('value');
$.post("select.php", {SiglaProvincia:provincia}, function(data){
$("select#comuni").removeAttr("disabled");
$("select#comuni").html(data);
});
});
});
</script>
</head>
<?php
include("header5.php");
// inizializzazione dati
$MESS = "";
$CC = 0;
$QKU = 0; $F = 0; $P = 0; $S = 0; $ZC = 0; $MZ = 0; $Zfg = 0; $Cl= "";
$QQEuro = 0.0; $I = ""; $DDD = ""; $DU = "";
$C = "";
$id = 1;
include_once 'select.class.php';
// Inserimento della libreria del sito
require("CommonFunctions.php");
$opt = new SelectList();
/**
Beppe Bigazzi mangia i gatti e i topi
<SELECT NAME="day">
<OPTION VALUE="AA">Lunedi
<OPTION VALUE="BB">Martedi
<OPTION VALUE="CC">Mercoledi
<OPTION VALUE="DD">Giovedi
<OPTION VALUE="EE">Venerdi
</SELECT>
<INPUT TYPE="submit" VALUE=" Invia ">
*/
echo ("
<body>
<div class='table'>
<div class ='tr'> <span class = 'td'> <h1>La cascata regioni - province - comuni</h1> </span> </div>
<div class ='tr'> <span class = 'td'> <h2>Seleziona una regione e nella select successiva compariranno le province di quella regione</h2> </span> </div>
<div class ='tr'> <span class = 'td'> <h3>Selezionando una provincia, nella select successiva compariranno i comuni di quella provincia</h3> </span> </div>
<form action='?' id='myform'>
<div class ='tr'> <span class = 'td'> Seleziona una regione:<br /> </span>
</div>
<div class ='tr'> <span class = 'td'>
<select id='regioni'>
".$opt->ShowRegioni()."
</select> </span>
</div>
<br/><br/>
<div class ='tr'> <span class = 'td'> Seleziona una provincia:<br/> </span>
</div>
<div class ='tr'> <span class = 'td'>
<select id='province'>
<option>Scegli...</option>
</select> </span>
</div>
<br/><br/>
<div class ='tr'> <span class = 'td'> Seleziona un comune:<br /> </span>
</div>
<div class ='tr'> <span class = 'td'>
<select id='comuni'>
<option>Scegli...</option>
</select> </span>
</div>
<br/><br/>
<div class='tr'>
<span class='td'><label for='SezioneUrbana'> SU (solo se presente):</label></span>
<span class='td'><input type='text' id='SU' size='8' name='SU' value=\"".$QKU."\"/></span>
</div>
<br/>
<div class='tr'>
<span class='td'><label for='F'>F:</label></span>
<span class='td'></span>
<span class='td'><input type='number' id='F' name='F' length='8' value=\"".$F."\" /></span>
<span class='td'></span>
<span class='td'><label for='P'>P:</label></span>
<span class='td'><input type='number' id='P' length='8' name='P' value=\"".$P."\" /></span>
</div>
<br/>
<div class='tr'>
</div>
<br/>
<div class='tr'>
<span class='td'><label for='S'>S:</label></span>
<span class='td'><input type='number' id='l' length='8' name='L' value=\"".$S."\"/></span>
</div>
<br/>
<div class='tr'>
<span class='td'><label for='ZC'>ZC:</label></span>
<span class='td'><input type='number' id='ZC' length='8' name='ZC' value=\"".$ZC."\" /></span>
</div>
<br/>
<div class='tr'>
<span class='td'><label for='P'>MZ:</label></span>
<span class='td'><input type='text' id='MZ' size='8' name='MZ' value=\"".$MZ."\"/></span>
</div>
<br/>
<div class='tr'>
<span class='td'><label for='Cat'>Cat:</label></span>
<span class='td'><input type='text' id='Cat' size='8' name='Cat' value=\"".$Zfg."\"/></span>
</div>
<br/>
<div class='tr'>
<span class='td'><label for='Cl'>Cl:</label></span>
<span class='td'><input type='number' id='Cl' length='8' name='Cl' value=\"".$Cl."\" /></span>
</div>
<br/>
<div class='tr'>
<span class='td'><label for='Consistenza'>C :</label></span>
<span class='td'><input type='text' id='C' size='8' name='C' value=\"".$C."\" /></span>
</div>
<br/>
<div class='tr'>
<span class='td'><label for='Prezzo'>Prezzo Euro : </label></span>
<span class='td'><input type='number' id='Prezzo' length='8' name='Prezzo' value=\"".$QQEuro."\" /></span>
</div>
<br/>
<div class='tr'>
<span class='td'><label for='I'>I : </label></span>
<span class='td'><input type='text' id='R' size='8' name='I' value=\"".$I."\" /></span>
</div>
<br/>
<div class='tr'>
<span class='td'><label for='DDD'>DDd : </label></span>
<span class='td'><input type='textArea' id='DDD' size='8' name='DDD' value=\"".$DDD."\" /></span>
<span class='td'><label for='DU'> DU : </label></span>
<span class='td'><input type='text' id='DU' size='8' name='DU' value=\"".$DU."\" /></span>
</div>
<br/>
<div class='tr'>
</div>
</div>
</form>
");
?>
</body>
</html>
header5.php
Codice:
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">
<head>
<title>Ciao</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="shortcut icon" href="images/favicon.ico" />
<link rel="stylesheet" href="style2.css" type="text/css" media="screen" />
<script type="text/javascript" src="controlli.js"></script>
</head>
<body>
<div id="corpo">
<?php
// Il menu è stato generato su http://www.cssmenumaker.com/menu/skinny-orange
$nome = "#Guest";
$avviso = "";
$imgSpace = "";
echo("
<div id='colonnaSx'>
<div class='infoDir'>".$imgSpace."<br/></div>
<div class='info'>".$avviso."</div>");
echo ("</div>
<div id='colonnaDx'>");
?>
style2.css
Codice:
body {
font-family: Verdana;
font-size: 12px;
text-align: left;
width: 900px;
height: 1000px;
color: #000000;
padding-bottom: 4.8%;
background:url(images/gray2.jpg);
background-color: #1E1E1E;
}
#info a {color:#ffffff; background-color: #000000;}
#info a:hover{color:#A79787;}
#corpo {
margin-left:15%;
margin-right:10%;
margin-bottom: 2%;
width: 1000px;
height: 100%;
float:left;
background: #1E1E1E;
}
#testata {
text-align: center;
width: 100%;
height: 100%;
float:left;
background: #ffffff;
}
#menu {
text-align: center;
width: 100%;
float:left;
}
#colonnaSx {
width: 200px;
height : 100%;
float:left;
background: #1E1E1E;
}
#colonnaSx a {color:#ffffff;}
#colonnaSx a:hover{color:#A79787;}
.info {
width: 160px;
margin-left: 20px;
margin-right: 10px;
margin-top: 30px;
margin-bottom: 30px;
float:left;
color:#FFFFFF;
}
.infoDir {
width: 100px;
margin-left: 2px;
margin-right: 0px;
margin-top: 30px;
margin-bottom: 30px;
float:left;
color:#FFFFFF;
}
.infoUsr {
width: 200px;
margin-left: 10px;
margin-right: 10px;
margin-top: 5px;
margin-bottom: 5px;
float:left;
color:#000000;
}
#colonnaDx {
width: 700px;
padding-left:30px;
height : 100%;
float:left;
background: #ffffff;
}
.post {
width: 680px;
float:left;
text-align: left;
padding-left:50px;
padding-right:10px;
padding-top: 5px;
padding-bottom: 5px;
}
.label {
width: 120px;
float:left;
padding-left:10px;
}
.label2 {
width: 120px;
float:left;
padding-left:10px;
}
.labelInsProp {
width: 120px;
float:left;
padding-left:10px;
}
.input {
width: 550px;
float:left;
padding-left:10px;
}
.inputInsProp {
width: 550px;
float:left;
padding-left:10px;
}
.number {
width: 40px;
}
.numberY {
width: 50px;
}
.spazio {
width: 650px;
height: auto;
padding-left:10px;
float:left;
}
#piede {
text-align: center;
color:#DC4900;
padding-top: 35px;
width: 100%;
height: auto;
float:left;
background:url(images/bgFoot.png) repeat-x top left;
background-color: #282726;
}
/* Regole per il menu di navigazione */
.cssmenu ul {
list-style-type:none;
width:auto;
position:relative;
display:block;
height:33px;
font-family:Verdana,Helvetica,Arial,sans-serif;
background:url(images/bg.png) repeat-x top left;
margin:0;
padding:0;
}
.cssmenu li {
display:block;
float:left;
margin:0;
padding:0;
}
.cssmenu li a {
float:left;
color:#A79787;
text-decoration:none;
height:24px;
padding:9px 15px 0;
font-weight:normal;
}
.cssmenu li a:hover,
.cssmenu .active {
color:#fff;
background:url(images/bg.png) repeat-x top left;
text-decoration:none;
}
.cssmenu .active a {
color:#fff;
font-weight:700;
}
.cssmenu ul{
background-color:#DC4900;
}
.cssmenu li a:hover,
.cssmenu li.active {
background-color:#F46D00;
}
div.table {display: table; }
div.tr {padding-left : 20 px; display: table-row; }
span.td {padding-left: 20px ; display: table-cell; }
span.tdIntestazione a {padding-left: 100px ; display: table-row; }
a:link, a:visited {
color: black;
text-decoration: none;
}
a:hover {
color: blue;
background-color: white;
text-decoration: underline;
}
a.disabled {
pointer-events: none;
cursor: default;
}
.errore{color:#f00}
.style2 {
font-size: 14px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.style3 {font-size: 14px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #8882FF; }
L'aspetto grafico della pagina è orribile e viene in questo modo :
Le caselle di testo relative a tipi di dato numerici non si ridimensionano.