Detalhes da questão

Endereço do fórum: http://roleplayarkbr.forumeiros.com
Versão do fórum: ModernBB

Descrição

Não sei porque raios, ta aparecendo as coisas repetido no visual do codigo...

imagem do problema:

Código:

<div id="lojaHancki">
  <script type="text/javascript">
  jQuery(function() {
  var produtos = {
 
    /* Ícones da loja abaixo.
    Lembre-se de adicionar uma vírgula ao final de cada novo ítem adicionado.
    Não adicione vírgula após o último ítem adicionado. */
 
    'Doação': {
        icone: 'https://pt.seaicons.com/wp-content/uploads/2016/04/coins-icon.png',
        preco: '5',
        descricao: 'Você pode doar 5,00 ou mais para ajudar a manter o servidor. Receberá uma Tag no forum de Colaborador, e seu nome ficará em destaque.'
    },
 
    'Tek Armor of Mastercraft': {
        icone: 'https://d1u5p3l4wpay3k.cloudfront.net/arksurvivalevolved_gamepedia/2/21/Tek_Chestpiece.png',
        preco: '12',
        descricao: 'Tek Armor é uma armadura Fabrica pelos Hotulhems. Uma armadura que oferece a melhor proteção física e proteção moderada contra o frio. Quando usada com o conjunto Tek completo, ele proporcionará a melhor proteção contra o calor e o frio, devido ao bônus definido.'
    },
 
    'Lymantria': {
        icone: 'http://www.dododex.com/media/creature/lymantria.png',
        preco: '20',
        descricao: 'Uma das grande invenções do Dr. Julm. Em combate a Lymantria lança uma névoa verde de esporos, que retarda seu inimigo, e drena a resistência em 90%. Enquanto seu oponente esta distraído, ela tem a chance de escapar.'
    },
 
    'Flame Arrow (3 unidades)': {
        icone: 'https://d1u5p3l4wpay3k.cloudfront.net/arksurvivalevolved_gamepedia/thumb/d/dc/Flame_Arrow_%28Scorched_Earth%29.png/128px-Flame_Arrow_%28Scorched_Earth%29.png',
        preco: '3',
        descricao: 'Oferece danos na flecha regulares no impacto, causando danos de queimaduras por cerca de 8 segundos, causando aproximadamente 22 pontos por segundo em Humanos. Muito eficaz contra grandes criaturas e carnívoros. Oferece danos reduzidos aos herbívoros.'
    },
   
   'Lymantria Saddle': {
        icone: 'https://d1u5p3l4wpay3k.cloudfront.net/arksurvivalevolved_gamepedia/1/19/Lymantria_Saddle_%28Scorched_Earth%29.png',
        preco: '5',
        descricao: 'A sela para Lymantria equipada acrescenta a espécie mais defesa. Também possibilita o sobrevivente de montar em cima.'
    },
    // Perceba que não existe vírgula após o último ítem. Caso queira adicionar mais ítens após o último, adicione uma vírgula logo após a chave "}". Lembre-se de deixar apenas o último ítem sem vírgula ao final.
 
 
  };
 
 
  var content = jQuery('.content .itens');
      jQuery.each(produtos, function (key, value) {
          content.append(
          '<tr class="item">' +
          '  <td class="icone" style="width: 10%;"><img src="' + value.icone + '" /></td>' +
          '  <td style="width: 50%;"><strong class="nome">' + key + '</strong><br /><br />' + value.descricao + '</td>' +
          '  <td>' +
          '  <ul>' +
          '  <li class="preco" data-myprice="' + value.preco + '"><img src="http://i.imgur.com/qdiucii.png" /> Preço: ' + value.preco + ' Reais</li>' +
          '  <br />' +
          '  <li><input type="button" onclick="addToCart(this)" value="Adicionar ao carrinho" /></li>' +
    '  </ul>' +
          '  </td>' +
          '</tr>'
          );
      });
  });
  var jQuerytotal = 0;
  function addToCart(item) {
    var getItem = jQuery(item).parents('.item').find('.nome').text();
    var getPrice = parseInt(jQuery(item).parents('.item').find('.preco').attr('data-myprice'));
    jQuerytotal += getPrice;
    jQuery('.total').html('Valor total: <span class="totalVal">' + jQuerytotal + '</span> Reais. Clicando em Concluir compra, a administração estará sendo informada na mesma hora, e dentro de 24h será enviado um link na sua caixa de mensagens do forum, para efetuar o pagamento.');
    jQuery('.cart').append('<span class="item-cart" onclick="removeFromCart(this)" data-myprice="' + getPrice + '">' + getItem + '</span>');
  }
  function removeFromCart(item) {
    var getPrice = parseInt(jQuery(item).attr('data-myprice'));
    jQuerytotal -= getPrice;
    jQuery('.total').html('Valor total: <span class="totalVal">' + jQuerytotal + '</span> Reais. Clicando em Concluir compra, a administração estará sendo informada na mesma hora, e dentro de 24h será enviado um link na sua caixa de mensagens do forum, para efetuar o pagamento.');
    jQuery(item).remove();
  }
  function resetItems() {
    jQuery('.cart').empty();
    jQuerytotal = 0;
    jQuery('.total').empty();
  }
  function buyItems() {
    if(!jQuery('.cart').is(':empty')) {
      var texto = '';
      var total = 0;
      jQuery('.item-cart').each(function() {
        var item = jQuery(this).text();
        var preco = parseInt(jQuery(this).attr('data-myprice'));
        texto += '<strong>' + item.charAt(0).toUpperCase() + item.slice(1)
        //add line break at the end
        + ':</strong> ' + preco + " reais\n";
        total += preco;
      });
      texto += '\n\n<strong>Valor total:</strong> ' + total + ' reais';
      jQuery.post('/privmsg', {
            'mode': 'post',
            'post': '1',
            'folder': 'inbox',
            'usergroup': '1',
            'subject': 'Pedido da loja',
            'message': texto
      }).done(function() {
        alert("Seu pedido foi enviado! Dentro de 24h a Administração estará lhe enviando por mensagem privada no fórum ou pelo seu email de cadastro, o link para efetuar o pagamento.");
        resetItems();
      });
    } else {
      alert("O carrinho está vazio");
    }
  }
</script><style type="text/css">
#lojaHancki > table > tbody > tr.item:nth-child(1),#lojaHancki > table > tbody > tr.item:nth-child(2), #lojaHancki > table > tbody > tr.item:nth-child(3), #lojaHancki > table > tbody > tr.item:nth-child(4) { display:none !important;}
table.content {
  background: #fafafa;
  border: 1px solid #eaeaea;
  border-collapse: separate;
  empty-cells: show;
  table-layout: fixed;
  width: 100%;
}
.itens .nome {font-size: 14px;}
.itens .icone {
text-align: center;
}
.itens .icone img {
  height: 50px;
  width: 50px;
}
.item-cart {
  background: orange url(https://cdn0.iconfinder.com/data/icons/very-basic-android-l-lollipop-icon-pack/24/close-16.png) no-repeat 5px;
  margin: 3px 4px;
  cursor: pointer;
  display: inline-block;
  font-weight: bold;
  padding: 5px;
  padding-left: 25px;
  color: white;
  border-radius: 3px;
}
table.content tr td {padding: 10px;background: #f0f0f0;border-bottom: 1px solid #e0e0e0;}
.itens ul li {list-style-type: none;}
.daemon {
  background: #333;
  text-align: center;
  padding: 10px;
}
#cart {
  background: #f0f0f0;
  border: 1px solid #e0e0e0;
  margin-top: 5px;
  padding: 5px;
}
.cart {
  background: white url("https://cdn1.iconfinder.com/data/icons/flat-artistic-shopping-icons/32/shopping-32.png") no-repeat 10px center;
  min-height: 50px;
  padding-left: 55px;
  border: 1px solid #ddd;
}
.total {font-size: 13px;display: block;margin-top: 5px;font-family: arial;display: block;font-style: italic;font-weight: bold;}
</style>
  <div class="daemon">
                          <span style="color: white;font-size: 28px;font-weight: bold;">Ofertas do laboratório do Dr. Julm</span>
  </div>
 
  <table class="content">
                              <tbody class="itens"> </tbody>
  </table>
 
  <div id="cart">
                                           
      <div class="cart">
                                               
      </div>
                          <span class="total"></span>
  </div>
 
  <div class="daemon">
                          <input type="button" value="Concluir compra" onclick="buyItems()" />  <input type="button" value="Esvaziar carrinho" onclick="resetItems()" />
  </div>
</div><script>
jQuery(document).ready(function() {
    jQuery('#lojaHancki').appendTo('#content-container #content-main');
});
</script>

Olá!

Isso é algum erro que ocorre no próprio código que faz com que os itens se repitam. Com CSS isso esconde-se bem! Como fiz no outro primeiro código.
Mas penso já estar resolvido, não?

Hancki

Olá, mas como faço para esconder? porque terei problemas futuro conforme ir acrescentando ..

Essa repetição é sempre no último quadrado e acontece sempre que adiciona um novo item?

Sempre que adiciono alguma coisa no código, aparece o mesmo item no topo ...

Adicionei flecha de fogo no fim da area onde é para criar + produtos, ai apareceu o mesmo item no topo, assim como esta a imagem que mostrei no inicio deste topico.

Então você adiciona o produto no final da loja e aparece um "clone" na primeira imagem? Me mande um print da loja atual, por favor.

Obrigado.

Olá, Omaiyomai.
O último item não deve ter virgula.

Como você pode ver é funcional -> removido  (A página será removida assim que for solucionado o tópico)

Troque o código por este e veja se está funcionando. Se ele aparecer apenas um ou nenhum é por que provavelmente o código (lojaHancki) pode está atrapalhando.

Código:

<div id="lojaHancki">
  <script type="text/javascript">
  jQuery(function() {
  var produtos = {
 
    /* Ícones da loja abaixo.
    Lembre-se de adicionar uma vírgula ao final de cada novo ítem adicionado.
    Não adicione vírgula após o último ítem adicionado. */
 
    'Doação': {
        icone: 'https://pt.seaicons.com/wp-content/uploads/2016/04/coins-icon.png',
        preco: '5',
        descricao: 'Você pode doar 5,00 ou mais para ajudar a manter o servidor. Receberá uma Tag no forum de Colaborador, e seu nome ficará em destaque.'
    },
 
    'Tek Armor of Mastercraft': {
        icone: 'https://d1u5p3l4wpay3k.cloudfront.net/arksurvivalevolved_gamepedia/2/21/Tek_Chestpiece.png',
        preco: '12',
        descricao: 'Tek Armor é uma armadura Fabrica pelos Hotulhems. Uma armadura que oferece a melhor proteção física e proteção moderada contra o frio. Quando usada com o conjunto Tek completo, ele proporcionará a melhor proteção contra o calor e o frio, devido ao bônus definido.'
    },
 
    'Lymantria': {
        icone: 'http://www.dododex.com/media/creature/lymantria.png',
        preco: '20',
        descricao: 'Uma das grande invenções do Dr. Julm. Em combate a Lymantria lança uma névoa verde de esporos, que retarda seu inimigo, e drena a resistência em 90%. Enquanto seu oponente esta distraído, ela tem a chance de escapar.'
    },
 
    'Flame Arrow (3 unidades)': {
        icone: 'https://d1u5p3l4wpay3k.cloudfront.net/arksurvivalevolved_gamepedia/thumb/d/dc/Flame_Arrow_%28Scorched_Earth%29.png/128px-Flame_Arrow_%28Scorched_Earth%29.png',
        preco: '3',
        descricao: 'Oferece danos na flecha regulares no impacto, causando danos de queimaduras por cerca de 8 segundos, causando aproximadamente 22 pontos por segundo em Humanos. Muito eficaz contra grandes criaturas e carnívoros. Oferece danos reduzidos aos herbívoros.'
    },
  
   'Lymantria Saddle': {
        icone: 'https://d1u5p3l4wpay3k.cloudfront.net/arksurvivalevolved_gamepedia/1/19/Lymantria_Saddle_%28Scorched_Earth%29.png',
        preco: '5',
        descricao: 'A sela para Lymantria equipada acrescenta a espécie mais defesa. Também possibilita o sobrevivente de montar em cima.'
    }
    // Perceba que não existe vírgula após o último ítem. Caso queira adicionar mais ítens após o último, adicione uma vírgula logo após a chave "}". Lembre-se de deixar apenas o último ítem sem vírgula ao final.
 
 
  };
 
 
  var content = jQuery('.content .itens');
      jQuery.each(produtos, function (key, value) {
          content.append(
          '<tr class="item">' +
          '  <td class="icone" style="width: 10%;"><img src="' + value.icone + '" /></td>' +
          '  <td style="width: 50%;"><strong class="nome">' + key + '</strong><br /><br />' + value.descricao + '</td>' +
          '  <td>' +
          '  <ul>' +
          '  <li class="preco" data-myprice="' + value.preco + '"><img src="http://i.imgur.com/qdiucii.png" /> Preço: ' + value.preco + ' Reais</li>' +
          '  <br />' +
          '  <li><input type="button" onclick="addToCart(this)" value="Adicionar ao carrinho" /></li>' +
    '  </ul>' +
          '  </td>' +
          '</tr>'
          );
      });
  });
  var jQuerytotal = 0;
  function addToCart(item) {
    var getItem = jQuery(item).parents('.item').find('.nome').text();
    var getPrice = parseInt(jQuery(item).parents('.item').find('.preco').attr('data-myprice'));
    jQuerytotal += getPrice;
    jQuery('.total').html('Valor total: <span class="totalVal">' + jQuerytotal + '</span> Reais. Clicando em Concluir compra, a administração estará sendo informada na mesma hora, e dentro de 24h será enviado um link na sua caixa de mensagens do forum, para efetuar o pagamento.');
    jQuery('.cart').append('<span class="item-cart" onclick="removeFromCart(this)" data-myprice="' + getPrice + '">' + getItem + '</span>');
  }
  function removeFromCart(item) {
    var getPrice = parseInt(jQuery(item).attr('data-myprice'));
    jQuerytotal -= getPrice;
    jQuery('.total').html('Valor total: <span class="totalVal">' + jQuerytotal + '</span> Reais. Clicando em Concluir compra, a administração estará sendo informada na mesma hora, e dentro de 24h será enviado um link na sua caixa de mensagens do forum, para efetuar o pagamento.');
    jQuery(item).remove();
  }
  function resetItems() {
    jQuery('.cart').empty();
    jQuerytotal = 0;
    jQuery('.total').empty();
  }
  function buyItems() {
    if(!jQuery('.cart').is(':empty')) {
      var texto = '';
      var total = 0;
      jQuery('.item-cart').each(function() {
        var item = jQuery(this).text();
        var preco = parseInt(jQuery(this).attr('data-myprice'));
        texto += '<strong>' + item.charAt(0).toUpperCase() + item.slice(1)
        //add line break at the end
        + ':</strong> ' + preco + " reais\n";
        total += preco;
      });
      texto += '\n\n<strong>Valor total:</strong> ' + total + ' reais';
      jQuery.post('/privmsg', {
            'mode': 'post',
            'post': '1',
            'folder': 'inbox',
            'usergroup': '1',
            'subject': 'Pedido da loja',
            'message': texto
      }).done(function() {
        alert("Seu pedido foi enviado! Dentro de 24h a Administração estará lhe enviando por mensagem privada no fórum ou pelo seu email de cadastro, o link para efetuar o pagamento.");
        resetItems();
      });
    } else {
      alert("O carrinho está vazio");
    }
  }
</script><style type="text/css">
#lojaHancki > table > tbody > tr.item:nth-child(1),#lojaHancki > table > tbody > tr.item:nth-child(2), #lojaHancki > table > tbody > tr.item:nth-child(3), #lojaHancki > table > tbody > tr.item:nth-child(4) { display:none !important;}
table.content {
  background: #fafafa;
  border: 1px solid #eaeaea;
  border-collapse: separate;
  empty-cells: show;
  table-layout: fixed;
  width: 100%;
}
.itens .nome {font-size: 14px;}
.itens .icone {
text-align: center;
}
.itens .icone img {
  height: 50px;
  width: 50px;
}
.item-cart {
  background: orange url(https://cdn0.iconfinder.com/data/icons/very-basic-android-l-lollipop-icon-pack/24/close-16.png) no-repeat 5px;
  margin: 3px 4px;
  cursor: pointer;
  display: inline-block;
  font-weight: bold;
  padding: 5px;
  padding-left: 25px;
  color: white;
  border-radius: 3px;
}
table.content tr td {padding: 10px;background: #f0f0f0;border-bottom: 1px solid #e0e0e0;}
.itens ul li {list-style-type: none;}
.daemon {
  background: #333;
  text-align: center;
  padding: 10px;
}
#cart {
  background: #f0f0f0;
  border: 1px solid #e0e0e0;
  margin-top: 5px;
  padding: 5px;
}
.cart {
  background: white url("https://cdn1.iconfinder.com/data/icons/flat-artistic-shopping-icons/32/shopping-32.png") no-repeat 10px center;
  min-height: 50px;
  padding-left: 55px;
  border: 1px solid #ddd;
}
.total {font-size: 13px;display: block;margin-top: 5px;font-family: arial;display: block;font-style: italic;font-weight: bold;}
</style>
  <div class="daemon">
                          <span style="color: white;font-size: 28px;font-weight: bold;">Ofertas do laboratório do Dr. Julm</span>
  </div>
 
  <table class="content">
                              <tbody class="itens"> </tbody>
  </table>
 
  <div id="cart">
                                          
      <div class="cart">
                                              
      </div>
                          <span class="total"></span>
  </div>
 
  <div class="daemon">
                          <input type="button" value="Concluir compra" onclick="buyItems()" />  <input type="button" value="Esvaziar carrinho" onclick="resetItems()" />
  </div>
</div><script>
jQuery(document).ready(function() {
    jQuery('#lojaHancki').appendTo('#content-container #content-main');
});
</script>

Até ^^

O problema persiste.
Sim, estou ciente que no final não pode ter a virgula, conforme o explicado

Boa noite. Teste este código sem o (LojaHancki) e veja se é funcional. 

Código:

<script type="text/javascript">
  jQuery(function() {
  var produtos = {
 
    /* Ícones da loja abaixo.
    Lembre-se de adicionar uma vírgula ao final de cada novo ítem adicionado.
    Não adicione vírgula após o último ítem adicionado. */
 
    'Doação': {
        icone: 'https://pt.seaicons.com/wp-content/uploads/2016/04/coins-icon.png',
        preco: '5',
        descricao: 'Você pode doar 5,00 ou mais para ajudar a manter o servidor. Receberá uma Tag no forum de Colaborador, e seu nome ficará em destaque.'
    },
 
    'Tek Armor of Mastercraft': {
        icone: 'https://d1u5p3l4wpay3k.cloudfront.net/arksurvivalevolved_gamepedia/2/21/Tek_Chestpiece.png',
        preco: '12',
        descricao: 'Tek Armor é uma armadura Fabrica pelos Hotulhems. Uma armadura que oferece a melhor proteção física e proteção moderada contra o frio. Quando usada com o conjunto Tek completo, ele proporcionará a melhor proteção contra o calor e o frio, devido ao bônus definido.'
    },
 
    'Lymantria': {
        icone: 'http://www.dododex.com/media/creature/lymantria.png',
        preco: '20',
        descricao: 'Uma das grande invenções do Dr. Julm. Em combate a Lymantria lança uma névoa verde de esporos, que retarda seu inimigo, e drena a resistência em 90%. Enquanto seu oponente esta distraído, ela tem a chance de escapar.'
    },
 
    'Flame Arrow (3 unidades)': {
        icone: 'https://d1u5p3l4wpay3k.cloudfront.net/arksurvivalevolved_gamepedia/thumb/d/dc/Flame_Arrow_%28Scorched_Earth%29.png/128px-Flame_Arrow_%28Scorched_Earth%29.png',
        preco: '3',
        descricao: 'Oferece danos na flecha regulares no impacto, causando danos de queimaduras por cerca de 8 segundos, causando aproximadamente 22 pontos por segundo em Humanos. Muito eficaz contra grandes criaturas e carnívoros. Oferece danos reduzidos aos herbívoros.'
    },
  
   'Lymantria Saddle': {
        icone: 'https://d1u5p3l4wpay3k.cloudfront.net/arksurvivalevolved_gamepedia/1/19/Lymantria_Saddle_%28Scorched_Earth%29.png',
        preco: '5',
        descricao: 'A sela para Lymantria equipada acrescenta a espécie mais defesa. Também possibilita o sobrevivente de montar em cima.'
    },
    'Games': {
        icone: 'http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/48/Actions-games-config-theme-icon.png',
        preco: '5',
        descricao: 'Games em ação.'
    },
    'Youtube': {
        icone: 'http://icons.iconarchive.com/icons/marcus-roberto/google-play/48/YouTube-icon.png',
        preco: '5',
        descricao: 'Melhores do youtube.'
    }
    // Perceba que não existe vírgula após o último ítem. Caso queira adicionar mais ítens após o último, adicione uma vírgula logo após a chave "}". Lembre-se de deixar apenas o último ítem sem vírgula ao final.
 
 
  };
 
 
  var content = jQuery('.content .itens');
      jQuery.each(produtos, function (key, value) {
          content.append(
          '<tr class="item">' +
          '  <td class="icone" style="width: 10%;"><img src="' + value.icone + '" /></td>' +
          '  <td style="width: 50%;"><strong class="nome">' + key + '</strong><br /><br />' + value.descricao + '</td>' +
          '  <td>' +
          '  <ul>' +
          '  <li class="preco" data-myprice="' + value.preco + '"><img src="http://i.imgur.com/qdiucii.png" /> Preço: ' + value.preco + ' Reais</li>' +
          '  <br />' +
          '  <li><input type="button" onclick="addToCart(this)" value="Adicionar ao carrinho" /></li>' +
    '  </ul>' +
          '  </td>' +
          '</tr>'
          );
      });
  });
  var jQuerytotal = 0;
  function addToCart(item) {
    var getItem = jQuery(item).parents('.item').find('.nome').text();
    var getPrice = parseInt(jQuery(item).parents('.item').find('.preco').attr('data-myprice'));
    jQuerytotal += getPrice;
    jQuery('.total').html('Valor total: <span class="totalVal">' + jQuerytotal + '</span> Reais. Clicando em Concluir compra, a administração estará sendo informada na mesma hora, e dentro de 24h será enviado um link na sua caixa de mensagens do forum, para efetuar o pagamento.');
    jQuery('.cart').append('<span class="item-cart" onclick="removeFromCart(this)" data-myprice="' + getPrice + '">' + getItem + '</span>');
  }
  function removeFromCart(item) {
    var getPrice = parseInt(jQuery(item).attr('data-myprice'));
    jQuerytotal -= getPrice;
    jQuery('.total').html('Valor total: <span class="totalVal">' + jQuerytotal + '</span> Reais. Clicando em Concluir compra, a administração estará sendo informada na mesma hora, e dentro de 24h será enviado um link na sua caixa de mensagens do forum, para efetuar o pagamento.');
    jQuery(item).remove();
  }
  function resetItems() {
    jQuery('.cart').empty();
    jQuerytotal = 0;
    jQuery('.total').empty();
  }
  function buyItems() {
    if(!jQuery('.cart').is(':empty')) {
      var texto = '';
      var total = 0;
      jQuery('.item-cart').each(function() {
        var item = jQuery(this).text();
        var preco = parseInt(jQuery(this).attr('data-myprice'));
        texto += '<strong>' + item.charAt(0).toUpperCase() + item.slice(1)
        //add line break at the end
        + ':</strong> ' + preco + " reais\n";
        total += preco;
      });
      texto += '\n\n<strong>Valor total:</strong> ' + total + ' reais';
      jQuery.post('/privmsg', {
            'mode': 'post',
            'post': '1',
            'folder': 'inbox',
            'usergroup': '1',
            'subject': 'Pedido da loja',
            'message': texto
      }).done(function() {
        alert("Seu pedido foi enviado! Dentro de 24h a Administração estará lhe enviando por mensagem privada no fórum ou pelo seu email de cadastro, o link para efetuar o pagamento.");
        resetItems();
      });
    } else {
      alert("O carrinho está vazio");
    }
  }
</script><style type="text/css">
#lojaHancki > table > tbody > tr.item:nth-child(1),#lojaHancki > table > tbody > tr.item:nth-child(2), #lojaHancki > table > tbody > tr.item:nth-child(3), #lojaHancki > table > tbody > tr.item:nth-child(4) { display:none !important;}
table.content {
  background: #fafafa;
  border: 1px solid #eaeaea;
  border-collapse: separate;
  empty-cells: show;
  table-layout: fixed;
  width: 100%;
}
.itens .nome {font-size: 14px;}
.itens .icone {
text-align: center;
}
.itens .icone img {
  height: 50px;
  width: 50px;
}
.item-cart {
  background: orange url(https://cdn0.iconfinder.com/data/icons/very-basic-android-l-lollipop-icon-pack/24/close-16.png) no-repeat 5px;
  margin: 3px 4px;
  cursor: pointer;
  display: inline-block;
  font-weight: bold;
  padding: 5px;
  padding-left: 25px;
  color: white;
  border-radius: 3px;
}
table.content tr td {padding: 10px;background: #f0f0f0;border-bottom: 1px solid #e0e0e0;}
.itens ul li {list-style-type: none;}
.daemon {
  background: #333;
  text-align: center;
  padding: 10px;
}
#cart {
  background: #f0f0f0;
  border: 1px solid #e0e0e0;
  margin-top: 5px;
  padding: 5px;
}
.cart {
  background: white url("https://cdn1.iconfinder.com/data/icons/flat-artistic-shopping-icons/32/shopping-32.png") no-repeat 10px center;
  min-height: 50px;
  padding-left: 55px;
  border: 1px solid #ddd;
}
.total {font-size: 13px;display: block;margin-top: 5px;font-family: arial;display: block;font-style: italic;font-weight: bold;}
</style>  
<div class="daemon">
                             <span style="color: white;font-size: 28px;font-weight: bold;">Ofertas do laboratório do Dr. Julm</span>  
</div>
    
<table class="content">
                                 <tbody class="itens">   </tbody>
</table>
    
<div id="cart">
                                                     
   <div class="cart">
                                                            
   </div>
                             <span class="total"></span>  
</div>
    
<div class="daemon">
                             <input onclick="buyItems()" value="Concluir compra" type="button" />  <input onclick="resetItems()" value="Esvaziar carrinho" type="button" />  
</div>

 Poderia também me dizer aonde está aplicado esta página (URL)? 

Até mais.

Olá @virus parece que agora foi resolvido hein, coloquei ele nas paginas html http://roleplayarkbr.forumeiros.com/h4-

Qualquer dúvida e só criar um novo tópico ok.