Multilanguage page without formatting

Navigation
1

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

www.csvet.com.br

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

    
asked by anonymous 15.04.2018 / 00:08

1 answer

1

The problem is just CSS.

  

The waterfall effect

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

  

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

  • user style sheet (highest priority)

  • Developer style sheet

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

    2.2 - internal style sheet (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 there are 3 body tags throughout 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;">

    What is 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 in the body of line 52 a

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

    and in the bodys of lines 488 and 522 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 combine 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;">

    Finishing:

    If any element is hit by two rules and have the same force, the one that is declared last is the one that will be worth:

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

    By removing this statement your page will look like this: see in the browser

    How do you perceive, still having problems.

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

    By removing this statement your page will look like this: view in the browser

    How do you perceive, still having problems.

    Removing the inline style of the body tags from lines 488 and 522 your page will look like this: view in browser

    Conclusion:

    There's 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 browse in browser

    Some images do not appear in the example because they are relative url within a style sheet

        
    15.04.2018 / 13:39
    SQL Procedure improvement Compile Visual Studio program with database and move to another PC