Ayuda con plantilla en Blogger!

Wizard · 4 Sep 2013

Buenas tardes amigos, disculpen, pueden ayudarme con una plantilla que ando haciendo con el uso de CSS?, lo que sucede es que tengo este blog: pero la plantilla tarda en cargar ya que casi toda está construída con imágenes, y entonces la estoy creando ahora, pero en CSS, para que cargue más rápida, y tratar de hacerla responsive para teléfonos y tablets, ahora bien, me encontré un problema el cual es:

¿Cómo hago para que la sidebar se extienda hasta abajo?, porque quiero que la sidebar se ajuste a la altura del tamaño del artículo, si se fijan en la página que pasé primero, esa plantilla lo hace, pero ahora en la que estoy construyendo desde 0: no se adapta y únicamente agarra la altura de los widgets que coloque en ese lugar, ya que únicamente agarra el tamaño del sidebar, saben como podría hacer que el background de esa sidebar se extienda hasta abajo? para luego luego hacer un footer y colocarlo junto, como en la primera plantilla?, ojalá puedan ayudarme amigos. Muchas gracias de antemano. Saludos!

Flames · 4 Sep 2013

de momento se me ocurre que con height: 1500px

Wizard · 4 Sep 2013

Flames dijo:
de momento se me ocurre que con height: 1500px

Lo que ocurre con colocar una altura fija, es que no todas las entradas tienen la misma cantidad de palabras, y puede que algunas veces esa altura quede muy amplia, o si es un artículo grande quede muy pequeña, lo que haría que se deformara la plantilla, por ello no tengo pensado agregar alturas fijas, lo que ando buscado es alguna forma de buscar una forma, en la que la altura del footer, y de la sidebar vayan juntas dependiendo del tamaño de la entrada, pero no encuentro nada

Flames · 4 Sep 2013

Es correcto lo que dices pero es la unica solución que se me ocurre en este rato.

Wizard · 4 Sep 2013

Flames dijo:
Es correcto lo que dices pero es la unica solución que se me ocurre en este rato.

Vale, no hay problema, toda ayuda es bien agradecida :encouragement:

Flames · 4 Sep 2013

Estaba mirando las plantillas picture window (blogger por defecto) y se me ocurre que tendrías que hacer algo asi. Encerrar el main y la sidebar en un div, y ponerlo de background cosa que no se vea en el main pero si como fondo de la sidebar.
No se si me explico.

Wizard · 4 Sep 2013

Flames dijo:
Estaba mirando las plantillas picture window (blogger por defecto) y se me ocurre que tendrías que hacer algo asi. Encerrar el main y la sidebar en un div, y ponerlo de background cosa que no se vea en el main pero si como fondo de la sidebar.
No se si me explico.

Esta un poquito difícil, eso ya lo había intentado, pero al hacerlo, no se porque el color que agrego, se le coloca de fondo a las entradas, y la sidebar baja de su lugar x_X

Quizá puedan ayudar [MENTION=28190]ecoal95[/MENTION] [MENTION=9679]cicklow[/MENTION] :$

ecoal95 · 5 Sep 2013

Eso con CSS es ahora mismo imposible como tal (dentro de poco viene flexbox al rescate).

Hay diversas soluciones, a cada cual más truculenta. Una es crear un div sólo como fondo y posicionarlo absolutamente. Supongamos que la sidebar tiene 300px de ancho.

HTML:

<!-- El div que contiene tanto el contenido como la sidebar -->
<div class="container">
    <div class="sidebar-bg"></div>
    <aside class="sidebar"><!-- --></aside>
    <div class="content" role="main"><!-- --></div>
</div>

Insertar CODE, HTML o PHP:

.container {
    position: relative;
    /*Supongamos que es así todo el sitio salvo en pantallas menores, hacerlo flexible requeriría más css*/
    width: 900px;
    margin: 0 auto;
    overflow: hidden; /*clearfix*/
}
.sidebar {
    width: 300px;
    float: left;
}
.content {
   width: 600px;
   float: left;
}
.sidebar-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 300px; /* El de la sidebar */
    height: 100%;
    background: blue; /* El fondo de la sidebar */
    /* juega con el z-index y el orden de los elementos si se ve por encima de la sidebar */
}

Actualmente podrías fingirlo con linear-gradient sin necesidad del <div> extra:

Insertar CODE, HTML o PHP:

.container {
    background-image: linear-gradient(0, blue, 300px blue, 300px white, white);
}

O usar una imagen en lugar del <div>, o usar tablas, o pseudoelementos (Demo: Multiple Backgrounds with CSS 2.1 ? Nicolas Gallagher)...

Wizard · 6 Sep 2013

[MENTION=28190]ecoal95[/MENTION] Cuando vi esto me emocioné jeje, pero lo implementé en el blog (Solamente sidebar-bg, porque ya tengo el resto de los divs que me has dado), y la verdad es que el div, queda afuera de la sidebar específicamente a la izquierda superior de toda la web x_X, de todos modos muchas gracias amigo!

Wizard · 8 Sep 2013

Alguien conoce alguna forma?

ecoal95 · 8 Sep 2013

Pedro Fumero dijo:
[MENTION=28190]ecoal95[/MENTION] Cuando vi esto me emocioné jeje, pero lo implementé en el blog (Solamente sidebar-bg, porque ya tengo el resto de los divs que me has dado), y la verdad es que el div, queda afuera de la sidebar específicamente a la izquierda superior de toda la web x_X, de todos modos muchas gracias amigo!

Por eso hace falta el position: relative en el padre, para que quede posicionado

Wizard · 8 Sep 2013

ecoal95 dijo:
Por eso hace falta el position: relative en el padre, para que quede posicionado

Ahí se lo agregue pero igualmente no funciona, disculpa la molestia pero te puedo pasar el estilo css y puedes editar lo que haga falta por favor? está en un archivo externo al blog.

ecoal95 · 12 Sep 2013

Pedro Fumero dijo:
Ahí se lo agregue pero igualmente no funciona, disculpa la molestia pero te puedo pasar el estilo css y puedes editar lo que haga falta por favor? está en un archivo externo al blog.

Perdona por tardar tanto, llevo una semana de locos... Si sigues con el problema sí, envíame el link por mp o como quieras, pero necesitaría también la url del blog para ver la estructura.