Jump to content
  • ×   Pasted as rich text.   Paste as plain text instead

      Only 75 emoji are allowed.

    ×   Your link has been automatically embedded.   Display as a link instead

    ×   Your previous content has been restored.   Clear editor

    ×   You cannot paste images directly. Upload or insert images from URL.

  • Similar Content

    • By sander147
      Boa Tarde, estou com um problema ao por o menu ao lado direito, ele não fica alinhado com o campo de notícias, eu não faço ideia de como fazer eles ficarem lado a lado, alguém poderia me dar uma luz? eu estou seguindo um livro da casa do código mas os resultados não saíram iguais depois que eu fui além do livro. :/
      HTML
      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Digimons</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> <link rel="stylesheet" href="CSS/Style.css"> </head> <body class="container"><!-- INICIO DA NOTÍCIA --> <div> <center> <h1><a href=''>Noobmon - Portal de informações de digimons</a></h1> </center> <div class='place'> <center><h4>Gigadramon(ギガドラモン)</h4></center> <img src='IMG/IMG1.jpg' alt="Titulo da foto aqui"> <p> Gigadramon is an Android Digimon. It is a dark dragon Digimon that was developed at the same time as Megadramon. As a combat dragon that was armed to the teeth by further remodeling, its existence is the epitome of a fiendish computer virus. Its arms are equipped with the "Giga Hands". </p> <p> Gigadramon is a purple dragon with purple hair and yellow eyes. It has robotic wings and two arms, and wears a black helmet and black gauntlets on its arms. <a href='noticia.html'>Ler Mais.</a> </p> </div> </div><!-- FIM DA NOTÍCIA --> <div class='sidenote'><!-- INICIO DO MENU LATERAL --> <form class="form-inline my-2 my-lg-0"><!-- BOTÃO PESQUISA --> <input class="form-control mr-sm-2" type="search" placeholder="Digite Aqui" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Buscar</button> </form><!-- FIM DO BOTÃO PESQUISA --> <hr> <ol> <li>Noticia 01</li> <li>Noticia 02</li> <li>Noticia 03</li> <li>Noticia 04</li> <li>Noticia 05</li> </ol> </div><!-- FINAL DO MENU LATERAL --> <div class="alert alert-dark tamanho"><!-- BOTÕES DAS NOTÍCIAS --> <center><form> <input type="button" value="Voltar" onClick="history.go(-1)"> <input type="button" value="Atualizar" onClick="history.go(0)"> <input type="button" value="Avançar" onCLick="history.forward()"> </form></center><!-- FIM DO BOTÃO DAS NOTÍCIAS --> </div> <div class='footer clear'><!-- FOOTER --> <p>Footer é aqui"</p> </div> </body> </html> CSS:
      body { font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif; line-height: 1.6; } .container { margin: 0 auto; } .place h4 { border-bottom: 1px dashed #7E9F19; margin: 0; } body { background: #FFF1D6 url(images/noise.png); font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif; line-height: 1.6; } .place { margin-right: 35%; background-color: #FFF; border: 1px solid #CCC; border-color: #CCC #999 #999 #CCC; margin-bottom: 20px; padding: 10px; } .tamanho { margin-right: 35%; margin-bottom: 20px; padding: 10px; } .place a { color: #2C88A7; font-weight: bold; } h1 a { color: #7E9F19; text-decoration: none; } /*h1 a:hover { background-color: #7E9F19; color: #FFF; }*/ .place img { border: 1px solid #7E9F19; float: left; margin: 10px 10px 0 0; padding: 2px; } .clear { clear: both; } .footer { font-size: 12px; text-align: center; } .sidenote h3 { font-size: 14px; margin-top: 0; } .sidenote ol { font-size: 12px; } .menulateral { float: right; width: 660px; } .sidenote { float: right; width: 30%; background-color: #FFFBE4; border: 1px solid #C9BC8F; padding: 10px; width: 345px; } #btn-noticia { float: right; padding-bottom: 0%; } #newn { padding-bottom: 2px; } Deveria ficar assim:
       https://uploaddeimagens.com.br/images/002/561/267/original/menu.png?1585683825
       
      Ficou assim:

    • By SaraAlcaras
      Olá galera! Estou criando um jogo da velha para coloca no meu portfólio, porem estou com um pequeno problema que não consigo resolver.. Quando o jogo finaliza a tela da uma ampliada/expandida no tamanho é quase imperceptível porem é algo que eu gostaria de mudar. Qual propriedade posso usar no css pra evitar que isso aconteça?
       
      Código CSS:

       
      :root{ --O-color: rgb(10, 177, 243); --X-color: rgb(253, 148, 148); --E-color: rgb(0, 0, 0); } * { margin: 0; padding:0; box-sizing: border-box; } body { display: grid; align-items: center; justify-content: center; font-family: grenze; height: 100vh; background-color: rgb(153, 153, 153); } .nextPlayer{ color: rgb(60, 62, 63); border: 1px solid rgb(211, 223, 104); box-shadow: 3px 5px 12px rgb(0, 0, 0); } .players { color: rgb(60, 62, 63); border: 1px solid rgb(211, 223, 104); box-shadow: 3px 5px 12px rgb(0, 0, 0); height: 55px; display: flex; flex-direction: column; justify-content: space-evenly; } .player{ display: flex; } .topo { display: flex; flex-direction: row; align-items: center; justify-content: space-evenly; margin-bottom: 20px; } .topo .players, .topo .nextPlayer { font-family: grenze; font-weight: bold; border-radius: 4px; } .title { font-size: 3rem; color: rgb(60, 62, 63); margin-bottom: 0; } .title2 { display: none; } .board { display: grid; grid-template-columns: repeat(3, 178px); grid-template-rows: repeat(3, 130px); gap: 1rem; cursor: pointer; } .board.game-over{ opacity: 0.10; } .cell { display: grid; align-items: center; justify-content: center; background-color: white; border-radius: 4px; font-size: 2rem; font-weight: bold; color: #00000066; } .cell:not(.O):not(.X):hover { box-sizing: 0 20px 25px -5px rgba(0, 0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0, 0.4); } .cell.O, .cell.X, .game-over .cell { cursor: not-allowed; } .cell.O { background-color: var(--O-color); } .cell.X { background-color: var(--X-color); } footer{ text-align: center; font-size: 30px; } .winner-message{ margin: 1rem; } .winner-message span.O{ color: var(--O-color); } .winner-message span.X{ color: var(--X-color); } .winner-message span.E{ color: var(--E-color); } button { padding: 0.9rem 1.5rem; border: none; border-radius: 5px; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0, 0.6); background-color: rgb(68, 255, 146); color: white; font-size: 1.2rem; cursor: pointer; } @media only screen and (max-width: 767px) and (orientation:portrait) { body { width: 100%; text-align: justify; } .board{ grid-template-columns: repeat(3, 88px); grid-template-rows: repeat(3, 80px); -webkit-tap-highlight-color: transparent; } button { font-size: 10px; } .cell { border-radius: 3px; font-size: 1rem; } footer { font-size: 13px; } .title { font-size: 1.5rem; display: none; padding: 0.6em; /* transform: translateY(80%); */ } .title2 { display: flex; font-size: 1.5rem; padding: 0.6em; color: rgb(60, 62, 63); } .topo{ flex-direction: column; } .players { height: 65px; width: 95px; align-items: center; } .nextPlayer{ text-align: center; height: 22px; width: 118px; /* transform: translateY(-150%); */ } } @media only screen and (max-width: 767px) and (orientation:landscape) { body { width: 100%; text-align: justify; } .board { grid-template-columns: repeat(3, 60px); grid-template-rows: repeat(3, 60px); -webkit-tap-highlight-color: transparent; } footer { font-size: 0.5rem; display: flex; flex-direction: row; align-items: center; justify-content: space-evenly; } button { font-size: 0.5rem; } .title { font-size: 0.8rem; } .players{ height: 30px; width: 50px; align-items: center; font-size: 0.5rem; } .nextPlayer{ text-align: center; height: 14px; width: 60px; font-size: 0.5rem; } .cell { border-radius: 3px; font-size: 0.8rem; } } @media only screen and (min-width: 991px) and (max-width: 1200px) { body { width: 100%; text-align: justify; } }

    • By wsoalves
      Olá, eu estava mexendo em um Tema Wordpress, e no final do menu tem alguns ícones de social mídia que posso trocar selecionando em um biblioteca interna.
      Mas não tem o ícone do whatsapp para eu escolher
       
      Queria saber se tem alguma forma de trocar ícones assim no editor CSS colocando o Fontawesome no lugar por exemplo "<i class="fab fa-whatsapp"></i>"
       
      Obrigado!
    • By laloproces
      Boa noite. Estou estudo POO com PHP e fiz uma classe Pen.php. Inclui um echo com parágrafo nesse código que gostaria de alterar a cor da fonte de acordo com o atributo color da caneta. Pesquisei no Google e sugeriram fazer um arquivo php com as formatações, mas não obtive sucesso. Estou utilizando Apache como server local, última versão disponível do XAMPP. Mesma coisa para a versão do PHP. Segue o código dos arquivos:
       
      index.php
      <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" media="screen" href="style.php" /> <title>POO Lesson 02</title> </head> <body> <div> <label id="model"></label> </div> <?php require_once 'Pen.php'; $c1 = new Pen(); $c1->model = "bic"; $c1->color = "blue"; $c1->charge = 80; $c1->tip = 0.5; $c1->capped = false; $c2 = new Pen(); $c2->model = "faber-castell"; $c2->color = "red"; $c2->charge = 50; $c2->tip = 0.75; $c2->capped = true; print_r($c1); echo "<br>"; print_r($c2); $c1->scribble(); $c2->scribble(); ?> </body> </html> Pen.php
      <?php class Pen { var $model; var $color; var $tip; var $charge; var $capped; function scribble(){ if($this->capped == true){ echo "<p>ERROR! The pen ".$this->model." ".$this->color." is capped!</p>"; } else{ if($this->color=="blue"){ echo "<p style='color: blue;'>I'm scribbling with the pen ".$this->model." ".$this->color." ...</p>"; } else{ echo "<p id='c2'>I'm scribbling with the pen ".$this->model." ".$this->color." ...</p>"; } } } function cap(){ if($this->capped == true){ echo "<p>ERROR! The pen ".$this->model." ".$this->color." is already capped!</p>"; } else{ $this->capped = true; echo "<p>The pen ".$this->model." ".$this->color." is capped!</p>"; } } function uncap(){ if($this->capped == false){ echo "<p>ERROR! The pen ".$this->model." ".$this->color." is already uncapped!</p>"; } else{ $this->capped = false; echo "<p>The pen ".$this->model." ".$this->color." is uncapped!</p>"; } } } style.php
      <?php header("Content-type: text/css; charset: UTF-8"); require_once 'Pen.php'; $c0 = new Pen(); $color = $c0->color; ?> c2 { color: <?php echo $color; ?>; } <?php header("Content-type: text/css; charset: UTF-8"); require_once 'Pen.php'; $c0 = new Pen(); $color = $c0->color; ?> c2 { color: <?php echo $color; ?>; }  
    • By julianaparra
      Eu não estou conseguindo declarar um span com a pseudo-classe action.
      Estou declarando o span errado, pois ele não reconhece o comando action e hover :
      ( Ja tentei deixar só span, mas como esta dentro de um <p> ele também não reconhece, tiro o <p> ele faz a ação )

      Ja tentei declarar por:

      span:action
      span.destaque_glossario:action
      p.destaque_glossario
      span.destaque_glossario p:action
      e nada T.T

      Mas se eu declarar  .destaque:action
      ao clicar no texto ele aceita, mas eu gostaria que fosse apenas na palavra.
       
       
      div.glossario { background-color: #fdeae4; padding: 1em; border-radius: 10px; margin-left: auto; margin-right: auto; border-top: 3px solid #7e3e3b; max-width: 600px; margin-left: auto; margin-right: auto; position: absolute; top: 20%; left: 70%; display: none; }   div.glossario p { text-indent: 0; margin-top: 0; margin-bottom: 0; }   span.destaque_glossario { font-weight: bold; color: #3d8177; }   span.destaque_glossario:active + div.glossario { display: block; }  
      <body> <div class="destaque"> <p> Completa a coleção um caderno de gramática que atende a todos os anos do Fundamental II – do 6o ao 9o. Esse manual básico contém as principais normas referentes ao padrão linguístico, todas acompanhadas de exemplos correspondentes.trabalha interdisciplinaridade. <span class="destaque_glossario">Ética:</span> trabalha interdisciplinaridade. Seu conteúdo compreende cinco eixos temáticos: fonética, morfologia, sintaxe, semântica, estilística. </p> </div> <div class="glossario"> <p> <span class="destaque_glossario">Ética:</span> valores e modos de agir considerados como corretos </p> </div> </body>
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.