Il float non mi allinea gli elementi correttamente

**American** · 08-02-2013, 19:33

Ho una semplice pagina con due elementi che vorrei fossero posizionati uno di fianco a l'altro. Nonostante il codice mi sembri concettualmente esatto, la pagina viene renderizzata in malo modo, col secondo elemento (quello celeste) posizionato una riga sotto il primo

ecco l'immagine

Questo il codice

Codice PHP:




<style type="text/css">







form 

{

    

    background-color:#996600;

    width:30%;



    float:left;       

    font:"Arial Black", Gadget, sans-serif;

    color:#FFF

}



#risultati 

{

    width:70%;

    background-color:#0099FF;

    font:"Arial Black", Gadget, sans-serif;

    color:#FFF;

    float:left;      



}





    



</style>



</head>



<body>







<form action"">

 <label>Inserisci ragione sociale</label>

   <input name="chiave" onkeyup="showHint(this.value)"/>

 

 

</form>



<p id="risultati">Risultati: <span id="txtHint"></span></p>

Altra cosa: se tolgo il float dal secondo elemento, l'allineamento verticale si corregge, tuttavia sorge un altro problema, ovvero, che il background del secondo elemento (quello celeste) anziché iniziare dove finisce il primo elemento, inizia dalla sinistra estrema del browser (occupata dall'elemento marrone) e viene quindi coperto dal primo elemento. Stranamente la scritta "risultati" risulta posizionata correttamente, il problema affligge solo il background

**Prill** · 08-02-2013, 20:28

Copiando e incollando il tuo codice il paragrafo appare sì più in basso, ma ciò dipende dai suoi margini di default. Nel tuo css non viene interpretato neanche il font e hai inoltre saltato un = nel tag form. Prova ora:

codice:

<style type="text/css">

form {
    background-color:#996600;
    width:30%;
    float:left;       
    font-family:"Arial Black", Gadget, sans-serif;
    color:#FFF;
}

#risultati {
    width:60%;
    background-color:#0099FF;
    font-family:"Arial Black", Gadget, sans-serif;
    color:#FFF;
    float:left;
    margin:0;
}

</style>
</head>

<body>

<form action="">
 <label>Inserisci ragione sociale</label>
   <input name="chiave" onkeyup="showHint(this.value)"/>
 
</form>

<p id="risultati">Risultati: <span id="txtHint"></span></p>

ma: i due elementi flottanti invece che lasciarli "sfusi" nel body sarebbe meglio racchiuderli in un div. Inoltre con le dimensioni in percentuale, a risoluzioni basse o con la finestra ridotta, label e campo si dispongono su due righe

**American** · 08-02-2013, 20:47

è vero, mancava l'uguale ad ogni modo il problema sembra essere proprio il margin

ma perchè di default il appariva una riga sotto? Se non lo specifico, non è sottinteso che il margin è 0?

Per il resto ho fatto come mi hai suggerito, ovvero, mettere tutto all'interno di un div, ma si presenta il secondo tipo di problema, ovvero, che il background del secondo elemento parte dall'estrema sinistra del browser, mentre dovrebbe partire nel punto in cui finisce il primo elemento (come d'altronde accade col testo "Risultati").

**Prill** · 08-02-2013, 22:03

il background del secondo elemento, coi due elementi flottanti, parte lì dove finisce il primo (se elimini il background sul form sarà evidente).
La sfasatura è invece nell'altezza dei due elementi, ma a questo si puòp ovviare regolando opportunamente margini padding e altezza

aggiungo: no di default il margine superiore e inferiore sono pari ad alcuni pixel (e con margini e padding i browser non si comportano allo stesso modo, sarebbe perciò consigliabile azzerarli su tutti gli elementi, ed è possibile farlo con il selettore universale:
* {margin:0; padding:0;}
ripristinandoli poi dove servano coi valori voluti, garantendosi così una resa uniforme sui diversi browser)

**American** · 08-02-2013, 22:14

scusa se insisto, ma così come sta il codice ti assicuro che il background parte dalla siistra estrema del browser e me ne sono accorto, oltre che per il fatto che non riempie la restante parte della pagina non occupata dal primo elemento, anche come hai detto tu, togliendo il background del form

ecco un'immagine

**Prill** · 08-02-2013, 22:30

ti rimetto tutto il codice e lo screenshot (stessa resa sui tutti i browser)

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento senza titolo</title>
<style type="text/css">

form {
    background-color:#996600;
    width:30%;
    float:left;       
    font-family:"Arial Black", Gadget, sans-serif;
    color:#FFF;
				height:30px
}

#risultati {
    width:70%;
    background-color:#0099FF;
    font-family:"Arial Black", Gadget, sans-serif;
    color:#FFF;
    float:left;
    margin:0;
}

</style>
</head>

<body>

<form action="">
 <label>Inserisci ragione sociale</label>
   <input name="chiave" onkeyup="showHint(this.value)"/>
 
</form>

<p id="risultati">Risultati: <span id="txtHint"></span></p>

</body>
</html>

resta che devi assegnare al form almeno una larghezza minima in pixel atta a contenere l'etichetta e il campo perché altrimenti con la finestra ridotta si dispongono su due righe e si sballa tutto, e lo stesso dovresti fare col paragrafo a destra

**American** · 08-02-2013, 22:40

Bhe come l'hai impostato tu funziona, ma io nel frattempo ho creato un "contenitore" con all'interno il form e i risultati come mi hai suggerito

Se io nelle proprietà del "contenitore" metto "float:left", non significa che tutti gli elementi innestati ad esso devono essere predisposti uno di fianco a l'altro? Perchè devo ripetere il float:left per ogni elemento?

Codice PHP:


<html>

<head>

<title>Cerca Ragione Sociale</title>



<style type="text/css">







form 

{

    

    background-color:#996600;

    width:30%;

    font-family:"Arial Black", Gadget, sans-serif;

    color:#FFF;

    float:left;

    height:30px

}



#risultati 

{

    width:70%;

    background-color:#0099FF;

    font-family:"Arial Black", Gadget, sans-serif;

    color:#FFF;

    margin:0;

}





#container 

{

    width:100%;

    float:left;

}



    



</style>



</head>



<body>



<div id="container">



  <form action="">

   <label>Inserisci ragione sociale</label>

     <input name="chiave" onKeyUp="showHint(this.value)"/>

   

   

  </form>

  

  <p id="risultati">Risultati: <span id="txtHint"></span></p> 



</div>





<script> 

function showHint(str)

{

    var xmlhttp;

    if (str.length==0) //se non è stato inserito alcun valore

    { 

      document.getElementById("txtHint").innerHTML="";

      return;

    }

    

    if (window.XMLHttpRequest)// code for IE7+, Firefox, Chrome, Opera, Safari

      {xmlhttp=new XMLHttpRequest();}

    else // code for IE6, IE5

    {xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}

    

    xmlhttp.onreadystatechange=function()

   {

      if (xmlhttp.readyState==4 && xmlhttp.status==200)

      {document.getElementById("txtHint").innerHTML=xmlhttp.responseText;}

   }

    

    xmlhttp.open("GET","cerca_ragione_sociale.asp?chiave="+str,true);

    xmlhttp.send();

}

</script>





</body>

</html>

scusa se sono un po' ottuso

**Prill** · 08-02-2013, 22:54

scusa, nel codice che ti ho messo il form aveva un'altezza che va tolta, nella prova stavo mettendo un'altezza sia per il form che per il pargrafo ma poi non avevo completato.
Non avevo aggiunto il container ma non cambia nulla aggiungendo quello, per il quale non è necessario il float.
Se hai due elementi da affiancare puoi usare il float a sinistra su tutti e due, oppure per il primo un float a sinistra e per l'altro un float a destra, o ancora fare flottare il primo e non il secondo al quale però sarà da aggiungere un margine sinistro pari alla larghezza del div che è disposto alla sua sinistra (altrimenti vi sarebbe una sovrapposizione)

Discussione: Il float non mi allinea gli elementi correttamente

Strumenti discussione

Ricerca discussione

Visualizza

Il float non mi allinea gli elementi correttamente

Permessi di invio