Descrição com abas

Montei o código abaixo para descrição de produtos de acordo com um video que assisti porem na loja integrada aparece tudo desconfigurado.

Se eu testar o arquivo html que fiz está perfeito. Alguém sabe porque o código não funciona na loja integrada?

*{ margin: 0; padding: 0; } .nav_tabs{ width: 800px; height: 400px; margin: 100px auto; background-color: #fff; position: relative; } .nav_tabs ul{ list-style: none; } .nav_tabs ul li{ float: left; font-family: Sofia; font-size: 18px; color: #808080; } .nav_tabs label{ /* Informações botao */ width: 60px auto; padding: 12; background-color: none; /*border-style: solid; border-width: 1px; border-radius: 5px; border-color: #222222; */ color: none; display: block; cursor: pointer; text-align: center; } .rd_tabs:checked ~ label{ /* Quando clica no botao */ background-color: #FFFAFA; /* background-color: #FFFACD; background-color: ##DCDCDC; */ border-style: none; border-width: 1px; border-radius: 5px; /* border-color: #FF4500; */ } .rd_tabs{ display: none; } .content{ /*border-top: 5px solid #FF4500; background-color: #fff; */ display: none; position: absolute; height: 320px; width: 600px; left: 0; } .content article{ padding: 10px; } .rd_tabs:checked ~ .content{ display: block; }
  • Descrição
    É obtida através da moagem do arroz refinado, um cereal muito utilizado na nossa alimentação e que possuí aminoácidos essenciais ao organismo como isoleucina, valina, lisina leucina, entre outros.
	<li>
		<input type="radio" name="tabs" class="rd_tabs" id="tab2">
		<label for ="tab2">Benefícios</label>
		<div class="content">
			<article> 
				 Não possui o glúten, podendo ser consumida pelos celíacos, porém seu consumo deve ser controlado, pois apresenta um índice glicêmico elevado em comparação a farinha de arroz integral, isso por não possuir quantidade suficiente de fibras, além de ser reduzida em vitaminas e minerais. Assim, sempre que possível, enriqueça as preparações com fontes de fibras.
			</article>
		</div>	
	</li>
	
	<li>
		<input type="radio" name="tabs" class="rd_tabs" id="tab3">
		<label for ="tab3">Dicas de Uso</label>
		<div class="content">
			<article>					
				Pode ser usada em sopas, molhos, bolos, pizza, tortas, panquecas doces e salgadas, pães, cookies, empanados, entre outras preparações em substituição ou junto à farinha de trigo por exemplo.
			</article>
		</div>	
	</li>
	
	<li>
		<input type="radio" name="tabs" class="rd_tabs" id="tab4">
		<label for ="tab4">Dicas de Armazenamento</label>
		<div class="content">
			<article>					
				Após aberto, manter a embalagem bem fechada, caso não possa ser transferido para um recipiente com tampa. O ideal é que seja consumido em até 30 dias e permaneça em local seco, longe da luz e arejado.
			</article>
		</div>	
	</li>
	<li>
		<input type="radio" name="tabs" class="rd_tabs" id="tab5">
		<label for ="tab5">Tabela Nutricional</label>
		<div class="content">
			<article>					
				
			</article>
		</div>	
	</li>		
</ul>

qual o link do produto para verificar o resultado.
teria como anexar esse arquivo na internet e mandar o link?

Olá @Leonardo_Vicentini_F

Segue o link do código em um arquivo txt

Se eu abro esse código como arquivo html aparece as abas conforme imagem abaixo, ao clicar em cada aba vai mudando as informações.

Ja se coloca na loja integrada as abas fica com os textos sobrepostos como se não tivesse espaçamento entre uma aba e outra, e não faz a mudança de texto ao clicar em cima.

Screenshot_2 Screenshot_1


<style>
.nav_tabs{
	width: 800px !important;
	height: 400px !important;
	margin: 100px auto !important;
	background-color: #fff !important;
	position: relative !important;
}
.nav_tabs ul{
	list-style: none !important;
	
}
.nav_tabs ul li{
	float: left !important;
	font-family: Sofia !important;
	font-size: 18px !important;
	color: #808080 !important;
	

}
.nav_tabs label{
	/* Informações botao */
	width: 60px auto !important;
	padding: 12px !important;
	background-color: none !important; 
	/*border-style: solid !important;
	border-width: 1px !important;
	border-radius: 5px !important;
	border-color: #222222 !important; */ 
	color: none !important; 
	display: block !important;
	cursor: pointer !important;
	text-align: center !important;
}

.rd_tabs:checked ~ label{
	/* Quando clica no botao */
	background-color: #FFFAFA !important;
	/*
	background-color: #FFFACD !important;	
	background-color: ##DCDCDC !important; */
	border-style: none !important;
	border-width: 1px !important;
	border-radius: 5px !important;
	/* border-color: #FF4500 !important; */ 
	
}
.rd_tabs{
	display: none !important;

}	

.content{
	/*border-top: 5px solid #FF4500 !important;
	background-color: #fff !important; */
	display: none !important;
	position: absolute !important;
	height: 320px !important;
	width: 600px !important;
	left: 0px !important;

}
.content article{
	padding: 10px !important;
	
}

.rd_tabs:checked ~ .content{
	display: block !important;
}
</style>

<nav class="nav_tabs">
	<ul>
		<li>
			<input type="radio" name="tabs" class="rd_tabs" id="tab1" checked>
			<label for ="tab1">Descrição</label>
			<div class="content">
				<article>
					É obtida através da moagem do arroz refinado, um cereal muito utilizado na nossa alimentação e que possuí aminoácidos essenciais ao organismo como isoleucina, valina, lisina leucina, entre outros.
				</article>
			</div>
		</li>
		
		<li>
			<input type="radio" name="tabs" class="rd_tabs" id="tab2">
			<label for ="tab2">Benefícios</label>
			<div class="content">
				<article> 
					 Não possui o glúten, podendo ser consumida pelos celíacos, porém seu consumo deve ser controlado, pois apresenta um índice glicêmico elevado em comparação a farinha de arroz integral, isso por não possuir quantidade suficiente de fibras, além de ser reduzida em vitaminas e minerais. Assim, sempre que possível, enriqueça as preparações com fontes de fibras.
				</article>
			</div>	
		</li>
		
		<li>
			<input type="radio" name="tabs" class="rd_tabs" id="tab3">
			<label for ="tab3">Dicas de Uso</label>
			<div class="content">
				<article>					
					Pode ser usada em sopas, molhos, bolos, pizza, tortas, panquecas doces e salgadas, pães, cookies, empanados, entre outras preparações em substituição ou junto à farinha de trigo por exemplo.
				</article>
			</div>	
		</li>
		
		<li>
			<input type="radio" name="tabs" class="rd_tabs" id="tab4">
			<label for ="tab4">Dicas de Armazenamento</label>
			<div class="content">
				<article>					
					Após aberto, manter a embalagem bem fechada, caso não possa ser transferido para um recipiente com tampa. O ideal é que seja consumido em até 30 dias e permaneça em local seco, longe da luz e arejado.
				</article>
			</div>	
		</li>
		<li>
			<input type="radio" name="tabs" class="rd_tabs" id="tab5">
			<label for ="tab5">Tabela Nutricional</label>
			<div class="content">
				<article>					
					
				</article>
			</div>	
		</li>		
	</ul>
</nav>
2 curtidas

Muito Obrigad @Leonardo_Vicentini_F
Deu certo, quando eu inseri não apareceu correto, mas depois de uns 10 minutos acho que atualizou a página e ficou certinho.

Cara,
So mais um help, você sabe como alinhar as abas a esquerda da página, no meu fica no meio. Tentei alterar o position de relative para left conforme demonstro abaixo, mas isso so altera o texto e não as abas.

Link: https://www.ameninadalinhaca.com.br/farinha-de-arroz-branco

isso?
se for, remova o

margin: 100px auto !important;

2 curtidas

Deu certo,

Muito obrigado pela ajuda.

Ficou ótimo agora.

Primeiramente, parabéns e obrigado pelo código, achei muito bom.

Só teve um probleminha, ele fica zuado na versão Celular rs.
Saberia como revolver?