Posizionamento di input

**Valeria89** · 21-09-2015, 13:30

Buongiorno a tutti, per posizionare le mie caselle di input su un immagine faccio in questo modo:

codice HTML:

<center><div style="background-image: url(./images/i1.png); height: 450px; width: 950px; border: 1px solid black;">
    <input name="f" type="text" id="f" style="margin-top:12px; margin-bottom:0px; margin-left:-320px; margin-right:0px; border: 2px solid red;"><br> 
    <input name="e" type="text" id="e" style="margin-top:80px; margin-bottom:0px; margin-left:-395px; margin-right:0px; border: 2px solid red;"><br> 
    <input name="i" type="text" id="i" style="margin-top:212px; margin-bottom:0px; margin-left:-240px; margin-right:0px; border: 2px solid red;"> 
    <input name="l" type="text" id="l" style="margin-top: 0px; margin-bottom:0px; margin-left:-30px; margin-right:0px; border: 2px solid red;"><br> 
    <input name="m" type="text" id="m" style="margin-top:0px; margin-bottom:0px; margin-left:460px; margin-right:100px; border: 2px solid red;">
    <input name="j" type="text" id="j" style="margin-top:0px; margin-bottom:0px; margin-left:5px; margin-right:10px; border: 2px solid red;"> 
    <input name="h" type="text" id="h" style="margin-top:5px; margin-bottom:0px; margin-left:260px; margin-right:0px; border: 2px solid red;"><br> 
   </div></center>

Come faccio a posizionare i miei input in una posizione fissa, cioè in modo che la posizione non cambi se apro la pagina da un altro computer.

**carlomarangoni** · 21-09-2015, 15:49

Tu vuoi che rimanga fisso il div o gli input sull'immagine?
invece di:
<center><div......>
è meglio
<div align="center"....>

**Valeria89** · 21-09-2015, 16:35

Originariamente inviata da carlomarangoni

Tu vuoi che rimanga fisso il div o gli input sull'immagine?
invece di:
<center><div......>
è meglio
<div align="center"....>

Voglio fissi gli input.

**KillerWorm** · 21-09-2015, 16:50

Ciao, credo che il problema sia fondamentalmente nel metodo che stai usando.

Come faccio a posizionare i miei input in una posizione fissa, cioè in modo che la posizione non cambi se apro la pagina da un altro computer.

Il computer non c'entra niente. Più che altro si può parlare di browser e di come rendere il codice cross-browser, cioè che non cambi l'impaginazione a seconda del browser in cui viene visualizzata la pagina.

Devi tener presente che ogni browser, per vari aspetti, può interpretare a proprio modo le regole css.
Senza entrare in un discorso tecnico, posso giusto dirti che il metodo che stai usando, nel posizionare gli elementi impostandone i "margin", è soggetto alla diversa interpretazione dei browser, oltre che essere comunque poco adeguato per ciò che intendi fare.

In questo caso sarebbe meglio applicare il "position" ed impostare le proprietà "top" e "left" di ogni elemento.

Inoltre sarebbe più pratico spostare il css nell'head della pagina per evitare la ridondanza che invece hai se lo applichi in-linea sui singoli tag.

Ti posto un esempio completo:

codice:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta charset="utf-8">
    <style type="text/css">
      #inputbox{
        background-image: url(image.jpg);
        height: 450px;
        width: 950px;
        border: 1px solid black;
        position: relative;
      }
      #inputbox>input{
        border: 2px solid red;
        position: absolute;
      }
      #f{ top: 12px; left: 240px; }
      #e{ top: 114px; left: 203px; }
      #i{ top: 348px; left: 219px; }
      #l{ top: 348px; left: 342px; }
      #m{ top: 370px; left: 497px; }
      #j{ top: 370px; left: 755px; }
      #h{ top: 397px; left: 530px; }
    </style>
  </head>
  <body>
    <center>
      <div id="inputbox">
        <input name="f" id="f" value="f">
        <input name="e" id="e" value="e">
        <input name="i" id="i" value="i">
        <input name="l" id="l" value="l">
        <input name="m" id="m" value="m">
        <input name="j" id="j" value="j">
        <input name="h" id="h" value="h">
      </div>
    </center>
  </body>
</html>

Chiaramente l'esatto posizionamento lo conosci solo tu, quindi, se dovesse servire, ti basterà aggiustare i valori "top" e "left" dei singoli elementi, tenendo presente che ognuno di quei valori fa riferimento (in modo assoluto) al sistema di coordinate (chiamiamolo così) il cui punto d'origine è esattamente l'angolo alto-sinistro del div contenitore.

I "value" li ho messi giusto per individuare meglio gli elementi, ovviamente potrai eliminarli una volta che non ti servono più.

Se qualcosa non ti è chiaro, puoi chiedere tranquillamente.

**Valeria89** · 21-09-2015, 17:02

Originariamente inviata da KillerWorm

Ciao, credo che il problema sia fondamentalmente nel metodo che stai usando.

Grazie mille, sei stato gentilissimo.

Discussione: Posizionamento di input

Strumenti discussione

Ricerca discussione

Visualizza

Posizionamento di input

Permessi di invio