problema: la select della città mi va a fondo pagina invece di stare a fianco

22-10-2014, 19.17.25

Salve a tutti,

Ho un piccolo problema che mi sta facendo inmpazzire da qualche giorno tanto per cambiare. Ho sempre le due select famose. Ina citta e una provincia. Cosa succede ??? Quando metto la select citta, invece di affiancarmela vicino alla targhetta "Inserisci città: " e a fianco dovrebbe comparire la selezione delle città, mi va a fondo pagina. Mentre con la provincia va tutto bene e me lo mette a fianco. Non capisco come al solito dove sbaglio. QUesto è l'intero listato.

iscrizione.php

Codice PHP:




<html>

    <head>

        <meta charset="UTF-8">

        <title>Modulo Iscrizione</title>

      

<style type="text/css"> 

    #areaTitolo{

   width:100%;

   height:100px;

   position:absolute;

   top:0px;

   left:5px;

   text-align: center;

  }

 

 #area img{

 width:20px;

 height:20px;

 position:relative;

 bottom:40px;

 left:180px;

}

#nascita {

 

  width:100%;

   height:100px;

   position:absolute;

   top:180px;

   left:110px;

  }   

  #datanascita {

 

  width:100%;

   height:100px;

   position:absolute;

   top:172px;

   left:5px;

  }   

#div {

    

position:absolute;

top: 70px;    

} 



#username{

    

position:absolute;

top: 190px;    

} 

#email{

    

position:absolute;

top: 250px;    

} 



#ripemail{

    

position:absolute;

top: 285px;    

} 

#password{

    

position:absolute;

top: 320px;    

} 

#rippass{

    

position:absolute;

top: 360px;    

} 

#citta{

    

position:absolute;

top: 400px;    

} 

#prov{

    

position:absolute;

top: 430px;    

} 

</style>

        

    </head>

    <!-- Sistema sulla stessa riga dove viene visualizzata la data attuale il titolo dela pagina -->

    

    <div id="areaTitolo"> <h3> BENVENUTI NEL MODULI D'ISCRIZIONE </h3>

        <hr />

    </div>

<!--Neccessario per posizionare i campi dopo il tag hr che disegna una riga orizzontale -->    

   

<div id="div">

        

       <!-- Inizia il modulo vero e proprio dell'iscrizione -->

       

       Cognome: <input type ="text" id="input1" name="cognome"/><div id="controllo1"><img src="" /></div> 

    <p> <p>

    Nome: <input type ="text" id="input2" name="nome/><div id="controllo2"><img src="" /></div>

    </p></p>

<p> <p>

<div id="datanascita">

    <label> Data di nascita: </label><img src="" /></div>

</p></p> </div>



<div id="username">



<p> <p>

    

    Username: <input type ="text" id="input3" name="nome/><div id="controllo3"><img src="" /></div>

    </p></p>



<p> <p>

    <div id="email">



    Email: <input type ="text" id="input4" name="nome/><div id="controllo4"><img src="" /></div>

    </p></p>



<p> <p>

    <div id="ripemail">



  Ripeti - Email: <input type ="text" id="input5" name="nome/><div id="controllo5"><img src="" /></div>

</p></p>





<p> <p>

    <div id="password">



    Password: <input type ="text" id="input6" name="nome/><div id="controllo6"><img src="" /></div>

    </p></p>





 <div id="rippass">



    Ripeti-Password: <input type ="text" id="input7" name="nome/><div id="controllo7"><img src="" /></div>

    </p></p>



  <div id="citta">



    <label for="citta">Seleziona Città: </label>

    <select id="citta" name="citta">

        <!-- Inizio elenco città -->

        <option value=””>-- Seleziona Citta --</option>

        <option value=””></option>       



        <option>Agrigento</option>

        <option>Alessandria</option>

        <option>Ancona</option>

        <option>Aosta</option>



     </select> </div>





    <!--Fine elenco città -->

    <div id="prov">



    <label for="provincia">Seleziona la Provincia:  </label>

    <select id="provincia" name="provincia">



        <!--Inizio elenco provincia -->



        <option value=””>-- Seleziona Provincia --</option>

        <option value=””></option>    



        <option >Ag</option>

        <option >Al</option>

        <option >An</option>

        <option >Ao</option>



    </select> </div>



</form>

    

<body>

        <?php

        require_once("connettimysqli.php");

        require_once("data.php");

 

        echo '<div id="nascita">';      

          //Giorno



                echo "<select name=\"giorno\" id='giorno' required autofocus><option value=\"\">Seleziona</option>";

                echo "<option value=\"\">  </option>";

                for($gg=1; $gg<=31; $gg++){

                for($gg=1; $gg<=31; $gg++){

                echo sprintf("<option value=\"%02d\"> %02d </option>\n", $gg, $gg);

             }

             }

             echo "</select>";

//Mese



             echo '<select name="mesi" id="mese" required autofocus><option value="">Seleziona</option>';

             echo "<option value=\"\">  </option>";



             $mesi = array (

                "1" => "Gennaio",

                "2" => "Febbbraio",

                "3" => "Marzo",

                "4" => "Aprile",

                "5" => "Maggio",

                "6" => "Giugno",

                "7" => "Luglio",

                "8" => "Agosto",

                "9" => "Settembre",

                "10" => "Ottobre",

                "11" => "Novembre",

                "12" => "Dicembre",

             );

             foreach( $mesi as $m => $mese ){

                echo "<option value=\"$m\">{$mesi[$m]}</option>";

             }

             echo"</select>";

            

            

             //Anno



            $da=1950;

            $al=date('Y');

            echo '<select name="anno" id="anno" required autofocus><option value="">Seleziona</option>';

            echo "<option value=\"\">  </option>";

            for($aa=$da; $aa<=$al; $aa++){

            echo "<option value=\"$aa\"> $aa </option>";

            }

            echo "</select>" ;

        ?>

 </div>

    

 </div>

</form>

    </body>

</html>

Ancora da terminare. E questa l'immagine che compare se si fa girare il modulo.

http://s16.postimg.org/h3x0lajph/Modulo_Iscrizione.png

Spero di ricevere aiuto e risposta come al solito. Ringrazio tutti anticipatamente.

**saitfainder** · 23-10-2014, 10.10.53

C'è un motivo particolare per usare il posizionamento assoluto degli elementi invece di sfruttare il posizionamento naturale?

23-10-2014, 18.50.31

Ciao saitfainder,

Si era semplicemente incasinato il codice. L'ho riscritto da capo un pochino più ordinato ma ho un piccolo problema. Spero che mi possiate aiutare. La targhetta città con l'elenco città e la targhetta provincia con elenco provincia non sono allineate fra di loro. Mi spiego meglio: la targhetta città sta bene dove sta, invece l'elenco sta alla riga sotto. Ora posto il codice ovviamente non metto tutte le citta è provincie diventerebbe troppo lungo.

Codice PHP:



<html>
    <head>
        <meta charset="UTF-8">
        <title>Modulo Iscrizione</title>
  
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</script>  
<style type="text/css"> 
    #areaTitolo{
   width:100%;
   height:100px;
   position:absolute;
   top:0px;
   left:5px;
   text-align: center;
  }
 
 #area img{
 width:20px;
 height:20px;
 position:relative;
 bottom:40px;
 left:180px;
}

#div {
    
position:absolute;
top: 70px;    
} 
.dxsel {
margin: 0;
padding: 18px ;

float: right;
text-align: right;
} </style>
        
    </head>
    <body>
    <!-- Sistema sulla stessa riga dove viene visualizzata la data attuale il titolo dela pagina -->
    
    <div id="areaTitolo"> <h3> BENVENUTI NEL MODULI D'ISCRIZIONE </h3>
        
        <hr>
    </div>
<!--Neccessario per posizionare i campi dopo il tag hr che disegna una riga orizzontale -->    
   
<div id ="div">
     
       <!-- Inizia il modulo vero e proprio dell'iscrizione -->
   <form action='<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>' method='POST'>
   
       <!--Neccessario per posizionare i campi dopo il tag hr che disegna una riga orizzontale -->    

Cognome: <input type ="text" id="input1" name="cognome" /><div id="controllo1"><img src="" /></div> 

Nome: <input type ="text" id="input2" name="nome" /><div id="controllo2"><img src="" /></div> 

<label for="nascita">Data di nascita: <type = id="input3" name="nascita" /><div id="controllo3"><img src="" /></div> </label>

Username: <input type ="text" id="input4" name="username" /><div id="controllo4"><img src="" /></div> 
  
Password: <input type ="password" id="input5" name="password" /><div id="controllo5"><img src="" /></div> 

Ripeti - Password: <input type ="rippass" id="input6" name="password" /><div id="controllo6"><img src="" /></div> 

E-Mail: <input type ="text" id="input7" name="email" /><div id="controllo7"><img src="" /></div> 

Ripeti - Email: <input type ="text" id="input8" name="ripemail" /><div id="controllo8"><img src="" /></div> 
  
<label for="citta">Seleziona Città: <type = id="input9" name="citta" /><div id="controllo9"><img src="" /></div> </label>


<div id ="dxsel">
 <select id="citta" name="citta">
 <!-- Inizio elenco città -->
        <option value=””>-- Seleziona Citta --</option>
        <option value=””></option>       

<option>Agrigento</option>
<option>Alessandria</option>
<option>Ancona</option>
<option>Aosta</option>

     </select> 
 </div>


<label for="prov">Seleziona Provincia: <type = id="input10" name="prov" /><div id="controllo10"><img src="" /></div> </label>

<select id="provincia" name="provincia">

        <!--Inizio elenco provincia -->

        <option value=””>-- Seleziona Provincia --</option>
        <option value=””></option>    

<option value=”">Ag</option>
<option>Al</option>
<option>An</option>
<option>Ao</option>
<option>Ar</option>


    </select> 

</div> <!--Chiude il div di posizionamento subito dopo la riga-->
        <?php
        require_once("connettimysqli.php");
        require_once("data.php");
 if (!isset($_POST['submit'])) {   
     
 //Giorno

               echo "<select name=\"giorno\" id='giorno' required autofocus><option value=\"\">Seleziona</option>";
                echo "<option value=\"\">  </option>";
               for($gg=1; $gg<=31; $gg++){
                for($gg=1; $gg<=31; $gg++){
               echo sprintf("<option value=\"%02d\"> %02d </option>\n", $gg, $gg);
            }
          }
          echo "</select>";
//Mese

             echo '<select name="mesi" id="mese" required autofocus><option value="">Seleziona</option>';
            echo "<option value=\"\">  </option>";

             $mesi = array (
               "1" => "Gennaio",
              "2" => "Febbbraio",
                "3" => "Marzo",
               "4" => "Aprile",
                "5" => "Maggio",
               "6" => "Giugno",
               "7" => "Luglio",
               "8" => "Agosto",
               "9" => "Settembre",
                "10" => "Ottobre",
                "11" => "Novembre",
               "12" => "Dicembre",
             );
            foreach( $mesi as $m => $mese ){
               echo "<option value=\"$m\">{$mesi[$m]}</option>";
             }
             echo"</select>";
            
            
             //Anno

            $da=1950;
            $al=date('Y');
            echo '<select name="anno" id="anno" required autofocus><option value="">Seleziona</option>';
            echo "<option value=\"\">  </option>";
            for($aa=$da; $aa<=$al; $aa++){
            echo "<option value=\"$aa\"> $aa </option>";
            }
            echo "</select>" ;
     
     
 }  //chiude l'if del submit

    
        ?>
 </div>
    
 </div>
</form>
    </body>
</html>

E questo è quello che si vede:

http://s23.postimg.org/6cjnuroh7/Modulo_Iscrizione.png

Mi potresti dare una mano per favore ???? Ah a proposito, anche i selettori giorno/mese/anno sono posizionati male. Grazie

**saitfainder** · 24-10-2014, 10.26.17

Cos'è quel tag <type> tutto rotto dopo "Seleziona provincia"?

24-10-2014, 11.22.22

Confesso avevo provatoo a fare una cosa ma mi sono accorto che non andava :P Quindi niente come mi debbo comportare con le seguenti targhette:

Codice:

Cognome: <input type ="text" id="input1" name="cognome" /><div id="controllo1"><img src="" /></div> //Questa mi servirà in futuro per visualizzare l'icona della "V" o della "X"

Codice:

E quest'altra come debbo sistemarla per avere lo stesso effetto della prima considerando che per la data ci sono tre select giorno/mese/anno

<label for="citta">Seleziona Città: <type = id="input9" name="citta" /><div id="controllo9"><img src="" /></div> </label>

Grazie spero che mi potrai aiutare :P

24-10-2014, 15.00.45

Ciao saitfainder,

Allora ho apportato qualche modifica vorrei se è possibile mi dessi un'occhiata e spiegarmi una cosa. Questo quanto ho modificato ancora da sistemare qualcosina:

Codice PHP:






<style type="text/css"> 

    #areaTitolo{

   width:100%;

   height:100px;

   position:absolute;

   top:0px;

   left:5px;

   text-align: center;

  }

 

 #area img{

 width:20px;

 height:20px;

 position:relative;

 bottom:40px;

 left:180px;

}



#div {

    

position:absolute;

top: 70px;    

} 

#dxselcit {

margin: 0px;

position: absolute;

top: 250px;

padding: 105px;

float: right;

text-align: right;

} 

#dxselpro {

margin: 0px;

position: absolute;

top: 260px;

padding: 138px;

float: right;

text-align: right;

} 

</style>

        

    </head>

    <body>

    <!-- Sistema sulla stessa riga dove viene visualizzata la data attuale il titolo dela pagina -->

    

    <div id="areaTitolo"> <h3> BENVENUTI NEL MODULI D'ISCRIZIONE </h3>

        

        <hr>

    </div>

<!--Neccessario per posizionare i campi dopo il tag hr che disegna una riga orizzontale -->    

   

<div id ="div">

     

       <!-- Inizia il modulo vero e proprio dell'iscrizione -->

   <form action='<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>' method='POST'>

   

       <!--Neccessario per posizionare i campi dopo il tag hr che disegna una riga orizzontale -->    



Cognome: <input type ="text" id="input1" name="cognome" /><div id="controllo1"><img src="" /></div> 



Nome: <input type ="text" id="input2" name="nome" /><div id="controllo2"><img src="" /></div> 



<label for="nascita">Data di nascita: <type = id="input3" name="nascita" /><div id="controllo3"><img src="" /></div> </label>



Username: <input type ="text" id="input4" name="username" /><div id="controllo4"><img src="" /></div> 

  

Password: <input type ="password" id="input5" name="password" /><div id="controllo5"><img src="" /></div> 



Ripeti - Password: <input type ="rippass" id="input6" name="password" /><div id="controllo6"><img src="" /></div> 



E-Mail: <input type ="text" id="input7" name="email" /><div id="controllo7"><img src="" /></div> 



Ripeti - Email: <input type ="text" id="input8" name="ripemail" /><div id="controllo8"><img src="" /></div> 

  

<label for="citta">Seleziona Città: <type = id="input9" name="citta" /><div id="controllo9"><img src="" /></div> </label>





<div id ="dxselcit">

 <select id="citta" name="citta">

 <!-- Inizio elenco città -->

        <option value=””>-- Seleziona Citta --</option>

        <option value=””></option>       



<option>Agrigento</option>

<option>Alessandria</option>

<option>Ancona</option>

<option>Aosta</option>





     </select> 

 </div>





<label for="prov">Seleziona Provincia: <type = id="input10" name="prov" /><div id="controllo10"><img src="" /></div> </label>





<div id ="dxselpro">



<select id="provincia" name="provincia">



        <!--Inizio elenco provincia -->



        <option value=””>-- Seleziona Provincia --</option>

        <option value=””></option>    



<option>Ag</option>

<option>Al</option>

<option>An</option>

<option>Ao</option>



    </select> 

</p> </p>

</div> <!--Chiude il div di posizionamento subito dopo la riga-->

        <?php

        require_once("connettimysqli.php");

        require_once("data.php");

 if (!isset($_POST['submit'])) {   

     

 //Giorno



               echo "<select name=\"giorno\" id='giorno' required autofocus><option value=\"\">Seleziona</option>";

                echo "<option value=\"\">  </option>";

               for($gg=1; $gg<=31; $gg++){

                for($gg=1; $gg<=31; $gg++){

               echo sprintf("<option value=\"%02d\"> %02d </option>\n", $gg, $gg);

            }

          }

          echo "</select>";

//Mese



             echo '<select name="mesi" id="mese" required autofocus><option value="">Seleziona</option>';

            echo "<option value=\"\">  </option>";



             $mesi = array (

               "1" => "Gennaio",

              "2" => "Febbbraio",

                "3" => "Marzo",

               "4" => "Aprile",

                "5" => "Maggio",

               "6" => "Giugno",

               "7" => "Luglio",

               "8" => "Agosto",

               "9" => "Settembre",

                "10" => "Ottobre",

                "11" => "Novembre",

               "12" => "Dicembre",

             );

            foreach( $mesi as $m => $mese ){

               echo "<option value=\"$m\">{$mesi[$m]}</option>";

             }

             echo"</select>";

            

            

             //Anno



            $da=1950;

            $al=date('Y');

            echo '<select name="anno" id="anno" required autofocus><option value="">Seleziona</option>';

            echo "<option value=\"\">  </option>";

            for($aa=$da; $aa<=$al; $aa++){

            echo "<option value=\"$aa\"> $aa </option>";

            }

            echo "</select>" ;

     

     

 }  //chiude l'if del submit



    

        ?>

 </div>

    

 </div>

</form>

    </body>

</html>

Come potrai notare nello style ho messo due classi: uno per la città e uno per la provincia. Ora quello della città senza la provincia funziona magnificamente, se clicco sulla freccetta appare l'elenco delle città. Se metto invece la classe della provincia non mi funziona più la selezione della città così è per le tre selezioni delle date che ancora non ho sistemato. Perchè accade questo ???? Questo è come appare:

http://s28.postimg.org/69s0vnwh9/Mod...izione_mod.png

Spero di ricevere dei chiarimenti, grazie.

Discussione: problema: la select della città mi va a fondo pagina invece di stare a fianco

LinkBack

Strumenti discussione

Display

problema: la select della città mi va a fondo pagina invece di stare a fianco

problema: la select della città mi va a fondo pagina invece di stare a fianco

Regole di scrittura