Tema: Problema con margen en css
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 18/08/2010, 11:37
KaozC9
 
Fecha de Ingreso: abril-2010
Ubicación: Chile
Mensajes: 76
Antigüedad: 14 años, 8 meses
Puntos: 3
Problema con margen en css
haber, tengo este codigo
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" dir="ltr" lang="es-ES">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5.     <title>PuntoHosting</title>
  6.     <link rel="stylesheet" href="css/reset.css" type="text/css" media="screen" />
  7.     <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
  8. </head>
  9. <body>
  10.     <div id="cabeza">
  11.         <div id="logo">
  12.             <h2>PuntoHosting</h2>
  13.         </div>
  14.         <div class="clear"></div>
  15.     </div>
  16.     <div id="general">
  17.         <div id="bgup">
  18.         <div id="menu">
  19.             <ul id="menul">
  20.                 <li>enlace</li>
  21.                 <li>enlace</li>
  22.                 <li>enlace</li>
  23.                 <li>enlace</li>
  24.             </ul>
  25.         </div>
  26.  
  27.     </div>
  28.     </div>
  29.  
  30.     <div id="pie">
  31.     </div>
  32. </body>
  33. </html>

con reset.css
Código CSS: 
Ver original
  1. html, body, div, span, applet, object, iframe,
  2. h1, h2, h3, h4, h5, h6, p,
  3. blockquote, pre, a, abbr, acronym, address, big,
  4. cite, code, del, dfn, em, font, img,
  5. ins, kbd, q, s, samp, small, strike,
  6. strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li,
  7. fieldset, form, label, legend,
  8. table, caption, tbody, tfoot, thead, tr, th, td,
  9. center, u, b, i , button {
  10.      margin: 0;
  11.      padding: 0;
  12.      border: 0;
  13.      outline: 0;
  14.      font-weight: normal;
  15.      font-style: normal;
  16.      font-size: 100%;
  17.      font-family: inherit;
  18.      vertical-align: baseline
  19. }
  20.  
  21. body {
  22.      line-height: 1
  23. }
  24.  
  25. :focus {
  26.      outline: 0
  27. }
  28.  
  29. ol, ul {
  30.      list-style: none
  31. }
  32.  
  33. table {
  34.      border-collapse: collapse;
  35.      border-spacing: 0
  36. }
  37.  
  38. blockquote:before, blockquote:after, q:before, q:after {
  39.      content: ""
  40. }
  41.  
  42. blockquote, q {
  43.      quotes: "" ""
  44. }
  45.  
  46. input, textarea {
  47.      margin: 0;
  48.      padding: 0
  49. }
  50.  
  51. hr {
  52.      margin: 0;
  53.      padding: 0;
  54.      border: 0;
  55.      color: #000;
  56.      background-color: #000;
  57.      height: 1px
  58. }

y el estilo general
Código CSS: 
Ver original
  1. body {
  2.     background-color: #e9e9e9;
  3.     font-family:Arial, Helvetica, Helvetica Neue, Verdana, sans-serif;
  4.     font-size:13px;
  5.     -webkit-text-stroke:1px rgba(255,255,255,.01);
  6. }
  7.  
  8.  
  9. #cabeza {
  10.     color: #fff;
  11.     height: 130px;
  12.     background-color: #262626;
  13.     position: relative;
  14.     display: block;
  15. }
  16. #logo {
  17.     float: left;
  18.     width: 500px;
  19.     margin: 30px 50px;
  20. }
  21.  
  22. #general {
  23.     background: #fff url('../img/general.jpg') top center repeat-x;
  24.     height: 350px;
  25.     display: block;
  26.     position: relative;
  27. } 
  28. #menu {
  29.     width: 940px;
  30.     height: 40px;
  31.     background: #fff url('../img/nav.gif') repeat-x;
  32.     -moz-border-radius: 5px;
  33.     margin: 16px auto;
  34.     position: relative;
  35.     display: block;
  36. }
  37. #menul {
  38. text-align: center;
  39. height: 11px;
  40. display: block;
  41. }
  42. #menul li {
  43.     position: relative;
  44.     display: inline-block;
  45.     color:#959595;
  46.  
  47. margin: 13px 25px;
  48.  
  49.  
  50. }
  51. #pie {
  52.     height: 190px;
  53.     background-color: #262626;
  54.     position: relative;
  55. }
  56. .clear {
  57.     clear: both;
  58. }
  59.  
  60.  
  61. .bgup {
  62.     width: 960px;
  63.     display:block;
  64.     padding: 20px 0;
  65. }

mando las imagenes tambien para qe tengan una prueba de concepto

http://www.imagechile.net/img/nav212470.gif
y
http://www.imagechile.net/img/general202798.jpg

las imagenes van dentro de una carpeta llamada "img" y los css dentro de "css"
mi problema es que el margin de #menu arrastra tambien el background de #general, y no quiero que suceda eso, sino, solo que el menu se desplaze hacia abajo, como puedo hacerlo?