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

paperinik4

Utente Attivo
29 Mag 2011
1.811
0
36
Roma
www.ricetteagogo.it
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

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.
 
Ciao dal tuo listato mi sembra di vedere la chiusura del tag form ma non la sua apertura.
poi perchè usi quei tag p messi così per creare uno spazio vuoto esiste il tag <br/> e il tutto deve essere racchiuso tra i tag <body>..........</body>
HTML:
<html>
<head>
</head>
<body>

<div class="form">
    <form metod="post" action="#">
        <label>   Cognome:</label><input type ="text" id="input1" name="cognome"/><span id="controllo1"><img src="" /></span><br/>
        <label>   Nome:</label><input type ="text" id="input2" name="nome/><span id="controllo2"><img src="" /></span><br/> <!-- e così via per ogni campo -->
        ...........
       ..............
<input type="submit" name="invia" value="invia"/><!--questo serve per inviare i dati del form allo script php --->
    </form>

</div>
</body>
</html>
 
Ciao grazie per la risposta. Sapevo che i Tag Br erano deprecabile e che per creare una riga vuota era meglio adoperare i Tag p che andavano a capo. Il Tag forma mi sembra che ci sia all'inizio peró posso ricordare male. Stamattina verificherà. Grazie per adesso.
 
Ciao migo80,

Volevo sapere una cosa, ma secondo te è necessario mettere ogni classe per posizionare l'ogetto come ho fatto io ???? Oppure c'è un metodo più elegante che superata la riga mi vanno tutti giù sotto la riga ???? Mi sono accorto ora che i div citta e il nome della select coincidevano. modificato il nome del div da citta a cit è ritornato tutto alla normalià. Difatti la lista sta a fianco alla città come doveva essere. Inoltre avevi ragione non avevo aperto il form all'inizio. Grazie dell'aiuto. Il post si può chiudere con un risolto.
 
Ultima modifica:
Scusa ma non riesco a capire cosa intendi a quali oggetti ti riferisci? per quanto riguarda il br ho ricontrollato e non è deprecato....
 
Ciao migo80,

Strano sui manuali consigliano di adoperare il tag <p> per lasciare una riga il tag <br> dovrebbe servire per andare a capo. Comunque sia, quello che mi riferivo è questo style che ora ti riposto:

Codice:
<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>

Come potrai vedere ogni targhetta è provvista di un suo tag e una sua distanza, altrimenti me la posiziona sopra in alto a sx del monitor. Comuqque mi sono accorto anche di un'altro errore. Ogni etichetta che ho fatto (copia e incolla modificando il nome dell'etichetta), non mi sono accorto di questo piccolo errore qua:

Codice:
name="nome/

Ossia in tutte le etichette hanno lo stesso name. Ora dopo che me ne sono accorto, le ho modificati tutti con i loro nomi ma mi si è crearo il panico nella pagina. devo capire il perchè.
 
Se ricrei il form seguendo le indicazioni che ti avevo dato, tutto quel css non ti serve.... anche perchè dando il position absolute questi elementi si andranno a posizionare in maniera assoluta rispetto al primo contenitore con pisition relative "in sua assenza, per default sarà l'area del browser e di conseguenza si andranno a posizionare in alto a sinistra.
 

Discussioni simili