Problema con margen en css

KaozC9 · #1 (**permalink**) 18/08/2010, 11:37

haber, tengo este codigo

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="ltr" lang="es-ES">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>PuntoHosting</title>
    <link rel="stylesheet" href="css/reset.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
</head>
<body>
    <div id="cabeza">
        <div id="logo">
            <h2>PuntoHosting</h2>
        </div>
        <div class="clear"></div>
    </div>
    <div id="general">
        <div id="bgup">
        <div id="menu">
            <ul id="menul">
                <li>enlace</li>
                <li>enlace</li>
                <li>enlace</li>
                <li>enlace</li>
            </ul>
        </div>
 
    </div>
    </div>
 
    <div id="pie">
    </div>
</body>
</html>

con reset.css

Código CSS:

Ver originalhtml, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr, acronym, address, big,
cite, code, del, dfn, em, font, img,
ins, kbd, q, s, samp, small, strike,
strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
center, u, b, i , button {
     margin: 0;
     padding: 0;
     border: 0;
     outline: 0;
     font-weight: normal;
     font-style: normal;
     font-size: 100%;
     font-family: inherit;
     vertical-align: baseline
}
 
body {
     line-height: 1
}
 
:focus {
     outline: 0
}
 
ol, ul {
     list-style: none
}
 
table {
     border-collapse: collapse;
     border-spacing: 0
}
 
blockquote:before, blockquote:after, q:before, q:after {
     content: ""
}
 
blockquote, q {
     quotes: "" ""
}
 
input, textarea {
     margin: 0;
     padding: 0
}
 
hr {
     margin: 0;
     padding: 0;
     border: 0;
     color: #000;
     background-color: #000;
     height: 1px
}

y el estilo general

Código CSS:

Ver originalbody {
    background-color: #e9e9e9;
    font-family:Arial, Helvetica, Helvetica Neue, Verdana, sans-serif;
    font-size:13px;
    -webkit-text-stroke:1px rgba(255,255,255,.01);
}
 
 
#cabeza {
    color: #fff;
    height: 130px;
    background-color: #262626;
    position: relative;
    display: block;
}
#logo {
    float: left;
    width: 500px;
    margin: 30px 50px;
}
 
#general {
    background: #fff url('../img/general.jpg') top center repeat-x;
    height: 350px;
    display: block;
    position: relative;
} 
#menu {
    width: 940px;
    height: 40px;
    background: #fff url('../img/nav.gif') repeat-x;
    -moz-border-radius: 5px;
    margin: 16px auto;
    position: relative;
    display: block;
}
#menul {
text-align: center;
height: 11px;
display: block;
}
#menul li {
    position: relative;
    display: inline-block;
    color:#959595;
 
margin: 13px 25px;
 
 
}
#pie {
    height: 190px;
    background-color: #262626;
    position: relative;
}
.clear {
    clear: both;
}
 
 
.bgup {
    width: 960px;
    display:block;
    padding: 20px 0;
}

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?

kseso? · #2 (**permalink**) 18/08/2010, 12:55

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 originalbackground: #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

KaozC9 · #3 (**permalink**) 18/08/2010, 15:58

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.

kseso? · #4 (**permalink**) 18/08/2010, 16:34

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

KaozC9 · #5 (**permalink**) 18/08/2010, 17:28

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