Dreamweaver - Problema con la posición de la tabla del formulario

   
Vista:

Problema con la posición de la tabla del formulario

Publicado por jennifer (4 intervenciones) el 17/10/2015 00:44:45
AYUDA URGENTE!

Estoy haciendo un formulario de contacto en mi página web, pero cuando la previsualizo la tabla aparece muy abajo. No he podido configurar las márgenes de esta. NO SE MUEVE. Si alguien me puede ayudar, le agradezco mucho.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
-1
Responder
Imágen de perfil de xve

Problema con la posición de la tabla del formulario

Publicado por xve (334 intervenciones) el 17/10/2015 09:14:10
Hola Jennifer, la verdad es que no se muy bien como te podemos ayudar... nos puedes mostrar el código y una imagen de como queda?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Problema con la posición de la tabla del formulario

Publicado por jennifer (4 intervenciones) el 17/10/2015 15:39:01
ESTE ES EL CODIGO HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!doctype html>
<html><!-- InstanceBegin template="/Templates/plantilla.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<!-- InstanceBeginEditable name="doctitle" -->
<meta charset="utf-8">
<title>Documento sin título</title>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="head" -->
<script src="../SpryAssets/SpryValidationTextField.js" type="text/javascript"></script>
<script src="../SpryAssets/SpryValidationTextarea.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css">
<link href="../SpryAssets/SpryValidationTextarea.css" rel="stylesheet" type="text/css">
<!-- InstanceEndEditable -->
<link href="../css/estilodepagina.css" rel="stylesheet" type="text/css">
<style type="text/css">
body {
	background-image: url(../imagenes/fondometal.png);
}
body,td,th {
	font-family: Tahoma, Geneva, sans-serif;
}
</style>
<!--[if lte IE 7]>
<style>
.content { margin-right: -1px; } /* este margen negativo de 1 px puede situarse en cualquiera de las columnas de este diseño con el mismo efecto corrector. */
ul.nav a { zoom: 1; }  /* la propiedad de zoom da a IE el desencadenante hasLayout que necesita para corregir el espacio en blanco extra existente entre los vínculos */
</style>
<![endif]-->
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
 
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
 
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
</head>
 
<body onLoad="MM_preloadImages('../imagenes/iniciob.png','../imagenes/clientesb.png','../imagenes/contactob.png','../imagenes/quienessomosb.png','../imagenes/ofrecemosb.png')">
 
<div class="container">
  <div class="header"><img src="../imagenes/logo provisional.png" width="645" height="186"><!-- end .header -->
<div class="sidebar1">
    <ul class="nav">
      <li><a href="../index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('inicio','','../imagenes/iniciob.png',1)"><img src="../imagenes/inicio.png" name="inicio" width="207" height="45" id="inicio"></a></li>
      <li><a href="../paginas/quienessomos.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('quienessomos','','../imagenes/quienessomosb.png',1)"><img src="../imagenes/quienessomos.png" name="quienessomos" width="208" height="45" id="quienessomos"></a></li>
      <li><a href="../paginas/loqueofrecemos.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('queofrecemos','','../imagenes/ofrecemosb.png',1)"><img src="../imagenes/ofrecemos.png" width="208" height="45" id="queofrecemos"></a></li>
      <li><a href="../paginas/nuestrosclientes.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('clientes','','../imagenes/clientesb.png',1)"><img src="../imagenes/clientes.png" name="clientes" width="208" height="45" id="clientes"></a></li>
      <li><a href="../paginas/contacto.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('contacto','','../imagenes/contactob.png',1)"><img src="../imagenes/contacto.png" name="contacto" width="208" height="45" id="contacto"></a></li>
    </ul>
    <!-- end .sidebar1 -->/div>
<!-- InstanceBeginEditable name="EditRegion3" -->
<div class= "content">
 
  <form name="form1" method="post" action="">
    <table width="600" border="0">
      <tr>
        <td width="207" height="50">NOMBRE:</td>
        <td width="377"><span id="sprytextfield1">
        <label for="nombre"></label>
        <input type="text" name="nombre" id="nombre">
        <span class="textfieldMinCharsMsg">No se cumple el mínimo de caracteres requerido.</span><span class="textfieldMaxCharsMsg">Se ha superado el número máximo de caracteres.</span><span class="textfieldRequiredMsg">Se necesita un valor.</span></span></td>
      </tr>
      <tr>
        <td height="55">CIUDAD:</td>
        <td><span id="sprytextfield2">
        <label for="ciudad"></label>
        <input type="text" name="ciudad" id="ciudad">
        <span class="textfieldMinCharsMsg">No se cumple el mínimo de caracteres requerido.</span><span class="textfieldMaxCharsMsg">Se ha superado el número máximo de caracteres.</span><span class="textfieldRequiredMsg">Se necesita un valor.</span></span></td>
      </tr>
      <tr>
        <td height="55">E-MAIL:</td>
        <td><span id="sprytextfield3">
        <label for="email"></label>
        <input type="text" name="email" id="email">
        <span class="textfieldInvalidFormatMsg">Formato no válido.</span><span class="textfieldRequiredMsg">Se necesita un valor.</span></span></td>
      </tr>
      <tr>
        <td height="69">MENSAJE:</td>
        <td><span id="sprytextarea1">
        <label for="mensaje"></label>
        <textarea name="mensaje" id="mensaje" cols="45" rows="5"></textarea>
        <span id="countsprytextarea1">&nbsp;</span><span class="textareaMinCharsMsg">No se cumple el mínimo de caracteres requerido.</span><span class="textareaMaxCharsMsg">Se ha superado el número máximo de caracteres.</span></span></td>
      </tr>
      <tr>
        <td height="72">&nbsp;</td>
        <td><input type="submit" name="enviar" id="enviar" value="Enviar"></td>
      </tr>
    </table>
  </form>
  </div>
  <!-- end .content -->
<!-- end .container -->
<script type="text/javascript">
var sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1", "none", {minChars:3, maxChars:30});
var sprytextfield2 = new Spry.Widget.ValidationTextField("sprytextfield2", "none", {minChars:4, maxChars:30});
var sprytextfield3 = new Spry.Widget.ValidationTextField("sprytextfield3", "email");
var sprytextarea1 = new Spry.Widget.ValidationTextarea("sprytextarea1", {minChars:30, maxChars:550, isRequired:false, counterType:"chars_remaining", counterId:"countsprytextarea1"});
</script>
<!-- InstanceEndEditable -->
  <div class="footer">
    <h5>CARRERA 38 No 51B 06 SUR B. FATIMA TEL: 3143816676<br>
      TALLER CALLE 66 No 65A 84 B. ISLA DEL SOL<br>
    E-MAIL luisalfedolopezt@hotmail.com  </h5>
    <h5>Todos los derechos reservados © </h5>
    <!-- end .footer -->/div>
</body>
<!-- InstanceEnd --></html>

Y ESTE EL CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
@charset "utf-8";+
body {
	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
	color: #000;
	background-image: url(../imagenes/fondometal.png);
	background-repeat: repeat;
	height: 100%;
}
 
 
/* ~~ Selectores de elemento/etiqueta ~~ */
ul, ol, dl { /* Debido a las diferencias existentes entre los navegadores, es recomendable no añadir relleno ni márgenes en las listas. Para lograr coherencia, puede especificar las cantidades deseadas aquí o en los elementos de lista (LI, DT, DD) que contienen. Recuerde que lo que haga aquí se aplicará e
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	 /* la eliminación del margen superior resuelve un problema que origina que los márgenes escapen de la etiqueta div contenedora. El margen inferior restante lo mantendrá separado de los elementos de que le sigan. */
	padding-right: 15px;
	padding-left: 15px; /* la adición de relleno a los lados del elemento dentro de las divs, en lugar de en las divs propiamente dichas, elimina todas las matemáticas de modelo de cuadro. Una div anidada con relleno lateral también puede usarse como método alternativo. */
	font-size: 100%;
	text-align: justify;
	color: #000033;
	font-weight: bold;
	font-family: Tahoma, Geneva, sans-serif;
	list-style-type:none
}
a img { /* este selector elimina el borde azul predeterminado que se muestra en algunos navegadores alrededor de una imagen cuando está rodeada por un vínculo */
	border: none;
}
 
/* ~~ La aplicación de estilo a los vínculos del sitio debe permanecer en este orden (incluido el grupo de selectores que crea el efecto hover -paso por encima-). ~~ */
a:link {
	text-decoration: underline; /* a no ser que aplique estilos a los vínculos para que tengan un aspecto muy exclusivo, es recomendable proporcionar subrayados para facilitar una identificación visual rápida */
}
a:visited {
	color: #4E5869;
	text-decoration: underline;
}
a:hover, a:active, a:focus { /* este grupo de selectores proporcionará a un usuario que navegue mediante el teclado la misma experiencia de hover (paso por encima) que experimenta un usuario que emplea un ratón. */
	text-decoration: none;
}
 
/* ~~ este contenedor rodea a todas las demás divs, lo que les asigna su anchura basada en porcentaje ~~ */
.container {
	width: 100%;
	max-width: 2060px;/* puede que sea conveniente una anchura máxima (max-width) para evitar que este diseño sea demasiado ancho en un monitor grande. Esto mantiene una longitud de línea más legible. IE6 no respeta esta declaración. */
	min-width: 780px;
	min-height: 100%;
	margin: 20; /* el valor automático de los lados, unido a la anchura, centra el diseño. No es necesario si establece la anchura de .container en el 100%. */
	background-image: none;
	bottom: -30%;
	height: 100%;
	overflow: hidden;
}
 
/* ~~ no se asigna una anchura al encabezado. Se extenderá por toda la anchura del diseño. Contiene un marcador de posición de imagen que debe sustituirse por su propio logotipo vinculado ~~ */
.header {
	background-image: none;
 
}
 
/* ~~ Estas son las columnas para el diseño. ~~ 

1) El relleno sólo se sitúa en la parte superior y/o inferior de las divs. Los elementos situados dentro de estas divs tienen relleno a los lados. Esto le ahorra las "matemáticas de modelo de cuadro". Recuerde que si añade relleno o borde lateral a la div propiamente dicha, éste se añadirá a la anchura que defina para crear la anchura *total*. También puede optar por eliminar el relleno del elemento en la div y colocar una segunda div dentro de ésta sin anchura y el relleno necesario para el diseño deseado.

2) No se asigna margen a las columnas, ya que todas ellas son flotantes. Si es preciso añadir un margen, evite colocarlo en el lado hacia el que se produce la flotación (por ejemplo: un margen derecho en una div configurada para flotar hacia la derecha). En muchas ocasiones, puede usarse relleno como alternativa. En el caso de divs para las que deba incumplirse esta regla, deberá añadir una declaración "display:inline" a la regla de la div para evitar un error que provoca que algunas versiones de Internet Explorer dupliquen el margen.

3) Dado que las clases se pueden usar varias veces en un documento (y que también se pueden aplicar varias clases a un elemento), se ha asignado a las columnas nombres de clases en lugar de ID. Por ejemplo, dos divs de barra lateral podrían apilarse si fuera necesario. Si lo prefiere, éstas pueden cambiarse a ID fácilmente, siempre y cuando las utilice una sola vez por documento.

4) Si prefiere que la navegación esté a la derecha en lugar de a la izquierda, simplemente haga que estas columnas floten en dirección opuesta (todas a la derecha en lugar de todas a la izquierda) y éstas se representarán en orden inverso. No es necesario mover las divs por el código fuente HTML.

*/
.sidebar1 {
	float: left;
	width: 20%;
	padding-bottom: 10px;
	margin-top: 20px;
	margin-bottom: 20px;
}
.content {
	width: 600px;
	position: relative;
	margin-bottom: 50px;
	margin-top: 30px;
	margin-left: 230px;
	font-weight: bold;
	background-image: url(../imagenes/contenido.png);
	font-size: 100%;
	padding-top: 0px;
}
.table {
	top: -20px;
	padding-top: -100px;
}
.footer {
	background-image: url(../imagenes/pie.png);
	width: 1350px;
	padding-left: 10px;
	margin-top: 50px;
	height: 130px;
	position: relative;
	padding-top: 10px;
.footer h5 {
	text-align: center;
}
strong {
	color: #002687;
	font-size: 150%;
	margin-left: 0px;
 
}
div {
	font-weight: bold;
}

PAG
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

Problema con la posición de la tabla del formulario

Publicado por xve (334 intervenciones) el 18/10/2015 09:35:05
Hola Jennifer, yo he copiado tal cual tu código, lógicamente no dispongo de las imágenes, ni de los archivos js, pero el mi caso, el formulario se queda pegado en la parte superior de la pagina.

Puedes probar a comentar los includes de js??
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar