Problema CSS in Form Contatti

Andre7890

Nuovo Utente
6 Lug 2013
5
0
0
Buonasera a tutti.

Intanto grazie per aver creato un "luogo", seppur virtuale dopo poter chiedere assistenza e scambiare idee.

Vi chiedo aiuto per il seguente problema: (premettendo che di html so q.b. tendente al poco, e di CSS peggio. :) )

Sto creando un sito che comprende il Modulo Contatti.

Avrei bisogno di una mano con la struttura dello stesso in quanto adesso mi si presenta così:

9225040806_18d7ddc627_o.jpg


Vorrei riuscire a mettere il menù di selezione in linea con le altre colonne oltretutto cambiandone lo stile così che appaia più simile alle altre.
E poi staccare (con la stessa distanza) i due pulsanti finali.. E' possibile?

Vi posto il codice:


HTML:
<body>
<form action="invioform.php" method="post" class="contact-form margin-tb-10" name="form1" id="form1" onsubmit="YY_checkform('form1','Nome','#q','0','Il campo \'Nome\' è obbligatorio.','Cognome','#q','0','Il campo \'Cognome\' è obbligatorio.','Email','#S','2','Il campo \'E-Mail\' è obbligatorio. Inserire un indirizzo mail valido.','Ricezione','#q','1','Il campo \'Gradirei Ricevere\' è obbligatorio. Selezionare un\'opzione.');return document.MM_returnValue">
  <table width="357" border="1">
    <tr>
      <input type="text" class="gray-box-input comment-text contact-short" name="Nome" placeholder="Nome *"; />
    </tr>
    <tr>
      
      <input type="text" class="gray-box-input comment-text contact-short" name="Cognome" placeholder="Cognome *"; />
    </tr>
    <tr>
      <input type="text" class="gray-box-input comment-text contact-short" name="Azienda" placeholder="Azienda"; />
    </tr>
    <tr>
      <input type="text" class="gray-box-input comment-text contact-short" name="Email" placeholder="E-mail *"; />
    </tr>
    <tr>
      <input type="text" class="gray-box-input comment-text contact-short" name="Indirizzo" placeholder="Indirizzo *"; />
    </tr>
    <tr>
      <input type="text" class="gray-box-input comment-text contact-short" name="Citta" placeholder="Città"; />
    </tr>
    <tr>
      <input type="text" class="gray-box-input comment-text contact-short" name="Telefono" placeholder="Telefono"; />
    </tr>
    <tr>
      <input type="text" class="gray-box-input comment-text contact-short" name="Fax" placeholder="Fax"; />
    </tr>
    <tr>
      <label for="Ricezione"></label>
        <select name="Ricezione" id="Ricezione">
          <option value="Seleziona" selected="selected">Seleziona</option>
          <option value="Preventivo">Preventivo</option>
          <option value="Informazioni">Informazioni</option>
      </select>
    </tr>
    <tr>
      <textarea name="Commenti" id="Commenti" class="comment-textarea contact-textarea" placeholder="Inserisci qui il testo";></textarea>
    </tr>
    <tr>
      <td><input class="gray-box-submit background-color" type="reset" name="Reset" id="Reset" value="Reset"; /></td>
      <td><input class="gray-box-submit background-color" type="submit" name="Invia" id="Invia" value="Invia"; /></td>
    </tr>
  </table>
</form>
</body>


Vi ringrazio per l'attenzione e spero riusciate ad aiutarmi! :)

Andrea
 
Ultima modifica di un moderatore:

Jonn

Utente Attivo
29 Dic 2012
352
3
18
Pistoia
Secondo me è sbagliato tutto perchè non ci hai messo le TD
TR serve per dire al browser che è finita la riga della tabella.

Io metterei ogni INPUT e da LABEL (compreso) fino a SELECT (compreso) dentro dei TD, in questo modo secondo me il menu a cascata si posiziona da solo sotto le altre voci.

Per quanto riguarda lo stile se non sbaglio è esattamente come in input, basta che gli dai un ID o una classe e lo tratti come se fosse un div.
 

Andre7890

Nuovo Utente
6 Lug 2013
5
0
0
Secondo me è sbagliato tutto perchè non ci hai messo le TD
TR serve per dire al browser che è finita la riga della tabella.

Io metterei ogni INPUT e da LABEL (compreso) fino a SELECT (compreso) dentro dei TD, in questo modo secondo me il menu a cascata si posiziona da solo sotto le altre voci.

Per quanto riguarda lo stile se non sbaglio è esattamente come in input, basta che gli dai un ID o una classe e lo tratti come se fosse un div.

Alla fine ce l'ho fatta. :)
Grazie mille.

Vorrei chiederti inoltre se hai idea di come rendere "stilisticamente" in linea con il resto del form la voce "seleziona".
Ora mi si presenta così:

9225040806_ef4cb9d458_o.jpg


Vorrei che ogni selezione avesse lo stesso aspetto, ed inoltre, non riesco a centrare il testo nella casella.

Grazie ancora per l'aiuto!!

Andrea
 

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.046
150
63
PR
www.borgo-italia.it
ciao
prova a guardare questo
HTML:
<body>
<form action="invioform.php" method="post" class="contact-form margin-tb-10" name="form1" id="form1" onsubmit="YY_checkform('form1','Nome','#q','0','Il campo \'Nome\' è obbligatorio.','Cognome','#q','0','Il campo \'Cognome\' è obbligatorio.','Email','#S','2','Il campo \'E-Mail\' è obbligatorio. Inserire un indirizzo mail valido.','Ricezione','#q','1','Il campo \'Gradirei Ricevere\' è obbligatorio. Selezionare un\'opzione.');return document.MM_returnValue">
  <table width="475" border="1" >
    <tr>
      <td width="94"><label for="Nome">Nome</label></td>
	  <td width="184">
	  <input type="text" class="gray-box-input comment-text contact-short" name="Nome" placeholder="Nome *"; />
	  </td>
	  <td width="225" rowspan="9" align="center"><label for="Ricezione">richiesta</label>
		<select name="Ricezione" id="Ricezione">
          <option value="Seleziona" selected="selected">Seleziona</option>
          <option value="Preventivo">Preventivo</option>
          <option value="Informazioni">Informazioni</option>
      	</select>
	  </td>
    </tr>
    <tr>
      <td><label for="Cognome">Cognome</label></td>
      <td>
	  <input type="text" class="gray-box-input comment-text contact-short" name="Cognome" placeholder="Cognome *"; />
	  </td>
    </tr>
    <tr><label for="Azienda">Azienda</label>
      <td><label for="Azienda">Azienda</label></td>
	  <td>
	  <input type="text" class="gray-box-input comment-text contact-short" name="Azienda" placeholder="Azienda"; />
	  </td>
    </tr>
    <tr>
      <td><label for="Email">Email</label></td>
	  <td>
	  <input type="text" class="gray-box-input comment-text contact-short" name="Email" placeholder="E-mail *"; />
	  </td>
    </tr>
    <tr>
      <td><label for="Indirizzo">Indirizzo</label></td>
	  <td>
	  <input type="text" class="gray-box-input comment-text contact-short" name="Indirizzo" placeholder="Indirizzo *"; />
	  </td>
    </tr>
    <tr>
      <td><label for="Citta">Citt&agrave;</label></td>
	  <td>
	  <input type="text" class="gray-box-input comment-text contact-short" name="Citta" placeholder="Citt&agrave;"; />
	  </td>
    </tr>
    <tr>
      <td><label for="Telefono">Telefono</label></td>
	  <td><input type="text" class="gray-box-input comment-text contact-short" name="Telefono" placeholder="Telefono"; />
	  </td>
    </tr>
    <tr>
      <td><label for="Fax">Fax</label></td>
	  <td>
	  <input type="text" class="gray-box-input comment-text contact-short" name="Fax" placeholder="Fax"; />
	  </td>
    </tr>
    <tr>
      <td><label for="Commenti">Commenti</label></td>
	  <td>
	  <textarea name="Commenti" id="Commenti" class="comment-textarea contact-textarea" placeholder="Inserisci qui il testo";></textarea>
	  </td>
    </tr>
    <tr>
      <td><input class="gray-box-submit background-color" type="reset" name="Reset" id="Reset" value="Reset"; /></td>
	  <td>&nbsp;</td>
      <td align="right"><input class="gray-box-submit background-color" type="submit" name="Invia" id="Invia" value="Invia"; /></td>
    </tr>
  </table>
</form>
</body>
una cosa:
come te la cavi con php o altro linguaggio dinamico per poi processare i dati del form? tra l'altro ti conviene fare la pagina con l'estenzione dinamica (non .html) perchè convine fare la verifica e il processo dei dati in un'unica pagina
e un consiglio: metti i name tutto minuscolo, poi quei name ti serviranno per fare lo script che verifica e processa il form usare le maiuscole è fonte di errori

p.s.
quando posti il codice usa i tag di formattazione (seconda riga di formattazione del post ultime tre iconcine, nell'ordine CODE, HTML, PHP)
 

Andre7890

Nuovo Utente
6 Lug 2013
5
0
0
ciao
prova a guardare questo
Ciao e grazie per l'interessamento!!
Non funziona. Sto modificando un template quindi ho anche quel problema :p
Tutto è in ordine ora, solo, come noti dalla immagine precedente, non riesco a centrare il testo all'interno del dropdown.
E vorrei fare in modo che tutte le opzioni del dropdown abbiano lo stesso stile (al momento solo la prima opzione ce l'ha il resto è come se non avesse regole css.. )

una cosa:
come te la cavi con php o altro linguaggio dinamico per poi processare i dati del form? tra l'altro ti conviene fare la pagina con l'estenzione dinamica (non .html) perchè convine fare la verifica e il processo dei dati in un'unica pagina
e un consiglio: metti i name tutto minuscolo, poi quei name ti serviranno per fare lo script che verifica e processa il form usare le maiuscole è fonte di errori

p.s.
quando posti il codice usa i tag di formattazione (seconda riga di formattazione del post ultime tre iconcine, nell'ordine CODE, HTML, PHP)
Per quanto riguarda maiuscole e minuscole hai ragione è che sono abituato male :)

Da ora in avanti l'utilizzerò, chiedo venia :)

Andrea
 

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.046
150
63
PR
www.borgo-italia.it
ciao
se non ho capito male vuoi che il testo della select sia centrato, giusto?
gli affibbi una classe con i css
HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Documento senza titolo</title>
<style type="text/css">
.op{text-align:center;}
</style>
<!--
opure puoi scrivere senza dare la classe
option{text-align:center;}
in tal caso nelle option non serve mettere class="op"
-->
</head>
<body>
<form action="" method="post">
<!-- ...... -->
	<select name="ricezione" id="Ricezione">
		<option value="" selected="selected" class="op">Seleziona</option>
		<option value="preventivo" class="op">Preventivo</option>
		<option value="informazioni" class="op">Informazioni</option>
	</select>
<!-- ...... -->
</form>
</body>
</html>
non mi ero accorto prima nell'option con Seleziona conviene che il value sia vuoto, serve poi per verificare se l'utente ha selezionato o no
 

Andre7890

Nuovo Utente
6 Lug 2013
5
0
0
ciao
se non ho capito male vuoi che il testo della select sia centrato, giusto?
gli affibbi una classe con i css
HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Documento senza titolo</title>
<style type="text/css">
.op{text-align:center;}
</style>
<!--
opure puoi scrivere senza dare la classe
option{text-align:center;}
in tal caso nelle option non serve mettere class="op"
-->
</head>
<body>
<form action="" method="post">
<!-- ...... -->
	<select name="ricezione" id="Ricezione">
		<option value="" selected="selected" class="op">Seleziona</option>
		<option value="preventivo" class="op">Preventivo</option>
		<option value="informazioni" class="op">Informazioni</option>
	</select>
<!-- ...... -->
</form>
</body>
</html>
non mi ero accorto prima nell'option con Seleziona conviene che il value sia vuoto, serve poi per verificare se l'utente ha selezionato o no

Ancora grazie, il tuo suggerimento mi ha portato a comprendere parzialmente cosa non andava (non sapevo si potessero assegnare le classi anche alle opzioni).
Intendevo però, l'allineamento verticale, non riesco a farlo sia con il comando inline-height sia con il vertical align.
Ulteriori suggerimenti? :)

Andrea
 

Jonn

Utente Attivo
29 Dic 2012
352
3
18
Pistoia
Andre7890 ha scritto:
...non riesco a farlo sia con il comando inline-height sia con il vertical align...

Con il comando inline-height non ci riesci di sicuro visto che non esiste neanche.

In ogni caso aggiungi ad input una classe nella quale inserisci un padding: 10px;

Mettendo il padding ti conviene anche togliere la dichiarazione width ed height in modo che le dimensioni dei pulsanti siano automatiche.

Per quanto riguarda il discorso delle classi CSS ricordati che puoi applicarle a qualunque tag html esistente, anche se a seconda dei selettori possono funzionare o meno anche a seconda se il tag html supporta la regola CSS.
 
Discussioni simili
Autore Titolo Forum Risposte Data
Emix Problema con creazione form css/mobile HTML e CSS 3
S Problema con Form CSS HTML e CSS 1
L problema collegamento file css con html HTML e CSS 1
S problema con css bootstrap3 HTML e CSS 4
F [Javascript] Problema funzione jquery con elementi css esterni Javascript 1
A [WordPress] Problema CSS con diversi browser WordPress 4
berry94mf Problema con include e css PHP 1
V Problema Rollover con css HTML e CSS 1
M problema con media query CSS HTML e CSS 1
D Problema collegamento file css con html HTML e CSS 4
S Problema con il css di un font HTML e CSS 2
S Problema tabella datatables a causa dei css HTML e CSS 3
P Problema sovrapposizione di css HTML e CSS 1
A Problema gestione layout con css HTML e CSS 11
F problema con sfondo CSS HTML e CSS 2
C Problema con il CSS per il comando text-align HTML e CSS 10
M css html problema con explorer help HTML e CSS 0
G problema con css PHP 9
novello88 Problema stampa CSS [Era: CSS print] HTML e CSS 1
B problema css HTML e CSS 3
B Problema di inserimento "menu con css" in pagina web "con tabelle" HTML e CSS 5
M Problema con css HTML e CSS 3
M problema css con ie8! help HTML e CSS 0
K problema con current css HTML e CSS 0
M Problema CSS e IE HTML e CSS 0
L problema con menù css HTML e CSS 1
T problema con i css ... explorer visualizza male... HTML e CSS 2
I Problema con i CSS su diversi browser HTML e CSS 3
I Problema compatibilità CSS HTML e CSS 1
I Problema CSS! HTML e CSS 3
M [Firefox/CSS] Problema immagine di sfondo centrata HTML e CSS 1
D problema css solo su chrome HTML e CSS 3
F CSS e IE problema HTML e CSS 0
S Problema con CSS IE 7 e XP HTML e CSS 2
O problema menu tendina css HTML e CSS 1
E [Problema] CSS su IE HTML e CSS 6
M Problema CSS nei widget con sfondo sfumato HTML e CSS 0
R Problema con i css in standard mode HTML e CSS 3
N [PHP+HTML+CSS] Problema con un div HTML e CSS 4
R problema con il css dei link HTML e CSS 2
S Piccolo problema con i CSS HTML e CSS 2
I Problema CSS con joomla e phpbb [Era: joomla e phpbb] Joomla 2
G Css, problema margine con explorer HTML e CSS 0
T problema Doctype css e anchor links(credo) HTML e CSS 0
T problema css e firefox HTML e CSS 0
F [CSS] Problema con IE e div fixed HTML e CSS 2
C problema strano css HTML e CSS 5
gladenko CSS e DIV problema di dimensionamento HTML e CSS 3
G Problema coi colori di un menu CSS HTML e CSS 3
R Problema con pop-pu in css HTML e CSS 4

Discussioni simili