Problema con creazione form css/mobile

Emix

Utente Attivo
15 Feb 2010
596
0
16
Buonasera,
ho un form per i campi di ricerca di un noleggio auto. Ho rifatto il form ed adattato lato mobile.
Ora il problema è che il form non gli va bene come l'ho fatto io ma lo vogliono come l'immagine che allego.

Non riesco a farlo identico.. mi si sfalzano i campi oppure lato mobile sono tutti per i cavoli loro.. Mi riuscite ad aiutare?

Sono molto semplici ci sono due select 3 campi text (1 per data a cui applico il datapicker e due per orario) un submit e un altro select... Mi occorre farlo come da foto e renderlo identico lato mobile... anche, come ho pensato di fare, usando due tabelle all'interno di una per centrare il tutto mobile...

Grazie a chi volesse aiutarmi... PS non badate ai colori va benissimo bianco...
 

Allegati

  • esempio.jpg
    esempio.jpg
    32,2 KB · Visite: 150

Emix

Utente Attivo
15 Feb 2010
596
0
16
Certamente. Il form attualmente è suddiviso in DIV ma vorrei passare il tutto in TABLE per comodità, ho tentato ma non ho ottenuto granchè.

HTML:
<style>
@media screen and (max-width: 600px) {
table {width:100%;}
thead {display: none;}
tbody td {display: block;  text-align:center;}
tbody td:before {
    content: attr(data-th);
    display: block;
    text-align:center; 
  }
}
hr.style-one {display:none}
</style>
<h1> <font color="white">NOLEGGIA LA TUA AUTO</font></h1>
<link rel="stylesheet" href="edilfar.css" type="text/css" />
<div>
<div class="vrcdivsearch vrcdivsearchmodule">
<form action="calculator.php" method="post">
    <div class="vrcsfentrycont"><label>Stazione di ritiro</label><div class="vrcsfentryselect">
      <select name="stazionerit">
        <option value="" select="selected">Scegli l’agenzia di ritiro</option>
        <optgroup label="ROMA">
          <option value="ROMA ">ROMA</option>
          <option value="ROMA">ROMA</option>
          <option value="ROMA">ROMA</option>
          <option value="ROMA">ROMA</option>
          <option value="ROMA">ROMA</option>
          <option value="ROMA">ROMA</option>
          <option value="ROMA">ROMA</option>
          <option value="ROMA">ROMA</option>
          </optgroup>
        <optgroup label="MILANO">
          <option value="MILANO">MILANO</option>
          <option value="MILANO">MILANO</option>
          <option value="MILANO">MILANO</option>
          <option value="MILANO">MILANO</option>
          </optgroup>
      </select>
    </div></div>
    <div class="vrcsfentrycont"><label>Stazione di consegna</label><div class="vrcsfentryselect">
    <select name="stazionecons">
<option value="" select="selected">Scegli l’agenzia di consegna</option>
<optgroup label="ROMA">
          <option value="ROMA ">ROMA</option>
          <option value="ROMA">ROMA</option>
          <option value="ROMA">ROMA</option>
          <option value="ROMA">ROMA</option>
          <option value="ROMA">ROMA</option>
          <option value="ROMA">ROMA</option>
          <option value="ROMA">ROMA</option>
          <option value="ROMA">ROMA</option>
          </optgroup>
        <optgroup label="MILANO">
          <option value="MILANO">MILANO</option>
          <option value="MILANO">MILANO</option>
          <option value="MILANO">MILANO</option>
          <option value="MILANO">MILANO</option>
          </optgroup>
      </select>
    </div></div>
<div class="vrcsfentrycont"><div class="vrcsfentrylabsel"><label>Data ritiro</label><div class="vrcsfentrydate"><input type="text" class="hasDatepicker" name="datarit" id="datarit" value=""/></div></div><div class="vrcsfentrytime"><label>Ora ritiro</label><span id="vrcmodselph"><select name="pickuph"><option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
</select></span><span class="vrctimesep">:</span><span id="vrcmodselpm"><select name="pickupm"><option value="00" selected="selected">00</option>
<option value="15">15</option>
<option value="30">30</option>
<option value="45">45</option>
</select></span></div></div>
<div class="vrcsfentrycont"><div class="vrcsfentrylabsel"><label>Data consegna</label><div class="vrcsfentrydate"><input type="text" class="hasDatepicker" name="datacons" id="datacons" value=""/></div></div><div class="vrcsfentrytime"><label>Ora consegna</label><span id="vrcmodseldh"><select name="releaseh"><option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
</select></span><span class="vrctimesep">:</span><span id="vrcmodseldm"><select name="releasem"><option value="00" selected="selected">00</option>
<option value="15">15</option>
<option value="30">30</option>
<option value="45">45</option>
</select></span></div></div>
<div class="vrcsfentrycont"><label>Eta conducente</label><div class="vrcsfentryselect"><select name="eta"><option value="1" selected="selected">Maggiore 24 anni</option>
<option value="0">Minore 24 anni</option>
</select></div></div>
    <div class="vrcsfentrycont"><div class="vrcsfentrysubmit"><input type="submit" name="search" class="vrcsearch" value="Cerca"/></div></div>
    </form>
</div>
</div>

Questo invece il CSS che sto usando, è preso da un app/tema che usavo tempo fa, mi serviva qualcosa di gia pronto rounded... posso tranquillamente cambiarlo tutto.

Codice:
.vrcdivsearchmodule {
    background:#f5ac2d;
    border-radius:4px;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    width:95%;
    border:0;
    padding: 0;
}
.vrcdivsearchmodule .vrcsfentrycont {
    margin: 0 0 10px 0;
    display: inline-block;
    min-width: 70%;
    width: 100%;
}
.vrcdivsearch .vrcsfentrycont select,
.vrcdivsearch .vrcsfentrycont input {
    font-size: 11px;
    text-transform: uppercase;
}
.vrcdivsearchmodule .vrcsfentrycont .vrcsfentrydate .hasDatepicker {
    background:#fff url(icone/calendar-ext.png) 90% center no-repeat;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    padding:3px 6px;
    height: 24px;
    width: 80%;
    border:1px solid #ccc;
    float: left;
    margin: 0 10px 0 0;
}
.vrcdivsearchmodule .vrcsfentrycont .vrcsfentrydate .ui-datepicker-trigger {
    display: none;
}
.vrcdivsearchmodule .vrcsfentryselect {
    background: #fff url(icone/select-arrow.png) right center no-repeat;
    overflow: hidden;
    min-width: 70%;
    width: 92%;
    border: 1px solid #ccc;
       border-radius: 4px;
   -moz-border-radius: 4px;
   -webkit-border-radius: 4px;
}
.vrcdivsearchmodule .vrcsfentryselect select {
    background: transparent;
    padding: 7px 5px 0;
    font-size: 12px !important;
    line-height: 1;
    border:0;
    border-radius: 0;
    height: 30px;
    -webkit-a5ppearance: none;
    width: 120%;
    color:#999;
}
.vrcdivsearchmodule .vrcsfentrycont #vrcmodselph,
.vrcdivsearchmodule .vrcsfentrycont #vrcmodselpm,
.vrcdivsearchmodule .vrcsfentrycont #vrcmodseldh,
.vrcdivsearchmodule .vrcsfentrycont #vrcmodseldm {
    background: #fff url(icone/select-arrow-hour.png) right center no-repeat;
    overflow: hidden;
    display: inline-block;
    border: 1px solid #ccc;
       border-radius: 4px;
   -moz-border-radius: 4px;
   -webkit-border-radius: 4px;
   float: left;
   min-width:30%;
}
.vrcdivsearchmodule .vrcsfentrycont .vrctimesep {
    display: inline-block;
    padding: 5px;
    float: left;
}
.vrcdivsearchmodule .vrcsfentrycont #vrcmodselph select,
.vrcdivsearchmodule .vrcsfentrycont #vrcmodselpm select,
.vrcdivsearchmodule .vrcsfentrycont #vrcmodseldh select,
.vrcdivsearchmodule .vrcsfentrycont #vrcmodseldm select {
    background: transparent;
    padding: 7px 5px 0;
    font-size: 12px !important;
    line-height: 1;
    border:0;
    border-radius: 0;
    height: 30px;
    -webkit-a5ppearance: none;
    width: 145%;
    color:#999;
}
.vrcdivsearch .vrcsfentrycont label {
    display: inline-block;
    margin: 0 5px 0 0;
    width: 100%;
}
.vrcdivsearch .vrcsfentrycont .vrcsfentrylabsel {
    width: 33%;
    float: left;
}
.vrcdivsearchmodule .vrcsfentrycont .vrcsfentrytime {
    float: left;
    width: 50%;
    margin: 0 0 0 41px;
}
.vrcdivsearch .vrcsfentrylabsel label {
    float: left;
}
.vrcdivsearch .vrcsfentrylabsel .vrcsfentrydate {
    
}
.vrcdivsearch .vrcsfentrycont div {
    display: inline-block;
}
.vrcdivsearchmodule .vrcsfentrysubmit {
    width: 100%;
}
.vrcdivsearchmodule .vrcsfentrysubmit .vrcsearch {
    width: 93%;
}


purtroppo mi viene molto distante dall'esempio in foto... io sono un programmatore php, diciamo che il CSS lo mastico ma non ne capisco granchè... Grazie a chi vorra aiutarmi.
 
Discussioni simili
Autore Titolo Forum Risposte Data
C [PHP] Problema con creazione csv PHP 3
C Problema con creazione array PHP 7
R Problema con la creazione file PHP 2
P Problema creazione form con ajax PHP 1
L problema creazione query con campo float PHP 2
F Problema formattazione data e creazione array con nuove date Javascript 2
L problema creazione template con guida mrwebmaster.it WordPress 0
G Problema con la creazione di una tabella form PHP 9
LaKanka Problema creazione thumb solo con alcune immagini PHP 5
H Problema creazione sitemap con A1 sitemap generator Web Server 1
Danilo82 Problema con sito web in fase di creazione HTML e CSS 3
S problema con recupero dati tabella mysql PHP 2
Z Problema con il mio tp-l i nk Reti LAN e Wireless 0
L Problema RAM con Tomcat 8 Apache 0
napuleone problema con sort e asort PHP 4
Z Problema con INT MySQL PHP 1
Z Problema database MySQL con XAMPP PHP 0
M Problema con controllo form in real time jQuery 6
Z Problema di sincronizzazione PAYPAL con PHP PHP 1
G Problema con Get page PHP 4
P Problema con require once PHP 6
P Problema con i package Java 1
A Problema login con Safari PHP 14
F INDESIGN: problema esportazione esecutivo per la stampa con foto B/N Webdesign e Grafica 0
S problema con css bootstrap3 HTML e CSS 4
M .load() problema con caricamenti dinamici di js Javascript 0
G Problema ------- con Query PHP 1
G Problema con Query PHP 1
T problema con select dinamica con jquery Javascript 0
S Problema con spazi bianchi HTML e CSS 4
A PROBLEMA: insert mysqli con dati Tagsinput Presentati al Forum 0
Tommy03 Problema con z-index HTML e CSS 3
M Problema inserimento parole con apostrofo nel db PHP 5
C Problema con dati meteo xml XML 1
S Problema con infrarossi videocamera IP Cam e Videosorveglianza 1
V Problema con librerie allegro5 c++ C/C++ 1
M Problema con php per calcolo costo percentuale PHP 7
S Problema con mysqli_num_rows PHP 18
grgfede Problema javascript con aruba Javascript 1
M Problema con visibility e radio button Javascript 2
Marti1! Problema con casella mail cancellata Posta Elettronica 3
L [PHP] Problema con Telegram PHP 1
tomorc [HTML] Problema con scroll bar (risolto) HTML e CSS 0
S Strano problema con i title su Google SEO e Posizionamento 3
P [ASP.Net] Problema ERR_INCOMPLETE_CHUNKED_ENCODING 206 (Partial Content) con Font ASP.NET 4
P [HTML] Problema ERR_INCOMPLETE_CHUNKED_ENCODING 206 (Partial Content) con Font HTML e CSS 1
N [Apache] problema con estensione php Apache 0
C [PHP] Problema con download file PHP 0
M [PHP] Problema con preg_match PHP 1
gandalf1959 [PHP] problema con l'utilizzo di Header PHP 3

Discussioni simili