Problema CSS in Form Contatti

Andre7890

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:
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.
 
Jonn ha scritto:
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.
Clicca per allargare...

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
 
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)
 
borgo italia ha scritto:
ciao
prova a guardare questo
Clicca per allargare...
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.. )

borgo italia ha scritto:
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)
Clicca per allargare...
Per quanto riguarda maiuscole e minuscole hai ragione è che sono abituato male :)

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

Andrea
 
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
 
borgo italia ha scritto:
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
Clicca per allargare...

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
 
Andre7890 ha scritto:
...non riesco a farlo sia con il comando inline-height sia con il vertical align...
Clicca per allargare...

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.
 
Devi accedere o registrarti per poter rispondere.

Discussioni simili

Emix
Problema con creazione form css/mobile
Risposte
3
Visite
1K
HTML e CSS
Emix
Emix
S
Problema con Form CSS
Risposte
1
Visite
1K
HTML e CSS
Max 1
Max 1
L
problema collegamento file css con html
Risposte
1
Visite
1K
HTML e CSS
WEBLEADERS
W
S
problema con css bootstrap3
Risposte
4
Visite
2K
HTML e CSS
ninja72
N
F
[Javascript] Problema funzione jquery con elementi css esterni
Risposte
1
Visite
2K
Javascript
criric
criric
A
[WordPress] Problema CSS con diversi browser
Risposte
4
Visite
2K
WordPress
antoni9
A
berry94mf
Problema con include e css
Risposte
1
Visite
1K
PHP
filomeni
filomeni
V
Problema Rollover con css
Risposte
1
Visite
2K
HTML e CSS
filomeni
filomeni
M
problema con media query CSS
Risposte
1
Visite
3K
HTML e CSS
Soulfearor
S
D
Problema collegamento file css con html
Risposte
4
Visite
4K
HTML e CSS
glm1986ITALY
glm1986ITALY
S
Problema con il css di un font
Risposte
2
Visite
1K
HTML e CSS
selvaggia
S
S
Problema tabella datatables a causa dei css
Risposte
3
Visite
2K
HTML e CSS
Bedo
B
P
Problema sovrapposizione di css
Risposte
1
Visite
2K
HTML e CSS
criric
criric
A
Problema gestione layout con css
Risposte
11
Visite
3K
HTML e CSS
Ania81
A
F
problema con sfondo CSS
Risposte
2
Visite
2K
HTML e CSS
faxhouse
F
C
Problema con il CSS per il comando text-align
Risposte
10
Visite
3K
HTML e CSS
cavaliere123
C
M
css html problema con explorer help
Risposte
0
Visite
1K
HTML e CSS
marcochecco
M
G
problema con css
Risposte
9
Visite
3K
PHP
geggiamarti
G
novello88
Problema stampa CSS [Era: CSS print]
Risposte
1
Visite
1K
HTML e CSS
borgo italia
borgo italia
B
problema css
Risposte
3
Visite
2K
HTML e CSS
Web Italia
Web Italia
Alto Basso