BT835A - Betec Brasil ©

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](https://drive.google.com/open?id=1oxhbq48reTrxTE6iLo6J517ebfioXTNE) Aqui vai o código: ``` BT835A - Betec Brasil ©

PROJETOR POTENTE... SISTEMA SMART!

Com 1600 LÚMENS para projeção, o que torna o modelo BT835A ainda mais poderoso são as
FUNÇÕES SMART nativas! O WI-FI integrado permite que você se conecta à internet e tenha
acesso direto ao YOUTUBE, GOOGLE CHROME e NETFLIX, com os aplicativos já instalados!

CONEXÃO WI-FI E OS MELHORES APLICATIVOS JÁ INSTALADOS!

Conexão rápida
e fácil

O melhor navegador
da internet

Séries e filmes para
seu cinema em casa

O maior conteúdo de
vídeos do mundo

CINEMA NO TAMANHO CERTO

OBTENHA O MÁXIMO DESEMPENHO

PARA IMAGENS COM MÁXIMA NITIDEZ, UTILIZE O PROJETOR
EM AMBIENTES ESCUROS OU COM BAIXA LUMINOSIDADE!

ACESSO FÁCIL E INTUITIVO

AMPLA CONECTIVIDADE

Acesso direto a vários tipos de conexão de entrada, aliando praticidade e tecnologia.
Conexão de saída para sistema de som externo de alta fidelidade. Qualidade total para a sua projeção.

QUALIDADE E EFICIÊNCIA

Projetado com cuidado e construído com componentes de alta qualidade, o projetor BT835A
é uma combinação elegante da tecnologia de ponta com o ótimo desempenho.

PROJEÇÃO COM LÂMPADA LED

Lâmpadas LED são muito mais eficientes, duráveis e consomem muito menos energia.
Além disso, custam até 5 vezes menos que as lâmpadas de projetores comuns!

______________________________ Espero não ter esquecido nada e... Se obtiver alguma resposta... Fico agradecido imensamente! Obrigado a todos, desde já! ```

p.a.artegrafica

Erro misterioso de HTML & CSS na Loja Virtual