Publicado em 12 de nov.

linhas pontilhadas

Boa noite, meus amigos!

Td bem com vcs?

Olha eu novamente... rsrsrsrs......

Meus Deus mas como é dificiiiiil esse tal de CSS, tentei fazer um curso online, o cara é muito doido, e quase me deixou doido tbm kkkkkkk, abandonei......kkk

Galera estou tentando colocar linhas pontilhadas estilo cardápio.

MODA DA CASA

(Mussarela, provolone, parmesão e catupiry etc.) $0,00

...........................................................................................................................

alguem pode me dar um help?

obrigado!

Discussão (4)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Sapinn· 13 de nov.

<!DOCTYPE html>

<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pontilhado</title>
    <style>
        hr {
  border:none;
  border-top:3px dotted blue;
  color:#fff;
  background-color:#fff;
  height:1px;
  width:50%;
}
    </style>
</head>
<body>
    (Mussarela, provolone, parmesão e catupiry etc.)<hr>$0,00
</body>

	 

	Ou talvez você nem precise do css... no proprio HTML coloca isso:

<!DOCTYPE html>

<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pontilhado</title>
</head>
<body>
    Moda da Casa.................................................................................. 10,00R$
</body>
</html>

Sherlock02· 13 de nov.

Olá,

Tem algumas soluções já prontas no Codepen:

1- Com tabela:

https://codepen.io/Paulie-D/pen/bpMyBQ

2- Variação do primeiro com tabela:

https://codepen.io/MalcolmMcAtee/pen/XdqQeG

E esse que eu acho melhor, pois é com listas:

https://codepen.io/Paulie-D/pen/xVjNZO/

Obs.: Não sei qual curso você fez, mas html e css é complicado no começo, mesmo sendo uma linguagem simples, mas o ideal é aprender na prática mesmo. Levei quase um ano para pegar o jeitinho, mas comecei com o básico (caixas simples no blogger e personalizando listas, quotes, etc.), para depois ir avançando.

Muita coisa você vai encontrar nesses sites:

https://www.maujor.com

https://www.w3schools.com (inglês)

https://developer.mozilla.org/pt-BR/docs/Aprender

E principalmente procure códigos no Codepen (só que é em inglês apenas). Lá tem muita coisa boa.

Abraços e bons estudos!

lezão· 15 de nov.

Ola pessoal, agradeço pela a suas atenções.

estava fazendo um doidera aki e cheguei nessa conclusão

/ My opinion /

body {

 background: #ededed;
}
.container-cards {
 flex-wrap: wrap;
 display: inline-flex;
 width: 75%;
}
.box-container {
 /*border: 1px solid red;*/
 display: flex;
 background: transparent;
 font:80%/1 Arial;
 font-size: 14px;
 border-radius: 0px;
 align-items: center;
 width: 100%;
 height: 60px;
 border-bottom:2px dotted black;
 margin: 10px;
}
 /*DIV VALORES*/

.box-container .box-image {

 font:80%/1 Arial;
 font-size: 20px;
 width: 50%;
 margin-bottom: 10px;
 font-size: 30px
 font-weight: bold;
 color: #000;
 align-items: right;

 height: 0%;

}

.box-container .box-image img {

 width: 80px;
 height: 80px;
}

.box-container .box-content {

 display: flex;
 height: 100%;
 justify-content: left;
 flex-direction: column;
 padding: 5px;
}
.title {
 margin-bottom: 10px;
 font:80%/1 Arial;
 font-size: 16px;
 font-weight: bold;
 color: red;

 }
.description {
 margin-bottom: 10px;
 font-size: 16px;
 margin-bottom: 10px;
 color: #8a8686;
 }

a:link {

text-decoration: none;
}

. a:active {

text-decoration: none;
}

. a:visited {

text-decoration: none;
}

<div align="center">
 <div class="container-cards">
 <div class="box-container">
 <a href="" target="_blank">
 <section class="box-content">
 <label class="title">
 <div align="left">
 <b>Moda da casa</b>
 </div>
 </label>
 <span class="description">
 <div align="left">
 Molho de tomate, mussarela, calabresa ralada, catupiry, alho tostado, cebola, azeitonas e oregano
 </div>
 </span>

 </section>
 <section class="box-image">
 <div align="right">R$: 32,00</div>
 </section>
 </a>
 </div>

 <div class="box-container">
 <a href="" target="_blank">
 <section class="box-content">
 <label class="title">
 <div align="left">
 <b>Moda da casa</b>
 </div>
 </label>
 <span class="description">
 <div align="left">
 Molho de tomate, mussarela, calabresa ralada, catupiry, alho tostado, cebola, azeitonas e oregano
 </div>
 </span>

 </section>
 <section class="box-image">
 <div align="right">R$: 32,00</div>
 </section>
 </a>
 </div>

 </div>
</div>

	vejam como esta ficando qnd eu tento abrir no celular.

	[Erro qnd abre no celular](http://mercatotal.com.br/pizzaria/cardapio.php)

Sapinn· 16 de nov.

Pra resolver esse problema o celular pesquisa sobre media query no css ele mostra como ajustar seu site para qualquer dispositivo.