Problema com layout na resolução 1280 x 768

[Bia Munstein]

Oi gente, to precisando de uma ajudinha dos experts! rs essa ta ruim de resolver...

Eu dividi o cabeçalho do blog (www.euvouderosa.com) pra poder colocar Adsense ao lado do título. Aparentemente ficou bom, eu uso resolução 1024x768. Quando fui verificar na resolução 1280x768, o blog fica mais estreito, no meio página (até aí normal) mas a header, ou melhor, a imagem do topo e o meu menu horizontal fica à esquerda.

Já tentei mudar o float e nada... desconfigura tudo. Ou fica a esquerda ou fica a direita.

Eu queria que ficasse centralizado junto com o blog.

15% do meus leitores usam essa resolução e estou desperada já, porque fica um horror! Parece desleixo...

Agradeço quem puder me ajudar. Se quiserem eu coloco o código html.

Obs. eu fiz a divisão da header atravéz desse tuto: http://www.mundoblogger.com.br/2010/10/div...o-designer.html

Me ajuda aí gente? :)

Editado Novembro 8, 2010 por Bia Munstein

[_Vinny_]

1280x768 vai ser difícil, pois possuo a mesma resolução que você. Mas não custa tentar.

Certo, o erro que você vê é esse igual na imagem:

[Bia Munstein]

1280x768 vai ser difícil, pois possuo a mesma resolução que você. Mas não custa tentar.

Certo, o erro que você vê é esse igual na imagem:

Oi Vinny,

é esse erro que me referi sim! Eu também to achando super difícil... mesmo se não souber te agradeço a tentativa.

O código que eu uso é outro dilema, eu personalizei um template do blogger, desse novo, e tomei a maior coça pra conseguir editar o htlml novo deles. :(

Depois de achar que estava tudo funcionando bem, me deparo com isso! aff

Fica muito feio, meu blog é de menininha mas é coisa séria rs não posso ficar com esse problema.

Por fim se ninguém souber como arrumar vou tentar tirar a divisão que fiz na header. (pior que eu já tentei e não ocnsegui, mas acredito que possa ser mais fácil)

Obrigado

[_Vinny_]

meu blog é de menininha mas é coisa séria rs

E porque não seria???

--------------------------

Bom, primeiro tente editar o CSS, procure pela class #navigation, e procure esta linha:

margin:-10px 5px 1px 5px;

Altere para:

margin: 0 auto;

Isso fará o menu alinhar sempre no centro. Tente fazer isso primeiramente, se funcionar vamos prosseguir ao cabeçalho que é mais complicado. Alias, após a alteração teste na resolução 1280 para ver como ficou.

[Bia Munstein]

Funcionou! ai que bom... menos um problema! rs testei na 1280 e ficou bom também.

Eu brinquei sobre o blog ser sério, porque eu sou mulher, sou loira, o blog fala sobre cosméticos e maquiagens, então tem mta gente que acha que eu sou "burrinha e futil" digamos assim... mas não é verdade, sei que não sou digna de uma medalha por isso, mas personalizei meu template sozinha sem nenhuma noção de html, só pesquisando.

E não sou daquele tipo que fica pedindo pra todo mundo fazer as coisas que eu não consigo fazer, só vim aqui pedir ajuda porque revirei a net e não achei solução. (e porque sei que vocês são feras tambem rs)

Por isso te agradeço mais uma vez a atenção! :) e fico no aguardo de mais instruções.

Editado Novembro 9, 2010 por Bia Munstein

[_Vinny_]

Hum, o bicho ta pegando aqui pois não consigo encontrar uma solução razoável para o cabeçalho. Ao meu ver existe muito desnecessária nele, pois unicamente existe a imagem de logo com o link e a publicidade, em vez disso existe muitas divs deixando o código confuso. Você consegue da uma limpada no código deixando apenas o necessário??

A principio eu recomendo apenas três divs, a principal, uma para a imagem de logo e a outra para o adsense. Você conseguira fazer essa alteração?

[Bia Munstein]

ai acho que não... como eu disse não entendo muito de html, só sigo os tutos. Mas se explicar eu faço, ou se quiser fazer, por mim não tem problema. Mas se conseguir explicar eu tento.

esse código é do blogger, eu editei pouco. A header é esse tuto aqui: http://www.mundoblogger.com.br/2010/10/div...o-designer.html que eu fiz.

Editado Novembro 9, 2010 por Bia Munstein

[_Vinny_]

Hum, o ruim é que sou muito bom com esse tipo de blog, gosto apenas do que tenho acesso total ao código.

Vendo nesse site de tutoriais, encontrei esse tutorial aqui: http://www.mundoblogger.com.br/2009/10/div...o-elemento.html

Faz backup dos arquivos que estão atualmente e faz as modificações como descrita nesse tuto, o adsense você insere em assim:

<div id='header2'><b:section class='header2' id='header2' maxwidgets='1' showaddelement='yes'>
... Seu código aqui ...
</div>
<div style='clear:both;'/>
</div>

[Bia Munstein]

o problema é que esse tuto é pro código antigo do blogger não o código novo, por isso ela (a menina desse tuto) fez outro, o que eu citei acima pro novo designer do blog, que é o que eu uso.

Esse código que o blogger tinha (com #) não tem mais nos modelos de templates novos, aqueles que podem ser editado pelo "designer de modelo". Está tudo em ordem diferente.

[_Vinny_]

Ixi, o problema maior é que não mexo com este tipo de blog, por isso desconheço totalmente como fazer esse tipo de edição. Mas vamos em frente, não custa tentar.

Você consegue identificar todo o conteúdo do cabeçalho, poste-o aqui se encontrar.

[Bia Munstein]

Acho que é isso:

/* Header
----------------------------------------------- */
.header-inner {
  padding: 27px 0 3px;
}

.header-inner .section {
  margin: 0 35px;
}

.Header h1 {
  font: $(header.font);
  color: $(header.text.color);
}

.Header h1 a {
  color: $(header.text.color);
}

.Header .description {
  font-size: 115%;
  color: $(description.text.color);
}

.header-inner .Header .titlewrapper,
.header-inner .Header .descriptionwrapper {
  padding-left: 0;
  padding-right: 0;
  margin-bottom: 0
}

E isso aqui também:

<header>
    <div class='header-outer'>
<div id='header-left' style='width:5%; float: left; margin:0; '>
<b:section class='header-left' id='header-left' preferred='yes' style='float:left;'>
<b:widget id='Header1' locked='false' title='Eu vou de Rosa - Cabelos, tratamentos, maquiagem e cosméticos (Cabeçalho)' type='Header'/>
</b:section>
</div> 

<div id='header-right' style='width:75%; float: right; margin:0; '>
<b:section class='header-right' id='header-right' preferred='yes' style='float:right;'>
<b:widget id='AdSense3' locked='false' title='' type='AdSense'/>
</b:section>
</div>
<div style='clear:both;'/>

Editado Novembro 10, 2010 por _Vinny_
Adicioner tag [code]

[_Vinny_]

Certo, eu verei tudinho e vou tentar encontrar uma alternativa para arrumar o cabeçalho.