Foros del Web » Creando para Internet » CSS »

Problema con mi plantilla(Sidebar)

Estas en el tema de Problema con mi plantilla(Sidebar) en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 20/11/2008, 12:06
 
Fecha de Ingreso: noviembre-2008
Ubicación: Madrid
Mensajes: 23
Antigüedad: 9 años
Puntos: 0
Exclamación Problema con mi plantilla(Sidebar)

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.
  #2 (permalink)  
Antiguo 20/11/2008, 12:55
Avatar de emiliodeg  
Fecha de Ingreso: septiembre-2005
Ubicación: Córdoba
Mensajes: 1.830
Antigüedad: 12 años, 3 meses
Puntos: 54
Respuesta: Problema con mi plantilla(Sidebar)

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
__________________
Degiovanni Emilio
developtus.com
  #3 (permalink)  
Antiguo 20/11/2008, 13:19
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
Respuesta: Problema con mi plantilla(Sidebar)

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!!
  #4 (permalink)  
Antiguo 20/11/2008, 13:29
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: Problema con mi plantilla(Sidebar)

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.
  #5 (permalink)  
Antiguo 20/11/2008, 13:31
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Problema con mi plantilla(Sidebar)

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.
__________________
Visita mi nueva web idplus.org
  #6 (permalink)  
Antiguo 20/11/2008, 13:33
 
Fecha de Ingreso: noviembre-2008
Ubicación: Madrid
Mensajes: 23
Antigüedad: 9 años
Puntos: 0
Respuesta: Problema con mi plantilla(Sidebar)

Cita:
Iniciado por emiliodeg Ver Mensaje
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.


Cita:
Iniciado por Aresillo Ver Mensaje
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
  #7 (permalink)  
Antiguo 20/11/2008, 14:08
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
Respuesta: Problema con mi plantilla(Sidebar)

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
  #8 (permalink)  
Antiguo 20/11/2008, 15:52
 
Fecha de Ingreso: noviembre-2008
Ubicación: Madrid
Mensajes: 23
Antigüedad: 9 años
Puntos: 0
Respuesta: Problema con mi plantilla(Sidebar)

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
  #9 (permalink)  
Antiguo 20/11/2008, 17:03
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
Respuesta: Problema con mi plantilla(Sidebar)

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!!
  #10 (permalink)  
Antiguo 20/11/2008, 17:57
 
Fecha de Ingreso: noviembre-2008
Ubicación: Madrid
Mensajes: 23
Antigüedad: 9 años
Puntos: 0
Respuesta: Problema con mi plantilla(Sidebar)

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.

  #11 (permalink)  
Antiguo 20/11/2008, 18:52
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
Respuesta: Problema con mi plantilla(Sidebar)

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
  #12 (permalink)  
Antiguo 20/11/2008, 20:42
 
Fecha de Ingreso: noviembre-2008
Ubicación: Madrid
Mensajes: 23
Antigüedad: 9 años
Puntos: 0
Respuesta: Problema con mi plantilla(Sidebar)

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
  #13 (permalink)  
Antiguo 21/11/2008, 02:56
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
Respuesta: Problema con mi plantilla(Sidebar)

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!!
  #14 (permalink)  
Antiguo 04/12/2008, 21:48
 
Fecha de Ingreso: noviembre-2008
Ubicación: Madrid
Mensajes: 23
Antigüedad: 9 años
Puntos: 0
Respuesta: Problema con mi plantilla(Sidebar)

Cita:
Iniciado por Aresillo Ver Mensaje
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
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 17:25.