Jump to content

Search the Community

Showing results for tags 'css'.



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
  • Desenvolvimento e Banco de Dados
    • HTML e CSS
    • Java
    • Javascript
    • .NET
    • PHP
    • Python
    • Ruby
    • Mobile
    • Ambientes de Desenvolvimento
    • Arquitetura e Métodos Ágeis
    • Banco de Dados
    • DevOps
    • Desenvolvimento de Games
    • E-Commerce e Pagamentos Online
    • SEO e Otimizações
    • WordPress
    • Algoritmos & Outras Tecnologias
  • Design e Produto
    • Fotografia
    • Photoshop
    • Design de interfaces e UX
    • Edição/Produção de Vídeos
    • Marketing Online
    • Desenho, Ilustração e 3D
  • Entretenimento e uso pessoal
    • Geral
    • Segurança & Malwares
    • Gadgets e wearable
    • Softwares e Apps
    • Entretenimento

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 1385 results

  1. Luiz Felipi Barone

    Erro ao inserir bootstrap

    Caros amigos, Sou novo na área e estou cursando técnico Para treinar resolvi atualizar um site de um jogo antigo. ( 2007 ). Primeiramente modifiquei banner's mudei algumas partes do layout's. E comecei configurar algumas coisas novas no site. A Ideia era adicionar um modal de cadastro porém quando adiciono o bootstrap a pagina fica inteira desconfigurada. Sem bootstrap inserido: https://imgur.com/d6Q65iA Com bootstrap inserido: https://imgur.com/HSUc628 Alguém tem ideia do que poderia ser ? Grato, desde já !
  2. 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>
  3. 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; ?>; }
  4. wsoalves

    Trocar Icon com CSS no Wordpress

    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!
  5. Carcleo

    Efeito em insertAfter

    Tenho um botão, que pega a primeira li da ul e joga ela para a ultima posição ininterruptamente e assim eu faço um efeito de slideshow. HTML: <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="slider"> <ul> <li> Slide 1 </li> <li> Slide 2 </li> <li> Slide 3 </li> <li> Slide 4 </li> </ul> <button id="back"> BACK </button> <button id="next"> NEXT </button> </div> CSS: * { margin: 0; padding: 0; } body { display: flex; width: 1000px; margin: 0 auto; } .slider { position: relative; display: flex; flex-direction: column; width: 1000px; height: 200px; overflow: hidden; border: 1px solid #000; } .slider > ul { display: flex; flex-wrap: wrap; width: 5000px; } .slider > ul > li { display: flex; justify-content: center; width: 500px; height: 150px; margin: 10px; } .slider > ul > li:hover { cursor: crosshair; } .slider > button { position: absolute; display: flex; justify-content: center; top: calc(45% - 15px); width: 30px; height: 30px; opacity: 0.2; } .slider > button:hover { opacity: 1; cursor: pointer; } .slider > button#back { left: 10px; } .slider > button#next { right: 10px; } .animacao { animation-duration: 4s; animation-name: identifier; } @keyframes identifier { 0% { right: 0; } 50% { right: 50%;} 75% { right: 75%; } 100% { right: 100%; } } JQUERY: function intervalo () { $(".slider > #next").click (); } var interval = setInterval(intervalo,4000); $(".slider > ul > li") .mouseover(function(){ clearInterval(interval); }) .mouseout(function(){ interval = setInterval(intervalo,4000); }) .addClass("animacao"); $(".slider > #back").click ( function(){ var liMover = $('.slider ul li:last-of-type'); // copia o conteudo da última $(liMover).insertBefore('.slider ul li:first-of-type'); // insere antes da primeira }); $(".slider > #next").click ( function(){ var liMover = $('.slider ul li:first-of-type'); // copia o conteudo da primeira $(liMover).insertAfter('.slider ul li:last-of-type'); // insere depois da última }); Tudo funciona bem. Mas estou tentando adicionar um efeito de transição tipo quando as lis mudarem de posição, elas correrem da direita para a esquerda em vez de aparecerem abruptamente. Será que tem como?
  6. Galera, dei uma olhada no Site https://www.fastly.com/ e percebi que a página é estruturada com linhas curvas que circundam os tópicos da página, alguém saberia me dizer como é possível fazer essas linhas curvas numa página html ???
  7. FabianoSouza

    CSS condicional

    Tenho uma situação em que preciso colorir o texto dentro de um elemento. Caso seu valor seja 0, pinte de uma cor, caso seja maior do que 0 (zero) pinte de outra cor. Como faço isso com CSS puro. Estou pesquisando e tem a possibilidade de criar condições no CSS....alguém ajuda? Valew!
  8. SrDanielMarques

    Página responsiva

    Olá pessoal, tudo bem? Eu possuo um sistema de teatro que mostra todo o mapa do teatro para a compra de ingressos. Porém o sistema não está 100% responsivo para celulares, ele faz a quebra (bagunça) de todo o mapa, vou estar anexando as fotos,, a primeira, que mostra a visão geral do teatro é via Desktop, está tudo ok. O problema é a versão Mobile que faz a quebra do mapa, gostaria de saber como posso solucionar este problema, gostaria de jogar o mapa para o "fundo" da tela, para que seja possível visualizar o mapa total mesmo em celulares. Alguém poderia me dar um força como solucionar?
  9. henriquers

    Ajustar tamanho do Datepicker

    Bom Dia a todos, Estou com um problema implementei o Plugin do Bootstrap DatePicker mas estou tendo problema para ajustar o tamanho, ele esta saindo da borda dele. Ele esta com esse problema, alguem sabe o que posso fazer para arrumar. script -> $('.datepicker').datepicker({ startDate: '-10y', format: "dd/mm/yyyy", todayBtn: "linked", forceParse: false, autoclose: true, todayHighlight: true, language: 'pt-BR', });
  10. 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>
  11. Blasius

    Retorno nulo de valores

    Olá pessoal. Estou treinando códigos em js e quero fazer uma calculadora; a ideia é a seguinte: o usuário coloca os números no input, e escolhe qual operação ele quer em um select. Porém o js sempre me retorna o valor 0, ja revisei o código muitas vezes e não encontro o erro. ---------------------------------- HTML--------------------------------------------------- <body> <h1> Calculadora </h1> <p> Digite um número: <input type="number" id="valor1" name="nValor1"> </p> <select id="operador"> <option value="vezes" id="multiplicacao"> vezes * </option> </select> <p>Digite um número: <input type="number" id="valor2" name="nValor2"> </p> <input type="submit" value="calcular" onclick="calcular()"> // obs** com o type="button" também não funcionou <div id="divRes"> Aqui vai o resultado! </div> <script src="calculadora.js"> </script> </body> ----------------------------------------------------------------- JAVASCRIPT ------------------------------------------------------------------ let v1 = document.getElementById('valor1'); let valor1 = Number(v1.value) let v2 = document.getElementById('valor2'); let valor2 = Number(v2.value) let operador = document.getElementById('operador').selectedIndex; let divRes = document.getElementById('divRes') function calcular(){ let resultado = " " if (document.getElementById("multiplicacao").selected = true ) { resultado = (valor1 * valor2) divRes.innerHTML= `${resultado}` console.log(typeof valor1, typeof valor2, typeof resultado) // todos retornam number } else { alert ('teste') } }
  12. Olá, pessoal! Estou tentando criar um menu que, quando rola o scroll, ele muda (diminui o height e adiciona um background). Porém, aparentemente, nenhum código js tá funcionando... já tentei bastante coisa. Um dos tutoriais que usei: https://www.anicasagrande.com.br/menu-fixo-no-topo-que-muda-cor-com-rolagem/ Como fiz: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script type="text/javascript"> (function () { var menu = document.getElementById('menuone'); // colocar em cache window.addEventListener('scroll', function () { if (window.scrollY > 50) menu.classList.add('menutwo'); // > 0 ou outro valor desejado else menu.classList.remove('menutwo'); }); })(); </script> <div class="menuone"> <nav class="menufixo"> <div class="menucenter"> <ul class="menu"> <li class="logomenu"><img class="iconmenu" src="images/logotipo-amarelo.png" width="105px" height="100%"/></li> <li class="menulinks"><a class="botoesmenu" href="#">Home</a></li> <li class="menulinks"><a class="botoesmenu" href="#">Serviços</a></li> <li class="menulinks"><a class="botoesmenu" href="#">Portfólio</a></li> <li class="menulinks"><a class="botoesmenu" href="#">Quem somos</a></li> <li class="menulinks"><a class="botoesmenu" href="#">Contato</a></li> </ul> </div> </nav> </div> <div class="menutwo"> <nav class="menususpenso"> <div class="menucentertwo"> <ul class="menut"> <li class="logomenut"><img class="iconmenut" src="images/Isotipo-amarelo.png" width="38px" height="100%"/></li> <li class="menulinkst"><a class="botoesmenut" href="#">Home</a></li> <li class="menulinkst"><a class="botoesmenut" href="#">Serviços</a></li> <li class="menulinkst"><a class="botoesmenut" href="#">Portfólio</a></li> <li class="menulinkst"><a class="botoesmenut" href="#">Quem somos</a></li> <li class="menulinkst"><a class="botoesmenut" href="#">Contato</a></li> </ul> </div> </nav> </div> /* Menu settings before scrolling */ .menuone { display: block; } .menufixo { padding: 1px; margin: 10px -8px -8px -8px; position: fixed; top: 5; left: 2; width: 100%; } .menucenter { width: 1200px; margin: 0 auto; } .menu { text-transform: uppercase; list-style: none; } .logomenu { margin-right: 500px; display: inline-block; } .iconmenu { margin: -15px; } .botoesmenu { color: #f7c620; font-family: 'Bahnschrift Light', sans-serif; text-decoration: none; transition: color 1s; padding: 10px; } .botoesmenu:hover { color: #fff; } .menulinks { color: #fff; display: inline-block; margin: 8px; } /* Menu settings after scrolling */ .menutwo { display: block; } .menususpenso { padding: 1px; margin: 0px -8px; position: fixed; top: 5; left: 2; width: 100%; background: #8c05bd; } .menucentertwo { width: 1200px; margin: 0 auto; } .menut { text-transform: uppercase; list-style: none; } .logomenut { margin-right: 500px; display: inline-block; } .iconmenut { margin: -13px; } .botoesmenut { color: #f7c620; font-family: 'Bahnschrift Light', sans-serif; text-decoration: none; transition: color 1s; padding: 10px; } .botoesmenut:hover { color: #fff; } .menulinkst { color: #fff; display: inline-block; margin: 0 8px; } Perdão pelos códigos grandes. Gostaria muito de uma orientação pra conseguir fazer, mas queria muito manter a atual estilização do menu.
  13. ThosuZ

    Nome de animação em site

    Boa tarde, pessoal! Minha dúvida é simples. Gostaria de saber apenas o nome da animação desse site: https://www.think-mario.com/ Quero o nome pra pesquisar sobre e aprender. A animação é quando vamos abaixando o scroll, as coisas vão surgindo, e eu acredito que seja com js. Abraços!
  14. Boa tarde pessoal, Eu sou iniciante em programação PHP, e estou com dificuldades em entender um comportamento. Já dei uma pesquisada pelo fórum mas não encontrei um assunto semelhante. Estou desenvolvendo um projeto onde estou organizando as páginas em pastas separadas. Ilustração: -Root -css - config.css -img - imagem01.jpg - js - config.js -conteudo01 - pagina01.php -conteudo02 footer.php header.php index.php O que ocorre é que dentro da pasta conteudo01, dentro do arquivo pagina01.php eu uso a função include_once para chamar as páginas principais do root normalmente. Até ai tudo bem, o problema é que o servidor não está carregando os conteudos das demais pastas. Já fiz de tudo e um pouco até o presente momento dentro dos limites do meu conhecimento, mas sem sucesso. Gostaria da ajuda dos senhores para a resolução do meu problema. Sou grato desde já. Atenciosamente, Alexandre Figueiredo
  15. Olá, pessoal! Estou com problemas pra organizar meu rodapé. Quero deixar da seguinte forma: as informações de contato e um formulário lado a lado, e em baixo as informações padrões de um rodapé ("Copyright 2020 etc"). Eu criei uma div pras informações de contato e outra pro formulário, setei float: left e right pra eles respectivamente, mas a terceira div (Copyright) ficou no meio, não em baixo. Como resolvo? HTML: <footer> <div class="fcenter"> <div class="infos"> <p class="ftitulo">Águia Publicidade</p> <p class="finfos">Rua Treze de Maio, 191</p> <p class="finfos">Ed. Marc Jacob, sala 504</p> <p class="finfos">(91) 99182-4761</p> <p class="finfos">contato@aguiapublicidade.com</p> </div> <div class="contato"> <p class="ftitulo">Contate-nos</p> <form action="enviar.php" method="post" class="rodape"> <p class="formu">Nome: </p><input type="text"> </form> </div> </div> <div class="copyright"> <p class="rodape">&copy; Todos os direitos reservados. Desenvolvido por Arthur, designer da Águia&reg; Publicidade.</p> </div> </footer> CSS: /* footer settings */ footer { background-color: #303030; color: #fff; margin: 0px -8px 0px -8px; } .fcenter { width: 500px; margin: 0 auto; } .infos { float: left; } .contato { float: right; } Como ficou: Como eu gostaria que ficasse mais ou menos: http://miritigrafica.com.br/#faleconosco
  16. Tommoraes

    Ajuda com meu site!!!

    Alguém pode me ajudar? Estou desenvolvendo um site PHP, queria muito implementar no meu site um selo de verificação (igual selo azul do Instagram/Facebook/twitter) ao lado do nome do Admin (No caso, seria eu), como eu faço? Queria esse selo somente para mim. Fiz uma imagem de exemplo de como eu queria. site: tombrasil.epizy.com
  17. Carlos Web Soluções Web

    Retirar espaço !!

    Bom dia !! No site do link a seguir, quando eu reduzo o tamanho do site em: @media screen and (max-width: 900px) Entre a "Imagem 1" e a "tabela de baixo" existe um espaço !! Não estou conseguindo retirar este espaço !! LINK Por favor me ajudem Obrigado
  18. juliosonic

    Menu Navbar CSS Bootstrap

    Boa noite.. Estou desenvolvendo um site de Reiki https://reikicuritiba.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> https://cristaispuroencanto.com.br/ https://www.mandalatantra.com.br/ Obrigado Att Julio Cezar
  19. OLÁ, gostaria de pegar os valores desses input e enviar no formulario apenas por um unico input hidden, um input com id diferente. Meu codigo está assim, gostaria de saber se é isso mesmo ou o que falta. input class="gp_input_grid" id="cod1" name="cod1" autofocus onKeyUp="javascript:pulacampo('cod1','cod2')" maxlength="1" type="tel" value=""> input class="gp_input_grid" id="cod2" name="cod2" maxlength="1" onKeyUp="javascript:pulacampo('cod2','cod3')" type="tel" value="" input class="gp_input_grid" id="cod3" name="cod3" maxlength="1" onKeyUp="javascript:pulacampo('cod3','cod4')" type="tel" value=""> input class="gp_input_grid" id="cod4" name="cod4" maxlength="1" onKeyUp="javascript:pulacampo('cod4','cod5')" type="tel" value="" input class="gp_input_grid" id="cod5" name="cod5" maxlength="1" onKeyUp="javascript:pulacampo('cod5','cod6')" type="tel" value="" input class="gp_input_grid" id="cod6" name="cod6" maxlength="1" onKeyUp="javascript:pulacampo('cod6','pulou')" type="tel" value="" input type="hidden" name="dados" id="dados" value="<?=$_POST['cod1']; ?><?=$_POST['cod2']; ?><?=$_POST['cod3']; ?><?=$_POST['cod4']; ?>" GOSTARIA DE SABER SE É ISSO MESMO, OU O QUE FALTA.
  20. Bom dia, Estou seguindo uma vídeo aula no Youtube e o instrutor lá colocou uma sequência de div's (seja id ou class), o seletor background não funciona. Vou postar o código até o momento: @charset "utf-8"; body, ul{padding:0;margin:0;background: #e2e2e2;list-style: none;} #geral{overflow: hidden;} #geral #topo{width:1018px;margin:0 auto;overflow: hidden;} #geral #topo #logo, #menuTopo{float:left;width:400px;} #geral #topo #logo{background:#ccc;} #geral #topo #menuTopo{} #geral #topo #menuTopo li{float:left;padding:5px;} Alguém pode me tirar essa dúvida??? Desde já, agradeço!
  21. Boa tarde. Estou tentando imprimir rodapé de forma fixa em todas as páginas. Com o código abaixo eu consigo fazer, porém, acaba sobrescrevendo algumas linhas da tabela. Tentei utilizar @pages mas lendo sobre o assunto descobri que nas versões mais recentes do chrome já não funciona mais. <style type="text/css" media="print"> table { page-break-inside:auto; margin-bottom: 10px; } tr { page-break-inside:avoid; page-break-after:auto; } thead { display:table-header-group } tfoot { display:table-footer-group } /* .fixedhh td { height: 50px; } */ div.footer { display: block; position: fixed; bottom: 0; /* height: 45px; */ } /* @media print { div#pages { display: table-footer-group; counter-increment: page; } div#pages:after { content:"Página " counter(page); } } */ </style> <div class='footer'> <label style='font-family:verdana;font-size:10px;font-weight:bold;'>Assinatura: ________________________________________________<br>Por ser verdade, assino e dou fé ao presente documento</label> <div id='pages' class='pages'></div> </div> É um código legado que armazena todo o conteúdo numa tag $html em php e depois imprime na tela. Existe alguma outra alternativa para esse caso? Obrigado pela atenção.
  22. 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 ?
  23. gustavo marcos

    Menu dropdown

    Pessoal, estou tentando fazer um menu dropdown, porém quando clico nas seta para abrir o itens do submenu, não funciona. Poderia em auxiliar: Modelo: Segue o código html: <html> <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900" rel="stylesheet"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link href="style.css" rel="stylesheet" type="text/css"/> <title></title> </head> <body> <div class="wrapper d-flex align-items-stretch"> <nav id="sidebar"> <div class="p-4 pt-5"> <a href="#" class="img logo rounded-circle mb-5" style="background-image: url(images/logo.jpg);"></a> <ul class="list-unstyled components mb-5"> <li class="active"> <a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Home</a> <ul class="collapse list-unstyled" id="homeSubmenu"> <li> <a href="#">Home 1</a> </li> <li> <a href="#">Home 2</a> </li> <li> <a href="#">Home 3</a> </li> </ul> </li> <li> <a href="#">About</a> </li> <li> <a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Pages</a> <ul class="collapse list-unstyled" id="pageSubmenu"> <li> <a href="#">Page 1</a> </li> <li> <a href="#">Page 2</a> </li> <li> <a href="#">Page 3</a> </li> </ul> </li> <li> <a href="#">Portfolio</a> </li> <li> <a href="#">Contact</a> </li> </ul> <div class="footer"> <p><!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --> Copyright &copy;<script>document.write(new Date().getFullYear());</script> All rights reserved | This template is made with <i class="icon-heart" aria-hidden="true"></i> by <a href="https://colorlib.com" target="_blank">Colorlib.com</a> <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --></p> </div> </div> </nav> <!-- Page Content --> <div id="content" class="p-4 p-md-5"> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container-fluid"> <button type="button" id="sidebarCollapse" class="btn btn-primary"> <i class="fa fa-bars"></i> <span class="sr-only">Toggle Menu</span> </button> <button class="btn btn-dark d-inline-block d-lg-none ml-auto" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <i class="fa fa-bars"></i> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="nav navbar-nav ml-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Portfolio</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li> </ul> </div> </div> </nav> <h2 class="mb-4">Sidebar #01</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> <script src="bootstrap.min.js" type="text/javascript"></script> <script src="jquery.min.js" type="text/javascript"></script> <script src="main.js" type="text/javascript"></script> <script src="popper.js" type="text/javascript"></script> </body> </html>
  24. Pessoal sou meio leigo no assunto. Mas estou aprendendo. Gostaria de saber, como faço para aplicar uma animação feita com .css em apenas uma parte do meu site.. mais especificadamente.. nas imagens. Exemplo: </div> <div class="image fit"> <a href="FORTRESS.html"><img src="images/Dropaja/fortress2.jpg" alt="" /></a>
  25. alysson122010

    Botão de status

    Gostaria de saber como fazer um botão de status. Tipo ta la ativo ai quando eu clicar nesse botão ele mude e fique desativado e se eu clicar novamente fique ativado. Sem da refresh na pagina e esse botao envie para meu banco de dados e altere o status na tabela com o id do post. Como eu faço isso nao tenho ideia.
×

Important Information

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