Foros del Web » Creando para Internet » Diseño web »

Problema con la sidebar de un blog

Estas en el tema de Problema con la sidebar de un blog en el foro de Diseño web en Foros del Web. Hola, soy nuevo en el foro y por fin he dado el paso a registrarme después de mucho tiempo leyéndolo. He decidido abrir un tema ...
  #1 (permalink)  
Antiguo 24/11/2008, 13:01
Avatar de indiepolis  
Fecha de Ingreso: noviembre-2008
Mensajes: 5
Antigüedad: 9 años
Puntos: 0
Problema con la sidebar de un blog

Hola,

soy nuevo en el foro y por fin he dado el paso a registrarme después de mucho tiempo leyéndolo.

He decidido abrir un tema ya que desde hace algunas semanas tengo un problema con la sidebar del blog que me está dando muchos quebraderos de cabeza.
El problema es que no sé porque la sidebar que estaba a la derecha se ha colocado en la parte baja del blog (http://indiepolis.blogspot.com/) , lo curioso es que esto sólo pasa en la portada, ya que si pinchas en alguna entrada el formato del blog se ve bien, por ejemplo en esta (http://indiepolis.blogspot.com/2008/11/franz-ferdinand-ulysses.html). A su vez el blog tiene un footer que se ve cortado por este problema.

No sé que hacer, y si alguien tiene alguna idea lo agradecería mucho.

Aquí os dejo el código dónde se declaran las distintas partes del blog.Es raro que sólo se muestre mal en la portada.

Código:
body {
  background:$bgcolor;
  margin:0;
  color:$textcolor;
  font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
  font-size/* */:/**/small;
  font-size: /**/small;
  text-align: center;
  }
a:link {
  color:$linkcolor;
  text-decoration:none;
  }
a:visited {
  color:$visitedlinkcolor;
  text-decoration:none;
  }
a:hover {
  color:$titlecolor;
  text-decoration:underline;
}
a img {
  border-width:0;
  }

/* Header
-----------------------------------------------
 */

#header-wrapper {
  width:900px;
  margin:0 auto 10px;
  border:1px solid $bordercolor;
  }

#header-inner {
  background-position: center;
  margin-$startSide: auto;
  margin-$endSide: auto;
}

#header { 
  margin: 5px;
  border: 1px solid $bordercolor;
  text-align: center;
  color:$pagetitlecolor;
}

#header h1 {
  margin:5px 5px 0;
  padding:15px 20px .25em;
  line-height:1.2em;
  text-transform:uppercase;
  letter-spacing:.2em;
  font: $pagetitlefont;
}

#header a {
  color:$pagetitlecolor;
  text-decoration:none;
  }

#header a:hover {
  color:$pagetitlecolor;
  }

#header .description {
  margin:0 5px 5px;
  padding:0 20px 15px;
  max-width:700px;
  text-transform:uppercase;
  letter-spacing:.2em;
  line-height: 1.4em;
  font: $descriptionfont;
  color: $descriptioncolor;
}

#header img {
  margin-$startSide: auto;
  margin-$endSide: auto;
}


/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
  width: 900px;
  margin:0 auto;
  padding:10px;
  text-align:$startSide;
  font: $bodyfont;
  }

#main-wrapper {
  width: 550px;
  float: left; /* $startSide; */
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }

#sidebar-wrapper {
  width: 250px;
  float: right; /* $endSide; */
  margin-left:10px;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
}


/* Headings
----------------------------------------------- */

h2 {
  margin:1.5em 0 .75em;
  font:$headerfont;
  line-height: 1.4em;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:$sidebarcolor;
}


/* Posts
-----------------------------------------------
 */
h2.date-header {
  margin:1.5em 0 .5em;
  }

.post {
  margin:.5em 0 1.5em;
  border-bottom:1px dotted $bordercolor;
  padding-bottom:1.5em;
  }
.post h3 {
  margin:.25em 0 0;
  padding:0 0 4px;
  font-size:140%;
  font-weight:normal;
  line-height:1.4em;
  color:$titlecolor;
}

.post h3 a, .post h3 a:visited, .post h3 strong {
  display:block;
  text-decoration:none;
  color:$titlecolor;
  font-weight:bold;
}

.post h3 strong, .post h3 a:hover {
  color:$textcolor;
}

.post p {
  margin:0 0 .75em;
  line-height:1.6em;
}

.post-footer {
  margin: .75em 0;
  color:$sidebarcolor;
  text-transform:uppercase;
  letter-spacing:.1em;
  font: $postfooterfont;
  line-height: 1.4em;
}

.comment-link {
  margin-$startSide:.6em;
  }
.post img {
  padding:4px;
  border:1px solid $bordercolor;
  }
.post blockquote {
  margin:1em 20px;
  }
.post blockquote p {
  margin:.75em 0;
  }

/* Comments
----------------------------------------------- */
#comments h4 {
  margin:1em 0;
  font-weight: bold;
  line-height: 1.4em;
  text-transform:uppercase;
  letter-spacing:.2em;
  color: $sidebarcolor;
  }

#comments-block {
  margin:1em 0 1.5em;
  line-height:1.6em;
  }
#comments-block .comment-author {
  margin:.5em 0;
  }
#comments-block .comment-body {
  margin:.25em 0 0;
  }
#comments-block .comment-footer {
  margin:-.25em 0 2em;
  line-height: 1.4em;
  text-transform:uppercase;
  letter-spacing:.1em;
  }
#comments-block .comment-body p {
  margin:0 0 .75em;
  }
.deleted-comment {
  font-style:italic;
  color:gray;
  }

.feed-links {
  clear: both;
  line-height: 2.5em;
}

#blog-pager-newer-link {
  float: $startSide;
 }
 
#blog-pager-older-link {
  float: $endSide;
 }
 
#blog-pager {   
  text-align: center; 
 }

/* Sidebar Content
----------------------------------------------- */
.sidebar { 
  color: $sidebartextcolor;
  line-height: 1.5em;
 }

.sidebar ul {
  list-style:none;
  margin:0 0 0;
  padding:0 0 0;
}
.sidebar li {
  margin:0;
  padding-top:0;
  padding-$endSide:0;
  padding-bottom:.25em;
  padding-$startSide:15px;
  text-indent:-15px;
  line-height:1.5em;
  }

.sidebar .widget, .main .widget { 
  border-bottom:0px dotted $bordercolor;
  margin:0 0 1.5em;
  padding:0 0 1.5em;
 }

.main .Blog { 
  border-bottom-width: 0;
}

/* Profile 
----------------------------------------------- */
.profile-img { 
  float: $startSide;
  margin-top: 0;
  margin-$endSide: 5px;
  margin-bottom: 5px;
  margin-$startSide: 0;
  padding: 4px;
  border: 1px solid $bordercolor;
}

.profile-data {
  margin:0;
  text-transform:uppercase;
  letter-spacing:.1em;
  font: $postfooterfont;
  color: $sidebarcolor;
  font-weight: bold;
  line-height: 1.6em;
}

.profile-datablock { 
  margin:.5em 0 .5em;
}

.profile-textblock { 
  margin: 0.5em 0;
  line-height: 1.6em;
}

.profile-link { 
  font: $postfooterfont;
  text-transform: uppercase;
  letter-spacing: .1em;
}

/* Footer
----------------------------------------------- */
#footer {
  width:900px;
  clear:both;
  margin:0 auto;
  padding-top:15px;
  line-height: 1.6em;
  text-transform:uppercase;
  letter-spacing:.1em;
  text-align: left;
}

Gracias de antemano.
  #2 (permalink)  
Antiguo 24/11/2008, 13:30
 
Fecha de Ingreso: abril-2003
Mensajes: 1.129
Antigüedad: 14 años, 8 meses
Puntos: 34
Respuesta: Problema con la sidebar de un blog

Revisa si en algunos de los posts no pusiste una imagen o algo que ocupe mas de 550 pixeles de ancho...

Me gustaría revisarlo, pero lamentablemente tu blog es tan largo, que tiene tantos posts en la pagina de incio que no carga y se me tilda el navegador...

Eso es algo que tambien deberías revisar y no tener todos los posts ahí, sino los 5 a 7 mas recientes...

Además eso te ayudara a saber en que sector esta el post del conflicto, o si el problema esta en el sidebar...
__________________
elGastronomo

Última edición por American2010; 24/11/2008 a las 13:36
  #3 (permalink)  
Antiguo 24/11/2008, 14:18
Avatar de indiepolis  
Fecha de Ingreso: noviembre-2008
Mensajes: 5
Antigüedad: 9 años
Puntos: 0
Respuesta: Problema con la sidebar de un blog

ok muchas gracias! Me orientaré por ahi!
  #4 (permalink)  
Antiguo 25/11/2008, 02:48
Avatar de indiepolis  
Fecha de Ingreso: noviembre-2008
Mensajes: 5
Antigüedad: 9 años
Puntos: 0
Respuesta: Problema con la sidebar de un blog

He probado con lo que me dijiste, he disminuido la cantidad de entradas en la portada y sólo se ha puesto bien cuando había sólo 2. Pero no tiene mucho sentido, puesto que al pinchar en algunas de las categorías que tienen más entradas asociadas sale bien. Así que sigo sin detectar el problema.
También probé a cambiar la plantilla a la que tenía en esencia, la minimal dark ,y sin hacerle ningún ajuste a la plantilla, también salía mal.

Toda ayuda es bien recibida, ya que estoy completamente perdido. Gracias.
  #5 (permalink)  
Antiguo 25/11/2008, 06:42
 
Fecha de Ingreso: abril-2003
Mensajes: 1.129
Antigüedad: 14 años, 8 meses
Puntos: 34
Respuesta: Problema con la sidebar de un blog

La verdad que tampoco veo el problema donde esta, al pasar a una segunda pagina de entradas mas antiguas se ve bien...

Es sólo en la de inicio...

Mejor trata de contactar con ayuda de Blogspot
__________________
elGastronomo
  #6 (permalink)  
Antiguo 25/11/2008, 06:49
 
Fecha de Ingreso: abril-2003
Mensajes: 1.129
Antigüedad: 14 años, 8 meses
Puntos: 34
Respuesta: Problema con la sidebar de un blog

¿Podría estar acá el problema?

No lo se, tanto no entiendo...

Pero busca que hacen estas lineas que quizas sean las conflictivas

Código:
#main-wrapper {
  width: 550px;
  float: left; /* $startSide; */
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }

#sidebar-wrapper {
  width: 250px;
  float: right; /* $endSide; */
  margin-left:10px;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
}
__________________
elGastronomo
  #7 (permalink)  
Antiguo 25/11/2008, 07:46
Avatar de indiepolis  
Fecha de Ingreso: noviembre-2008
Mensajes: 5
Antigüedad: 9 años
Puntos: 0
Respuesta: Problema con la sidebar de un blog

Ok las echaré un vistazo, aunque lo unico que cambie de esas sentencias fuerons los width correspondients, de todas formas gracias por el consejo...también estoy intentando pornerme en contacto con la gente de blogspot.

Gracias!!
  #8 (permalink)  
Antiguo 25/11/2008, 17:18
 
Fecha de Ingreso: abril-2003
Mensajes: 1.129
Antigüedad: 14 años, 8 meses
Puntos: 34
Respuesta: Problema con la sidebar de un blog

No tanto por los width, sino por esto que dice aca

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

Como que eso evita que los textos largos "quiebren" la sidebar en IE
__________________
elGastronomo
  #9 (permalink)  
Antiguo 27/11/2008, 12:40
Avatar de paulettesol  
Fecha de Ingreso: noviembre-2008
Mensajes: 4
Antigüedad: 9 años
Puntos: 0
De acuerdo Respuesta: Problema con la sidebar de un blog



Hola..recièn llego al foro..y veo tu consulta..tal vez la solucionaste..si?..igual te digo las posibles opciones..

El ancho total de tu blog.por lo que veo en el dato que pasas aqui:

#header-wrapper {
width:900px; es correcto..ya que estàs ocupando 500px..para la parte de tus emisiones y 250 para la sidebar...
O sea que te queda un margen considerable entre ambos..

900_250_500..... 150 px de margen

Pero en cuanto estàn estos valores que tambìèn determinan el ancho total del blog?

#outer-wrapper 900???
#footer-wrapper 900???


Si incrustas algoen la sidebar que tenga mas de 250 px..existe la posibilidad remota de que esta se vaya para el final del blog...Pero lo mas comùn es que veas obviamente que es mas grande que el ancho total
No es necesario que borres las entradas.
Solo tenès que mirar mirar toda la que tenes en la sidebar no en el panel porque si algo sobrepasa solo vas a ver que se corta en un lugar idebido..el problema esta en la SIDEBAR o en EL ANCHO TOTAL DEL BLOG...O EN ALGO INCRUSTADO DE MAS DE " 250PX
Si tenès arriba del blog..la barra de direcciones solo entras en:

Personalizar
Se te abre el escritorio..
Desde alli vas a Diseño
Elementos de pagina



Alli ves todas las entradas ( a la derecha)..de la sidebar con los titulos que le hayas puesto..solo tenes que editarla(lo dice al costado derecho de cada entrada) y te sale una planilla pequeña en HTML..miras el WITH..y modificàs lo que veas que sobrepasa los 250px

Por ùltimo no sè si tenes otro fondo del blog..ya que no se puede acceder a la direcciòn que diste..porque es planilla HTML.no se puede acceder por el navegador no se ve TU BLOG:

Si tenes un fondo de pantalla que importartaste o agregaste..eso tambièn regula...TODA la composiciòn del blog..pero es parte de la segunda historia..!!!

Besos..espero te sirva..y si no es asì comentanos..no existen tantos motivos
como para que de error.

Y esto recièn lo veo....!!!!!

#sidebar-wrapper {
width: 250px;
float: right; /* $endSide; */

El endside te esta diciendo que la tenes en el END..FIN del blog(la sidebar)..modificàlo a

float: left; /* $startSide; */

Paulette
  #10 (permalink)  
Antiguo 27/11/2008, 13:44
Avatar de paulettesol  
Fecha de Ingreso: noviembre-2008
Mensajes: 4
Antigüedad: 9 años
Puntos: 0
Exclamación Respuesta: Problema con la sidebar de un blog

Hola!!!!


Entre en tu page..fijate que en el fondo del blog..tenes algo con la hora arriba
y varios directorios de blogs..hispanos..te esta ocupando hasta la mitad de la sidebar....es eso!!

No te da el ancho de ninguna de las dos columnas para tenerlo abajo!! si¿
Ingresa a la parte de ediciòn de ese gadget(tiene por lo menos 800 px),o incluilo en la sidebar o arriba de las ediciones pero NO con ese ancho


Besos buena!! page...


Paulette
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 13:38.