Problema con mi plantilla(Sidebar)

[Asuknamun]

Hola, despues de haber buscado en este foro durante un par de horas, no he encontrado solución espero que esta vez si, por ahi habia unos problemas parecidos pero igual tampoco le dieron solución:

Bueno paso a explicar.

Como podrán ver mi sidebar no llega hasta el footer, no soy bueno en css ni html, pero a base de tutoriales he modificado al máximo esta plantilla.

El problema tambien pasa en el background principal si es que ves una sola entrada, entonces es el sidebar que se va hacia abajo (tiene de height: 8000 px) y el body se queda sin llegar al footer.

Es como he descartado que el problema no solo es del sidebar, además que también probé reemplazando todo la cadena css del sidebar por la cadena original y no logré solucionarlo.


Espero me haya dejado entender y que me puedan ayudar.

Aquí les paso mi plantilla:

Código:

#outer-wrapper {
        
        margin: 0px auto 0px auto;
        padding: 0 0 0px 0;
}

#wrap2 {
	margin: 0 auto 0px auto;
	width: 970px;
	text-align: left;
       
}

#navbar-iframe {
   height:0px;
   visibility:hidden;
   display:none
}

/*-- (Generales) --*/

body, h1, h2, h3, h4, h5, h6, p, form {
	margin: 0;
	padding: 0;
}

body {
	margin: 0;
	font-family: Arial, Helvetica, Georgia, Sans-serif;
	font-size: 12px;
	vertical-align: top;
	background: $bgcolor;
        color:$textocolor;
background-image:url();
background-attachment: fixed;
background-repeat: repeat-y;
background-position: center center;
}

h1 {
	font-family: Arial, Sans-serif;
	font-size: 30px;
	padding: 0 0 10px 0;
       
}

a:link, a:visited {
	text-decoration: none;
	color: $enlacecolor;
}

a:hover {
	text-decoration: none;
}
.post img { 
padding:4px; 
border:2px solid #cc0000; 
}

a img {
border:0;
}

p {
	padding: 10px 0 0 0;
}


#main-wrapper {overflow:hidden;} 

.clear {clear:both;}  
  
#blog-pager-newer-link {float: left;} 

#blog-pager-older-link {float: right;} 

#blog-pager {text-align: center; }

/*-- (Cabecera) --*/

#header-wrapper{
color: #000;
width:967px;height:136px;
background: #000 url(http://i103.photobucket.com/albums/m147/Asuknamun/HeaderGamersofPeruGearsofWar2-1.jpg) no-repeat;
border:2px solid #cc0000; 
padding: 0 0 30px 0;
background-size: 100%;
background-position: center;
margin-top: 0;
margin-bottom: 0;
}

#header {
        float:left;
        width:300px;height:85px;
        margin-bottom:10px; padding:0;
        background-image:url(logo);
}

#header h1, #header p { display:none; visibility:hidden; height:0; }

#header_r {
        float:right;height:91px;width:506px;
        margin:0; padding:0;
      background-image:url();
       background-repeat: no-repeat;
       background-position: center top;
}

#header_r_ads {
        margin:2px 0 0 39px; padding:0;
        width:468px;
        height:62px;
                 

/*-- (Menú) --*/

#nav {
        clear:both;
        margin:0px auto 1px auto;
        width: 970px;
        height:31px;
        background: url(http://img101.imageshack.us/img101/7144/topmenubl0.jpg) repeat-x;
        overflow:hidden; 
}

#nav_l {
        float:left;
        width:865px;  
        margin:0px; padding:0px; 
        overflow:hidden;
        height:31px;
 
}

.menu {
        float:left;
        margin:5px 1px;
        padding:3px;
        width:500px;
}
	
.menu li {
	display: inline;
	list-style: none;
	margin:0;
	padding:0;
}

.menu ul, .menu ol {
        display: inline;
	list-style: none;
	margin:0;
	padding:0 10px 0 0;
}
		
.menu a, .menu a:visited {
	color: $colormenu;
	font-weight: bold;
	margin:0;
	padding: 3px 10px 3px 10px;
	text-decoration: none;
}
		
.menu a:hover {
	background: #000000;
	text-decoration: none;
        border:1px solid #000;


/*-- (Contenedor) --*/

#content-wrapper {

}

/*-- (Principal) --*/

#main-wrapper {
	float: left;
	width: 550px;
        padding: 6px 10px 10px 10px;
        text-align:justify;
        background: #ccffff;
        margin:0 auto 1px auto;
background-repeat: repeat-y;
}

#main-wrapper a {

}

#main-wrapper a:hover {
        
}

.post {
        padding: 2px 6px 10px 6px;
}

.post-title, .post-title a {
        margin:0 5px; padding:2px 0 0 0;
        color:$colortituloentrada;
}

.post h2 {
	font-family: Arial, Georgia, Sans-serif;
	font-size: 16px;
        margin:0 5px;
        text-align:left;
        text-transform:uppercase; 
}

/*-- (Lateral) --*/
#sidebar-wrapper {
	float: top;
	width: 398px;
	margin: 0px 0 0 2px;
        background:#d7eff8;
        background-repeat: repeat-y;
        height:8000px;

      
}

#sidebar-wrapper ul{
	list-style: none;
	margin:0; padding:0;
}

#sidebar-wrapper li{
	padding: 0;
	line-height: 24px;
}

#sidebar-wrapper h2 {
	font-family: Georgia, Sans-serif;
	font-size: 14px;
}

#sidebar_top {
        margin:6px 0 0 0;padding:8px;
        background:url(http://bp3.blogger.com/_Zuzii37VUO4/R2iVZCjZEfI/AAAAAAAACe4/ZO60BR2ICUo/s1600/sidebar_top.jpg) repeat-x;
        width: 369px;
        line-height:12px;
        text-align:justify;
        border:1px solid #91d3e9;
        font-size:10px;
        font-family:verdana;
}

#sidebar_top h4 {
        color:#0e5268;
        margin-bottom:3px;
        font-size:14px;
}

.widget-content {
}

.sidebar .widget {
	padding: 10px 0;
}

#sidebar1 {
        margin:0;padding: 0 1px 0 0;
        float:left;
        width:184px;
}

#sidebar1 ul{
	list-style: none;
}

#sidebar1 ul li {
	padding: 0 0 0 20px;
	line-height: 18px;
	font-family: Arial, Georgia, Sans-serif;
    background:url(http://asuknamun.googlepages.com/iconogopsidebar_16x16.jpg) no-repeat 0px 0px; 
}

#sidebar1 .widget {
	margin:0; padding:7px 0 0 8px;
	font-family: Arial, Georgia, Sans-serif;
	font-size: 11px;
    color:#gray;
	margin:0;
}

#sidebar1 .widget a:link, #sidebar1 ,widget a:visited {
        color:$colortextolateral;
        font-weight:700;
}

#sidebar1 h2{
	font-family: Verdana,Arial, Georgia, Sans-serif;
	font-size: 11px;
    background:url(http://img292.imageshack.us/img292/8485/pruebadetopsidebarxo1.jpg) no-repeat top left;
    margin:0; padding:7px 0 0 8px;
    height:30px;width:184px;
    color:$colortituloslateral;
    text-transform:uppercase;
}

#sidebar2 {
        margin:0;padding: 0 1px 0 0;
        float:right;
        width:188px;
}

#sidebar2 ul{
	list-style: none;
}

#sidebar2 .widget {
	padding: 10px 0 4px 0;
	font-family: Arial, Georgia, Sans-serif;
	font-size: 11px;
        color:#gray;
	margin:0;
        font-weight:bold;
}

#sidebar2 .widget a:link, #sidebar2 .widget a:visited {
        color:$colortextolateral;
        font-weight:700;
}

#sidebar2 h2{
	font-family: Verdana, Arial, Georgia, Sans-serif;
	font-size: 11px;
    background:url(http://img292.imageshack.us/img292/8485/pruebadetopsidebarxo1.jpg) no-repeat top left;
    margin:0; padding:7px 0 0 8px;
    height:30px;width:188px;
    color:$colortituloslateral;
    text-transform:uppercase;
}
#sidebar2 ul li{
	padding: 0 0 0 22px;
	line-height: 18px;
	font-family: Arial, Georgia, Sans-serif;
    background:url(http://asuknamun.googlepages.com/iconogopsidebar_16x16.jpg) no-repeat 2px 0px; 
}

/*-- (Pie de página) --*/

#footer-wrapper {
	clear: both;
	width: 970px;
        background:url(http://img184.imageshack.us/img184/6797/footerth5.jpg) repeat-x;
        padding:10px 0;
        margin:0;
}

#footer-wrapper .links {
	line-height: 13px;
        text-align:center;
        font-weight:700;
        color:#fff;
        padding: 2px 0;
        font-size: 10px;
        font-family:Verdana;
}

#footer-wrapper a {
        color:#afe1f3;
}

#footer-wrapper a:hover {
        color:#53c7f2;
}

/*-- (Comentarios) --*/

#comments h4 {
text-align:justify;
font-size:14px;
font-weight:bold;
}

#comments-block {
        margin:0 0 1px;
        padding:0;
       font-size:11px;
}

.comment-author {Asuknamun dijo}
border-top:1px dashed #31afda;
border-left:1px dashed #31afda;
border-right:1px dashed #31afda;
background:url(http://img136.imageshack.us/img136/9705/commentbackya4.jpg) repeat-x;
padding:6px 15px 0px 15px;
margin-left:0px;
display:block;
margin-top:10px;
color:#53c7f2;
}

.comment-body {
border-left:1px dashed #31afda;
border-right:1px dashed #31afda;
padding:5px 15px 5px 15px;
margin-left:0px;
display:block;
color:#000000;
background:url(http://img136.imageshack.us/img136/9705/commentbackya4.jpg) repeat-x;
}

#comments-block .comment-footer {
border-left:1px dashed #31afda;
border-right:1px dashed #31afda;
border-bottom:1px dashed #31afda;
margin-bottom:15px;
margin-left:0px;
padding:0px 15px 12px 15px;
display:block;
background:url(http://img520.imageshack.us/img520/7456/commentback2zh2.jpg) repeat-x;
}

.feed-links {
display: none;
visibility: hiden;
}
#comenta-outter {
margin: 50px 0;
}

#comenta-inner {
display: block;
height: 830px;
width: 520px;
margin:none;
border:none;
background-color: #fff;
}

#footer-columna-contenedor {
clear:both;
}

.footer-columna {
padding: 10px;
}

/* noticia*/
.noticia {
background: #66ccff url() 15px center no-repeat;
text-align: left;
padding: 5px 20px 5px 45px;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;

]]></b:skin  <b:else/>

Saludos.

Pd. Eliminé algunas cosas en el css por que no me djeaba poner mas de 10k de caracteres.
Espero que aun se entienda.

[emiliodeg]

tenes q ponerle una imagen de fondo al contenedor del side y del contenido que se repita en y asi simulas que el side se va hasta abajo
slaudos

[Aresillo]

Yo te diría que de esta parte del código, quitaras lo que te pongo en negrita..
#sidebar-wrapper {
float: top;
width: 398px;
margin: 0px 0 0 2px;
background:#d7eff8;
background-repeat: repeat-y;
height:8000px;

Pero la verdad es que no sé si te funcionará, prueba y me comentas... si no hay cambio, bórralo porque no es necesario...
Por cierto, si nos pusieras la url de tu web no tardaríamos nada en solucionarlo...


Aresillo!!

[willyfc]

hola
siquiendo con lo que dice Ares creo que vendría así

Código:

#sidebar-wrapper {
float:Top;
width: 398px;
margin: 0px 0 0 2px;
background:#d7eff8 repeat; /* si fuera necesario*/
height:auto;

no entiendo para que los 8000px de alto.

creo que sería mejor.

[Mikmoro]

Me parece que no estáis en lo correcto, porque creo que aquí de lo que se trata es otra vez de las columnas equilibradas, pero bueno, esperaremos a que nos ponga la url y nos aclare el problema con exactitud.

Quiero decir, el sidebar no es lo verde y se ha bajado, sino lo azul de encima del verde y no llega hasta abajo.

[Asuknamun]

Iniciado por emiliodeg

tenes q ponerle una imagen de fondo al contenedor del side y del contenido que se repita en y asi simulas que el side se va hasta abajo
slaudos

Lo intenté pero solo llega hasta el dinal de los widgets del sidebar, quizá si me dejas un ejemplo de como lo intento por que talvez lo haya estado haciendo mal, esa era una de las soluciones que encontraba en la web.

Iniciado por Aresillo

Yo te diría que de esta parte del código, quitaras lo que te pongo en negrita..
#sidebar-wrapper {
float: top;
width: 398px;
margin: 0px 0 0 2px;
background:#d7eff8;
background-repeat: repeat-y;
height:8000px;

Pero la verdad es que no sé si te funcionará, prueba y me comentas... si no hay cambio, bórralo porque no es necesario...
Por cierto, si nos pusieras la url de tu web no tardaríamos nada en solucionarlo...


Aresillo!!

Hola aresillo, tienes razón mi web es http://www.gamersofperu.com

[Aresillo]

Estás en lo cierto mik!!
Tienes que ponerle al main_wrapper un float:left
y al sidebar_wrapper--> float right

y borrar los 8000px de ancho del mail_wrapper

[Asuknamun]

Aresillo parece que estamos cerca de la solución, no estoy seguro pero cuando he puesto sidebar_wrapper--> float right este ha sido el resultado





Pd. los 8000 px de alto le puse para cubrir de alguna manera momentanea esa "falta" de background

[Aresillo]

A ver... te explico unas cosas...
Lo primero que tienes que hacer es poner al sidebar_wrapper esto:
float:right;

Si todavía no funciona, es por esto:
tu página la tienes puesta a 970px de ancho según se especifica en el wrapper_2, ok?
Por otro lado tenemos tu main_wrapper, el de la izda que tiene específicado 550px de ancho + 10px de padding por cada lado del main_wrapper. Total=550+20=570px
Y en el sidebar_wrapper, tienes definido 400px+2px en el lado izdo=402px
Sumamos y 570+402=972px

Ya nos dices...

Aresillo!!

[Asuknamun]

Gracias por la explicación Aresillo, no me había dado cuenta de ese detalle ya le bajé al main de 550 a 548, entonces el sidebar ha vuelto a su sitio e inclusive a quedado un espacio entre el body y la sidebar, pero el problema inicial persiste, osea el sidebar no llega hasta el footer.


Alguna otra solución ?


Quizás este datos les ayude, ver la imagen





Como verán si seleccionas una entrada el fondo que no llega hasta el footer es el del "main" y el sidebar si.


Disculpen que los moleste tanto pero estoy casi desesperados por que tengo que terminar el diseño del blog para meterme de lleno en el contenido y estas cosas me distraen mucho.

[Aresillo]

Vale...hasta aquí bien...
Lo que te toca ahora es un poco de tinglaete... porque no es sencillo...!!
Te pongo este ejemplo que es de Mikmoro, el que en los primeros post comentaba que pasaría lo que te ha pasado...
De esta forma es como tu quieres, es decir, que se agrande la de la izda cuando la dcha sea más grande ...
Pues aquí lo tienes...
Miralo, estudialo, y si tienes dudas las comentas...

Aresillo!!
PD: Para mirar el código del ejemplo:
Ctrl+U en Firefox
Ver/Código fuente en Internet Explorer

[Asuknamun]

Gracias por los esfuerzos aresillo, pero no he encontrado nada que me ayude a solucionar mi problema el ejemplo que me has dado no me dice nada ya que he probado algunas variables que han puesto allí y no me ha dado resultado.

Igual gracias por estar pendiente, me queda seguir investigando a que se debe el problema.

Pd. En google chrome es peor

[Aresillo]

El problema es el que te comento, no es otro...
Lo que tienes que hacer es usar la estructura del ejemplo que te di y ponerla en tu blog...

Aresillo!!

[Asuknamun]

Iniciado por Aresillo

El problema es el que te comento, no es otro...
Lo que tienes que hacer es usar la estructura del ejemplo que te di y ponerla en tu blog...

Aresillo!!

Aresillo, gracias por haber intentado solucionarme el problema, aquí les muestro la solución, ustedes que son capos ya lo usan como quieran, me ayudo Jmiur de vagabundia.

Código:

#content-wrapper {
}

Y le agrego una propiedad:

#content-wrapper {
overflow:hidden;
}

Busco esto y lo elimino:

#main-wrapper {overflow:hidden;} 

Busco #main-wrapper que ahora dice:

#main-wrapper {
    float: left;
    width: 550px;
        padding: 6px 10px 10px 10px;
        text-align:justify;
        background: #ccffff;
        margin:0 auto 1px auto;
background-repeat: repeat-y;
}

y lo cambio por esto:

#main-wrapper {
    float: left;
    width: 550px;
        padding: 6px 10px 10px 10px;
        text-align:justify;
        background-color: #ccffff;
margin-bottom:-32768px;
padding-bottom:32768px;
}

margin tiene un valor negativo, padding un valor positivo, el resto son correcciones menores.

Por último, busco #sidebar-wrapper que ahora dice

#sidebar-wrapper {
    float: right;
    width: 398px;
    margin: 0px 0 0 2px;
        background:#d7eff8;
        background-repeat: repeat-y;
        height:8000px;
}

y lo cambio por esto:

#sidebar-wrapper {
    float: right;
    width: 398px;
        background-color:#d7eff8;
margin-bottom:-32768px;
padding-bottom:32768px;
}

Elimino el height y vuelvo a poner el padding y el margin

El resultado esta en mi blog de pruebas:
http://plantillastester.blogspot.com/

y lo probé tanto en Firefox como en Internet Explorer 7

Lo dejo ahí hasta que lo veas.
________________________________________
 JMiur [ Vagabundia ]

Saludos y espero que le sirva a otras personas.

Pueden ver el resultado en http://www.gamersofperu.com