Foros del Web » Creando para Internet » Diseño web »

[CSS imput - radio - checkbox ]- redefinir

 Estas en el tema de [CSS imput - radio - checkbox ]- redefinir en el foro de Diseño web en Foros del Web. Hola a todos como estan? estoy teniendo problema con un CSS y quisiera una manito si alguien puede, las cosa es asi: Estoy haciendo una ...
  #1 (permalink)  
Antiguo 20/10/2012, 00:06
 
Fecha de Ingreso: noviembre-2011
Mensajes: 69
Antigüedad: 13 años
Puntos: 0
Exclamación [CSS imput - radio - checkbox ]- redefinir
Hola a todos como estan? estoy teniendo problema con un CSS y quisiera una manito si alguien puede, las cosa es asi:

Estoy haciendo una pagina para una encuesta, es un recabado de datos importante con muchas planillas, bien, lo que sucede es que tiene buena interfaz para cuando son pocos INPUT de entrada, pero cuando quiero hacer varios juntos en una misma linea es donde no se como hacerlo para que solo tome eso y no la propiedad de los demas INPUT el mismo caso para checkbox y radio.

Se entendio?

Aca dejo un ejemplo de formulario y el css

Código HTML: 
Ver original
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.     <head>
  4.         <title>.:: Formulario 3 ::.</title>
  5.         <link rel="shortcut icon" href="images/favicon.png" type="image/x-icon"/>      
  6.         <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
  7.         <script type="text/javascript" src="js/jquery.min.js"></script>
  8.         <script type="text/javascript" src="js/sliding.form.js"></script>
  9.         
  10.          <script language="javascript" type="text/javascript" src="js/validaciones.js"></script>
  11.          <script type="text/javascript" language="javascript" src="js/funciones.js"></script>
  12.     </head>
  13.     
  14.     <style>
  15.         span.reference{
  16.             position:fixed;
  17.             left:5px;
  18.             top:5px;
  19.             font-size:10px;
  20.             text-shadow:1px 1px 1px #fff;
  21.         }
  22.         span.reference a{
  23.             color:#555;
  24.             text-decoration:none;
  25.             text-transform:uppercase;
  26.         }
  27.         span.reference a:hover{
  28.             color:#000;
  29.             
  30.         }
  31.         h1{
  32.     color: #090;
  33.     font-size: 36px;
  34.     text-shadow: 1px 1px 1px #fff;
  35.     padding: 20px;
  36.         }
  37.     </style>
  38.     
  39.     <body>        
  40.         <div id="content">
  41.             <h1><img src="images/logo2.png" width="80" height="95"> Subsecretaria de Turismo</h1>
  42.             <div id="wrapper">            
  43.               <div id="steps">
  44.                     <form id="formElem" name="form" action="" method="post">
  45.                     
  46.                         <fieldset class="step"><legend>Tenencia</legend>
  47.                         
  48.                         <p>
  49.                           <label>Tipo de Tenencia</label>
  50.                           <select name="est_ten">
  51.                           <option value="pepe">Seleccione una opcion</option>
  52.                           <option>Propio</option>
  53.                           <option>Concesión</option>
  54.                           <option>Alquilado</option>
  55.                           <option>Otro</option>
  56.                           </select>
  57.                           </p>
  58.                           <p>
  59.                           <label>Tipo de Cargo</label>
  60.                           <select name="est_carg">
  61.                           <option value="">Seleccione una opcion</option>
  62.                           <option>Propietario</option>
  63.                           <option>Gerente/encargado</option>
  64.                           <option>Concesionario</option>
  65.                           <option>Administrador</option>
  66.                           </select>
  67.                           </p>
  68.                           <p>
  69.                           <label>Nombre </label>
  70.                           <input name="ten_nom" type="text">
  71.                           </p>
  72.                           <p>
  73.                           <label>Apellido</label>
  74.                           <input name="ten_ape" type="text">
  75.                           </p>
  76.                           </fieldset>
  77.                           
  78.                           
  79.                           <fieldset class="step">
  80.                           <legend>Tenencia</legend>
  81.                           <p>
  82.                           <label>Telefono 1</label>
  83.                           <input name="ten_tel1" type="text">
  84.                           </p>
  85.                           <p>
  86.                           <label>Telefono 2</label>
  87.                           <input name="ten_tel2" type="text">
  88.                           </p>
  89.                           <p>
  90.                           <label>Celular</label>
  91.                           <input name="ten_cel" type="text">
  92.                           </p>
  93.                           <p>
  94.                           <label>E-Mail</label>
  95.                           <input name="ten_mail" type="text">
  96.                           </p>                        
  97.                         </fieldset>
  98.                         
  99.                     
  100.                     
  101.                         
  102.                       <fieldset class="step">
  103.                             <legend>Confirmar</legend>
  104.                             <p> Asegurese de haber llenado correctamente todos los campos.<br/>Si esta seguro/a presione continuar para guardar los datos y pasar a la siguiente planilla.
  105.                             </p>                    
  106.                             <p class="submit">
  107.                             <button id="registerButton" type="submit">Continuar</button>
  108.                             </p>
  109.                             <input type="hidden" name="grabar" value="si" />
  110.                         </fieldset>
  111.                     </form>
  112.                 </div>
  113.                 
  114.                 
  115.                 
  116.                 
  117.                 <div id="navigation" style="display:none;">
  118.                     <ul>
  119.                         <li class="selected">
  120.                             <a href="#">Paso 1</a>
  121.                         </li>
  122.                         <li>
  123.                             <a href="#">Paso 2</a>
  124.                         </li>
  125.                         <li>
  126.                             <a href="#">Paso 3</a>
  127.                         </li>                       
  128.                                                 
  129.                     </ul>
  130.                 </div>
  131.             </div>
  132.         </div>
  133.     </body>
  134. </html>
  #2 (permalink)  
Antiguo 20/10/2012, 00:07
 
Fecha de Ingreso: noviembre-2011
Mensajes: 69
Antigüedad: 13 años
Puntos: 0
Respuesta: [CSS imput - radio - checkbox ]- redefinir
Mas abajo comente mi css por cuestiones de cantidad de caracteres que podia escribir aca, ademas les dejo un modelo de lo que quiero hacer, esto lo tengo hecho con tablas es por eso que quiero llevarlo a mi nuevo diseño.





y este es el CSS

Código HTML: 
Ver original
  1. *{
  2.     margin:0px;
  3.     padding:0px;
  4. }
  5. body{
  6.     color:#444444;
  7.     font-size:13px;    
  8.     background:#f4f4f4 url(../images/bg.gif) repeat top left;
  9.     font-family:"Century Gothic", Helvetica, sans-serif;
  10. }
  11. #content{
  12.     margin:15px auto;
  13.     text-align:center;
  14.     /*width:600px;Verdadero*/
  15.     width:800px;
  16.     position:relative;
  17.     height:100%;
  18. }
  19. #wrapper{
  20.     -moz-box-shadow:0px 0px 3px #aaa;
  21.     -webkit-box-shadow:0px 0px 3px #aaa;
  22.     box-shadow:0px 0px 3px #aaa;
  23.     -moz-border-radius:10px;
  24.     -webkit-border-radius:10px;
  25.     border-radius:10px;
  26.     border:2px solid #fff;
  27.     background-color:#f9f9f9;
  28.     /*width:600px;Verdadero*/
  29.     width:800px;
  30.     overflow:hidden;
  31. }
  32.  
  33. /*Este los fieldset a distintas pantallas*/
  34. #steps{
  35.     /*width:600px;Verdadero*/
  36.     width:800px;
  37.     /*height:320px;*/
  38.     overflow:hidden;
  39. }
  40. .step{
  41.     float:left;
  42.     /*width:600px;Verdadero*/
  43.     width:800px;
  44.     /*height:320px;*/
  45. }
  46.  
  47.  
  48. /*Este es para los botones del abajo, los muestra verticales y sin imagen*/
  49. #navigation{
  50.     height:45px;
  51.     background-color:#e9e9e9;
  52.     border-top:1px solid #fff;
  53.     -moz-border-radius:0px 0px 10px 10px;
  54.     -webkit-border-bottom-left-radius:10px;
  55.     -webkit-border-bottom-right-radius:10px;
  56.     border-bottom-left-radius:10px;
  57.     border-bottom-right-radius:10px;
  58. }
  59. #navigation ul{
  60.     list-style:none;
  61.     float:left;
  62.     margin-left:22px;
  63. }
  64. #navigation ul li{
  65.     float:left;
  66.     border-right:1px solid #ccc;
  67.     border-left:1px solid #ccc;
  68.     position:relative;
  69.     margin:0px 2px;
  70. }
  71.  
  72. /*Este es para los botones del abajo*/
  73. #navigation ul li a{
  74.     display:block;
  75.     height:45px;
  76.     background-color:#444;
  77.     color:#777;
  78.     outline:none;
  79.     font-weight:bold;
  80.     text-decoration:none;
  81.     line-height:45px;
  82.     padding:0px 20px;
  83.     border-right:1px solid #fff;
  84.     border-left:1px solid #fff;
  85.     background:#f0f0f0;
  86.     background:
  87.         -webkit-gradient(
  88.         linear,
  89.         left bottom,
  90.         left top,
  91.         color-stop(0.09, rgb(240,240,240)),
  92.         color-stop(0.55, rgb(227,227,227)),
  93.         color-stop(0.78, rgb(240,240,240))
  94.         );
  95.     background:
  96.         -moz-linear-gradient(
  97.         center bottom,
  98.         rgb(240,240,240) 9%,
  99.         rgb(227,227,227) 55%,
  100.         rgb(240,240,240) 78%
  101.         )
  102. }
  103. #navigation ul li a:hover,
  104. #navigation ul li.selected a{
  105.     background:#d8d8d8;
  106.     color:#666;
  107.     text-shadow:1px 1px 1px #fff;
  108. }
  109. span.checked{
  110.     background:transparent url(../images/checked.png) no-repeat top left;
  111.     position:absolute;
  112.     top:0px;
  113.     left:1px;
  114.     width:20px;
  115.     height:20px;
  116. }
  117. span.error{
  118.     background:transparent url(../images/error.png) no-repeat top left;
  119.     position:absolute;
  120.     top:0px;
  121.     left:1px;
  122.     width:20px;
  123.     height:20px;
  124. }
  125. #steps form fieldset{
  126.     border:none;
  127.     padding-bottom:20px;
  128. }
  129. #steps form legend{
  130.     text-align:left;
  131.     background-color:#f0f0f0;
  132.     color:#666;
  133.     font-size:24px;
  134.     text-shadow:1px 1px 1px #fff;
  135.     font-weight:bold;
  136.     float:left;
  137.     /*width:590px;Verdadero*/
  138.     width:790px;
  139.     padding:5px 0px 5px 10px;
  140.     margin:10px 0px;
  141.     border-bottom:1px solid #fff;
  142.     border-top:1px solid #d9d9d9;
  143. }
  144. #steps form p{
  145.     float:left;
  146.     clear:both;
  147.     margin:5px 0px;
  148.     background-color:#f4f4f4;
  149.     border:1px solid #fff;
  150.     /*width:400px;Verdadero*/
  151.     width:600px;
  152.     padding:10px;
  153.     margin-left:100px;
  154.     -moz-border-radius: 5px;
  155.     -webkit-border-radius: 5px;
  156.     border-radius: 5px;
  157.     -moz-box-shadow:0px 0px 3px #aaa;
  158.     -webkit-box-shadow:0px 0px 3px #aaa;
  159.     box-shadow:0px 0px 3px #aaa;
  160. }
  161. #steps form p label{
  162.     /*width:160px;Verdadero*/
  163.     width:260px;
  164.     float:left;
  165.     text-align:right;
  166.     margin-right:15px;
  167.     line-height:26px;
  168.     color:#666;
  169.     text-shadow:1px 1px 1px #fff;
  170.     font-weight:bold;
  171. }
  172.  
  173. #steps form input:not([type=radio]),
  174. #steps form textarea,
  175. #steps form select{
  176.     background: #ffffff;
  177.     border: 1px solid #ddd;
  178.     -moz-border-radius: 3px;
  179.     -webkit-border-radius: 3px;
  180.     border-radius: 3px;
  181.     outline: none;
  182.     padding: 5px;
  183.     width: 200px;
  184.     float:left;
  185. }
  186. #steps form input:focus{
  187.     -moz-box-shadow:0px 0px 3px #aaa;
  188.     -webkit-box-shadow:0px 0px 3px #aaa;
  189.     box-shadow:0px 0px 3px #aaa;
  190.     background-color:#FFFEEF;
  191. }
  192. #steps form p.submit{
  193.     background:none;
  194.     border:none;
  195.     -moz-box-shadow:none;
  196.     -webkit-box-shadow:none;
  197.     box-shadow:none;
  198. }
  199. #steps form button {
  200.     border:none;
  201.     outline:none;
  202.     -moz-border-radius: 10px;
  203.     -webkit-border-radius: 10px;
  204.     border-radius: 10px;
  205.     color: #ffffff;
  206.     display: block;
  207.     cursor:pointer;
  208.     margin: 0px auto;
  209.     clear:both;
  210.     padding: 7px 25px;
  211.     text-shadow: 0 1px 1px #777;
  212.     font-weight:bold;
  213.     font-family:"Century Gothic", Helvetica, sans-serif;
  214.     font-size:22px;
  215.     -moz-box-shadow:0px 0px 3px #aaa;
  216.     -webkit-box-shadow:0px 0px 3px #aaa;
  217.     box-shadow:0px 0px 3px #aaa;
  218.     background:#4797ED;
  219. }
  220. #steps form button:hover {
  221.     background:#d8d8d8;
  222.     color:#666;
  223.     text-shadow:1px 1px 1px #fff;
  224. }
Última edición por maczy; 20/10/2012 a las 00:21

Etiquetas: css, csss, html, input
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 22:39.