Ir para conteúdo
p.a.artegrafica

Erro misterioso de HTML & CSS na Loja Virtual

Recommended Posts

Olá, todos!
Esbarrei num problema com questões de programação linguagem HTML & CSS e busco por ajuda dos experts aqui.

 

• SINOPSE DA QUESTÃO
Montei no dreamweaver um anúncio de produto em HTML para um cliente, com a finalidade de ser exibido no site institucional da empresa e na loja virtual. 
Simplesmente exibindo nos navegadores, o HTML se comporta direitinho mas, dentro da PLATAFORMA TRAY (da loja virtual) e no site institucional do cliente o anúncio perde boa parte do layout fica quebrado, sem falar que o conteúdo não está se adequando (diminuindo e aumentando) na exibição mobile.


Se tiverem a paciência de ler e me ajudar, ficarei agradecido!
O tópico é extenso, mas sera bem explicado... Prometo!


• MEU BACKGROUND EM PROGRAMAÇÃO HTML / CSS  - Para referência.
Estou aqui no FORUM iMASTERS porque, lááááá nas antigas, fiz um curso de HTML e desenvolvimento web (comprado na época em 4 CDs) do iMSTERS. Cheguei a criar alguns sites mas, como meu foco sempre foi mais na parte gráfica (sou artista gráfico ou, designer, como queiram) acabei abandonando os projetos de web. E isso já foi lá na época das tabelas, iframes e conteúdo em flash. Seja como for, tenho uma certa noção sobre tags, termos e códigos de programação. Reforçando: "alguma" noção!

 

 

• DESENVOLVIMENTO DO TRABALHO
Meu cliente - uma empresa importadora de projetores - solicitou o desenvolvendo de várias peças gráficas (embalagens, manuais, posts para redes sociais) No pacote, me solicitaram também arquivos promocionais em  HTML pra deixar a LOJA VIRTUAL e o SITE INSTITUCIONAL mais atrativos, já que - como todos sabem, imagino -  maioria das lojas virtuais tem um espaço pra fotos e um CAMPO DE TEXTO pra descrição destes produtos. Meu cliente quer que seus anúncios sejam em HTML, bem ilustrados e chamativos como anúncios de revista.

Pois bem... Desenvolvi o layout e a arte foi aprovada.

No momento de criar o arquivo HTML propriamente dito, eu sabia que precisaria me atualizar, afinal, usar "tabelas" está fora dos padrões.

Saí a pesquisar. Li e assisti MUITA COISA (inclusive aqui dentro do Fórum iMasters) sobre DIV / HTML / CSS e, após entender a mecânica básica desses elementos, comecei a montar o HTML, simplesmente fatiando a arte criada (feita em Photoshop). Após alguns tropeços, consegui estruturar o HTML com base só em DIVs e CSS.
Testei no INTERNET EXPLORER e no GOOGLE CHROME e o anúncio (HTML) abriu sem problemas.

 

 

• OS PROBLEMAS

Layout redondinho, fatiado e estruturado em HTML e rodando sem problemas nos navegadores mas. quando o cliente colocou os arquivos (HTML / IMAGENS / ESTILO CSS) no SITE INSTTITUCIONAL e na LOJA VIRTUAL (hospedada pela TRAY E-COMMERCE), o HTML se quebrou... De primeiro, eu havia enviado o HTML, a pasta com imagens e um arquivo CSS em separado, para inserção nos sites. Como houve os problemas, inseri o CSS direto no HTML mas, os problemas persistem...

- No SITE INSTITUCIONAL a estrutura se manteve até certo ponto. Mas, o layout se quebrou em vários pontos e as partes em texto perderam a formatação e as características do texto puxadas via CSS... 
- Na LOJA VIRTUAL: Virou uma bagunça... Primeiro que o HTML só aparece num campo estreito (de uns 200 pixels) no miolo da página, com uma barra de rolagem própria. E as características de texto se perderam todas.

- Em ambos os casos (site e loja) as versões MOBILE ficaram uma bagunça só! Os problemas de visualização se mantem e com o agravante de que o HTML não se ajustou (como eu esperava) ao tamanho da tela do celular.

- Ajuste às resoluções de tela: Quando faço a análise do layout no GOOGLE CHROME (F12) o conteúdo se ajusta à tela...
Este HTML não é pra ser responsivo... Apenas deve AMPLIAR e ENCOLHER de acordo com a resolução de tela do dispositivo do usuário. Pra ficar tipo, uma "responsividade" simulada...

 

 

• DÚVIDAS
1) O que fazer para que o layout se mantenha, mesmo após inserido nos respectivos sites?

2) Qual o procedimento para que o AJUSTE ÁS RESOLUÇÕES DE TELA aconteça?

3) Quais os erros estou cometendo no código?

 

 

• RESSALVAS
Espero que não haja erros muito grotescos no código...
Fui construindo o HTML aos poucos, seguindo alguns tutoriais, uma vez que nunca havia montado nada apenas com base em DIVs

Criei um CSS pra cada linha de DIV porque, achei que deveria ser assim... Se houver uma maneira de simplificar isso, gostaria muito de saber.

Para os próximos HTMLs que estou montando, estou procurando simplificar o design, mantendo os SLICES do mesmo tamanho, assim (imgino) poderei usar uma mesma classe CSS pra diferentes DIVs... Pra facilitar a construção do HTML lá na frente.

 

 

• O CÓDIGO
Segue o link da pasta com as imagens e o HTML:
https://drive.google.com/open?id=1oxhbq48reTrxTE6iLo6J517ebfioXTNE

Aqui vai o código:
 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=content-width, initial-scale=1.0" />
<title>BT835A - Betec Brasil ©</title>
<style>
body {
	font-family:"Tahoma, Verdana, Arial";
	width:1140px;
	margin:auto;
	background-color:#FFF;
}
.titulos-azul { /* FORMATAÇÃO DE TEXTO */
	font-family: Tahoma, Geneva, sans-serif;
	font-size:30pt;
	font-style:normal;
	font-weight:bold;
	font-variant:normal;
	text-align:center;
	letter-spacing:-2px;
	color:#296ba4;
	line-height:25px;
}
.titulos-branco { /* FORMATAÇÃO DE TEXTO */
	font-family:Tahoma, Geneva, sans-serif;
	font-size:30pt;
	font-style:normal;
	font-weight:bold;
	line-height:25px;
	font-variant:normal;
	color: #FFFFFF;
}
.descricoes-titulos { /* FORMATAÇÃO DE TEXTO */
	font-family:Tahoma, Geneva, sans-serif;
	font-size:15pt;
	font-style:normal;
	line-height:22px;
	font-weight:normal;
	font-variant:normal;
	text-transform:none;
	color:#868686;
	text-decoration:none;
}
.descricoes-cinza-claro { /* FORMATAÇÃO DE TEXTO */
	font-family:Tahoma, Geneva, sans-serif;
	font-size:15pt;
	font-style:normal;
	line-height:22px;
	font-weight:normal;
	font-variant:normal;
	text-transform:none;
	color:#dcdcdc;
	text-decoration:none;
}
.subtitulos { /* FORMATAÇÃO DE TEXTO */
	font-family:Tahoma, Geneva, sans-serif;
	font-size:14pt;
	font-style:normal;
	line-height:22px;
	font-weight:bold;
	font-variant:normal;
	text-transform:none;
	color:#868686;
	text-decoration:none;
}
.legenda-quadros-azul { /* FORMATAÇÃO DE TEXTO */
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 15pt;
	font-style: normal;
	line-height: 22px;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #296ba4;
	text-decoration: none;
}
.box-apps{ /* FORMATAÇÃO DIV DOS APLICATIVOS */
	position:relative;
	float:left;
	width:1140px;
	height:290px;
}
#container { /* FORMATAÇÃO DIV PRINCIPAL */
	position:absolute;
	width:100%;
	height:100%;
	background-color:#FFF;
	margin:auto;
}
#imgs-001{ /* FORMATAÇÃO LINHA COM IMAGENS */
	position:relative;
	float:left;
	width:1140px;
	height:344px;
	margin:auto;
}
#imgs-002{ /* FORMATAÇÃO LINHA COM IMAGENS */
	position:relative;
	float:left;
	width:1140px;
	height:226px;
	margin:auto;
}
#imgs-003{ /* FORMATAÇÃO LINHA COM IMAGENS */
	position:relative;
	float:left;
	width:1140px;
	height:385px;
	margin:auto;
}
#imgs-004{ /* FORMATAÇÃO LINHA COM IMAGENS */
	position:relative;
	float:left;
	width:1140px;
	height:423px;
	margin:auto;
}
#imgs-005{ /* FORMATAÇÃO LINHA COM IMAGENS */
	position:relative;
	float:left;
	width:1140px;
	height:416px;	
	margin:auto;
}
#imgs-006{ /* FORMATAÇÃO LINHA COM IMAGENS */
	position:relative;
	float:left;
	width:1140px;
	height:182px;	
	margin:auto;
}
#box-001{ /* TEXTO PROJETOR POTENTE */
	position:relative;
	text-align:center;
	float:left;
	width:1060px;
	height:170px;
	padding-left:40px;
	padding-right:40px;
	padding-top:20px;
	padding-bottom:0px;
	background-color:#FFF;
}
#box-interno{ /* CAIXA GERAL COM TODOS OS APLICATIVOS */
	position:relative;
	width:980px;
	height:290px;
	top:0px;
	left:50%;
	margin-left:-490px;
	background-color:#FFF
}
.app-mini-containers{ /* CAIXAS - IMAGENS DOS APLICATIVOS */
	display:table;
	text-align:center;
	float:left;
	padding:5px;
	margin:5 auto;
	width:235px;
	height:280px;
}
#linha-caracteristicas{ /* BOX COM AS COLUNAS CARACTERÍSTICAS DO PROJETOR */
	position:relative;
	width:1140px;
	height:558px;
	background-color:#FFF;
	float:left;
	margin:auto;
	margin-top:20px;
}
.box-menor-caracteristicas{ /* BOX COM AS COLUNAS CARACTERÍSTICAS DO PROJETOR */
	position:relative;
	width:1075px;
	height:558px;
	top:0px;
	left:0;
	margin-left:-537px;
	margin:auto;
}
.coluna1{ /* COLUNA IMAGENS ESQUERDA */
	position:relative;
	width:229px;
	height:558px;
	background-color:#FFF;
	float:left;
}
.coluna-miolo{ /* COLUNA IMAGEM MIOLO */
	position:relative;
	width:617px;
	height:558px;
	background-color:#FFF;
	alignment-adjust:central;
	float:left;	
}
.coluna2{ /* COLUNA IMAGENS DIREITA */
	position:relative;
	width:229px;
	height:558px;
	background-color:#FFF;
	float:left;
}
#fundo-titulo-cinema{ /* FUNDO DA DIV BASE */
	position:relative;
	width:1140px;
	height:110px;
	float:left;
	background-color:#FFF;
	z-index:1;
}
#barra-azul-escuro{ /* BARRA DE ACABAMENTO AZUL PARA ENCAIXE */
	position:absolute;
	width:1140px;
	height:40px;
	bottom:0px;
	text-align:center;
	background-color:#1c3850;
	z-index:2;
}
#titulo-cinema{ /* FUNDO DO TEXTO */
	position:absolute;
	width:850px;
	height:50px;
	top:50%;
	left:50%;
	margin-left:-425px;
	margin-top:-50px;
	padding-top:20px;
	text-align:center;
	background-color:#296ba4;
	z-index:3;
}
#imgs-cinema1{ /* FORMATAÇÃO LINHA COM IMAGENS */
	position:relative;
	float:left;
	width:1140px;
	height:340px;	
	margin:auto;
}
#imgs-cinema2{ /* FORMATAÇÃO LINHA COM IMAGENS */
	position:relative;
	float:left;
	width:1140px;
	height:403px;	
	margin:auto;
}
#box-max-desempenho{ /* TEXTO MAX DESEMPENHO */
	position:relative;
	text-align:center;
	float:left;
	width:1060px;
	height:130px;
	padding-left:40px;
	padding-right:40px;
	padding-top:20px;
	padding-bottom:0px;
	background-color:#204668;
}
#imgs-keystone{ /* FORMATAÇÃO LINHA COM IMAGENS */
	position:relative;
	float:left;
	width:1140px;
	height:440px;	
	margin:auto;
}
#imgs-portatil-fixo1{ /* FORMATAÇÃO LINHA COM IMAGENS */
	position:relative;
	float:left;
	width:1140px;
	height:447px;	
	margin:auto;
}
#fundo-acesso-facil{ /* FUNDO DA DIV BASE */
	position:relative;
	width:1140px;
	height:110px;
	float:left;
	background-color:#FFF;
	z-index:4;
}
#barra-azul-claro{ /* BARRA DE ACABAMENTO AZUL PARA ENCAIXE */
	position:absolute;
	width:1140px;
	height:40px;
	bottom:0px;
	text-align:center;
	background-color:#d6e4ed;
	z-index:5;
}
#titulo-acesso-facil{ /* FUNDO DO TEXTO */
	position:absolute;
	width:850px;
	height:50px;
	top:50%;
	left:50%;
	margin-left:-425px;
	margin-top:-50px;
	padding-top:20px;
	text-align:center;
	background-color:#296ba4;
	z-index:6;
}
#imgs-acesso-intuitivo1{ /* FORMATAÇÃO LINHA COM IMAGENS */
	position:relative;
	float:left;
	width:1140px;
	height:552px;	
	margin:auto;
}
#box-conectividade{ /* TEXTO AMPLA CONECTIVIDADE */
	position:relative;
	text-align:center;
	float:left;
	width:1060px;
	height:130px;
	padding-left:40px;
	padding-right:40px;
	padding-top:20px;
	padding-bottom:0px;
	background-color:#FFF;
}
#imgs-conectividade1{ /* FORMATAÇÃO LINHA COM IMAGENS */
	position:relative;
	float:left;
	width:1140px;
	height:368px;	
	margin:auto;
}
#imgs-conectividade2{ /* FORMATAÇÃO LINHA COM IMAGENS */
	position:relative;
	float:left;
	width:1140px;
	height:368px;	
	margin:auto;
}
#box-qualidade{ /* TEXTO QUALIDADE E EFICIENCIA */
	position:relative;
	text-align:center;
	float:left;
	width:1060px;
	height:125px;
	padding-left:40px;
	padding-right:40px;
	padding-top:20px;
	padding-bottom:0px;
	background-color:#eff5f8;
}
#imgs-qualidade{ /* FORMATAÇÃO LINHA COM IMAGENS */
	position:relative;
	float:left;
	width:1140px;
	height:320px;
	margin:auto;
	background-color:#eff5f8;
}
#box-lamp-led{ /* TEXTO LAMPADAS LED */
	position:relative;
	text-align:center;
	float:left;
	width:1060px;
	height:130px;
	padding-left:40px;
	padding-right:40px;
	padding-top:20px;
	padding-bottom:0px;
	background-color:#FFF;
}
#imgs-led{ /* FORMATAÇÃO LINHA COM IMAGENS */
	position:relative;
	float:left;
	width:1120px;
	height:250px;
	margin-left:20px;
	background-color:#FFF;
}
#imgs-betec{ /* FORMATAÇÃO LINHA COM IMAGENS */
	position:relative;
	float:left;
	width:1120px;
	height:480px;
	margin-left:20px;
	background-color:#FFF;
</style>
</head>
<body>
	<div id="container"/>
		
		<div id="imgs-001">
    		<img src="images/html-betec-bt835a_01.jpg" width="570" height="344" style="float:left;"/>
			<img src="images/html-betec-bt835a_02.jpg" width="570" height="344" style="float:left;"/></div>
		<div id="imgs-002">
    		<img src="images/html-betec-bt835a_03.jpg" width="570" height="226" style="float:left;"/>
			<img src="images/html-betec-bt835a_04.jpg" width="570" height="226" style="float:left;"/></div>    
		<div id="imgs-003">
   			<img src="images/html-betec-bt835a_05.jpg" width="570" height="385" style="float:left;"/>
			<img src="images/html-betec-bt835a_06.jpg" width="570" height="385" style="float:left;"/></div>
		<div id="imgs-004">
    		<img src="images/html-betec-bt835a_07.jpg" width="570" height="423" style="float:left;"/>
			<img src="images/html-betec-bt835a_08.jpg" width="570" height="423" style="float:left;"/></div>
		<div id="imgs-005">
    		<img src="images/html-betec-bt835a_09.jpg" width="570" height="416" style="float:left;"/>
			<img src="images/html-betec-bt835a_10.jpg" width="570" height="416" style="float:left;"/></div>
		<div id="imgs-006">
    		<img src="images/html-betec-bt835a_11.jpg" width="570" height="182" style="float:left;"/>
			<img src="images/html-betec-bt835a_12.jpg" width="570" height="182" style="float:left;"/></div>
        
		<div id="box-001">
			<p><span class="titulos-azul">PROJETOR POTENTE... SISTEMA SMART!</span></p><p><span class="descricoes-titulos">Com <strong>1600 LÚMENS</strong> para projeção, o que torna o modelo BT835A ainda mais poderoso são as<br /><strong>FUNÇÕES SMART</strong> nativas! O WI-FI integrado permite que você se conecta à internet e tenha<br />acesso direto ao <strong>YOUTUBE, GOOGLE CHROME</strong> e <strong>NETFLIX</strong>, com os aplicativos já instalados!</span></p><p><span class="subtitulos">CONEXÃO WI-FI E OS MELHORES APLICATIVOS JÁ INSTALADOS!</span></p>
		</div><!--fecha box1 -->            
            
		<div class="box-apps">
      		<div id="box-interno">
      			<div class="app-mini-containers"><img src="images/html-betec-bt835a_15.jpg" width="229" height="229"/>							<span class="legenda-quadros-azul">Conexão rápida<br />e fácil</span></div> 
      			<div class="app-mini-containers"><img src="images/html-betec-bt835a_17.jpg" width="229" height="229"/><span class="legenda-quadros-azul">O melhor navegador<br />da internet</span></div> 
      			<div class="app-mini-containers"><img src="images/html-betec-bt835a_19.jpg" width="229" height="229"/><span class="legenda-quadros-azul">Séries e filmes para<br />seu cinema em casa</span></div> 
      			<div class="app-mini-containers"><img src="images/html-betec-bt835a_21.jpg" width="229" height="229"/><span class="legenda-quadros-azul">O maior conteúdo de<br />vídeos do mundo</span>
      		</div><!--fecha box-interno -->
      	</div><!--fecha box-apps -->
        
		<div id="linha-caracteristicas">
        	<div class="box-menor-caracteristicas">
				<div class="coluna1"><img src="images/html-betec-bt835a_28.jpg" width="229" height="250"/><br /><br /><br /><br /><img src="images/html-betec-bt835a_30-04.jpg" width="229" height="250"/></div>
            	<div class="coluna-miolo"><img src="images/html-betec-bt835a_28-02.jpg" width="617" height="558" style="float:left;"/></div>
            	<div class="coluna2"><img src="images/html-betec-bt835a_30.jpg" width="229" height="250"/><br /><br /><br /><br /><img src="images/html-betec-bt835a_33.jpg" width="229" height="250"/></div><br />
			</div><!--Fecha Div Box-Menor-->
        </div><!--Fecha Div Linha-Características-->
        
		<div id="fundo-titulo-cinema">
	        <div id="barra-azul-escuro">
            	<div class="titulos-branco" id="titulo-cinema">CINEMA NO TAMANHO CERTO</div>
            </div><!--Fecha Barra Azul Escuro-->
		</div><!--Fecha Titulo Cinema-->
        
		<div id="imgs-cinema1">
    		<img src="images/html-betec-bt835a_37.jpg" width="570" height="340" style="float:left;"/>
			<img src="images/html-betec-bt835a_38.jpg" width="570" height="340" style="float:left;"/></div>
		<div id="imgs-cinema2">
    		<img src="images/html-betec-bt835a_39.jpg" width="570" height="403" style="float:left;"/>
			<img src="images/html-betec-bt835a_40.jpg" width="570" height="403" style="float:left;"/></div>

		<div id="box-max-desempenho">
			<p><span class="titulos-branco">OBTENHA O MÁXIMO DESEMPENHO</span></p><p><span class="descricoes-cinza-claro"><strong>PARA IMAGENS COM MÁXIMA NITIDEZ, UTILIZE O PROJETOR<br />EM AMBIENTES ESCUROS OU COM BAIXA LUMINOSIDADE!</strong></span></p>
		</div><!--fecha box Max desempenho -->             

		<div id="imgs-keystone">
    		<img src="images/html-betec-bt835a_45.jpg" width="570" height="440" style="float:left;"/>
			<img src="images/html-betec-bt835a_46.jpg" width="570" height="440" style="float:left;"/></div>
		
        <div id="imgs-portatil-fixo1">
    		<img src="images/html-betec-bt835a_45a.jpg" width="570" height="447" style="float:left;"/>
			<img src="images/html-betec-bt835a_46a.jpg" width="570" height="447" style="float:left;"/></div>
            
    	<div id="imgs-portatil-fixo2">
    		<img src="images/html-betec-bt835a_47.jpg" width="570" height="447" style="float:left;"/>
			<img src="images/html-betec-bt835a_48.jpg" width="570" height="447" style="float:left;"/></div>

		<div id="fundo-acesso-facil">
	        <div id="barra-azul-claro">
            	<div class="titulos-branco" id="titulo-acesso-facil">ACESSO FÁCIL E INTUITIVO</div>
            </div><!--Fecha Barra Azul Claro-->
		</div><!--Fecha Acesso Facil-->

		<div id="imgs-acesso-intuitivo1">
    		<img src="images/html-betec-bt835a_53.jpg" width="570" height="552" style="float:left;"/>
			<img src="images/html-betec-bt835a_54.jpg" width="570" height="552" style="float:left;"/>
 		</div><!--Fecha imgs Acesso Intuitivo --> 

		<div id="box-conectividade">
			<p><span class="titulos-azul">AMPLA CONECTIVIDADE</span></p><p><span class="descricoes-titulos">Acesso direto a vários tipos de conexão de entrada, aliando praticidade e tecnologia.<br />Conexão de saída para sistema de som externo de alta fidelidade. Qualidade total para a sua projeção.</span></p>
		</div><!--fecha conectividade -->  

		<div id="imgs-conectividade1">
    		<img src="images/html-betec-bt835a_56.jpg" width="570" height="369" style="float:left;"/>
			<img src="images/html-betec-bt835a_57.jpg" width="570" height="369" style="float:left;"/></div>
		<div id="imgs-conectividade2">
    		<img src="images/html-betec-bt835a_58.jpg" width="570" height="368" style="float:left;"/>
			<img src="images/html-betec-bt835a_59.jpg" width="570" height="368" style="float:left;"/></div>

		<div id="box-qualidade">
			<p><span class="titulos-azul">QUALIDADE E EFICIÊNCIA</span></p><p><span class="descricoes-titulos">Projetado com cuidado e construído com componentes de alta qualidade, o projetor <strong>BT835A</strong><br />é uma combinação elegante da tecnologia de ponta com o ótimo desempenho.</span></p>
		</div><!--fecha conectividade --> 
        
        <div id="imgs-qualidade">
    		<img src="images/html-betec-bt835a_58a.jpg" width="570" height="291" style="float:left;"/>
			<img src="images/html-betec-bt835a_59a.jpg" width="570" height="291" style="float:left;"/></div>

		<div id="box-lamp-led">
			<p><span class="titulos-azul">PROJEÇÃO COM LÂMPADA LED</span></p><p><span class="descricoes-titulos">Lâmpadas LED são muito mais eficientes, duráveis e consomem muito menos energia.<br />Além disso, custam até 5 vezes menos que as lâmpadas de projetores comuns!</span></p>
		</div><!--fecha conectividade --> 
        
        <div id="imgs-led"><img src="images/html-betec-bt835a_68.jpg" width="537" height="211" style="float:left;"/><img src="images/html-betec-bt835a_69.jpg" width="538" height="211" style="float:left;"/></div>

		<div id="imgs-betec">
    		<img src="images/html-betec-bt835a_72.jpg" width="549" height="437" style="float:left;"/>
			<img src="images/html-betec-bt835a_73.jpg" width="548" height="437" style="float:left;"/></div>

</div><!--Fecha Div Container-->

</body>
</html>

 

______________________________

Espero não ter esquecido nada e... 
Se obtiver alguma resposta... Fico agradecido imensamente!

Obrigado a todos, desde já!

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Então, você acabou criando um site com código sem necessidade de repetição.

posso não resolver seus problemas mas irá uma dica até você que vale a pena tentar.

separe o html do css

  • crie um: site.html, e um estilo.css. Quando os 2 estão separados a forma de visualização fica mais fácil.
  • comece a criar a prática de comentar os códigos, no html seria <!-- Comentário --> e no css seria: /* Comentário */.
  • as imagens com width e height iguais podem simplesmente ter uma classe que atribui sua altura e largura sem a necessidade de ter que repetir varias vezes.
  • comece a colocar altura e largura em porcentagem(%) isso deixará o site responsivo.
  • o html não funciona que nem uma imagem que se auto ajusta com o dispositivo que está sendo usado.
  • peça para que quando seu cliente coloque o seu código no site dele para ele referenciar o seu css depois de todos os outros o html sempre vai priorizar o ultimo css a ser referenciado.
  • sempre deixe seu código identado.

como eu havia dito, talvez isso não resolva seu problema, mas são boas práticas que você deve criar para facilitar a manipulação e a leitura do seu código.

tente mudar seu width e height para % isso resolverá seu problema com responsividade.

sempre evite ao maximo usar qualquer forma de definir o tamanho de algo que não seja com %.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Opa!
Caro XDXD...

Mano... Muito obrigado pela resposta! Mesmo!
Como eu coloquei ali, tenho uma "certa noção" sobre HTML e afins mas, as atualizações da linguagem são muito novidades pra mim e, de certa maneira, eu sabia que alguma (algumas) coisas não estavam (não ficariam) certas no código.

MUITO OBRIGADO - novamente - pelas dicas... Já deu "uma luz".
Guardarei as sugestões com carinho e à saplicarei... DE CERTEZA!

Especificamente sobre as "classes" e o fato delas não precisarem ser repetidas, eu meio que suspeitava mas, na hora de fatiar, como eu não tinha usado tamanhos semelhantes, achei melhor criar uma classe pra cada DIV... Agora já esto cuidando pra fatiar as imagens em tamanhos iguais e o próximo HTML terá apenas 4 classes diferentes pras DIVs.

E agora que você falou sobre as PORCENTAGENS ficou claro pra mim como trabalhar o conteúdo!

Valeu mesmo!
Ate breve e... SUCESSO aí pra você!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por juliosonic
      Boa noite..
      Estou desenvolvendo um site de https://www.maithunatantra.com.br/ e estou com um duvida sobre o menu de navegação da versão mobile.
      O menu que tem o dropdown "Terapeutas" e "Terapias" quando clico em cima ele expande como deve ser, mas quando clico denovo para recolher os submenus
      nao acontece nada.. segue o trecho do codigo do menu..
      <div class="collapse navbar-collapse" id="navbarsExample09">             <ul class="navbar-nav ml-auto">               <li class="nav-item  active"><a class="nav-link" href="index.html">Home</a></li>               <li class="nav-item  active"><a class="nav-link" href="about-us.html">Quem Somos</a></li>               <li class="nav-item dropdown1">                     <a class="nav-link dropdown-toggle" data-toggle="dropdown1" href="#">Terapeutas</a>                     <ul class="dropdown-menu">                         <li><a class="dropdown-item" href="terapeuta-julio-cezar.html">Julio Cezar</a></li>                         <li><a class="dropdown-item" href="terapeuta-pamela-priscila.html">Pamela Priscila</a></li>                     </ul>                                    </li>               <li class="nav-item dropdown">                     <a class="nav-link dropdown-toggle" data-toggle="dropdown1" href="#">Terapias</a>                     <ul class="dropdown-menu" aria-labelledby="dropdown01">                         <li><a class="dropdown-item" href="o-que-e-reiki.html">O que é Reiki</a></li>                         <li><a class="dropdown-item" href="beneficios-reiki.html">Benefícios do Reiki</a></li>                         <li><a class="dropdown-item" href="principios-reiki.html">Princípios do Reiki</a></li>                         <li><a class="dropdown-item" href="animais-reiki.html">Reiki em Animais</a></li>                         <li><a class="dropdown-item" href="animais-reiki.html">Estudos Sobre Reiki</a></li>                         <li><a class="dropdown-item" href="terapia-massagem-tantrica.html">Terapia Tântrica</a></li>                     </ul>               </li>               <li class="nav-item  active"><a class="nav-link" href="blog.html">Blog</a></li>                <li class="nav-item"><a class="nav-link" href="contato.html">Contato</a></li>             </ul>         </div>  
      Massagem Tantrica em Curitiba
      Tantra Curitiba
      Massagem Tântrica
      Tantra
      Julio Darshan

      Obrigado
      Att
      Julio Cezar
       
       
       
    • Por Felipe Medeiros
      Bom, criei um tema filho e o que aprendi é que para alterar qualquer coisa do tema filho eu preciso copiar o arquivo do tema pai o colocar dentro da pasta do tema filho.
       
      No meu caso, estou usando o tema "Astra" bem famosinho. O arquivo css que quero modificar não está dentro da pasta do tema pai, está em "wp-content/uploads/uag-plugin/assets/0/uag-css-10.css" sendo que o diretorio do tema pai é "wp-content/themes/Astra"
       
      O problema é o seguinte, preciso modificar a barra de pesquisa da pagina inicial, porem o inspetor de elementos do chrome ta acusando que esse arquivo é o responsavel por estilizar a barra de pesquisa. Será que isso tem a ver com "Cache de objetos", eu sei que o plugin liteSpeed Cache, AMP, Rank Math, todos eles tem essas paradas de criar arquivos css e js para tornar o site mais rapido.
    • Por joeythai
      Boa tarde pessoal,
       
      Eu criei um formulário em que tenho 3 interações: evento click, change e uma chamada ajax. No evento on change ("select#removal_table_from" )eu faço uma chamada ajax onde eu passo como parametro o id do item selecionado e construo uma tabela dinamica com o próprio javascript, após isto, tenho um input em que o usuario coloca um valor de percentual para que eu possa preencher em 3 colunas da tabela que foi criada dinamicamente: moto_atualizado, carro_atualizado e caminhao_atualizado, até aí tudo bem, o codigo está fazendo isso, porém, como a tabela é criada dinamicamente eu preciso de alguma forma enviar o arrayData para meu backend mas quando faço o calculo dentro do loop apos resposta do meu ajax, os valores desses 3 campos chegam como null, não sei se é possível fazer o que pretendo ou se é ainda não sei como faz
       
      <code>
           $(document).ready(function (event) {   let arrayData = []; let percentage; let removal_vehicle; let removal_motorcycle; let removal_tuck; let apply_removal = $('#apply_removal');   // apply_removal.on('click', function () { // percentage = $('#percentage').val();   // $('.table-body tr').each(function () {   // let veiculo = $(this).find('.veiculo').text(); // let moto = $(this).find('.moto').text(); // let caminhao = $(this).find('.caminhao').text();   // let removal_vehicle = parseFloat(veiculo) + (parseFloat(veiculo) * parseFloat(percentage)) / 100; // let removal_motorcycle = parseFloat(moto) + (parseFloat(moto) * parseFloat(percentage)) / 100; // let removal_tuck = parseFloat(caminhao) + (parseFloat(caminhao) * parseFloat(percentage)) / 100;   // arrayData.push({ // removal_vehicle, // removal_motorcycle, // removal_tuck // })   // $(this).find('.veiculo_atualizado').val(removal_vehicle.toFixed(2)); // $(this).find('.moto_atualizado').val(removal_motorcycle.toFixed(2)); // $(this).find('.caminhao_atualizado').val(removal_tuck.toFixed(2)); // }); // });   apply_removal.on('click', function () { percentage = $('#percentage').val();   $('.table-body tr').each(function () {   let veiculo = $(this).find('.veiculo').text(); let moto = $(this).find('.moto').text(); let caminhao = $(this).find('.caminhao').text();   removal_vehicle = parseFloat(veiculo) + (parseFloat(veiculo) * parseFloat(percentage)) / 100; removal_motorcycle = parseFloat(moto) + (parseFloat(moto) * parseFloat(percentage)) / 100; removal_tuck = parseFloat(caminhao) + (parseFloat(caminhao) * parseFloat(percentage)) / 100;   arrayData.push({ removal_vehicle, removal_motorcycle, removal_tuck })   $(this).find('.veiculo_atualizado').val(removal_vehicle.toFixed(2)); $(this).find('.moto_atualizado').val(removal_motorcycle.toFixed(2)); $(this).find('.caminhao_atualizado').val(removal_tuck.toFixed(2));     console.log('Removal Vehicle:', removal_vehicle); console.log('Removal Motorcycle:', removal_motorcycle); console.log('Removal Truck:', removal_tuck); }); });   $('select#removal_table_from').on('change', function (e) { let table_id = $(this).val(); let action = route('removal.removal-values.show', table_id);   $.ajax({ type: "GET", url: action, headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },   success: function (data) { $('.table-body').empty();   for (let i = 0; i < data.length; i++) { let carro = parseFloat(data[i].CARRO); let moto = parseFloat(data[i].MOTO); let caminhao = parseFloat(data[i].CAMINHAO); let distancia = data[i].DISTANCIA; let origem = data[i].ORIGEM; let destino = data[i].DESTINO; let localidadeOrigem = data[i].LocalidadeOrigem_ID; let localidadeDestino = data[i].LocalidadeDestino_ID;   let newRow = '<tr class="removal-row">' + '<td class="align-middle">' + '<div class="row">' + '<div class="col-1">' + '<span class="font-weight-bold">Origem</span><br>' + '<span class="origem">' + origem + '</span>' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">Destino</span><br>' + '<span class="destino">' + destino + '</span>' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">KM</span><br>' + '<span class="km">' + distancia + '</span>' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">Veículo</span><br>' + '<span class="veiculo">' + carro + '</span>' + '</div>' + '<div class="col-2">' + '<span class="font-weight-bold">Veículo Atualizado</span><br>' + '<input type="text" class="veiculo_atualizado">' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">Moto</span><br>' + '<span class="moto">' + moto + '</span>' + '</div>' + '<div class="col-2">' + '<span class="font-weight-bold">Moto Atualizado</span><br>' + '<input type="text" class="moto_atualizado">' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">Caminhão</span><br>' + '<span class="caminhao">' + caminhao + '</span>' + '</div>' + '<div class="col-2">' + '<span class="font-weight-bold">Caminhão Atualizado</span><br>' + '<input type="text" class="caminhao_atualizado">' + '</div>' + '</div>' + '</div>' + '</td>' + '</tr>';   $('.table-body').append(newRow); //let row = $('.removal-row:last');   // Calcula o valor atualizado e define nos campos diretamente // let veiculo_atualizado = carro + (carro * percentage) / 100; // let moto_atualizado = moto + (moto * percentage) / 100; // let caminhao_atualizado = caminhao + (caminhao * percentage) / 100; // console.log('PORCENTS: ', percentage); //console.log('Veiculo Atualizado:', veiculo_atualizado, 'Moto Atualizado:', moto_atualizado, 'Caminhao Atualizado:', caminhao_atualizado);   // Define os valores diretamente nos campos da nova linha // row.find('.veiculo_atualizado').val(veiculo_atualizado.toFixed(2)); // row.find('.moto_atualizado').val(moto_atualizado.toFixed(2)); // row.find('.caminhao_atualizado').val(caminhao_atualizado.toFixed(2));   arrayData.push({ carro, moto, caminhao, distancia, origem, destino, localidadeOrigem, localidadeDestino, removal_vehicle, removal_motorcycle, removal_tuck }); }   $('#copy_data_table').val(JSON.stringify(arrayData)); }   }); });   //javascript para o formulario de cadastro // $(document).ready(function (event) { $('#uf').change(function () { let code_city = $(this).val(); let deposit = localStorage.getItem('selected_deposit_id'); let action = route('removal.removal-values.cities', code_city); $.ajax({ type: "POST", url: action, headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }, data: { code_city: code_city },   success: function (data) {   $('#city').empty(); $('#deposit').empty();   for (let i = 0; i < data.cities.length; i++) { $('#city').append('<option value="' + data.cities[i].NM + '">' + data.cities[i].NM + '<option>'); }   if (data.deposits.length > 0) { for (let i = 0; i < data.deposits.length; i++) { $('#deposit').append('<option value="' + data.deposits[i].NM + '">' + data.deposits[i].NM + '<option>'); } } else { // $('#deposit').prop('disabled', true); // $('#city').prop('disabled', false); }   $('#city').trigger('change'); } });   });   $('#deposit').on('change', function () { depositId = $(this).val(); localStorage.setItem('selected_deposit_id', depositId); });   $('#uf_destiny').change(function () { let code_city = $(this).val(); let depositDestiny = localStorage.getItem('selected_deposit_destiny_id'); let action = route('removal.removal-values.cities', code_city); $.ajax({ type: "POST", url: action, headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }, data: { code_city: code_city },   success: function (data) {   $('#city_destiny').empty(); $('#deposit_destiny').empty();   for (let i = 0; i < data.cities.length; i++) { $('#city_destiny').append('<option value="' + data.cities[i].NM + '">' + data.cities[i].NM + '</option>'); }   if (data.deposits.length > 0) { // $('#deposit_destiny').prop('disabled', false); //$('#city_destiny').empty(); // $('#city_destiny').prop('disabled', true); for (let i = 0; i < data.deposits.length; i++) { $('#deposit_destiny').append('<option value="' + data.deposits[i].NM + '">' + data.deposits[i].NM + '</option>'); } } else { // $('#deposit_destiny').prop('disabled', true); // $('#city_destiny').prop('disabled', false); }   $('#city_destiny').trigger('change'); } }); });   $('#deposit_destiny').on('change', function () { let depositDestinyId = $(this).val(); localStorage.setItem('selected_deposit_destiny_id', depositDestinyId); });   }); </code>
    • Por babylon
      Olá galera tudo bem?
      Deixa eu perguntar, estava mexendo no meu site e queria adicionar em html essa tabela porem esta dando erro pois fica assim:
       

      Porem gostaria que ficasse assim:

      Segue o código da tabela:
      <center><table border="0">
          <tr>
      <td bgcolor="#0092df" width="24%"><a href="/categorias?ename=smartphones"><span style="font-size: 20px; color: #ffffff;"><b> <font color="#0092df">..</font>Bicicleta<br> <font color="#0092df">..</font>Track Bikes<br> <font color="#0092df">..</font>Aro 29 TKS</b></a></span><br><br><font size="5"><center><span style="background-color: #A1CD44">DE:</span></font> <br><font size="5"><s>R$ 1.999,99</center></font></s> </td><td><p><a href="/categorias?ename=smartphones"><img src="/static/img/itembicicleta.jpg"><br><font size="5"><center><span style="background-color: #A1CD44">COM - 60%:</span></font> <br><font size="5">1.199,99</font></center></a></td>
             <td><font color="#ffffff">....</font></td>
              <td bgcolor="#0092df" width="24%"><a href="/categorias?ename=smartphones"><span style="font-size: 20px; color: #ffffff;"><b> <font color="#0092df">..</font>Monitor 24"<br> <font color="#0092df">..</font>Samsung<font color="#0092df">aa.aa</font><br> <font color="#0092df">..</font>1ms 144hz</b></a></span></center></td><td><p><a href="/categorias?ename=smartphones"><img src="/static/img/itemmonitor.jpg"></a></td>
          </tr>
          </table></center>
      O que estaria errado, pois não sei como colocar nessa tabela outro fundo de outra cor, veja que usei td bgcolor="#0092df" para o azul escuro mas não sei como usaria pro "#e4f1fb" para o fundo ficar de azul claro em baixo bem como não ficou correto em altura o "DE:" com o "COM - 60%:".
      Bom é isso, obg.


×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.