Problemas com Html, Menu Blogger

[hes wolf 0]

Primeiro vou falando que não sou nenhum Web Designer nem nada. Sou um teimoso que não gosto de seguir modelos e padrões predefinidos e sempre quero as coisas do seu jeito. Dessa forma meti a besta a tentar bulir com códigos html e css. Mesmo sem entendê-los por completo. Passei semanas quebrando a cabeça e com dor de cabeça de tentar montar o meu blog do jeito que eu queria.

 

Já consegui fazer muita coisa e resolver vários abacaxís, mas apareceu um que eu não estou conseguindo resolver. O template do meu blogg ficou tão complexo na linguagem html que eu mesmo tou me perdendo. Por isso vim pedir ajuda a vocês, não aguento mais essas dores de cabeça. O PROBLEMA É O Menu! Ele ta aparecendo por cima das imagens das postagens quando clico nelas. como se fosse uma

coisa flutuante. Interessante que isso só acontece quando eu acesso as imagens indo pelos menus laterais ; ARQUIVO/ POSTAGENS POPULARES...Vou postar o link do blog daí vcs vão poder analisar melhor.

Suspeito eu que o prolema não esteja no html do menu, mas sim dos MENUS-Wigets mensionados acima.

Seria no caso o Wiget Container (Populares/Arquivos/Categ.) reapare que o problema só ocorre quando as imagens são acessadas por ele. De outras formas o problema não acontece. Mesmo assim não queria deletar esses Wigts tão trabalhosos e sim resolver o problema. Agradeço qualquer ajuda! Qualquer coisa! Tou pra ficar doido tentando ajeitar isso!

Endereço do blog:

http://heswolf.blogspot.com.br/

 

 

[hes wolf 0]

Fiz mais testes o problema esta realmente com o cabeçaho do blog. No caso o Header. Ele fica flutuando por cima

das imagens postadas. Deve ser alguma coisa no código dele. Ainda não sei ajeitar.

[André do Vale 76]

Muda o z-index da classe .CSS_LIGHTBOX para 400 (hoje está 10, inferior ao cabeçalho, fazendo com que fique 'por trás' deste elemento).

[hes wolf 0]

Não encontrei o termo LIGHTBOXX no html. Só existe Header

Acho que não se trata de uma light box.

Vou procurar ver isso mesmo assim, aí seguem as config. do meu header:

 

/* Header-----------------------------------------------*/
#header-wrapper{width:1000px;margin:0px auto 0px;height:72px;padding:0px 0px 183px 0px;overflow:hidden;}
#header-inner{background-position:center;margin-left:150px;margin-right:0;margin-top:29px;}
#header{margin:0;border:0 solid $bordercolor;color:$pagetitlecolor;float:left;width:148%;overflow:hidden;}
#header h1 {color:#001A48;text-shadow:0px 1px 0px #fff;margin:0 5px 0;padding:0px 0px 0px 15px;font-family:'Oswald',Arial,Helvetica,Sans-serif;font-weight:bold;font-size:32px;line-height:32px;}
#header .description{color:#001A48;text-shadow:0px 1px 0px #fff;line-height:14px;font-size:14px;padding-top:0px;margin-top:10px;font-family:Arial,Helvetica,Sans-serif;}
#header h1 a,#header h1 a:visited{color:#001A48;text-decoration:none}
#header h2{padding-left:5px;color:#001A48;font:14px Arial,Helvetica,Sans-serif}
#header2{float:right;width:51%;margin-right:0px;padding-right:0px;overflow:hidden;}
#header2 .widget{padding:0px 15px 0px 0px;float:right}
.social-profiles-widget img{margin:0 4px 0 0}
.social-profiles-widget img:hover{opacity:0.8}
#top-social-profiles{padding-top:10px;height:32px;text-align:right;float:right}
#top-social-profiles img{margin:0 6px 0 0 !important}
#top-social-profiles img:hover{opacity:0.8}
#top-social-profiles .widget-container{background:none;padding:0;border:0}
/* Outer-Wrapper----------------------------------------------- */
#outer-wrapper{width:1330px;margin:15px auto 0px;padding:0px;text-align:left;background:url(https://lh6.googleusercontent.com/-XxytG4VzZi8/TdvZJYRGfjI/AAAAAAAABdg/0inHbgTnIA0/w657-h895-no/backg+1mmnm.jpg) left top repeat;}
#content-wrapper{background:#fff;padding:15px;}
#main-wrapper{width:660px;float:left;margin:0px;padding:0px 0px 0px 20px;word-wrap:break-word;overflow:hidden;text-shadow:0 1px 0 #fff;}
#rsidebar-wrapper{width:290px;float:right;margin:0px;padding:0px 0px 0px 0px;word-wrap:break-word;overflow:hidden;text-shadow:0 1px 0 #fff;}
#newsidebar-wrapper {width:290px;float:left;margin:0px;padding:0px 0px 0px 0px;word-wrap:break-word;overflow:hidden;text-shadow:0 1px 0 #fff;
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 */
}

Muda o z-index da classe .CSS_LIGHTBOX para 400 (hoje está 10, inferior ao cabeçalho, fazendo com que fique 'por trás' deste elemento).

Ar entendi agora Light Box;

É a caixa de exibição das imagens! Valew

Vou tentar aqui ! ^^

!!!!Ok provavelmente é o z-index CSS_LIGHTBOX mesmo, mas eu NÃO sei como mudar isso! Deu no mesmo

É no código html do modelo?

[André do Vale 76]

Não necessariamente no HTML, mas sim no CSS.

 

Você possui a opção de editar arquivos CSS? Se sim, ao final de qualquer um, adicione:

.CSS_LIGHTBOX {
  z-index: 400 !important; /* o importante é para evitar CSS do Blogger sobrepor a regra */
}

Caso você não possua acesso ao CSS, possui ao HTML? Se sim, adicione no HTML (preferencialmente depois da dobra da página):

<style type='text/css'>
.CSS_LIGHTBOX {
  z-index: 400 !important; /* o importante é para evitar CSS do Blogger sobrepor a regra */
}
</style>

[hes wolf 0]

Cara Te amo! Deu ceeeeertooooo!

O blogger só dar acesso ao html do modelo.

Mas bastou eu adicionar as tags que você me deu acima da tag BODY que funcionou!

Obrigadão!

Ar quem tiver curiosidades em saber como modificar a Ligth Box das postagens do blogger....

aqui um link que dar várias dicas de como mudar ela !

 

http://codigos-blogger.blogspot.com.br/2011/12/personalizando-lightbox-padrao-do.html#.VW4qyUYf2z4