Jump to content

victorln1

Members
  • Content count

    7
  • Joined

  • Last visited

Community Reputation

0 Comum

About victorln1

Recent Profile Visitors

252 profile views
  1. pessoal segue o codigo: <!doctype html> <html lang="pt-br"> <head> <meta charset="utf-8"> </head> <body> <style> #receitas{ list-style: none; width: 74.5%; position: relative; left: 2%; margin: 0; padding: 0; top: 0px; height: auto; text-align: justify; border: 10px solid black; } #receitas li{ width: 190px; height: 190px; display: inline-block; background: red; margin: 0 15px 15px 0; position: relative; left: 0; top: 0; } #receitas:after { content: ''; width: 74.5%; display: inline-block; } </style> <ul id="receitas"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </body> </html> o problema deste codigo é quando esta em telas um pouco maiores, que la em baixo fica um li de um lado e outro do outro. como resolvo isso??
  2. Quando alguem clica no iframe ele perde a borda como faço para ele continuar com a borda? <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <title></title> <Style> #fundo-branco{ background-color: white; color: #8e4598; width: 90%; position: relative; top: 0px; left: 5%; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; height: auto; display: table; z-index: 5; padding-bottom: 30px; padding-top: 80px; } #conjunto-videos{ width: 100%; display: table; height: auto; left: 0; top: 20px; position: relative; } .videos-conjunto{ width: 600px; position: relative; height: 400px; margin: 0 auto 50px auto; left: -3%; } body{ background-color: #8e4598; margin: 0; } .iframes-conjunto{ width: 100%; height: 100%; border-radius: 15px; } </Style> </head> <body> <section id="fundo-branco"> <ul id="conjunto-videos"> <li class="videos-conjunto"><iframe class="iframes-conjunto" src="https://www.youtube.com/embed/p1quJZvHLes" frameborder="0" allowfullscreen></iframe></li> </ul> </section> </body> </html>
  3. Quando alguem clica no iframe ele perde a borda como faço para ele continuar com a borda? <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <title></title> <Style> #fundo-branco{ background-color: white; color: #8e4598; width: 90%; position: relative; top: 0px; left: 5%; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; height: auto; display: table; z-index: 5; padding-bottom: 30px; padding-top: 80px; } #conjunto-videos{ width: 100%; display: table; height: auto; left: 0; top: 20px; position: relative; } .videos-conjunto{ width: 600px; position: relative; height: 400px; margin: 0 auto 50px auto; left: -3%; } body{ background-color: #8e4598; margin: 0; } .iframes-conjunto{ width: 100%; height: 100%; border-radius: 15px; } </Style> </head> <body> <section id="fundo-branco"> <ul id="conjunto-videos"> <li class="videos-conjunto"><iframe class="iframes-conjunto" src="https://www.youtube.com/embed/p1quJZvHLes" frameborder="0" allowfullscreen></iframe></li> </ul> </section> </body> </html>
  4. victorln1

    Banner rotativo com controlador

    Como posso fazer este banner rotativo ,com controles, funcionar corretamente? Quando ativo um dos controles, ele buga. javascript <script type="text/javascript"> var tempo; function mouse(tipo) { document.getElementById('quadrado' + tipo).style.cursor = "pointer"; } function mouse2(tipo2) { document.getElementById('quadrado' + tipo2).style.cursor = "default"; } function slide1() { document.getElementById('banner').src = "../1.jpg"; tempo = setTimeout(slide2, 4000); document.getElementById('quadrado1').style.backgroundColor = "#3e4095"; document.getElementById('quadrado2').style.backgroundColor = "#ffffff"; document.getElementById('quadrado3').style.backgroundColor = "#ffffff"; } function slide2() { document.getElementById('banner').src = "../2.jpg"; tempo = setTimeout(slide3, 4000); document.getElementById('quadrado1').style.backgroundColor = "#ffffff"; document.getElementById('quadrado2').style.backgroundColor = "#3e4095"; document.getElementById('quadrado3').style.backgroundColor = "#ffffff"; } function slide3() { document.getElementById('banner').src = "../3.jpg"; tempo = setTimeout(slide1, 4000); document.getElementById('quadrado1').style.backgroundColor = "#ffffff"; document.getElementById('quadrado2').style.backgroundColor = "#ffffff"; document.getElementById('quadrado3').style.backgroundColor = "#3e4095"; } </script> CSS #quadrado1, #quadrado2, #quadrado3{ background-color: #ffffff; width: 30px; height: 30px; z-index: 9999; border-radius: 30px; top: 0px; } #bt{ position: absolute; top: 440px; height: 10px; width: 700px; z-index: 9999; left: 10px; } #quadrado1{ position: relative; left: 100px; top: 0px; } #quadrado2{ position: relative; left: 140px; top: -30px; } #quadrado3{ position: relative; left: 180px; top: -60px; } HTML <div id="bt"> <div id="quadrado1" onmouseout="mouse2(1)" onmouseover="mouse(1)" onclick="slide1()"></div> <div id="quadrado2" onmouseout="mouse2(2)" onmouseover="mouse(2)" onclick="slide2()"></div> <div id="quadrado3" onmouseout="mouse2(3)" onmouseover="mouse(3)" onclick="slide3()"></div> </div>
  5. victorln1

    Banner rotativo com controlador

    Como posso fazer este banner rotativo ,com controles, funcionar corretamente? Quando ativo um dos controles, ele buga. javascript <script type="text/javascript"> var tempo; function mouse(tipo) { document.getElementById('quadrado' + tipo).style.cursor = "pointer"; } function mouse2(tipo2) { document.getElementById('quadrado' + tipo2).style.cursor = "default"; } function slide1() { document.getElementById('banner').src = "../1.jpg"; tempo = setTimeout(slide2, 4000); document.getElementById('quadrado1').style.backgroundColor = "#3e4095"; document.getElementById('quadrado2').style.backgroundColor = "#ffffff"; document.getElementById('quadrado3').style.backgroundColor = "#ffffff"; } function slide2() { document.getElementById('banner').src = "../2.jpg"; tempo = setTimeout(slide3, 4000); document.getElementById('quadrado1').style.backgroundColor = "#ffffff"; document.getElementById('quadrado2').style.backgroundColor = "#3e4095"; document.getElementById('quadrado3').style.backgroundColor = "#ffffff"; } function slide3() { document.getElementById('banner').src = "../3.jpg"; tempo = setTimeout(slide1, 4000); document.getElementById('quadrado1').style.backgroundColor = "#ffffff"; document.getElementById('quadrado2').style.backgroundColor = "#ffffff"; document.getElementById('quadrado3').style.backgroundColor = "#3e4095"; } </script> CSS #quadrado1, #quadrado2, #quadrado3{ background-color: #ffffff; width: 30px; height: 30px; z-index: 9999; border-radius: 30px; top: 0px; } #bt{ position: absolute; top: 440px; height: 10px; width: 700px; z-index: 9999; left: 10px; } #quadrado1{ position: relative; left: 100px; top: 0px; } #quadrado2{ position: relative; left: 140px; top: -30px; } #quadrado3{ position: relative; left: 180px; top: -60px; } HTML <div id="bt"> <div id="quadrado1" onmouseout="mouse2(1)" onmouseover="mouse(1)" onclick="slide1()"></div> <div id="quadrado2" onmouseout="mouse2(2)" onmouseover="mouse(2)" onclick="slide2()"></div> <div id="quadrado3" onmouseout="mouse2(3)" onmouseover="mouse(3)" onclick="slide3()"></div> </div>
  6. victorln1

    Como se faz este efeito?

    Como se faz o efeito deste banner??? http://www.amildentalonline.com.br/
  7. victorln1

    como foi feito este efeito

    Como se faz este efeito do banner?? http://www.amildentalonline.com.br/
×

Important Information

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