Tema: Error al insertar etiqueta <form> con CSS
Ver Mensaje Individual
  #6 (permalink)  
Antiguo 29/01/2013, 06:24
juanpablojacob
 
Fecha de Ingreso: enero-2013
Mensajes: 9
Antigüedad: 12 años, 9 meses
Puntos: 0
Respuesta: Error al insertar etiqueta <form> con CSS
Este es el código que utilizo, tiene un poco de js, pero no se fijen en eso que anda.. El tema está en el agregado y quitado de la etiqueta form. Abajo se encuentra el CSS.

Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  5. <title>Todo Jard&iacute;n</title>
  6. <meta name="keywords" content="" />
  7. <meta name="description" content="" />
  8. <link href="reset.css" rel="stylesheet" type="text/css" />
  9. <link href="default.css" rel="stylesheet" type="text/css" />
  10.  
  11. </head>
  12. <body>
  13.  
  14. <div id="menu">
  15.     <ul>
  16.         <li class="active"><a href="#" accesskey="1" title="">Nuevas</a></li>
  17.         <li><a href="#" accesskey="2" title="">Consejos</a></li>
  18.         <li><a href="#" accesskey="3" title="">Enlaces</a></li>
  19.         <li><a href="#" accesskey="4" title="">Subir obra</a></li>
  20.         <li><a href="#" accesskey="5" title="">Contacto</a></li>
  21.     </ul>
  22. </div>
  23. <!-- fin #menu -->
  24. <div id="header">
  25.     <h1>Todo Jard&iacute;n</h1>
  26.     <h2></h2>
  27. </div>
  28. <!-- fin #header -->
  29.  
  30. <div id="wrapper">
  31.     <div id="content">
  32.         <div id="posts">
  33.             <div class="post">
  34.                     <div class="story">
  35.                     <!-- Esta es la etiqueta de form que me trae problemas! si la elimino el diseño queda -->
  36.                         <form action="">
  37.                         <label>Elija el tipo de Jardines que desee: </label>
  38.                         <select name="menu">
  39.                         <option value="0" selected> </option>
  40.                         <option value="1" > Urbanos</option>
  41.                         <option value="2" > Sub Urbanos</option>
  42.                         <option value="3" > Mediterráneo</option>
  43.                         <option value="4" > Zen</option>
  44.                         <option value="5" > Clásico</option>
  45.                         <option value="6" > Acuático</option>
  46.                         <option value="7" > Minimalista</option>
  47.                         <option value="8" > Rústico</option>
  48.                         <option value="9" > Verticales</option>
  49.                                                 </select>
  50.                         <button type="submit"> <b>Listo</b></button>
  51.                        </form>
  52.                     </div>
  53.                 </div>
  54.           <div class="post">
  55.                        
  56.             <h2 class="title">Nombre de la obra: Primer Obra</h2>
  57.                 <div class="story">
  58.                     <p><strong></strong>Esta es la primer Obra </p>
  59.                     <h3>Imagenes de la Obra: </h3>
  60.                 </div>
  61.                 <div class="imagen">
  62.                 <script lang='JavaScript' type='text/javascript'>
  63.                         agrega_array('CMS/CMSObra/imagenes/2.gif','Imagen de la obra Primer Obra' ,'Después de la segunda obra','#');
  64.                     </script><script lang='JavaScript' type='text/javascript'>
  65.                         agrega_array('CMS/CMSObra/imagenes/1.gif','Imagen de la obra Primer Obra' ,'antes de la primer obra','#');
  66.                     </script><script lang='JavaScript' type='text/javascript'>
  67.                     PintaVisor('1');
  68.                 </script>                </div>
  69.                 
  70.            </div>
  71.             
  72.             <div class="post">
  73.                 <p class="file"> P&aacute;ginas siguientes: 
  74.                  0 -                        <a href="/pagina/index.php?pagina=1&comienzo=3"> 1 -</a>
  75.                                     </p>
  76.             </div>  
  77.         </div>
  78.           
  79.             
  80.             
  81.            
  82.       
  83.         <!-- fin #posts -->
  84.         <div id="links">
  85.             <ul>
  86.                 
  87.                 <li>
  88.                     <h2>Dise&ntilde;os de jardines</h2>
  89.                     <ul>
  90.                                             <li><a href="#">Urbanos</a> <i>(0)</i></li>
  91.                                             <li><a href="#">Sub Urbanos</a> <i>(0)</i></li>
  92.                                             <li><a href="#">Mediterráneo</a> <i>(0)</i></li>
  93.                                             <li><a href="#">Zen</a> <i>(0)</i></li>
  94.                                             <li><a href="#">Clásico</a> <i>(5)</i></li>
  95.                                             <li><a href="#">Acuático</a> <i>(0)</i></li>
  96.                                             <li><a href="#">Minimalista</a> <i>(0)</i></li>
  97.                                             <li><a href="#">Rústico</a> <i>(0)</i></li>
  98.                                             <li><a href="#">Verticales</a> <i>(0)</i></li>
  99.                         
  100.                     </ul>
  101.                 </li>
  102.                 
  103.             </ul>
  104.             
  105.         </div>
  106.         <!-- end #links -->
  107.         <div style="clear: both;">&nbsp;</div>
  108.     </div>
  109. </div>
  110. <!-- end #content -->
  111.  
  112. <div id="footer">
  113.     <p id="legal">Copyright &copy; Todo Jard&iacute;n</p>
  114.     <p id="brand">Todo Jard&iacute;n</p>
  115. </div>
  116. <!-- end #footer -->
  117.  
  118.  
  119. </body>
  120. </html>

Código CSS:
Código CSS: 
Ver original
  1. * {
  2.  margin: 0;
  3.  padding: 0;
  4.  }
  5. body {
  6.     margin: 0;
  7.     padding: 0;
  8.     background: #749865 url(images/img01.gif) repeat-x;
  9.     font: normal small Arial, Helvetica, sans-serif;
  10.     line-height: 1.8em;
  11.     color: #838B91;
  12. }
  13.  
  14. h1, h2, h3, h4, h5, h6 {
  15.     margin: 0;
  16.     padding: 0;
  17.     font-family: Georgia, "Times New Roman", Times, serif;
  18.     font-weight: normal;
  19.     color: #468259;
  20. }
  21.  
  22. h2 {
  23.     padding-left: 20px;
  24.     background: url(images/img07.gif) no-repeat left center;
  25.     font-size: 22px;
  26. }
  27.  
  28. h3 {
  29.     margin-bottom: 1em;
  30.     text-transform: uppercase;
  31.     letter-spacing: 2px;
  32.     font-size: .9em;
  33.     font-weight: bold;
  34. }
  35.  
  36. p, blockquote, ul, ol {
  37.     margin-top: 0;
  38. }
  39.  
  40. blockquote {
  41.     padding: 0 0 0 40px;
  42.     background: url(images/img11.gif) no-repeat;
  43.     font: italic small Georgia, "Times New Roman", Times, serif;
  44.     line-height: 1.6em;
  45. }
  46.  
  47. a {
  48.     background: url(images/img03.gif) repeat-x left bottom;
  49.     text-decoration: none;
  50.     color: #468259;
  51. }
  52.  
  53. a:hover {
  54.     background: none;
  55.     text-decoration: underline;
  56. }
  57.  
  58. /* Wrapper */
  59.  
  60. #wrapper {
  61.     background: #FFFFFF url(images/img04.gif) repeat-x left bottom;
  62. }
  63.  
  64. /* Menu */
  65.  
  66. #menu {
  67.     width: 750px;
  68.     height: 60px;
  69.     margin: 0 auto;
  70. }
  71.  
  72. #menu ul {
  73.     margin: 0;
  74.     padding: 0;
  75.     list-style: none;
  76. }
  77.  
  78. #menu li {
  79.     display: block;
  80.     float: left;
  81.     width: 148px;
  82.     height: 60px;
  83.     padding: 0 0 0 2px;
  84.     background: url(images/img02.gif) no-repeat;
  85. }
  86.  
  87. #menu a {
  88.     display: block;
  89.     width: 108px;
  90.     height: 36px;
  91.     padding: 20px 20px 0 20px;
  92.     background: none;
  93.     letter-spacing: -1px;
  94.     font: normal 1.6em Georgia, "Times New Roman", Times, serif;
  95.     color: #E1E9E2;
  96. }
  97.  
  98. #menu a:hover {
  99.     border-bottom: 4px solid #5A7C50;
  100.     text-decoration: none;
  101.     color: #FFFFFF;
  102. }
  103.  
  104. #menu .active a {
  105.     background: #E1E9E2;
  106.     border-bottom: 4px solid #E1E9E2;
  107.     text-decoration: none;
  108.     color: #749865;
  109. }
  110.  
  111. /* Header */
  112.  
  113. #header {
  114.     width: 754px;
  115.     height: 247px;
  116.     margin: 0 auto;
  117.     padding: 13px 0 0 0;
  118. }
  119.  
  120. #header h1 {
  121.     float: left;
  122.     width: 104px;
  123.     height: 110px;
  124.     padding: 104px 100px 0 20px;
  125.     background: url(images/img05.jpg) no-repeat;
  126.     line-height: 32px;
  127.     font-size: 30px;
  128. }
  129.  
  130. #header h2 {
  131.     float: right;
  132.     width: 494px;
  133.     height: 34px;
  134.     padding: 180px 20px 0 0;
  135.     background: url(images/img06.jpg) no-repeat;
  136.     text-transform: lowercase;
  137.     text-align: right;
  138.     letter-spacing: -1px;
  139.     font-size: 22px;
  140.     color: #FFFFFF;
  141. }
  142.  
  143. /* Content */
  144.  
  145. #content {
  146.     width: 750px;
  147.     margin: 0 auto;
  148. }
  149.  
  150. /* Posts */
  151.  
  152. #posts {
  153.     float: right;
  154.     width: 510px;
  155. }
  156.  
  157. #posts .post {
  158.     padding-bottom: 30px;
  159. }
  160.  
  161. #posts .story {
  162.     padding: 15px 20px 0 20px;
  163.     background: url(images/img10.gif) repeat-x
  164. }
  165. #posts .imagen{
  166.     padding-right: 650px;
  167. }
  168.  
  169. #posts .meta {
  170.     padding: 5px 0 0 20px;
  171.     background: url(images/img03.gif) repeat-x;
  172. }
  173.  
  174. #posts .meta p {
  175.     margin: 0;
  176.     line-height: normal;
  177.     font-size: smaller;
  178. }
  179.  
  180. #posts ul {
  181.     list-style: url(images/img12.gif);
  182. }
  183.  
  184. #posts ul li {
  185. }
  186.  
  187. /* Links */
  188.  
  189. #links {
  190.     float: left;
  191.     width: 220px;
  192. }
  193.  
  194. #links ul {
  195.     margin: 0;
  196.     padding: 0;
  197.     list-style: none;
  198. }
  199.  
  200. #links li ul {
  201.     padding: 15px 20px 30px 20px;
  202.     background: url(images/img10.gif) repeat-x
  203. }
  204.  
  205. #links li li {
  206.     padding: 3px 0;
  207.     background: url(images/img03.gif) repeat-x left bottom;
  208. }
  209.  
  210. #links li a {
  211.     background: none;
  212. }
  213.  
  214. #links li i {
  215.     font-size: smaller;
  216. }
  217.  
  218. /* Footer */
  219.  
  220. #footer {
  221.     padding: 40px 0 60px 0;
  222.     background: url(images/img08.gif) repeat-x;
  223. }
  224.  
  225. #footer p {
  226.     width: 750px;
  227.     font-family: Georgia, "Times New Roman", Times, serif;
  228.     color: #A6C09B;
  229. }
  230.  
  231. #footer a {
  232.     background: none;
  233.     font-weight: bold;
  234.     color: #A6C09B;
  235. }
  236.  
  237. #legal {
  238.     margin: 0 auto;
  239.     text-align: right;
  240.     font-size: 12px;
  241. }
  242.  
  243. #brand {
  244.     margin: -35px auto 0 auto;
  245.     padding: 10px 0 0 35px;
  246.     background: url(images/img09.gif) no-repeat left top;
  247.     letter-spacing: -1px;
  248.     font-size: 24px;
  249. }