Multilingual page without formatting

Asked

Viewed 69 times

0

I have a multilingual website using Ajax, but when I put to change the language, the page does not overwrite formatted.

www.csvet.com.br

By clicking on the US flag on header the error appears.

php javascript html css ajax

1 answer

1


The problem is only of CSS.

The ripple effect

Which style will you prefer when a style is set more than once for the same HTML element? Which of the settings the browser will apply?

The cascade effect determines the priority for applying the style rule to the element as described below and in the descending order of priority:

  1. user style sheet (highest priority)

  2. developer style sheet

    2.1 - within an HTML tag (defined through the style attribute in the elements);

    2.2 - internal stylesheet (defined in the HEAD section of the page itself);

    2.3 - external style sheet (imported or linked);

    2.4 - browser style sheet

In your case it occurs that there are 3 body tags along the source code:

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

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

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

Which corresponds to situation 2.1 (within an HTML tag -> tag body)

An HTML document can define or use more than one style sheet.

When this occurs the browser combines the settings to apply to the document.

Note that a class has been applied to line 52 body

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

and on the lines 488 and 522 bodys an inline style, which by the way are exactly identical, 

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

The browser will match and the result will be

<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;">

Finalizing:

If an element is hit by two rules and has the same strength, the one that is last declared is the one that will be worth:

The statement left: -1000px, is valid if it has also been declared previously e move o conteúdo 1000 pixels à esquerda da janela visível do navegador.

Removing this statement your page will be like this: see in the browser

As it turns out, still in trouble.

The statement overflow: hidden; hides the horizontal and vertical scroll.

Removing this statement your page will be like this: see in the browser

As it turns out, still in trouble.

Removing the online style of the body tags of lines 488 and 522 your page will look like this: see in the browser

Completion:

No reason to include multiple body tags on a page, use only one on line 53

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

and be happy inserir a descrição da imagem aqui see in the browser

some images do not appear in the example because they are relative url inside a style sheet

  • @dvd, explaining from Caleinicio up to the Calefin hahaha. Professor Pasquale explaining everything in the smallest detail You who is good at summarizing in a line, I ask, how would this answer be using ternary operator? : D

  • $site = $language == 1 ? "en" "";

  • @dvd, $correto = $tresBodys == 3 ? $tresBodys = 1: "$tresBodys";

Browser other questions tagged php javascript html css ajax

You are not signed in. Login or sign up in order to post.