[HTML/PHP] formattazione pagina.

LS1987 · 17-02-2015, 10:17

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="http://www.tomshw.it/forum/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.

LS1987 · 18-02-2015, 10:49

Up!

wingman87 · 18-02-2015, 11:09

Metti la tua pagina da qualche parte online così la si può guardare e manipolare, ad esempio su jsfiddle

18-02-2015, 10:49	#2
LS1987 Senior Member Iscritto dal: Apr 2010 Messaggi: 1710	Up! Up! __________________ NEW : Java problema pannello con barra scorrimentonew :Insert pag paypal PHP Basi x notebook cinesi Cerco notebook HP PHP problemi formattazione pagina SELECT Query PHP problem Problema Redirect PHP Project wi-fi Cerco PC C# Dictionary problem

18-02-2015, 11:09	#3
wingman87 Senior Member Iscritto dal: Nov 2005 Messaggi: 2785	Metti la tua pagina da qualche parte online così la si può guardare e manipolare, ad esempio su jsfiddle

Strumenti
Mostra una versione stampabile Invia questa pagina per email