(Resolvido) Alinhar widgets

[ThaisL]

Olá, pessoal! :)

Baixei recentemente o template K2 (mais usado em wordpress) para o meu blogger.

Fiz as alterações necessárias antes de criar qualquer postagem. Ai, quando publiquei o primeiro texto, percebi uma diferença enorme de espaço entre o primeiro widget e os seguintes. Vide foto: http://migre.me/Tpzr

Como tenho pouca noção de codigos html, fui modificando aos poucos a fim de tentar descobrir o que estava errado. Futriquei em muita coisa e já não lembro o que alterei, mas em uma dessas mudanças, lembro de conseguir fazer com que todos ficassem alinhados, porém, as postagens sumiram.

Enfim, até agora não consegui resolver o problema. Espero que vocês consigam me ajudar ;)

Segue o link do blog caso queiram ver o código-fonte: http://www.aos27.blogspot.com

PS: eles só ficam desalinhados no firefox, já no iexplorer, não.

Editado Julho 5, 2010 por ThaisL
Retirar a palavra DUVIDA do título conforme regra 3.6 *FIT*

[Thelon]

Alterações em templates de blogger ou wordpress em geral é bem complicado

ainda mais quando não se tem um bom conhecimento na edição deles.

E ajudar é pior ainda pois os códigos são bem confusos.

Então como diria meu amigo jack estripador "Vamos por partes"

aposto 12 jujubas que o seu problema seja esse demarcado pelo quadrado vermelho

Se você ver ali em cima próximo a barra de endereço você vai saber qual o nome dele e dentro do que ele está

tente diminuir a altura (height) dele e veja se melhora

se não for altura tente achar algum padding ou margin

caso você não consiga mesmo assim ou se perca nesse emaranhado de código

torne a postar que vemos o que da para ser feito :P

EDIT:

Se está começando um blog agora te aconselho a usar a plataforma wordpress

além de ser mais simples de se tranferir para outro servidor e/ou mudar para um dominio proprio

Ele te da muito mais liberdade de plugins e alterações.

Tenho um conhecimento razoável nele e posso te dar uma força se for o caso

Já utilizei muito ambos (wordpress e blogger) e definitivamente o wordpress

é de 1000 a 0

[ThaisL]

Well, não encontrei! heheh :)

Não sei se fica melhor, mas aí está o link com o código do template:

http://rapidshare.com/files/405118451/template-blog.xml

Eu já usava wordpress e sei o quanto ele é bom, mas ultimamente o blogger tem sido bem mais prático pra mim...

[Thelon]

A única coisa que percebi é que esse espaço vem do ID Image1

Porém não encontro aonde está a formatação dele no CSS

Tente localizar ele porque por aqui eu não achei.

[ThaisL]

Seria isso?

</b:includable>
</b:widget>
<b:widget id='Image4' locked='false' title='' type='Image'>
<b:includable id='main'>
    <b:if cond='data:title != &quot;&quot;'>
      <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>
      <b:if cond='data:link != &quot;&quot;'>
        <a expr:href='data:link'>
          <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl' expr:width='data:width'/>
        </a>
      <b:else/>
        <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl' expr:width='data:width'/>
      </b:if>
      <br/>
      <b:if cond='data:caption != &quot;&quot;'>
        <span class='caption'><data:caption/></span>
      </b:if>
    </div>
    <b:include name='quickedit'/>
  </b:includable>
</b:widget>
<b:widget id='Image1' locked='false' title='' type='Image'>
<b:includable id='main'>
    <b:if cond='data:title != &quot;&quot;'>
      <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>
      <b:if cond='data:link != &quot;&quot;'>
        <a expr:href='data:link'>
          <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl' expr:width='data:width'/>
        </a>
      <b:else/>
        <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl' expr:width='data:width'/>
      </b:if>
      <br/>
      <b:if cond='data:caption != &quot;&quot;'>
        <span class='caption'><data:caption/></span>
      </b:if>
    </div>
    <b:include name='quickedit'/>
  </b:includable>
</b:widget>
<b:widget id='Image2' locked='false' title='' type='Image'>
<b:includable id='main'>
    <b:if cond='data:title != &quot;&quot;'>
      <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>
      <b:if cond='data:link != &quot;&quot;'>
        <a expr:href='data:link'>
          <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl' expr:width='data:width'/>
        </a>
      <b:else/>
        <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl' expr:width='data:width'/>
      </b:if>
      <br/>
      <b:if cond='data:caption != &quot;&quot;'>
        <span class='caption'><data:caption/></span>
      </b:if>
    </div>
    <b:include name='quickedit'/>
  </b:includable>
</b:widget>
<b:widget id='Image3' locked='false' title='' type='Image'>
<b:includable id='main'>
    <b:if cond='data:title != &quot;&quot;'>
      <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>
      <b:if cond='data:link != &quot;&quot;'>
        <a expr:href='data:link'>
          <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl' expr:width='data:width'/>
        </a>
      <b:else/>
        <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl' expr:width='data:width'/>
      </b:if>
      <br/>
      <b:if cond='data:caption != &quot;&quot;'>
        <span class='caption'><data:caption/></span>
      </b:if>
    </div>
    <b:include name='quickedit'/>
  </b:includable>
</b:widget>
</b:section>
      </div>

[Thelon]

Não :(

eu procurei no arquivo que você disponibilizou e não encontrei

é possível que esteja em um arquivo .css ou .html mesmo

[ThaisL]

Na parte do código:

.secondary {
    font: 1em/1.5em 'Lucida Grande', Verdana, Arial, Sans-Serif;
    padding: 10px 0;
    margin: 0 0 10px 71%;
    width: 26%;
    color: #666;
    position: absolute;
    /* The following are IE Fixes */
    /*_padding: 30px 0 10px;
    _margin-left: 0%;
    _margin-right: -4%;
    _width: 26.5%;*/ /* IE hack */
    }

Alterei a posição para "absolute" e resolveu o problema em firefox. Agora quando abri o blog em IE, os widgets sumiram! hahahahaha

Eita coisa louca!

[Thelon]

tenta tirar os hacks do IE

/* The following are IE Fixes */
    /*_padding: 30px 0 10px;
    _margin-left: 0%;
    _margin-right: -4%;
    _width: 26.5%;*/ /* IE hack */

[ThaisL]

Não adiantou. Só aparece no IE quando eu mudo para "position: relative" e no firefox "position: absolute" hahaha

acho que é melhor desistir, né?

[Thelon]

não tive uma idéia supimpa

faz um comentário condicional para o IE :)

http://www.quirksmode.org/css/condcom.html

no do IE poem relative e no normal deixa o absolute

<!--[if IE 6]>
<style>
.secondary {

    position: relative;

    }
</style>
<![endif]-->

[ThaisL]

desculpe a ignorância, mas onde exatamente eu colo esse código? :P rsrs

[Thelon]

corrigindo:

<!--[if IE]>
<style>
.secondary {

    position: relative;

    }
</style>
<![endif]-->

Pode inseri-lo antes da tag </head>

no HTML

se não der certo ou não tiver como (não lembro como funciona o blogspot)

Ai você tenta nesses arquivos que eu alterei

* não esqueça de tirar o 2 do segundo arquivo

[ThaisL]

uhuuuuu! deu certo sim :D

uau, MUITO MUITO obrigada! :lol:

[Thelon]

O IE é cheio de bug quanto a CSS

quando precisar de uma olhada no site e blog do Maujor

terá bastante soluções :)

[ThaisL]

tá ok! ;)

brigada de novo!