Eliminar un margin necesario [Imagen ilustrativa en el post]

Sirius381 · #1 (**permalink**) 25/02/2012, 14:54

Buenas tardes foro! Vengo con otro problema que no he podido resolver, la cosa es que tengo un JSP, el HTML lo tengo enlazado a un CSS, para el body es necesario un margin de 1%, pero necesito que mi footer se vaya de lado a lado, es decir ocupe el 100% del espacio horizontal de la pagina y creo que ese margin es el que esta interfiriendo con mi diseño, adjunto una imagen ilustrativa, en ella se nota como tengo el header, todo el contenido se encuentra a esa altura, pero cuando llego al footer se "corta" un poco de un lado y del otro, no se como reiniciar o hacer que el footer ignore el margin del body, ojala pusieran ayudarme, desde ya mil gracias!!

IsaBelM · #2 (**permalink**) 25/02/2012, 15:06

no uses la propiedad resumida

Sirius381 · #3 (**permalink**) 25/02/2012, 15:14

Hola Isabel, no es el mismo resultado si uso:

margin-left: 1%;
margin-right: 1%

?? Lo digo por que necesito queel footer ignore el margen en derecha e izquierda, creo que daria el mismo resultado, pero voy a probarlo enseguida.

Saludos y gracias!!

Sirius381 · #4 (**permalink**) 25/02/2012, 15:19

Probado y es exactamente el mismo resultado :( Alguna otra sugerencia?

Saludos!

kseso? · #5 (**permalink**) 25/02/2012, 15:24

Supongo que el pie es hijo directo de body.
Pruebe a ver:
.pie {
position: relative;
left: 0;
right: 0;
/* otras propiedades*/
}
Ver más abajo

Sirius381 · #6 (**permalink**) 25/02/2012, 15:37

Hola kseso?, ya probe con las propiedades que me comentas y el resultado es el mismo, estas en lo cierto, el footer es hijo directo del body, te anexo el codigo CSS que tengo aplicado para todo el footer y sus elementos, le cambie a "class", yo tenia "id" pero como vi en tu ejemplo que era con class pues lo cambie:

Código:

.footer
{
    position: relative;
    left: 0;
    right: 0;
    width:100%;
    height: 56px;
    float:left;
    background-image:url("../images/nav-bg.png");
    background-color:#000; 
}

.footer li
{
    margin-top: 1.5%;
    list-style:none;
    float:right;
    color:#FFF;
    text-decoration: none;
    margin-left: .5%;
    margin-right: 1%;
}

.footer li:hover
{
    background-image:url("../images/prueba/btnhover.png");
}

.footer li a
{
    font-family: Arial;
    float:right;
    color:#FFF;
    text-decoration: none;
    list-style: none; 
}

.footer li a:hover
{
    font-family: Arial;
    float:right;
    color:#F7E70A;
    text-decoration: none;
    list-style: none;
}

#footerMenus #social
{
    margin-left: 2%;
    float:left;
}

.footer #social li img
{
    margin-bottom: 70%;    
}

.footer #footerMenus li a
{
    margin-bottom: 70%;
}

IsaBelM · #7 (**permalink**) 25/02/2012, 15:38

entonces la estructura de tu layout no es correcto

Cita:

Sirius381 · #8 (**permalink**) 25/02/2012, 15:42

Hola de nuevo isabel, la estructura es exactamente como la pones, las diferencias son estas: en vez de "ID" para el footer es "class" y en el index el footer llega via un jspf, es decir en un fragmento de jsp tengo el codigo HTML para el footer y en las paginas (en este caso index.jsp) lo llamo con la directiva "@include" es decir tengo esto como estructura:

Código:

<html>
<head>
include que trae unas partes necesarias para el jsp
</head>

<body>
<div id="header">
include con el HTML del header
</div>
<div id="cuerpo">
Contenido
</div>

<div id="footer">
include con el HTML del footer
</div>

No se que mas hacer o probar :s

saludos!! muchas gracias

IsaBelM · #9 (**permalink**) 25/02/2012, 15:56

el margin(left, right) lo ha de tener #header y #cuerpo, no footer. el problema es que tu css es algo como esto

Cita:

html, body {
margin: 1%;
......
}

de tal modo que se aplica a todo el body. con lo cual lo que te indicó kseso? debería de funcionarte

kseso? · #10 (**permalink**) 25/02/2012, 16:04

Le sobra el whidt: 100% del pie en el código respuesta a mi comentario.
Una de las formas de dar un tamaño es con el uso de top/left/right/bottom. Los 4 o sólo 2.
Ahora no tengo editor de texto a mano, así que lo siguiente va sin verificar.
Si con left y right a 0 le sigue quedando margen de un valor de -1%
Posíblemente eso fuerce el scroll en x
Para evitarlo habría varias formas, no se cuál más conveniente al desconocer la pág.

Por cierto, ?por qué flota .pie?
Ver más abajo

Sirius381 · #11 (**permalink**) 25/02/2012, 16:05

No me funciona, revisare todo a fondo por que estas en lo correcto pero lo que me paso @keso? no funciona, mira, te adjunto el CSS del body:

Código:

body
{
    font-family: Arial, Helvetica, Verdana;
    margin: 1%;
    height: 100%;
    background-color: #0f1c25;
}

Muchas gracias por su ayuda!

ryugen · #12 (**permalink**) 25/02/2012, 17:46

Una solucion efectiva podria ser la siguiente:

Código HTML:

Ver original#footer
{
    width:102%;
    margin:0 -1%;
}

Asignando margen negativo al footer y dandole mas del 100% de ancho.

Si le estas dando padding, deberias restarselo al width (ancho)

Código HTML:

Ver original#footer
{
    width:100%;
    margin:0 -1%;
    padding:1%
}

kseso? · #13 (**permalink**) 26/02/2012, 06:19

Se nota la hora, mejor deshora, el día y el trancazo por la gripe.

Olvide todo lo dicho hasta ahora y piense:
?cuál es el contenedor padre (raíz) que contiene lo que se muestra al visitante?
Ese. El body. Fuera de él sólo tienen cabida elementos para el navegador en el head.

Así que la respuesta a lo que pretende es no puede mostrar nada fuera del body.

Si necesita ese margen del 1% en todo excepto el pie, debe crear un contenedor que sea el q tenga el margen (y dentro de él todo menos su footer)

ryugen · #14 (**permalink**) 26/02/2012, 07:04

Añado un ejemplo en funcionamiento:

(resultado final, ignorar cuadro blanco, es del programa) http://jsfiddle.net/p4bl1t0/hduEw/embedded/result/

(para editar) http://jsfiddle.net/p4bl1t0/hduEw/

IsaBelM · #15 (**permalink**) 26/02/2012, 08:09

de día todo se ve con mas claridad

Cita:

Iniciado por IsaBelM

entonces la estructura de tu layout no es correcto
<html>
<head>
</head>
<body>
<div id="contenedor">
<div id="header"></div>
<div id="cuerpo"></div>
</div>
<div id="footer"></div>

por qué andar con margin por aquí o por allí??

Sirius381 · #16 (**permalink**) 26/02/2012, 11:13

Buenos días compañeros, primero que nada, muchas gracias por su ayuda, al final use la solución que me envía ryugen que fue la que implicaba tocar solamente el código CSS, quedo perfecto, mil gracias kseso? IsaBelM y ryugen!! ya quedo terminado el diseño :)

Saludos!