Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

lezão

linhas pontilhadas

Por , em Desenvolvimento frontend

Recommended Posts

lezão    0

lezão
Postado

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!

 

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Sapinn    0

Sapinn
Postado 
<!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>

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Sherlock02    0

Sherlock02
Postado

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!

Compartilhar este post

Link para o post
Compartilhar em outros sites

lezão    0

lezão
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend

  • Conteúdo Similar

    • Rafael_Ferreira
      Não consigo carregar imagem do captcha no meu formulário
      Por Rafael_Ferreira
      Não consigo carregar a imagem do captcha do meu formulário. Foi testado com o xampp e easyphp. Também não carregou a imagem de outros captcha. 
       
       
    • ILR master
      Fixar div até atingir uma certa altura
      Por ILR master
      Fala pessoal, tudo bem?
       
      Eu tenho o seguinte código:
       
      <script>
         $(function(){
      var jElement = $('.fixar_banner');
      $(window).scroll(function(){
          if ( $(this).scrollTop() > 120 ){
              jElement.css({
                  'position':'fixed',
                  'top':'10px'
              });
          }else{
              jElement.css({
                  'position':'relative',
                  'top':'auto'
              });
          }
      });
      });
      </script>
       
      Porém, eu quero que a div fique fixa até que outro elemento apareça na tela, tipo o rodapé da página por exemplo. É mais ou menos como a página de notícia do uol.
      https://noticias.uol.com.br/internacional/ultimas-noticias/2025/01/19/sonho-americano-brasileiros-moram-em-carro-e-buscam-comida-no-lixo-nos-eua.htm
       
      Espero ter sido claro.
       
      Obrigado :)
       
    • juliosonic
      Menu Navbar CSS Bootstrap
      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
       
       
       
    • Felipe Medeiros
      Como alterar o tema filho se o css usado no tema pai nao está dentro da pasta do tema pai?
      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.
    • Alessandro Bodão
      H1 que preencha toda a largura da container
      Por Alessandro Bodão
      Fala galerinha, 
       
      Tenho um container com um título (h1) no cabeçalho do meu site, esse container ocupa metade da tela (50vw), e eu gostaria que esse título ocupasse toda a largura desse container, independente do seu tamanho ou do tamanho do monitor, de forma com que a palavra tenha exactamente o mesmo tamanho do container (vou anexar uma foto de exemplo). Já tentei todos os valores pra essa h1, como % e vw... mas nada parece fazer sentido.
       
       

×

Informação importante

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

  Aceito