Jump to content

Search the Community

Showing results for tags 'div'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Q&A Desenvolvimento
    • Perguntas e respostas rápidas
  • Web Development
    • HTML e CSS
    • Javascript
    • PHP
    • Ruby
    • Python
    • Java
    • .NET
    • Docker, Kubernets and other environments
    • WordPress
    • Mobile
    • Agile
    • Desenvolvimento de Games
    • Banco de Dados
    • Design and UX
    • Algoritmos & Outras Tecnologias
  • Entretenimento e uso pessoal
    • Segurança & Malwares
    • Geral
    • iMasters's pub

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Google+


Hangouts


Skype


Twitter


deviantART


Github


Flickr


LinkedIn


Pinterest


Facebook


Site Pessoal


Localização


Interesses

Found 11 results

  1. Alessandro Bodão

    H1 que preencha toda a largura da container

    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.
  2. Olá a todos! tenho varias divs com o mesmo ID e nome de classe. Preciso que a cor da div seja conforme uma escala de valores. Estou tentando pegar o valor pelo nome da classe, pois as divs possuem o mesmo id e não tive sucesso. Segue script: <div class="planos" id="1" value="74">74</div> <div class="planos" id="1" value="29">29</div> <div class="planos" id="1" value="55">55</div> <div class="planos" id="1" value="74">74</div> <div class="planos" id="1" value="63">63</div> <div class="planos" id="1" value="55">55</div> <script type="text/javascript"> var valueElement = document.getElementsByClassName('.planos').getAttribute('value'); console.log(valueElement); if (valueElement >= "70") { document.getElementsByClassName('.planos').style.backgroundColor == '#4caf50'; } else if (valueElement >= "50" && valueElement <= "69") { document.getElementsByClassName('.planos').style.backgroundColor == '#ffbc00'; } else { document.getElementsByClassName('.planos').style.backgroundColor == '#f44336'; } </script>
  3. Estou tentando ajudar um amigo a desenvolver seu site pessoal ele me passou um modelo, onde não estou conseguindo fazer um link de menu quando clicar nos anos iniciais ir para as turmas dos anos iniciais no menu atividade educacionais, segue em anexo o código. Endereço para ter ideia do que estou falando: https://www.profrodrigo.com/temporario/index.html. Nesta parte: HTML <div class="container"> <div class="row"> <div class="col-sm-2"> <a href="#anosiniciais" > <img src="images/anos/anosiniciais.png" class="img-responsive" width="190" height="190" alt=""> </a> </div> <div class="col-sm-2"> <a href="#anosfinais" > <img src="images/anos/anosfinais.png" class="img-responsive" width="190" height="190" alt=""> </a> </div> </div> </div> </div> </div> </div> <div class="section news-section" id="anosiniciais"> <div class="container"> <div class="row"> <div class="col-sm-2"> <a href="#" target="_blank"> <img src="images/turmas/pres.png" class="img-responsive" width="190" height="190" alt=""> </a> </div> <div class="col-sm-2"> <a href="#" target="_blank"> <img src="images/turmas/1sanos.png" class="img-responsive" width="190" height="190" alt=""> </a> </div> <div class="col-sm-2"> <a href="#"> <img src="images/turmas/2sanos.png" class="img-responsive" width="190" height="190" alt=""> </a> </div> <div class="col-sm-2"> <a href="#"> <img src="images/turmas/3sanos.png" class="img-responsive" width="190" height="190" alt=""> </a> </div> <div class="col-sm-2"> <a href="#"> <img src="images/turmas/4sanos.png" class="img-responsive" width="190" height="190" alt=""> </a> </div> </div> </div> </div> <div class="section news-section" id="anosfinais"> <div class="container"> <div class="row"> <div class="col-sm-2"> <a href="#"> <img src="images/turmas/5sanos.png" class="img-responsive" width="190" height="190" alt=""> </a> </div> <div class="col-sm-2"> <a href="https://www.ebmalbertostein.com" target="_blank"> <img src="images/turmas/6sanos.png" class="img-responsive" width="190" height="190" alt=""> </a> </div> <div class="col-sm-2"> <a href="https://www.profgarrido.com" target="_blank"> <img src="images/turmas/7sanos.png" class="img-responsive" width="190" height="190" alt=""> </a> </div> <div class="col-sm-2"> <a href="#"> <img src="images/turmas/8sanos.png" class="img-responsive" width="190" height="190" alt=""> </a> </div> <div class="col-sm-2"> <a href="#"> <img src="images/turmas/9sanos.png" class="img-responsive" width="190" height="190" alt=""> </a> </div> </div> </div> </div>
  4. lezão

    Transformar table em div

    Ola pessoal! Td bem com vcs? Estou tentando fazer esse item ficar em css e naun estou conseguindo alguem pode me ajudar? <table width="75%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="15%" height="35"><b>Moda da Casa</b></td> <td width="55%" style="border-bottom: dotted; border-width: 1px 3px 3px 1px; border-color: black black #000000 #000000"></td> <td width="7%"><b>R$ 25,00</b></td> <td width="3%" rowspan="2" align="left"><img src="https://clipartart.com/images/delete-button-clipart.jpg" width="75px" heigth="50px"/></td> </tr> <tr> <td colspan="3" height="35"> <div class="label-float"> <input type="text" value="Molho de tomate, mussarela, calabresa ralada, catupiry, alho tostado, cebola, azeitonas e oregano." size="100%" placeholder="" required=""> </div> </td> </tr> </table> obrigado!
  5. lezão

    div box com texto

    Boa noite! Td bem com vcs? Meus amigos, estou precisando de um css que eu não faço ideia por onde começar ja pesquisei e nada. só encontrei como imagem, vejam. será que tem como fazer em css desse modelo, o texto tem q ficar sobreposto a cor do fundo.
  6. FabianoSouza

    Abrir aba dentro de uma DIV

    Pessoal, é possível abrir uma nova aba/janela do navegador dentro de uma DIV? Como faço? Pergunto isso porque o IFRAME não vai funcionar para o meu objetivo (já testei). Estou tentando adaptar esse código JQUERY para o Javascript puro, pra saber se a ideia funciona (não manjo de JQUERY). https://stackoverflow.com/questions/33296867/how-to-open-the-content-inside-a-div-tag-in-new-tab Grato.
  7. kaioneresm

    Abrir e fechar uma div como pou-up?

    Olá boa tarde, alguem sabe um codigo javascript facil que sirva para abrir uma div como se fosse um pou-up no centro da tela e dentro dela conter um X para fechá-la? obrigado!!
  8. E aí pessoal! Minha questão de hoje é a seguinte, ao usar o display inline-block ou inline-flex ocorre um desalinhamento dos blocos. Tentei usar outro inline, porem sem sucesso. Para melhor visualizar o que quero dizer, anexo esta uma print do resultado indesejável. Preciso que os blocos fiquem alinhados, porem ao inserir duas divs (2 e 3) no terceiro bloco ocorre o desalinhamento. Vou deixar o código para melhor entender. //==================HTML <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="./css/style.css"> </head> <body> <div class="container"> <div class="blocos">0</div> <div class="blocos">1</div> <div class="blocos"> <div class="linhas">2</div> <div class="linhas">3</div> </div> <div class="blocos">4</div> </div> </body> </html> //================== CSS @charset "utf-8"; * { margin: 0px; padding: 0px; list-style: none; resize: none; outline: none; text-decoration: none; } html, body { width: 100%; overflow-x: hidden; font-family: verdana; letter-spacing: 1.5555px; font-weight: normal; } .container { width: 100%; padding-left: 13px; background: #000; } .blocos { display: inline-block; width: 300px; height: 250px; background: #888; } .linhas { background: #f60; width: 100%; height: 122px; margin-bottom: 2px; } Agradeço desde já.
  9. Olá a todos, estou construindo um pequeno site para a empresa que eu trabalho atualmente, porém como ainda sou iniciante estou tendo algumas dificuldades, e uma delas é que eu não consigo colocar as divs lado a lado, tentei varias coisas como usar o inline e float, mas fica tudo bem bagunçado, se vocês puderem por favor dar alguma dica ou me dizer oque estou fazendo de errado. <style> * {box-sizing: border-box;} .container { position: relative; width: 50%; max-width: 300px; } .image { display: block; width: 100%; height: auto; } .overlay { position: absolute; bottom: 0; background: rgb(0, 0, 0); background: rgba(0, 0, 0, 0.5); /* Black see-through */ color: #f1f1f1; width: 100%; transition: .5s ease; opacity:0; color: white; font-size: 20px; padding: 20px; text-align: center; } .container:hover .overlay { opacity: 1; } .container::after { content: ""; clear: both; display: table; } </style> <div class="titulo">Produtos</div> <p>A Gap conta com uma grande variedade de rádios e equipamentos, para atender melhor a necessidade de nossos clientes, trabalhamos com rádios moveis, portáteis e equipamentos para videomonitoramento. </p> <div class="titulo">Portáteis</div> <div class="container"> <img src="products/images/dep450.jpg" alt="rádio motorola DEP450" class="image"> <div class="overlay">Motorola DEP450</div> </div> <div class="container"> <img src="products/images/ep450.jpg" alt="rádio motorola EP450" class="image"> <div class="overlay">Motorola EP450</div> </div> <div class="container"> <img src="products/images/dgp8050.jpg" alt="rádio motorola DGP8050" class="image"> <div class="overlay">Motorola DGP8050</div> </div> <div class="titulo">Móveis</div> <div class="container"> <img src="products/images/dem300.jpg" alt="rádio motorola DGM5000" class="image"> <div class="overlay">Motorola DEM300</div> </div> <div class="titulo">Videomonitoramento</div> <div class="container"> <img src="products/images/intelbrass3330.jpg" alt="camera " class="image"> <div class="overlay">Câmera Intelbras S3330</div> </div>
  10. higordiasz

    Centrralizar e Alinhar DIVS

    Boa Tarde, Estou tendo problemas em conseguir colocar as div lado a lado alinhadas corretamente .. casso possam me ajudar ficaria grato. Segue meu código CSS responsável pelas div. .col-100 { width: 100%; float: left; position: relative; } .principal-text { background-color: #424242; } .ul-softwares { list-style-type: none; display: inline-block; height: 350; width: 90%; float: left; border: 2px solid #656565; border-radius: 15px; background-color: #373737; margin: 0 auto; } .ul-bancodedados { list-style-type: none; display: inline-block; height: 350; width: 90%; border: 2px solid #656565; border-radius: 15px; background-color: #373737; margin: 0 auto; } .ul-mobile { list-style-type: none; display: inline-block; height: 350; width: 90%; border: 2px solid #656565; border-radius: 15px; background-color: #373737; margin: 0 auto; } .ul-redeestruturada { list-style-type: none; display: inline-block; height: 350; width: 90%; float: right; border: 2px solid #656565; border-radius: 15px; background-color: #373737; margin: 0 auto; } .principal-text ul li { margin: auto; text-align: center; } .uls-principal { text-align: center; } .li-img { padding-top: 6px; } .uls-principal div { display: inline-block; width: 180; padding-right: 20px; } Abaixo meu código HTML: <div class="col-100 principal-text"> <main class="uls-principal"> <div class="div-prog"> <ul class="ul-softwares"> <li class="li-img"><img src="./img/programacao.png"></li> <li> <h1>Softwares</h1> </li> <li> <p>Possuimos diversos Softwares para a sua empresa.</p> </li> <li></li> </ul> </div> <div class="div-bd"> <ul class="ul-bancodedados"> <li class="li-img"><img src="./img/bancodedados.png"></li> <li> <h1>Banco de Dados</h1> </li> <li> <p>Organimazanos todos seus dados e configuramos oque precisa.</p> </li> <li></li> </ul> </div> <div class="div-mobile"> <ul class="ul-mobile"> <li class="li-img"><img src="./img/mobile.png"></li> <li> <h1>Desenvol. Mobile</h1> </li> <li> <p>Fazemos o aplicativo ideal para a sua Empresa.</p> </li> <li></li> </ul> </div> <div class="div-rede"> <ul class="ul-redeestruturada"> <li class="li-img"><img src="./img/rede.png"></li> <li> <h1>Estrutura de Rede</h1> </li> <li> <p>Fazemos toda o mapiamento da rede e implantação.</p> </li> <li></li> </ul> </div> </main> </div> Print das DIV: Alguem sabe oq posso alterar para alinhar elas corretamente ?
  11. geoleandro

    Abrir Divs em sequência

    <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <body> <div id="dq1"style="display:block"> <br><br> Conteúdo da Div 1 </div> <br><br> <span id = "bdq2" style="display:block" onclick = "divMostrar(2)">Próximo</span><br><br> <div id="dq2"style="display:none"> Conteúdo da Div 2 </div> <br><br> <span id = "bdq3" style="display:none" onclick = "divMostrar(3)">Próximo</span><br><br> <div id="dq3"style="display:none"> Conteúdo da Div 3 </div> <br><br> <span id = "bdq4" style="display:none" onclick = "divMostrar(4)">Próximo</span><br><br> <div id="dq4"style="display:none"> <br><br> Conteúdo da Div 4 </div> <br><br> <span id = "bdq5" style="display:none" onclick = "divMostrar(5)">Próximo</span><br><br> <div id="dq5"style="display:none"> <br><br> Conteúdo da Div 5 </div> <br><br> <span id = "bdq6" style="display:none" onclick = "divMostrar(6)">Próximo</span> <div id="dq6"style="display:none"> Terminou! </div> <script> function divMostrar(qnum){ if (document.getElementById("bdq2").style.display='block'&& qnum==2) { document.getElementById("dq2").style.display='block'; document.getElementById("bdq2").style.display='none'; document.getElementById("bdq3").style.display='block'; } if (document.getElementById("bdq3").style.display='block' && qnum==3){ document.getElementById("bdq3").style.display='none'; document.getElementById("dq3").style.display='block'; document.getElementById("bdq4").style.display='block'; } if (document.getElementById("bdq4").style.display='block' && qnum==4){ document.getElementById("bdq4").style.display='none'; document.getElementById("dq4").style.display='block'; document.getElementById("bdq5").style.display='block'; } if (document.getElementById("bdq5").style.display='block' && qnum==5){ document.getElementById("bdq5").style.display='none'; document.getElementById("dq5").style.display='block'; document.getElementById("bdq6").style.display='block'; } if (document.getElementById("bdq6").style.display='block' && qnum==6){ document.getElementById("bdq6").style.display='none'; document.getElementById("dq6").style.display='block'; } } </script> </body> </head> </html> De que outro modo é possível programar para abrir essas Divs em sequência? Além do uso de IFs e else em JavaScript.
×

Important Information

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