Espacio entre componentes

Sirius381 · #1 (**permalink**) 18/02/2012, 11:51

Hola foro! Vengo con una duda que supongo es muy facil pero no me deja avanzar, la cosa est asi...

Tengo una pagina estructurada con JSP's y JSF's hice un cintillo superior en jsf, despues otro para el header y enseguida del header viene el contenido, el problema es que desde el index.jsp llamo a los jsf's con la directiva "include" todo se muestra correctamente, pero cuando voy a meter contenido se me muestra un espacio entre la parte final del header y el inicio del contenido, el css no define margin para el header ni para el div que lleva el contenido asi que no se como eliminar ese espacio, lo aclaro mas con un poco de codigo:

Código:

<%@include file="cintilloSuperior.jspf" %>
<%@include file="Header.jspf" %>
        <div id="cuerpo"><p>Este es el cuerpo de lo que le sigue al header</p></div>

En la página entre las dos directivas "include" no existe espacio, pero terminando la del header en el cuerpo que sigue se me muestra un espacio, les adjunto el codigo CSS para que vean las propiedades:

Código:

#cintilloSuperior
{
    font-family: "New Century Schoolbook", serif;
    margin: 0%;
    padding: 0%;
    width:98%;
    height:63px;
    float:left;
    background-color:#547b7f; 
    display:inline;
}

#header
{
    width:98%;
    height: 165px;
    margin-left: .8%;
}

#cuerpo
{
    width:98%;
    background-color: #FFF;
}

Alguna sugerencia? Desde ya mil gracias!!

pitufoweb · #2 (**permalink**) 18/02/2012, 11:58

Hola,

Habré tu pagina en el navegador y muéstranos el HTML que se genera.

Saludos

Sirius381 · #3 (**permalink**) 18/02/2012, 12:22

Hola PitufoWeb, el codigo que me genera es este:

Código:

<body>
<div id="cintilloSuperior">
    <ul>
        <li><a href="login.jsp">login</a></li>
        <li><a href="login.jsp" />Otro Login</a></li>
        <li><a href="login.jsp" />Y otro mas</a></li>
    </ul>
</div>        

        <div id="header">
            <div id="logo">
            [HEADER]
            
            <div id="buscador">
            <label>Buscar</label>
            <input type="text" id="cajaBusqueda"/>
            <input class="btn" type="submit" value="Ir" id="btn-buscar"/>
        </div>
            </div>
            
        </div>
        
        <div id="cuerpo">Este es el cuerpo de lo que le sigue al header</div>
        
<div id="footer">              
<div></div>
<div id="clean"></div>
</div>
    </body>

pitufoweb · #4 (**permalink**) 18/02/2012, 12:31

Hola,

Lo único que veo que separa al header del contenido es el height. Si le quitas el height veras que quedaran uno sobre el otro.

Saludos.

Sirius381 · #5 (**permalink**) 18/02/2012, 12:52

Efectivamente master, ya se muestra correctamente, mi background era de 150 pixeles y to lo tenia con 165, jamas encontre como mostrarlo todo de forma flotante, le tuve que fijar el tamaño, Muchisimas gracias por tu ayuda amigo PitufoWeb, un abrazo!