Foros del Web » Creando para Internet » CSS »

Contenido responsive

Estas en el tema de Contenido responsive en el foro de CSS en Foros del Web. Buenas tengo un pequeño problema con mi contenido. Tengo una web donde puse una plantilla de muy pronto estrenaremos nuestro site, y contiene un pequeño ...
  #1 (permalink)  
Antiguo 21/11/2014, 07:36
 
Fecha de Ingreso: noviembre-2014
Mensajes: 14
Antigüedad: 9 años, 4 meses
Puntos: 0
Contenido responsive

Buenas tengo un pequeño problema con mi contenido.

Tengo una web donde puse una plantilla de muy pronto estrenaremos nuestro site, y contiene un pequeño formulario para que dejen sus correos. ya eso esta funcionando, el problema es que el formulario en algunos navegadores aparece bien, y en otros aparece arriba y la caja de mensaje se agranda..

alguna solución??
Mi código:
Código HTML:
Ver original
  1. <section class="formulario">
  2.     <p>Cont&aacute;ctanos!</p>
  3.     <form action="send.php" method="post" name="contacto" id ="contacto" >
  4.         <div class="name">
  5.             Nombre:<p>(*)</p>
  6.             <input name="nombre" value="" type="text" id="Nombre" size="20" maxlength="15" required>
  7.         </div>
  8.         <div class="e-mail">
  9.             E-mail:<p>(*)</p>
  10.             <input name="correoenvia" value="" type="text" onBlur="MM_validateForm('correoenvia','','NisEmail');return                                                  document.MM_returnValue" size="20" maxlength="30" required>
  11.         </div>
  12.         <div class="tlfn">
  13.         Tel&eacute;fono:<p>(*)</p>
  14.         <input name="telefono" value="" type="text" onBlur="MM_validateForm('telefono','','R');return   document.MM_returnValue" size="20" maxlength="60" required>
  15.         <br>
  16.         </div>
  17.         <div class="asunto">
  18.         Asunto:<p>(*)<p> <input name="asunto" value="" type="text" onBlur="MM_validateForm('asunto','','R');return document.MM_returnValue" size="20" maxlength="60" required>
  19.         <br>
  20.         </div>
  21.         <div class="msj">
  22.         Mensaje
  23.         <br>
  24.         <textarea cols="57px" rows="9" name="mensaje" required></textarea>
  25.         <br>
  26.         </div>
  27.         <div class="boton">
  28.         <input type="image" src="images/BOTON ENVIAR.png" value="Enviar formulario">
  29.         <!--<input type="image" src="images/BOTON BORRAR.png" value="Borrar datos">-->
  30.         </div>
  31.         </form>
  32.  
  33. </body>


y el css:

Código CSS:
Ver original
  1. html {
  2.     background:url(../fondo4.png) no-repeat fixed center;
  3.     -webkit-background-size: cover;
  4.     -moz-background-size: cover;
  5.     -o-background-size: cover;
  6.     background-size: cover;
  7. }
  8.  
  9. .formulario{position:relative; background:#f37021; top:250px; left:-30px; width:500px; height:408px; border: 2px solid #FFF;                    border-radius: 25px;}
  10. .formulario p{position:relative; left:50px; top:-20px; font-family:Verdana, Geneva, sans-serif, "Futura ND"; font-size:30px; color:#FFF; font-style:oblique;}
  11.  
  12. .name{position:relative; left:50px; float:left; top:-50px; font-family:Verdana, Geneva, sans-serif, "Futura ND"; font-size:18px;}
  13. .name p{color:#F00; font-size:18px; position:relative; top:-43px; left:80px;}
  14. .name input{position:relative; width:200px; height:30px; top:-50px;}
  15.  
  16. .e-mail{position:relative; float:right; top:-48px; left:-30px; font-family:Verdana, Geneva, sans-serif, "Futura ND"; font-size:18px;}
  17. .e-mail p{color:#F00; font-size:18px; position:relative; top:-41px; left:65px;}
  18. .e-mail input{position:relative; width:200px; height:30px; top:-52px;}
  19.  
  20. .tlfn{position:relative; float:left; top:-90px; left:50px; font-family:Verdana, Geneva, sans-serif, "Futura ND"; font-size:18px;}
  21. .tlfn p{color:#F00; font-size:18px; position:relative; top:-43px; left:85px;}
  22. .tlfn input{position:relative; width:200px; height:30px; top:-50px; left:0px;}
  23.  
  24. .asunto{position:relative; float:right; top:-90px; left:-23px; font-family:Verdana, Geneva, sans-serif, "Futura ND"; font-size:18px}
  25. .asunto p{color:#F00; font-size:18px; position:relative; top:-43px; left:70px;}
  26. .asunto input{position:relative; width:200px; height:30px; top:-7px; left:-70px;}
  27.  
  28. .msj{position:relative; float:left; top:-150px; left:50px; font-family:Verdana, Geneva, sans-serif, "Futura ND"; font-size:18px;}
  29. .msj input{position:relative; width:200px; height:30px; top:-50px; left:0px; max-width:100px;}
  30. .msj textarea {resize: none; }
  31. .boton{position:relative; float:left; top:-145px; left:375px;}

esta es mi web:
http://playgroundcaracas.com/

el formulario en mi pc en chrome se ve bien pero en otras versiones y en los demás navegadores se ve mal...

alguna idea de como podría acomodarlo??

Última edición por pzin; 21/11/2014 a las 12:09 Razón: combinar temas
  #2 (permalink)  
Antiguo 01/12/2014, 05:03
 
Fecha de Ingreso: noviembre-2013
Mensajes: 7
Antigüedad: 10 años, 3 meses
Puntos: 0
Respuesta: Contenido responsive

Yo te recomendaria que utilizases un reseteador de css antes de incluir tus propios estilos.
Aqui puedes sacar algo de info: http://librosweb.es/css_avanzado/capitulo_2.html

Etiquetas: contenido, formulario, html, input, nombre, php, poco, responsive
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 01:49.