[HTML/PHP] formattazione pagina.

Stato
Discussione chiusa ad ulteriori risposte.

LS1987

Utente Èlite
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

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 : OutputBrowser0902.png

Le caselle di testo relative a tipi di dato numerici non si ridimensionano.
 

lorigio

Utente Attivo
817
238
CPU
Athlon II x3 435 With Noctua NH-D14
Scheda Madre
Asus M5A99X EVO AM3+
HDD
1TB + 160gb + WD My Passport Essential 500gb
RAM
Kingston ddr3 9-9-9-24 6gb 1333mhz
GPU
Gigabyte 5670 790mhz
Monitor
Samsung 22 pollici P2270HD
PSU
Corsair 400watt
Case
Cm 690 II advanced
OS
Windows 7 32 bit
Ciao è normale che le textbox sono fisse perchè hai messo
Quindi saranno di larghezza uguale a 8 lettere

Puoi spiegare meglio cosa vuoi modificare e in come?
 

LS1987

Utente Èlite
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
Ciao è normale che le textbox sono fisse perchè hai messo

Quindi saranno di larghezza uguale a 8 lettere

Puoi spiegare meglio cosa vuoi modificare e in come?

Vorrei avere le caselle di testo numeriche della stessa dimensione delle caselle di testo che permettono di fare l'input di stringhe.
 
Stato
Discussione chiusa ad ulteriori risposte.

Entra

oppure Accedi utilizzando
Discord Ufficiale Entra ora!

Discussioni Simili