[HTML/PHP] formattazione pagina.

**LS1987** · 17-02-2015, 09:50

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

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

**Santino83_02** · 17-02-2015, 13:38

non saprei è piu un problema di html/css. cmq quell'echo immenso con tutto il codice html dentro è una schifezza senza fine, se proprio vuoi fare una cosa del genere usa heredoc http://php.net/manual/en/language.ty...syntax.heredoc, ma se non la fai è meglio

**LS1987** · 18-02-2015, 11:42

Originariamente inviata da darkhero

Non si ridimensionano perchè nel css usi la classe .number, ma non c'è nessun input con quella classe.... dove vedi type='number' devi aggiungere class='number' ... fammi sapere.

Forse è rimasta da un codice vecchio. Oppure dite che dovrei utilizzarla per la formattazione delle caselle di input di tipo numerico? Perché per le caselle di input di tipo testo non ci sono errori di nessun problema.

Discussione: [HTML/PHP] formattazione pagina.

Strumenti discussione

Ricerca discussione

Visualizza

[HTML/PHP] formattazione pagina.

Permessi di invio