[CSS] Problemino con i settaggi di una form [Archivio]

D4rkAng3l

06-03-2008, 17:37

Ciao,
se andate a questo indirizzo: http://www.siatec.net/andrea/archivio/andreamontepaone2/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 è:

<!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" />

<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" />

<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)

/**************** 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, 18: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, 20:13

La soluzione più veloce è sostituire
<p>
<input type="submit" value="Invia" class="pulsante" />
<input type="reset" value="cancella" class="pulsante" />
</p>
</div>

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