Footer extendido 100%

[yonolose]

Hola!!!

Tengo un problema que me quiebra la cabeza

En mi web, hay un x% a los lados, de margen...

Ahora quiero extender el footer desde el lado derecho al izquierdo al 100%, pero tengo metido el footer div en el div que tiene un margen de x% a los lados.

Es un duro trabajo ir sacando de página en página el footer, y dejarlo fuera.

Me pregunto: ¿Puede extenderse el footer de lado a lado, por encima del div en el que está?

Uso:
#footer{

margin:0px;

z-index:100;

bottom:0px;

left:0px;

right:0px;

width:100%;

padding-left:10%;

padding-top:7px;

border-color:#009900;

border:2px;

border-top-style:solid;

text-align:left;

background: url(images/footerbg.png) repeat;

color:#FFFFFF;

}

Pero no da resultado (En la derecha deja el x% de margen y a la izquierda se pega...

Saludos

[Dalvenjha]

Si lo que quieres es solamente que se vea la imagen del footer (Qué es lo que sospecho) podrías poner esa imagen de background y darle especificación que este en "bottom""left" y listo.

[yonolose]

Hola!!

Gracias por responder

He añadido esto:

background-position:left;

...Pero no ha pasado nada...

[Dalvenjha]

y el bottom? :th esto es para que lo añadas al background el body no al del footer. Tendría que ver tu CSS para darte otra solución.


<--edición-->

Acabo de ver su site, lo veo descuadrado, osea no está al fondo de la página, además se ha salido del div, pero para el lado derecho y no pra el izquierdo y tienes un css larguísimo. Además tiene un padding de 92. Uhmmmm no se va a ver bien en todas las resoluciones, es más, lo mejor sería que lo sacaras del div, o que pusieras el background en el body de manera que encaje con tu footer.

[yonolose]

Te pego aquí el css...

(es largo)



/* FORMULARIOS */

input {

font-family:Comic Sans MS;

font-size: 13px;

font-weight:bold;

color:#FFFFFF;

background-color:#3399FF;

border: 2px Solid #0000CC;

padding:2px;

margin-bottom:10px;

}

select {

font-family:Comic Sans MS;

font-size: 13px;

font-weight:bold;

color: #FFFFFF;

border: 2px Solid #0000CC;

background-color:#3399FF;

border-left-width: 1px;

padding:2px;

margin-bottom:10px;

}

textarea{

font-family:Comic Sans MS;

font-size: 13px;

font-weight:bold;

color: #FFFFFF;

border: 2px Solid #0000CC;

background-color:#3399FF;

border-left-width: 1px;

padding:2px;

margin-bottom:10px;

}





body{

margin:0;

padding:0;

font:76% tahoma,verdana,sans-serif;

background: url(images/bodybg.png) repeat-x;

color:#333;

text-align:center;

}



a{

text-decoration:none;

color:#269;

font-weight:bold;

}



a:hover{

text-decoration:underline;

}



p{

margin:0 0 15px 0;

line-height:1.5em;

}



h1,h2,h3,h4{

margin:0;

padding:0;

font-weight:normal;

}



h1{

font-size:3.2em;

letter-spacing:-3px;

color:#567;

margin:12px 0 5px 20px;

}



h1 a:hover{

text-decoration:none;

}



h2{

font-size:1.8em;

letter-spacing:-1px;

margin:-10px 0 0 50px;

color:#888;

}



h3{

color: #555;

font-size:1.4em;

margin:1em 0 0.5em 0.5em;

}



h4{

font-size:1.2em;

font-weight:bold;

}



#container{

width:92%;

min-width:700px;

padding:0 20px;

margin:0 auto;

background: #FFFFFF url(images/contentbg.png) repeat-x;

color:#333;

text-align:left;

}



#sitetitle{

float:left;

height:100px;

width: 35%;

color: #333;

}



#sitetitle a{

color:#567;

font-weight:normal;

}



#sitetitle a:hover{

color:#269;

}



#menu{

height:71px;

padding-top:35px;

text-align: right;

}



#menu a{

margin:0;

height:100px;

padding:35px 6px 41px 6px;

font-size:1.6em;

font-weight:normal;

letter-spacing:-1px;

color: #067296;

}



#menu a:hover{

color:#0000CC;

text-decoration:none;

background: url(images/menuhover.png) repeat-x;

padding:35px 5px 41px 5px;

border-left: 1px solid #0000CC;

border-right: 1px solid #0000CC;

}



#content{

margin-top:30px;

width:100%;

clear:both;

}



#content h2{

margin:0 0 10px 0;

color:#555;

border-bottom:2px solid #abb;

}



#content h2 a{

color:#555;

font-weight:normal;

}



#content h2 a:hover{

color:#269;

text-decoration:none;

background:none;

}



#content p{

margin:0 0.5em 1.2em 0.5em;

}



#left{

width:68%;

float:left;

}



#right{

margin-left:70%;

margin-top:-15px;

}



#right h2{

margin:0 0 8px 0;

padding:12px 0 0 0;

font-size:1.6em;

}



/* Boxes */



.box-orange {

background: url(images/boxorange.gif) repeat-x;

}



.box-orange .section {

background: url(images/boxorangesec.gif) no-repeat right top;

font-size: 100%;

color: #FFFFFF;

}



.box-orange .section b {

display: block;

height: 23px;

padding: 7px 0 0 10px;

background: url(images/boxorangesecb.gif) no-repeat;

}



.box-orange .content {

padding: 20px;

}



.box-blue {

background: url(images/boxblue.gif) repeat-x;

}



.box-blue .section {

background: url(images/boxbluesec.gif) no-repeat right top;

font-size: 100%;

color: #FFFFFF;

}



.box-blue .section b {

display: block;

height: 23px;

padding: 7px 7px 0 10px;

background: url(images/boxbluesecb.gif) no-repeat;

}



.box-blue .content {

padding: 20px;

}



.box-pink {

background: url(images/boxpink.gif) repeat-x;

}



.box-pink .section {

background: url(images/boxpinksec.gif) no-repeat right top;

font-size: 100%;

color: #FFFFFF;

}



.box-pink .section b {

display: block;

height: 23px;

padding: 7px 0 0 10px;

background: url(images/boxpinksecb.gif) no-repeat;

}



.box-pink .content {

padding: 20px;

}

/* End of boxes */



#footer{

margin:0px;

z-index:100;

bottom:0px;

left:0px;

right:0px;

width:100%;

padding-left:10%;

padding-top:7px;

border-color:#009900;

border:2px;

border-top-style:solid;

text-align:left;

background: url(images/footerbg.png) repeat;

background-position:bottom,left;

color:#FFFFFF;

}



#footer a{

color:#888;

font-weight:normal;

}



#footer span{

color:#FFFFFF;

font-size:2em;

letter-spacing:-2px;

}



.entry{

position:relative;

margin:0 0 20px 0;

border:2px solid #fff;

color:#333;

padding:0px 10px 0 10px;

}



.entry a:hover, .intro a:hover{

text-decoration:none;

padding-bottom:2px;

background:url(images/flash2.gif) bottom left repeat-x; /* Delete this line to remove the flashing underline for regular links */

}



.link{

color:#269;

background:url(images/linkarrow.gif) left no-repeat;

display:block;

margin:4px 0 0 0;

padding:2px 1em;

}



.link:hover{

color:#48b;

background:url(images/blinkarrow.gif) left no-repeat; /* Delete this line to remove the blinking arrows by the links */

text-decoration:none;

}



.thumbs img{

position:relative;

padding:3px;

margin:0 2px 2px 0;

border:1px solid #fff;

background-color:#ddd;

color: #555;

}



.thumbs img:hover{

background: url(images/flash.gif); /* Delete this line to remove the blinkingblue frame around the thumbnails */

}



.entryphoto{

margin:5px 10px 10px 0;

float:left;

padding:3px;

border:1px solid #fff;

background-color:#ddd;

color:#333;

}



.meta{

clear:both;

border-top: 2px solid #ccc;

padding: 5px 1px 0 0;

margin:10px 0 0 0;

text-align:right;

font-size:0.9em;

color: #567;

}



.pagenav{

color: #888;

text-align:center;

}



.entry img{

position:relative;

}



.subcontainer {

width:98%;

}



.rightsub{

float:left;

width:45%;

padding:0;

}



.rightsub2{

margin-left:50%;

padding:0;

}



.date{

display:block;

float:left;

font-weight:bold;

}



.right{

text-align:right;

}



.center{

text-align:center;

}



.clear{

clear:both;

}



.hide{

display:none;

}

[Dalvenjha]

:th waa al ojo, ponle clear both a tu footer y dale un margin-left negativo de -35px;

Pero te digo, lo mejor es que saques ese footer de ahi y lo pongas fuera del content.

-.-

[Alvaro_brub]

Hola... soy yonolse...

Me han baneado!! y por ayudar, y poner un link hacia mi página al pie de la ayuda.

Pero bueno... No volverá a ocurrir.
------------------

Gracias, he optado por la opción de sacar el footer, ya que lo recomienda alguien que sabe más que yo-nolose!!

Saludos!!

[DragonX]

Iniciado por Alvaro_brub

Me han baneado!! y por ayudar, y poner un link hacia mi página al pie de la ayuda.

No creo que te haya baneado solo por eso......

[Dalvenjha]

Pero no!! no creo que te hayan baneado por eso, si no hace rato habrían baneado a medio mundo... Piensa que habrás hecho tío.