Foros del Web » Creando para Internet » CSS »

Problema con margen en css

Estas en el tema de Problema con margen en css en el foro de CSS en Foros del Web. haber, tengo este codigo @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código HTML: Ver original <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> < html xmlns = "http://www.w3.org/1999/xhtml" dir = ...
  #1 (permalink)  
Antiguo 18/08/2010, 12:37
 
Fecha de Ingreso: abril-2010
Ubicación: Chile
Mensajes: 76
Antigüedad: 7 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.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  4.     <title>PuntoHosting</title>
  5.     <link rel="stylesheet" href="css/reset.css" type="text/css" media="screen" />
  6.     <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
  7. </head>
  8.     <div id="cabeza">
  9.         <div id="logo">
  10.             <h2>PuntoHosting</h2>
  11.         </div>
  12.         <div class="clear"></div>
  13.     </div>
  14.     <div id="general">
  15.         <div id="bgup">
  16.         <div id="menu">
  17.             <ul id="menul">
  18.                 <li>enlace</li>
  19.                 <li>enlace</li>
  20.                 <li>enlace</li>
  21.                 <li>enlace</li>
  22.             </ul>
  23.         </div>
  24.  
  25.     </div>
  26.     </div>
  27.  
  28.     <div id="pie">
  29.     </div>
  30. </body>
  31. </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?
  #2 (permalink)  
Antiguo 18/08/2010, 13:55
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Problema con margen en css

En un principio, el hijo no "arrastra" el fondo de su padre.

Lo que puede suceder, es que la medida del padre sí aumente por el hijo, y si la imagen del fondo se posiciona vía css, la posición relativa de ella se vea modifica al cambiar las medidas de la caja que la aloja.

Si usted define el fondo de #general como:
Código CSS:
Ver original
  1. background: #fff url('../img/general.jpg') top center repeat-x;
le está indicando que la sitúe en la parte superior (top) de la caja y que cubra todo el eje x (y sólo el x) repitiendo la imagen tantas veces como sea necesario en ese eje. Y ningún hijo hará que varíe su posición en el eje y (el vertical) pues la sitúa en un punto absoluto.

El otro valor de la coordenada (center) nada tiene que ver con la posición del mosaico, sino con el punto inicial a partir del cuál se realiza el mosaico.

Posiblemente no sea la respuesta que necesitaba, pero es que no acabo de visualizar el problema concreto.

Atentamente
  #3 (permalink)  
Antiguo 18/08/2010, 16:58
 
Fecha de Ingreso: abril-2010
Ubicación: Chile
Mensajes: 76
Antigüedad: 7 años, 8 meses
Puntos: 3
Respuesta: Problema con margen en css

se ve asi =>


si disminuyo el margin de #menu se ve asi =>


y la idea es que al querer ubicar #menu 15 o 30 pixeles más abajo, sin que aparezca esa linea blanca.
  #4 (permalink)  
Antiguo 18/08/2010, 17:34
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Problema con margen en css

El problema no es un desplazamiento del fondo azul, sino de toda la caja (#general y sus contenidos #bgup y #menú) por el margen superior de #menu.

Si no he cometido algún error al cerrar los div´s de su código html que lo invalide, bastará con añadir /oveflow:hidden/ a cualquiera de las cajas contenedoras de #menu

Quizás la solucción anterior cree a la larga algún efecto no deseado, por lo que puede actuar en el margen superior de menú poniéndolo a 0px y lograr el espacio de separación con un padding-top de igual valor en #general

Atentamente
  #5 (permalink)  
Antiguo 18/08/2010, 18:28
 
Fecha de Ingreso: abril-2010
Ubicación: Chile
Mensajes: 76
Antigüedad: 7 años, 8 meses
Puntos: 3
Respuesta: Problema con margen en css

Muchas gracias kseso?, ahora me pregunto, por qué no se me ocurrió a mi eso de padding-top, de cualquier modo, muchas gracias.

Etiquetas: margen
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 15:02.