[CSS] Problemino con i settaggi di una form

D4rkAng3l · 06-03-2008, 18:37

Ciao,
se andate a questo indirizzo: http://www.siatec.net/andrea/archivi...2/contact.html
potete vedere che ho qualche problema con i settaggi del ccs di un form per inviare le e-mail in quanto il tasto invia appare sulla destra e invece vorrei che apparisse sotto accanto al tasto cancella. Come posso risolvere? mi date una mano?

Il codice HTML è:

Codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Andrea Montepaone</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="description goes here" />
<meta name="keywords" content="keywords,goes,here" />
<link rel="stylesheet" href="default.css" type="text/css" />
<!--[if IE]><link rel="stylesheet" href="ie.css" type="text/css" /><![endif]-->
<script type="text/javascript">
    var GB_ROOT_DIR = "http://www.siatec.net/andrea/archivio/andreamontepaone2/greybox/greybox/";
</script>
<script type="text/javascript" src="greybox/greybox/AJS.js"></script>
<script type="text/javascript" src="greybox/greybox/AJS_fx.js"></script>
<script type="text/javascript" src="greybox/greybox/gb_scripts.js"></script>
<link href="greybox/greybox/gb_styles.css" rel="stylesheet" type="text/css" />
<!--[if IE]><link rel="stylesheet" href="ie.css" type="text/css" /><![endif]-->
<script type="text/javascript">
    var GB_ROOT_DIR = "http://www.siatec.net/andrea/archivio/andreamontepaone2/greybox/greybox/";
</script>
<script type="text/javascript" src="greybox/greybox/AJS.js"></script>
<script type="text/javascript" src="greybox/greybox/AJS_fx.js"></script>
<script type="text/javascript" src="greybox/greybox/gb_scripts.js"></script>
<link href="greybox/greybox/gb_styles.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="sidebar">
<h1>Andrea Montepaone</h1>
<h2>Pianista e Compositore</h2>

<div id="menu">
<a href="index.html">Biografia</a>
<a href="#">Discografia</a> 
<a href="#">Colonne Sonore</a> 
<a href="#">Musiche di Scena</a> 
<a href="#">Musica Sacra</a> 
<a href="#">Rassegna Stampa</a>
<a href="galleria.html">Photogallery</a>
<a href="#">Prossimi Appuntamenti</a>
<a class="active" href="#">Contatti</a>
</div>

<h3>Citando Baricco:</h3>
<p>Ora tu pensa: un pianoforte. I tasti iniziano. I tasti finiscono. Tu sai che sono 88, su questo nessuno può fregarti. Non sono infiniti, loro. Tu, sei infinito, e dentro quei tasti, infinita è la musica che puoi fare. Loro sono 88. Tu sei infinito...</p>

</div>

<div id="content">
  <div id="header"></div>

<h3>Contatti:</h3>

<div>
    <form method="get" action="send.php">
	<div>
        <label class="etichetta" for="nomemittente">Tuo nome e cognome:</label>
        <br />
        <input type="text" name="nomemittente" class="insert" />
        <br /><br />
        <label class="etichetta" for="emailmittente">La tua e-mail:</label>
        <br />
        <div><input type="text" name="emailmittente" class="insert" /></div>

        <br /><br />
        <label class="etichetta" >Oggetto:</label>
        <br />
        <input type="text" name="oggetto" class="insert" />
        <br /><br />
        <label class="etichetta" for="corpomessaggio">Messaggio:</label>
        <br />
        <textarea name="corpomesaggio" rows="7" cols="70" class="testo"></textarea>

        <p>
        <input type="submit" value="Invia" class="pulsante" /> 
        <input type="reset" value="cancella" class="pulsante" />
        </p>
     </div>
     </form>
</div>


</div>
</body>
</html>

Mentre il codice CSS è (solo l'ultima parte interessa la form ma lo posto tutto...non si sa mai)

Codice:

/**************** Page and tag styles ****************/

body
{margin:0; padding:0; color:#303030; background:#fafafa url(img/bodybg.gif) top left repeat-y; font:76% Verdana,Tahoma,sans-serif;}

ul
{list-style:circle; margin:15px 0 20px 0; font-size:0.9em;}

li
{margin:0 0 8px 25px;}

a
{color:#d85d5d; font-weight:bold; text-decoration:none;}

a:hover
{color:#505050; text-decoration:underline;}

img
{float:left; margin:0 15px 15px 0; padding:1px; background:#ffffff; border:1px solid #d0d0d0;}

a img
{border-color:#d0d0d0;}

a img:hover
{background:#d85d5d; border-color:#d85d5d;}

/**************** Sidebar area styles ****************/

#sidebar
{position:absolute; top:0; left:0; width:220px;  overflow:auto; background:#e0e0e0 url(img/sidebarbg.gif) top right repeat-y; text-align:right;}

body > #sidebar
{position:fixed;}

#sidebar h1
{margin:20px 18px 0 5px; color:#d85d5d; font-size:1.6em; letter-spacing:-2px; text-align:right;}

#sidebar h2, #sidebar h3
{margin:0 20px 18px 5px; color:#808080; font-size:1.1em; font-weight:bold; letter-spacing:-1px; text-align:right;}

#sidebar h3
{margin:20px 18px 4px 5px; color:#606060;}

#sidebar  p
{margin:0 20px 18px 5px; color:#606060; font-size:0.8em;}

#sidebar a
{color:#808080}

/**************** Navigation menu styles ****************/

#menu a
{display:block; width:202px; padding:5px 18px 5px 0; color:#606060; background:#e0e0e0 url(img/sidebarbg.gif) top right repeat-y; font-size:1.8em; font-weight:normal; text-decoration:none; letter-spacing:-2px;}

#menu a:hover 
{color:#303030; background:#f0f0f0 url(img/sidebarbg.gif) top right repeat-y;}

#menu a.active
{padding:5px 18px 5px 0; background:#fafafa; border-top:2px solid #c0c0c0; border-bottom:2px solid #c0c0c0;}

#menu a.active:hover
{color:#505050; background:#fafafa;}

/**************** Content area styles ****************/

#content{
    width: 520px; 
	margin: 0 0 0 240px; 
	padding: 20px 0; 
	background:#fafafa;
	text-align: center;
}

#header{
   margin: 0 auto;
   width: 512px;
   height: 200px;
   background-image:url(img/piano.jpg);
   border:3px solid #d0d0d0;
  
}

#content p{
    margin: 0 0 20px 0; 
	line-height: 1.6em;
	text-align: justify;
}

#content h1
{margin:0; color:#d85d5d; font-size:4em; letter-spacing:-5px; text-align:center;}

#content h2
{margin:0; color:#808080; font-weight:normal; font-size:2.5em; letter-spacing:-2px; text-align:center;}

#content h3
{clear:both; margin:30px 0 10px 0; color:#d85d5d; font-weight:normal; font-size: 2.1em; letter-spacing:-2px;}

.left {
margin: 10px 10px 5px 0;
float: left;
}

.right {
margin: 10px 0 5px 10px;
float: right;
}


/************************ Stile della galleria delle immagini ************************/
p.galleria_light{
    line-height: 0px;
}

div#gal{
width: 450px;
margin: 0 auto;
padding: 0;

}
    

img.orizzontali{
     width: 200px;
	 height: 150px;
}

img.verticali{
     width: 129px;
	 height: 177px;
}

/* Stile del form dei contatti */

.insert{
    font: bold 12px Arial, Helvetica, sans-serif;
    color: #000000;
	background: #CCCCCC;
	border: 1px solid #000000;
	float: left;
	
}

.testo{
    font: bold 12px Arial, Helvetica, sans-serif;
    color: #000000;
	background: #CCCCCC;
	border: 1px solid #000000;
	float: left;
	
}

.pulsante{
    font: bold 12px Arial, Helvetica, sans-serif;
    color: #000000;
    background: #CCCCCC;


	border: 1px solid #000000;
}

.etichetta{
float:left;
}

Grazie
Andrea

D4rkAng3l · 06-03-2008, 19:58

ops tra l'altro avevo sbagliato a postare il link della pagina che presenta il problema...qualcuno ha qualche idea? mi sono proprio impallato

thehuge · 06-03-2008, 21:13

La soluzione più veloce è sostituire

Codice:

   <p>
      <input type="submit" value="Invia" class="pulsante" /> 
      <input type="reset" value="cancella" class="pulsante" />
   </p>
   </div>

con

Codice:

   </div>
   <p>
      <input type="submit" value="Invia" class="pulsante" /> 
      <input type="reset" value="cancella" class="pulsante" />
   </p>

06-03-2008, 19:58	#2
D4rkAng3l Bannato Iscritto dal: Mar 2004 Città: Roma Messaggi: 2688	ops tra l'altro avevo sbagliato a postare il link della pagina che presenta il problema...qualcuno ha qualche idea? mi sono proprio impallato

Strumenti
Mostra una versione stampabile Invia questa pagina per email