0

Tenho um site multilinguagem utilizando Ajax, mas quando coloco para trocar o idioma, a página não sobrepõe formatada.

www.csvet.com.br

Ao clicar na bandeira dos EUA no header o erro aparece.

0

1 Resposta 1

1

O problema é tão somente de CSS.

O efeito cascata

Que estilo terá preferência quando um estilo é definido mais de uma vez para o mesmo elemento HTML? Qual das definições o navegador irá aplicar?

O efeito cascata determina a prioridade para aplicação da regra de estilo ao elemento conforme descrito a seguir e na ordem decrescente de prioridade:

  1. folha de estilo do usuário (prioridade mais elevada)
  2. folha de estilo do desenvolvedor

    2.1 - dentro de uma tag HTML (definidos através do atributo style nos elementos);

    2.2 - folha de estilo interna (definida na seção HEAD da própria página);

    2.3 - folha de estilo externa (importado ou linkado);

    2.4 - folha de estilo do navegador

No seu caso ocorre de haver 3 tags body ao longo do código fonte:

  • linha 52 - <body class="has-side-panel side-panel-right fullwidth-page">

  • Linha 488 - <body id="cke_pastebin" style="position: absolute; top: 10px; width: 1px; height: 180px; overflow: hidden; margin: 0px; padding: 0px; left: -1000px;">

  • Linha 522 - <body id="cke_pastebin" style="position: absolute; top: 10px; width: 1px; height: 180px; overflow: hidden; margin: 0px; padding: 0px; left: -1000px;">

Que corresponde a situação 2.1 (dentro de uma tag HTML -> tag body)

Um documento HTML pode definir ou utilizar mais do que uma folha de estilos.

Quando isto ocorre o navegador combina as definições para aplicar ao documento.

Nota-se que no body da linha 52 foi aplicada uma classe

has-side-panel side-panel-right fullwidth-page

e nos bodys das linhas 488 e 522 um estilo inline, que por sinal são exatamente identicos,

style="position: absolute; top: 10px; width: 1px; height: 180px; overflow: hidden; margin: 0px; padding: 0px; left: -1000px;

O navegador vai combinar e o resultado será

<body class="has-side-panel side-panel-right fullwidth-page" id="cke_pastebin" style="position: absolute; top: 10px; width: 1px; height: 180px; overflow: hidden; margin: 0px; padding: 0px; left: -1000px;">

Finalizando:

Se algum elemento for atingido por duas regras e tiverem a mesma força, a que for declarada por último é a que valerá:

A declaração left: -1000px, é a que valerá caso tenha sido declarada também anteriormente e move o conteúdo 1000 pixels à esquerda da janela visível do navegador.

Retirando essa declaração sua pagina ficará assim: veja no navegador

Como se percebe, ainda com problemas.

A declaração overflow: hidden; esconde o scroll horizontal e vertical.

Retirando essa declaração sua pagina ficará assim: veja no navegador

Como se percebe, ainda com problemas.

Retirando o estilo in-line das tags body das linhas 488 e 522 sua pagina ficará assim: veja no navegador

Conclusão:

Não há motivo para incluir várias tags body em uma página, utilize apenas uma na linha 53

<body class="has-side-panel side-panel-right fullwidth-page" id="cke_pastebin">

e seja feliz inserir a descrição da imagem aqui veja no navegador

algumas imagens não aparecem no exemplo devido a estarem com url relativos dentro de uma folha de estilos

3
  • @dvd, explicando do Caleinicio até o Calefin hahaha. Professor Pasquale explicando tudo nos mínimos detalhes Tu que é bom em resumir em uma linha, pergunto, como ficaria essa resposta usando operador ternário? :D
    – user60252
    Commented 15/04/2018 às 14:46
  • $site = $idioma == 1 ? "pt" : "en";
    – Sam
    Commented 15/04/2018 às 14:51
  • @dvd, $correto = $tresBodys == 3 ? $tresBodys = 1: "$tresBodys";
    – user60252
    Commented 15/04/2018 às 14:55

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .