Web Analytics Made Easy -
StatCounter <div> structure ok in html editor but displaying wrong in website - CodingForum

Announcement

Collapse
No announcement yet.

<div> structure ok in html editor but displaying wrong in website

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • <div> structure ok in html editor but displaying wrong in website

    Hey there!

    We have a HTML editor (CKEditor) in our content manager from our website, that allows us to edit the text and put some HTML structure into it in some specific sections. I am trying to create a better structure in HTML for the description of some courses we offer. The normal plain text version is here: Excel Completo - Vi
    Sorry is in portuguese, but I hope you can follow and try to help me here, Brazilian forums gave me no answer in 1 week.

    I copied a nice structure from a template and modified inside the editor into something I liked. As in this image:
    Click image for larger version

Name:	Screenshot 2016-09-14 09.46.44.jpg
Views:	1
Size:	45.9 KB
ID:	2283617

    However, at the website, without any other modifications, only by saving the previous code, it returned like that:
    Click image for larger version

Name:	Screenshot 2016-09-14 09.48.11.jpg
Views:	1
Size:	44.3 KB
ID:	2283618
    Click image for larger version

Name:	Screenshot 2016-09-14 09.48.14.jpg
Views:	1
Size:	44.8 KB
ID:	2283619

    So the website is thinking there is only one column in which he can display the text, instead of two. And where there shouldn't be any columns it displays text only on the left section of the space.

    I tried to put the code in another HTML editor and also in CoffeeCup and it returned pretty ok. I just don't know what is happening.

    Here is the link to the faulty website: Excel Completo 23423 :: Instituto G4

    And here is the link to the code: https://dl.dropboxusercontent.com/u/85369067/html.txt

    Thank you in advance.

    Gabriel

  • #2
    Uhg, where to start... This is where WYSIWYG editors like CK delude people into thinking they can edit web content.

    For starters this:

    Code:
    <h4 class="titulo-conteudo">Conteْdo</h2>
    Is gibberish, Opening a H4 but closing a H2? Much less if you have perfectly good wrapping elements (you seem to) there is likely ZERO legitimate reason to even have classes on your headings. (though at least you TRIED to use headings, even if doing so incorrectly -- that's more than most manage!)... sadly EVERY one of (what should be h2) in your code has this problem!

    ... and the moment you fill the page with endless redundant style and abuse paragraphs around elements that quite clearly are NOT paragraphs, you're doing it all wrong. Simply put, in all but a handful of corner cases if you are using the style="" attribute, YOU SCREWED UP!!!

    Wherefore this:
    Code:
    <p style="box-sizing: border-box; font-size: 1.1em; margin: 0px 0px 15px; line-height: 1.3; color: rgb(80, 84, 84); font-family: Calibri, arial, sans-serif;">-&nbsp;S&eacute;ries de n&uacute;meros</p>
    Is bloated rubbish, particularly since it's delcared some half dozen plus times in the markup.

    Quite clearly what you have there -- from a semantic point of view, is a OL with a UL inside each LI. That's what those SHOULD be. Any further style should inherit off a class on the outer OL.

    Hence I would have that entire section coded as:
    Code:
    <h2>Conteْdo</h2>
    <ol class="contents">
    	<li>
    		Séries e Autopreenchimento
    		<ul>
    			<li>Séries de nْmeros</li>
    			<li>Séries de datas</li>
    			<li>Séries personalizadas</li>
    		</ul>
    	</li><li>
    		Identidade Visual no Excel
    		<ul>
    			<li>Logomarca</li>
    			<li>Fontes Especiais</li>
    			<li>Cores Personalizadas</li>
    		</ul>
    	</li><li>
    		Imagens, Autoformas e SmartArts
    		<ul>
    			<li>Imagens</li>
    			<li>Autoformas</li>
    			<li>SmartArts</li>
    		</ul>
    	</li><li>
    		Teclas de Atalho para Produtividade
    		<ul>
    			<li>Atalhos para Movimentaçمo</li>
    			<li>Atalhos para Seleçمo</li>
    			<li>Atalhos para Ediçمo</li>
    			<li>Atalhos para Comandos</li>
    		</ul>
    	</li><li>
    		Opçُes de Personalizaçمo do Excel
    		<ul>
    			<li>Barra de Acesso Rلpido</li>
    			<li>Listas Personalizadas</li>
    			<li>Desativando Guias, Grade, Rَtulos e Barras de Rolagem</li>
    		</ul>
    	</li><li>
    		Configuraçُes de Impressمo
    		<ul>
    			<li>Layout do papel</li>
    			<li>Dicas de impressمo</li>
    		</ul>
    	</li><li>
    		Revisمo dos Operadores de Fَrmulas
    		<ul>
    			<li>Operadores Aritméticos</li>
    			<li>Operadores de Comparaçمo</li>
    			<li>Operador de Concatenaçمo</li>
    		</ul>
    	</li><li>
    		Fَrmulas em Exemplos Prلticos
    		<ul>
    			<li>Uso Correto dos Parênteses em Fَrmulas</li>
    			<li>Explorando os Conceitos de VERDADEIRO e FALSO</li>
    			<li>Explorando Cلlculos de Porcentagem</li>
    			<li>Multas</li>
    			<li>Descontos</li>
    			<li>Taxas</li>
    		</ul>
    	</li><li>
    		Referência Relativa e Absoluta
    		<ul>
    			<li>“Travando” linhas e colunas</li>
    			<li>Quando “travar” ou nمo as células</li>
    		</ul>
    	</li><li>
    		Introduçمo a Intervalos Nomeados
    		<ul>
    			<li>Exemplos com célula</li>
    			<li>Exemplos com intervalo</li>
    		</ul>
    	</li><li>
    		Formataçمo Condicional
    		<ul>
    			<li>Valor Igual, diferente, maior e menor</li>
    			<li>Valore Acima/Abaixo</li>
    			<li>Valores Duplicados</li>
    			<li>N maiores e menores</li>
    			<li>Barras de Dados</li>
    			<li>Escalas de Cor</li>
    			<li>Conjuntos de حcones</li>
    			<li>Gerenciador de Regras</li>
    		</ul>
    	</li><li>
    		Ferramentas de Tabela
    		<ul>
    			<li>Estilos de Tabela</li>
    			<li>Caracterيsticas das fَrmulas em uma tabela</li>
    		</ul>
    	</li><li>
    		Trabalhando com Janelas no Excel
    		<ul>
    			<li>Trabalhando com dois documentos lado a lado</li>
    			<li>Como enxergar duas “abas” do mesmo documento ao mesmo tempo</li>
    			<li>Congelar Painéis</li>
    		</ul>
    	</li><li>
    		Validaçمo de Dados
    		<ul>
    			<li>Permitir somente valores de uma lista</li>
    			<li>Permitir somente nْmeros ou datas</li>
    			<li>Personalizando a mensagem de erro</li>
    		</ul>
    	</li><li>
    		Funçُes de Texto
    		<ul>
    			<li>Esquerda</li>
    			<li>Direita</li>
    			<li>Ext. texto</li>
    			<li>Nْmero caracterيstico</li>
    			<li>Texto</li>
    		</ul>
    	</li><li>
    		Funçُes Lَgicas
    		<ul>
    			<li>E</li>
    			<li>OU</li>
    			<li>SE</li>
    			<li>SEERRO</li>
    		</ul>
    	</li><li>
    		Outras Funçُes
    		<ul>
    			<li>ABS</li>
    			<li>HOJE</li>
    			<li>AGORA</li>
    			<li>DATA.VALOR</li>
    			<li>DIAS 360</li>
    			<li>MتS</li>
    		</ul>
    	</li><li>
    		Grلficos
    		<ul>
    			<li>Linha</li>
    			<li>Coluna</li>
    			<li>Pizza</li>
    			<li>Grلficos 3D</li>
    		</ul>
    	</li><li>
    		Auditoria de Fَrmulas
    		<ul>
    			<li>Rastrear Precedentes</li>
    			<li>Rastrear Dependentes</li>
    			<li>Verificaçمo de Erros</li>
    			<li>Avaliar Fَrmulas</li>
    			<li>Janela de Inspeçمo</li>
    		</ul>
    	</li><li>
    		Intervalos Nomeados
    		<ul>
    			<li>Caixa de Nomes</li>
    			<li>Gerenciador de Nomes</li>
    			<li>Criar a Partir da Seleçمo</li>
    			<li>Alguns truques na prلtica</li>
    		</ul>
    	</li><li>
    		Formataçمo Condicional com Fَrmulas
    		<ul>
    			<li>Comparando datas</li>
    			<li>Formatando célula com base no conteْdo de outras</li>
    			<li>Colorindo linhas inteiras</li>
    		</ul>
    	</li><li>
    		Validaçمo de Dados com Fَrmulas
    		<ul>
    			<li>Permitir somente data maior ou menor que a de outra célula</li>
    			<li>Permitir somente letras maiْsculas</li>
    			<li>Impedir digitaçمo de um dado repetido</li>
    		</ul>
    	</li><li>
    		Vيnculos Entre Planilhas e Arquivos Diferentes
    		<ul>
    			<li>Demonstraçمo</li>
    		</ul>
    	</li>
    </ol>
    That's less than a fifth the markup... and really if you had a character encoding (like utf-8) designed for non latin-1 languages you don't need those garbage entities in there...

    The CSS for that would go in the external stylesheet:

    Code:
    .contents,
    .contents ul {
    	margin:0;
    	padding:0 
    	list-style-position:inside;
    	font:bold 110%/130% calibri,arial,helvetica,sans-serif;
    	color:#505454;
    }
    .contents ul {
    	padding-top:1em;
    }
    .contents li li {
    	padding-bottom:1em;
    	font-weight:normal;
    }
    Which should replicate what you have in a fraction the code and be FAR easier to edit in terms of adding/removing items since, well, you don't have all that pointless wasteful presentational crap in the markup! Again, you use style="" in that way, in all but the rarest of cases (like when "width" or a size might convey meaning) you're doing it ALL WRONG!!!

    Structurally, your page is NOT ok, it's doped to the gills with non-semantic markup, static scripting and style in the markup where they do NOT belong, absolute URI's wasting bandwidth for Christmas only knows what, broken incomplete forms, endless invalid HTML, endless pointless DIV for nothing -- it's hardly a shock that the page in question is a bloated 64k monstrosity to deliver 6.4k of plaintext and maybe a dozen content images; that's anywhere from three to five times the HTML needed for the job -- and that HTML remains a giant middle finger to accessibility and usability thanks to the lack of anything RESEMBLING semantics or logical use of heading orders (or 5 structural rules if you prefer to use those instead).

    ... and that's before we talk about the fact that the design reeks badly of "WCAG, what's that?!?"

    As I often tell people, someone brought that mess to me as a client, I'd tell them to throw the ENTIRE site in the trash and start over; there is very little worth salvaging from that in terms of code efficiency, efficacy, sustainability, accessibility, and really calls into question the competence of those who created it.

    Particularly in the age of certain nations like the UK leveraging fines if you don't meet a number of the things I just mentioned depending on the type of website. Though to be fair, my specialty of the past decade has been twofold -- helping sites that are burying their current overpriced hosting run on a fraction the cost, and helping sites facing accessibility fines fix things up inside the deadline set by their government.

    Makes me one of those elitist *****'s who says if you can't handle a HTML semantics, you have no business putting content on a "real" website.
    Last edited by deathshadow; Sep 21, 2016, 10:19 PM.
    Walk the dark path, sleep with angels, call the past for help.
    https://cutcodedown.com
    https://medium.com/@deathshadow

    Comment

    Working...
    X