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

  1. <div class="fab"> <button class="main"> </button> <ul> <li> <label for="opcao1">Opção 1</label> <button id="opcao1"> ⎈ </button> </li> <li> <label for="opcao2">Opção 2</label> <button id="opcao2"> ⎗ </button> </li> <li> <label for="opcao3">Opção 3</label> <button id="opcao3"> ☏ </button> </li> </ul> </div> body{ font-family: sans-serif; } .fab{ position: fixed; bottom:10px; right:10px; } .fab button{ cursor: pointer; width: 48px; height: 48px; border-radius: 30px; background-color: #cb60b3; border: none; box-shadow: 0 1px 5px rgba(0,0,0,.4); font-size: 24px; color: white; -webkit-transition: .2s ease-out; -moz-transition: .2s ease-out; transition: .2s ease-out; } .fab button:focus{ outline: none; } .fab button.main{ position: absolute; width: 60px; height: 60px; border-radius: 30px; background-color: #5b19b7; right: 0; bottom: 0; z-index: 20; } .fab button.main:before{ content: '⏚'; } .fab ul{ position:absolute; bottom: 0; right: 0; padding:0; padding-right:5px; margin:0; list-style:none; z-index:10; -webkit-transition: .2s ease-out; -moz-transition: .2s ease-out; transition: .2s ease-out; } .fab ul li{ display: flex; justify-content: flex-start; position: relative; margin-bottom: -10%; opacity: 0; -webkit-transition: .3s ease-out; -moz-transition: .3s ease-out; transition: .3s ease-out; } .fab ul li label{ margin-right:10px; white-space: nowrap; display: block; margin-top: 10px; padding: 5px 8px; background-color: white; box-shadow: 0 1px 3px rgba(0,0,0,.2); border-radius:3px; height: 18px; font-size: 16px; pointer-events: none; opacity:0; -webkit-transition: .2s ease-out; -moz-transition: .2s ease-out; transition: .2s ease-out; } .fab button.main:active, .fab button.main:focus{ outline: none; background-color: #7716ff; box-shadow: 0 3px 8px rgba(0,0,0,.5); } .fab button.main:active:before, .fab button.main:focus:before{ content: '↑'; } .fab button.main:active + ul, .fab button.main:focus + ul{ bottom: 70px; } .fab button.main:active + ul li, .fab button.main:focus + ul li{ margin-bottom: 10px; opacity: 1; } .fab button.main:active + ul li:hover label, .fab button.main:focus + ul li:hover label{ opacity: 1; } Como faço pra movimentar meu botão flutuante pra qualquer lado da tela igual o messenger?
  2. Olá, estou montando um layout para uma atividade da faculdade, o layout está pronto, mas está com um problema na estrutura, quando diminui o tamanho do navegador o página fica mais uma margem a direita e as div's não ficam fixas, segue o código html e css: Página HTML <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"/> <title>Aula 07</title> <link rel="stylesheet" type="text/css" href="style.css"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> </head> <body> <header> <div class="contatos"> <div class="cont"> <p> <img src="Icones/telefone.png" width="20" height="20"> (41) 3019-7838</p> </div> <div class="cont"> <p> <img src="Icones/email.png" width="20" height="20"> contato@email.com</p> </div> <div class="cont"> <p> <img src="Icones/locationmarker.png" width="20" height="20"> R. Rua, 00 - Curitiba </p> </div> </div> </header> <div class="topo"> <div class="contatos2"> <div class="cont2"> <img align="right" src="logo.png"> </div> <div class="cont2"> <p> HOME </p> </div> <div class="cont2"> <p> EMPRESA </p> </div> <div class="cont2"> <p> SERVIÇOS </p> </div> <div class="cont2"> <p> HOSPEDAGEM </p> </div> <div class="cont2"> <p> PORTIFÓLIO </p> </div> <div class="cont2"> <p> CONTATO </p> </div> </div> </div> <div class="banner"> </div> <div class="banner2"> <div class="banneresq"> <h1> <font color="#2B47AE">BEM-VINDO AO</font> <br> <font color="#A11606">NOSSO SITE</font> </h1> <div class="linhatexto"> </div> <p> Especialista em desenvolvimento de sites o Projeto Web oferece oque há de melhor<br> no mercado para construção de site, tecnologia avançada e modernismo nos Layouts<br> são as principais caracteristicas de nossos Layouts, com a Metodologia de Atender<br> Bem para Atender Sempre.<br> </p> <div class="botaoentrar" > <h1>Entrar</h1> </div> </div> <div class="bannerdir"> <img src="Imagens/bannerdireita2.jpg" width="320" height="280"> </div> </div> <div class="banner3"> <div class="caixamaior"> <div class="caixa1"> <img src="Imagens/box1.jpeg" width="250" height="200"> <div align="center"> <p> CRIAÇÃO DE SITES </p> </div> <div class="caixa1texto"> <h1> Temos desde sites simples de 1 página,<br> modelos padrões e personalizados<br> com páginas internas. Confira nossos<br> modelos ou solicite um.<br> </h1> </div> <div class="botaosaibamais"> <h1>Saiba Mais</h1> </div> </div> <div class="caixa2"> <img src="Imagens/box2.jpg" width="250" height="200"> <div align="center"> <p> HOSPEDAGEM DE SITES </p> </div> <div class="caixa2texto"> <h1> Hospede um site em um servidor<br> confiável e de qualidade, que sempre<br> lhe dê suporte necessário. Deixe seu<br> site 100% online.<br> </h1> </div> <div class="botaosaibamais"> <h1>Saiba Mais</h1> </div> </div> <div class="caixa3"> <img src="Imagens/box3.jpg" width="250" height="200"> <div align="center"> <p> MANUTENÇÃO DE SITES </p> </div> <div class="caixa3texto"> <h1> Mantenha seu site sempre atualizado,<br> passando credibilidade aos seus<br> clientes e ganhando ponto com o<br> Google e outros buscadores.<br> </h1> </div> <div class="botaosaibamais"> <h1>Saiba Mais</h1> </div> </div> </div> </div> </body> </html> PÁGINA CSS @import url('https://fonts.googleapis.com/css?family=Muli:300,400,700'); @import url('https://fonts.googleapis.com/css?family=Cabin:400,500,600,700'); @import url('https://fonts.googleapis.com/css?family=Oxygen:300,400,700'); @import url('https://fonts.googleapis.com/css?family=Roboto:100,400,500,700'); @import url('https://fonts.googleapis.com/css?family=Scada:400,400i,700'); @import url('https://fonts.googleapis.com/css?family=Karla:400,700'); header{ width: 100%; height: auto; overflow: hidden; background-color: #023180; margin: auto; } body{ margin: 0px; } .contatos{ width: 100%; max-width: 900px; height: auto; overflow: hidden; margin: auto; } .cont{ width: 33.3%; height: 40px; float: left; } .cont p{ color:#ffffff; font-family: 'Muli'; font-weight: 400; } .topo{ width:80%; height:120px; float:right; } .cont2{ font-family:'Cabin'; color:#023180; width:13.3%; height:40px; float:left; } .cont2 p{ font-size:15px; margin-left:100px; margin-top:30px; } .logo{ margin-left:350px; margin-top:10px; } .banner{ width:100%; height:500px; background:url(Imagens/banner.jpg); float:left; margin-top:30px; } .banner3{ width:100%; height:500px; background-color:#083875; float:left; margin-top:50px; vertical-align: middle; } .caixamaior{ width:100%; height:auto; } .caixamaior p{ color:#FFFFFF; font-family:'Scada'; } .caixa1texto h1{ font-size:12px; font-family:'Karla'; text-align:center; color:#FFFFFF; } .caixa2texto h1{ font-size:12px; font-family:'Karla'; text-align:center; color:#FFFFFF; } .caixa3texto h1{ font-size:12px; font-family:'Karla'; text-align:center; color:#FFFFFF; } .botaosaibamais{ width:150px; height:50px; background-color:#21588E; text-align:center; vertical-align: middle; line-height: 3; margin-left:45px; margin-top:20px; } .botaosaibamais h1{ font-family:'Scada'; font-size:15px; color:#ffffff; vertical-align: middle; } .caixa1{ margin-left:15%; margin-top:5%; float:left; } .caixa2{ margin-left:10%; margin-top:5%; float:left; } .caixa3{ margin-left:10%; float:left; margin-top:5%; } .banneresq{ float:left; margin-left:120px; margin-top:65px; } .banneresq h1{ font-family: 'Oxygen'; } .banneresq p{ color:#3F3B3B; font-family: 'Oxygen'; font-size:16px; } .linhatexto{ width:75px; height:4px; background-color:#A11606; margin-top:-5px; } .botaoentrar{ width:150px; height:50px; background-color:#800000; text-align:center; vertical-align: middle; line-height: 3; } .botaoentrar h1{ font-family:'Oxygen'; font-size:15px; color:#ffffff; vertical-align: middle; } .bannerdir{ float:left; margin-top:60px; margin-left:70px; } @media only screen and (max-width: 600px){ .cont{ width: 100%; } .cont p{ text-align: center; } .banner{ width:100%; } }
  3. Por favor, preciso de ajuda para meu TCC onde terei que criar um site. Eis o problema, utilizei o CSS para estilizar os links do site, dessa maneira: a{ color: white; text-decoration: none; padding: 5px 10px; } a:link{ color: white; } a:visited{ color: white; } a:hover{ color: black; background-color: white; } Essa estilização foi aplicada a todos os links do site, porém, quero aplicá-la a apenas alguns links específicos (no caso, os links do top). Como faço para "isolar" a estilização de cada link?! Abaixo disponibilizo o HTML e o CSS do site, desde já agradeço! <!DOCTYPE html> <html> <head> <title>Anything</title> <link rel="stylesheet" type="text/css" href="css/Stil.css"> </head> <body> <!-- Inicio do Menu --> <div class="haus"> <div class="area"> <h1 class="logo"> <span class="yellow">&emsp;<img src="Logo.png" width="325" height="50"></span> </h1> <div class="menu"> <a href="Haus.html">Haus</a> <a href="#">Nachrichten</a> <a href="#">Kino</a> </div> </div>n </div> <!-- Fim do menu --> <!-- Inicio do Conteúdo --> <br> <div class="area-principal"> <div class="postagem"> <h2><a href="#"> Título da Notícia:</a></h2> <span class="data-postagem">Data da postagem:</span> <img src="img/imagem1.png" class="img-postagem"> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p> <span>Postado por: Fulano</span> </div> </div> </body> </html> ================================================================================================================================================================ *{ margin: 0px; padding: 0px; } body{ background-color: lightgray; font-size: 16px; font-family: "Trebuchet MS", Helvetica, sans-serif; color: black; } .haus{ font-size: 25px; color: yellow; background-color: black; border-bottom: 7px solid gold; height: 50px; position: fixed; width: 100%; top: 0px; } .area{ width: 720px margin: 0 auto; } .menu{ float: right; padding: 10px 100px; } .logo{ float: left; } .yellow{ color: gold; } a{ color: white; text-decoration: none; padding: 5px 10px; } a:link{ color: white; } a:visited{ color: white; } a:hover{ color: black; background-color: white; } .area-principal{ width: 720px; margin: 55px auto 10px auto; } .postagem{ margin: 10px; background-color: darkgray; margin-bottom: 10px; } h2{ color: gold; text-decoration: none; } .data-postagem{ display: block; font-size: 14px; border-bottom: 1px solid #f4f4f4; padding-bottom: 10px; margin-bottom: 10px; } .img-postagem{ float: left; margin: 0px 10px 10px 0px; } p{ text-align: justify; padding: 10px; }
  4. Boa noite amigos, Primeiramente queria dizer que sou iniciante e sei muito pouco de programação (quase 0). Estou me virando para colocar um site no ar sozinho. Fiz algumas alterações usando css em meu site (fui introduzindo uma a uma e testando em diversos dispositivos). Porem tem uma que esta me dando dor de cabeça! Alterei apenas a cor do backgroun e do texto na minha barra de navegação da seguinte forma: "body .main-navigation, .navigation-container .site-title, .navigation-container ul li a, .navigation-container .icon-search { background: #ffffff; color: #d83200; }" Porem, quando acesso o site via dispositivo móvel os ícones e o texto da barra de navegação principal estão na cor branca (ou seja backgroun branco e letras + ícones brancos). Já tentei de tudo e não consigo achar a classe que altera isso, tenho 03 dias revirando a net e nada! Se for algo complexo estou disposto a pagar pelo serviço. o site é www.naviagemdeviajar.com.br
  5. Datetimepicker do Bootstrap fica português só fora da internet testando no Wampserver passando para um domínio o datetimepicker funciona só que fica em inglês. Código: <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/bootstrap.min.css"> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <link href="css/bootstrap-combined.min.css" rel="stylesheet"/> <link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet"/> <script src="js/bootstrap-datetimepicker.min.js"></script> <script src="js/bootstrap-datetimepicker.pt-BR"></script> <body> </head> <div class="container"> <div class="row justify-content-center"> <table class="table"> <thead> <th>&nbsp;ID_Cliente</th> <th>Preço</th> <th>Quantidade</th> <th>Total dos Serviços</th> <th>Forma de Pagamento</th> <th>Data</th> <th Colspan="9">Ação </th> </thead> <button type="button" class="btn btn-dark">Cliente</button> <button type="button" class="btn btn-secondary">Caixa</button> <button type="button" class="btn btn-primary">Relatorio1</button> <button type="button" class="btn btn-success">Relatorio2</button> <tbody> <tr> <td>&nbsp;1</td> <td>148,00</td> <td>1,0</td> <td>188,0</td> <td>Dinheiro a vista</td> <td>2011-08-19-13:45:00</td> <td> <button type="button" class="btn btn-info">Edit</button> <button type="button" class="btn btn-danger">Delete</button> </td> </tr> <tr> <td>&nbsp;2</td> <td>308,00</td> <td>1,0</td> <td>399,23</td> <td>Débito no cartão</td> <td>2011-08-20-22:45:00</td> <td> <button type="button" class="btn btn-info">Edit</button> <button type="button" class="btn btn-danger">Delete</button> </td> </tr> </table> </div> <BR> <BR> <BR> <div class="row justify-content-center"> <form action="" method="POST"> <div class="form-group row"> <div class="col-xs-8"> <div class="input-group mb-3"> <div class="input-group-prepend"> <label class="input-group-text" for="inputGroupSelect01">Serviços</label> </div> <select class="custom-select" id="inputGroupSelect01"> <option selected>Escolha</option> <option value="1">Corte</option> <option value="2">Hidratação</option> <option value="3">Coloração</option> <option value="4">Relaxamento</option> <option value="5">Progressiva</option> <option value="6">Escova</option> </select> </div> </div> </div> <div class="form-group row"> <div class="col-xs-8"> <label for="cod">ID_Cliente:</label> <input type="text" class="form-control" id="cod" aria-describedby="name" placeholder=""> </div> </div> <div class="form-group row"> <div class="col-xs-8"> <label for="preco">Preço:</label> <input type="text" class="form-control" id="preco" aria-describedby="name" placeholder=""> </div> </div> <div class="form-group row"> <div class="col-xs-8"> <label for="Quantidade">Quantidade:</label> <input type="text" class="form-control" id="quantidade" aria-describedby="quantidade" placeholder=""> </div> </div> <div class="form-group row"> <div class="col-xs-8"> <label for="totaldeserv">Total dos Serviços:</label> <input type="text" class="form-control" id="totaldeserv" aria-describedby="totaldeserv" placeholder=""> </div> </div> <div class="form-group row"> <div class="col-xs-8"> <div class="input-group mb-3"> <div class="input-group-prepend"> <label class="input-group-text" for="inputGroupSelect01">Forma de Pagamento:</label> </div> <select class="custom-select" id="inputGroupSelect01"> <option selected>Escolha</option> <option value="1">Cartão de crédito</option> <option value="2">Cartão de débito</option> <option value="3">Dinheiro</option> </select> </div> </div> </div> <div id="datetimepicker" class="input-append date"> <label for="totaldeserv">Data_Horário</label> <input type="text"></input> <span class="add-on"> <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i> </span> </div> <div class="form-group row"> <div class="col-xs-8"> <button type="submit" name="save" class="btn btn-primary">Salvar</button> </div> </div> </div> </form> </div> </div> <script type="text/javascript"> $('#datetimepicker').datetimepicker({ format: 'dd/MM/yyyy hh:mm:ss', language: 'pt-BR' }); </script> </body> </html> ---------------------------------------------------------------------------------------------- /** * Brazilian translation for bootstrap-datetimepicker * Cauan Cabral <cauan@radig.com.br> */;(function($){$.fn.datetimepicker.dates['pt-BR'] = {days: ["Domingo", "Segunda", "Terça", "Quarta", "Quinta", "Sexta", "Sábado", "Domingo"],daysShort: ["Dom", "Seg", "Ter", "Qua", "Qui", "---", "Sáb", "Dom"],daysMin: ["Do", "Se", "Te", "Qu", "Qu", "Se", "Sa", "Do"],months: ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"],monthsShort: ["Jan", "Fev", "Mar", "Abr", "Mai", "Jun", "Jul", "Ago", "Set", "Out", "Nov", "Dez"],today: "Hoje"};}(jQuery));
  6. Pablo Bernardo

    Direcionar a um aplicativo

    Gostaria de fazer um botão que levasse o usuário não pra uma página da web, e sim para um aplicativo de seu computador. No caso iniciasse o aplicativo do computador ai clicar no botão.
  7. lordgreen

    Scroll em modo horizontal

    Olá, andei procurando e não encontrei exatamente o que preciso então, talvez alguém possa me ajudar. Eu quero colocar um site em modo horizontal e não consigo pensar em como fazer isto. Deixe-me explicar melhor, tenho uma imagem com altura de 960px e largura de 5000px, ponho ela como background da página e fica a barra em baixo e não em cima, gostaria de saber como mover essa barra para o lado com a roda do mouse (no ato do scrolling). Deve ser uma coisa bem simples, porém realmente não consigo fazer e não encontro exatamente o que procuro na internet, só encontro como colocar menu na horizontal, enfim. Obrigado a todos.
  8. langarolucas

    Imagem não aparece no html

    Bom dia, Comecei a fazer um curso de Html, porém não estou conseguindo colocar imagem. Eu uso a tag "img" (destacado em vermelho) porém a mesma não localiza a imagem na pasta. Segue a baixo o html: <!DOCTYPE html> <html lang = "pt-br"> <head> <meta charset="UTF-8"> <title>Tudo sobre o Google Glass</title> </head> <body> <div id="interface"> <header> <h1>Google Glass</h1> <h2>A revolução do Google está chegando</h2> </header> --> <img src="imagens/glass-oculos-preto-peq.jpg"/> Menu Principal - Home - Especificações - Fotos - Multimídia - Fale conosco Tecnologia > Inovações Saiba tudo sobre o Google Glass por Gustavo Guanabara Atualizado em 23/Abril/2013 O que é O Google Glass é um acessório em forma de óculos que possibilita a interação dos usuários com diversos conteúdos em realidade aumentada. Também chamado de Project Glass, o eletrônico é capaz de tirar fotos a partir de comandos de voz, enviar mensagens instantâneas e realizar vídeoconferências. Seu lançamento está previsto para 2014, e seu preço deve ser de US$ 1,5 mil. Atualmente o Google Glass encontra-se em fase de testes e já possui um vídeo totalmente gravado com o dispositivo. Além disso, a companhia de buscas registrou novas patentes anti-furto e de desbloqueio de tela para o acessório. [AQUI ENTRA UMA FOTO] Data de lançamento Não há uma data específica e oficial para o dispositivo ser lançado, ainda. Pode ser que ele esteja disponível em demonstrações a partir de 2013, mas seu lançamento para as lojas fica para, pelo menos, 2014. Especificações Técnicas Tabela Técnica do Google Glass Mar/2013 Tela:Resolução equivalente a tela de 25" Camera: 5MP para fotos / 720p para vídeos Conectividade: Wi-Fi/ Bluetooth Memória Interna: 12GB Como funciona De acordo com fontes próximas do Google, os óculos vão contar com uma pequena tela de LCD ou AMOLED na parte superior e em frente aos olhos do usuário. Com o uso de uma câmera e GPS, você pode se situar, assim como selecionar opções com o movimento da cabeça O que você pode fazer com o Google Glasses O vídeo de divulgação do Google mostra que você pode se transformar em uma espécie de “super-humano”, já que o aparelho pode indicar a quantos metros você está de seu destino, se o metrô está aberto ou fechado, mostrar o clima, agenda e até mesmo permitir que você marque encontros apenas com comandos de voz. [AQUI ENTRA UM VÍDEO] Outras Notícias Vídeo mais recente [AQUI ENTRA UM VÍDEO] Novidades no Glass O Google enfim revelou as especificações completas do Google Glass, e com ele uma surpresa ainda inédita no mercado: a gigante das buscas usará um sistema de áudio baseado na transdução por condução. Através das hastes dos óculos, o som será transmitido para o ouvido do usuário por meio de microvibrações em determinados ossos de sua cabeça, sem usar nenhum tipo de alto-falante. Além da surpresa do áudio, a tela montada a frente do olho do usuário também chamou atenção. Serão 640 x 360 pixels de resolução que, em proporção, equivaleria a um monitor de 25 polegadas de alta definição colocado a 2,5 metros de distância do espectador. Copyright 2013 - by Gustavo Guanabara Facebook | Twitter </div> </body> </html> Poderiam me ajudar?
  9. Walter_White

    Problema em template site

    Boa tarde, Estou atentar implementar bootstrap numa página estática no blogger. No entanto, quando coloco a biblioteca: href=“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css” A página fica totalmente alterada. Alguem me consegue ajudar a cancelar os efeitos da biblioteca no que não quero. Alguem me consegue ajudar? Muito obrigado,
  10. JulioClaudius

    Texto correndo para fora do layout

    Olá, boa tarde a todos! Sou novato em html/css e preciso desenvolver uma newsletter que será disparada para um cliente nosso. Desenvolvi o layout no photoshop primeiro, depois exportei o html com as imagens normalmente. Porém quando fui testar no browser, verifiquei que os textos ficaram correndo para fora do layout. Com certeza estou esquecendo algum comando que "trave" e/ou deixe o texto no seu devido lugar. Seguem imagem (de como deveria ficar) e link do html de como está ficando: http://www.lipodobrasil.com.br/vantage/eldewps_esp/eldewps203_esp.html Desde já muito obrigado!
  11. Bruno Goedert Dalmolin

    Como Movimentar um Menu em HTML5 e CSS

    Fala devs Beleza? Estou com uma duvida em como eu movimento meu menu para o canto, pois ele fica travado no centro. Os dados são os seguintes: do HTML: <header> <ul id="Menu"> <li><a href="SmartAce-Home.html">Home</a></li> <li><a href="">Sobre</a></li> <li><a href="">Contato</a></li> </ul> </header> do CSS: @charset "UTF-8"; body { margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background: #112c38; } ul#Menu { text-align: center; margin: 0; padding: 0; display: flex; top: -10; } ul#Menu li{ list-style: none; margin: 0 20px; transition: 0.5s; } ul#Menu li a{ position: relative; text-decoration: none; padding: 5px; font-size: 18px; font-family: sans-serif; color: #fff; text-transform: uppercase; transition: 0.5s; } ul#Menu:hover li a { transform: scale(1.4); opacity: .2; filter: blur(5px); } ul#Menu li a:hover { transform: scale(2); opacity: 1; filter: blur(0); } ul#Menu li a:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #ff497c; transition: transform 0.5s; transform-origin: right; transform: scaleX(0); z-index: -1; } ul#Menu li a:hover:before { transition: transform 0.5s; transform-origin: left; transform: scaleX(1); }
  12. Galera, é o seguinte. Estou criando meu site todo em ancoras(na verdade só falta isso para terminar). Inicio, sobre, Serviços, e Contato. Quando clico em cada link do menu principal, esse link me encaminha para o respectivo local dentro da página, sendo assim, clicando em contato eu desco o site inteiro até a ultima seção. Nesta Seção eu criei um formulário, com os campos: Nome, email, Telefone, Cidade e mensagem, e abaixo eu coloquei o botão enviar. No arquivo php eu recebo os dados, encaminho ao meu email, e redireciono para a pagina de obrigado. Neste caso, quando eu clico no botão de submit, este botão me envia o email contendo os dados e abre uma pagina diferente da que estou com a mensagem obrigado. O que eu quero é: Que quando eu clicar no botão submit, essa mensagem de obrigado apareça no mesmo local que eu estou na página principal. Ou seja, clicar no botão enviar, o formulário sumir e no lugar dele aparecer uma mensagem de obrigado, sem atualizar o site principal que eu estou. Segue codigo HTML: <form action="enviacontato.php" class="form-contact" name="form" method="post" tabindex="1"> <input type="text" class="form-contact-input" name="nome" placeholder="Nome" required /> <input type="email" class="form-contact-input" name="email" placeholder="E-mail" required /> <input type="tel" class="form-contact-input-menor" maxlength="15" id="telefone" name="telefone" placeholder="Telefone" required /> <input type="text" class="form-contact-input-menor" name="cidade" placeholder="cidade" /> <textarea class="form-contact-textarea" name="mensagem" placeholder="Deixe uma mensagem" required></textarea> <button type="submit" class="form-contact-button">Enviar</button> </form> Segue o Código PHP: <? $destinatario = "email@email.com"; $nome = $_REQUEST['nome']; $email = $_REQUEST['email']; $telefone = $_REQUEST['telefone']; $cidade = $_REQUEST['cidade']; $mensagem = $_REQUEST['mensagem']; $assunto = "Contato Site"; $body = "===================================" . "\n"; $body = $body . "FALE CONOSCO - FORMULÁRIO DO SITE" . "\n"; $body = $body . "===================================" . "\n\n"; $body = $body . "Nome: " . $nome . "\n"; $body = $body . "Email: " . $email . "\n"; $body = $body . "Telefone: " . $telefone . "\n"; $body = $body . "Cidade: " . $cidade . "\n"; $body = $body . "Mensagem: " . $mensagem . "\n\n"; $body = $body . "===================================" . "\n"; mail($destinatario, $assunto , $body, "From: $email\r\n"); header("location:obrigado.html"); ?> Então é isso galera, espero que me ajudem, Vale =D
  13. Preciso de ajuda para configurar a Newsletter e o formulário de contato do meu site.
  14. rodrigoalgeri

    IMAGEM CSS

    BOA NOITE OLHA ISSO onde esta escrito isso aqui "Health star ratings Kellogg reveals the cereal Rodrigo Algeri", tem uma pequena imagem em cima se voce perceber ela e uma imagem redonda so que nao aparece inteira voce sabe algum jeito pra aparecer ? tipo ela tem que ficar 75px altura e largura a altura fica, so que ela corta, EU GOSTARIA QUE FICASSE UM QUADRADO TIPO 75PX X 75PX E ISSO E PRA FICAR EM TODAS ESSAS IMAGENS AI QUE TEM
  15. Murillo.Ns

    Filtro Inteligente

    Estou tentando criar um filtro igual ao desse site: https://www.peixeurbano.com.br/ Alguém pode me ajudar?
  16. Montei um formulário aqui usando método post, só que não sei como link ele com o pagseguro quando a pessoa clicar no botão INSCREVER-SE e abrir a janela do pagseguro com o link certo. Alguém sabe como fazer?
  17. Artes Ussler

    Barra estilo sublinhado

    Olá! Como eu faço uma barrinha abaixo do texto como essa da imagem apenas usando CSS?
  18. Olá pessoal, estou com um problema e nao consigo resolver, antes de postar o código vou explicar aqui, em meu index.php fix buscar umas imagens em um diretorio, pois ele busca todas e monta para mim usando card materialize, já que não preferi armazenar no banco, pois, o cara não pagou o bastante para isso, nisso uso um card e junto um badges collapse, dentro do collapse quero que ao eu der um click e o collapse rola para baixo ele exiba imagens que esta dentro do controller.php que faz a mesma coisa so que com fotos para exibicao dei um include no index onde deveria mostrar as imagens, e na div coloquei um href que recupero no controller, mas nao esta adiantando, so funcio ase eu colocar como link paa outra agina, mas não é o que eu quero. como esta dentro de um foreach acho que nao acesso o conteudo e nem da echo. segue o codigo. recursivo_arquivos_fotos uso css do materialize. e outros css personalizado de exibicao de imagens do lithgalery essa parte do codigo pega minhas imagens em uma pasta e monta um card para mim arquivo index.php segue a parte que importa do codigo <?php $direct = "../mdjr/producoes/img/img_cards/"; $files = new RecursiveIteratorIterator(new RecursiveDirectoryIterator($direct),RecursiveIteratorIterator::LEAVES_ONLY); /** * Pega os arquivos de imagem e monta os cardes para mim */ foreach ($files as $name => $file) { #verifica se nao é um diretorio caso não são arquivos if (!$file->isDir()) { #o metodo getRealPath tira todos os subdiretorios $filePath = $file->getRealPath(); #o metodo getBasename pega pega o nome $relativePath = $file->getBasename($filePath); #trata as barras de acordo com o SO $filePath=str_replace("\\","/",$filePath); // explode a string e dividi-lo pelo "." e pega so a posicao onde está o nome $explod = explode('.',$file->getBasename($filePath)); //substitui underline por um espaço em branco $str_replace = str_replace("_"," ",$explod[0]); // transforma a primeira letra de cada palavra em Maiúscula $upper_first_ame = ucwords($str_replace); /** * Varre o arquivo em busca de estrigs e pega liunha por linha * @var $descricao_cards * @var $linha * @var $linhas */ $descricao_cards = file("../mdjr/producoes/arquivos_links/descricao_cards.txt"); foreach($descricao_cards as $linha) { $linhas[] = $linha; } $r = count($linha); for($i = 0; $i < $r; $i++) { if(!isset($linhas[$y])) { $count = 0; $y = 0; } }/*Fim*/ ?> <br> <!--Inicio Card horizontal--> <div class="container"> <div class="row"> <div class=""> <div class="card"> <div class="card-image waves-effect waves-block waves-light"> <img src="<?php echo $direct.$file->getBasename($filePath);?>" class="activator responsive-img" alt="<?php echo $file->getBasename($filePath);?>"> </div> <div class="card-content"> <span class="card-title activator grey-text text-darken-4"><?php echo $upper_first_ame;?><i class="material-icons right">more_vert</i></span> <p><a href="#">Mais detalhes</a></p> </div> <div class="card-reveal"> <span class="card-title grey-text text-darken-4" style="font-size: 10pt"><?php echo $linhas[$y];$y++ ?><i class="material-icons right">close</i></span> <p><a href="#">Mais detalhes</a></p> </div> <ul class="collapsible"> <li> <div class="collapsible-header"><i class="material-icons">filter_drama</i><?php echo 'Ver Fotos de '. $upper_first_ame;?></div> <div class="collapsible-body" href="producoes/controller/controller.php?card=<?php echo $count++ ?>"><span><?php include "producoes/controller/controller.php"; echo $div; ?></span></div> </li> </ul> </div> </div> </div> </div> <?php } } ?> essa outra parte do codigo deixei para ao clicar ele desce e exibe as imagens que estou carregando em outro arquivo chamado controller.php <ul class="collapsible"> <li> <div class="collapsible-header"><i class="material-icons">filter_drama</i><?php echo 'Ver Fotos de '. $upper_first_ame;?></div> <div class="collapsible-body" href="producoes/controller/controller.php?card=<?php echo $count++ ?>"><span><?php include "producoes/controller/controller.php"; echo $div; ?></span></div> </li> </ul> nessa linha a baixo mostra onde a div funcioa como um link de botao que ao clicar ela chamar o controller.php <div class="collapsible-body" href="producoes/controller/controller.php?card=<?php echo $count++ ?>"> e nessa embaixo ela include o conteudo do controller .php que sera conforme o parametro pasado no link da div onde deveria exibir as imagens carregadas. <div class="collapsible-body" href="producoes/controller/controller.php?card=<?php echo $count++ ?>"><span> agora o arquivo controller.php <?php /** * Created by PhpStorm. * User: joannes * Date: 28/03/19 * Time: 15:30 */ //$options = $_GET['card']; if($_GET['card'] == '0') { ?> <div class="row escuro"> <div class="col s12 m12"> <div id="lightgallery" class="list-unstyled "> <?php $direct = "../img/cards/card_eventos"; $files = new RecursiveIteratorIterator(new RecursiveDirectoryIterator($direct),RecursiveIteratorIterator::LEAVES_ONLY); foreach ($files as $name => $file) { #verifica se nao é um diretorio caso não são arquivos if (!$file->isDir()) { #o metodo getRealPath tira todos os subdiretorios $filePath = $file->getRealPath(); $tam = $file->getSize(); #o metodo getBasename pega o nome $relativePath = $file->getBasename($filePath); #trata as barras de acordo com o S.O $filePath = str_replace("\\", "/", $filePath); // explode a string e dividi-lo pelo "." e pega so a posicao onde está o nome $explod = explode('.', $file->getBasename($filePath)); //substitui underline por um espaço em branco $str_replace = str_replace("_", " ", $explod[0]); // transforma a primeira letra de cada palavra em Maiúscula $upper_first_name = ucwords($str_replace); $div = '<div class="col s12 m4 l2 item" data-aos="fade" data-src="' . $file . '" data-sub-html="<h4>Fading Light</h4><p>Descrição aqui</p>"><br> <a href="#"><img height="100%" width="100%" src="' . $file . '" alt="IMage" class="img-fluid "></a> </div>'; echo $div; } } ?> </div> </div> </div> <?php } ?>
  19. Olá, gostaria de saber como faço para adicionar um código CSS que direcione o link do site contido no e-mail para o rodapé da página. Essa ação seria dentro de uma plataforma de envio de e-mail marketing onde eu tenho os seguintes campos: web adress: www.exemplo.com.br title atribute: CSS class: gostaria que quando as pessoas clicassem no link, elas fossem direcionadas para o rodapé do site Obrigada
  20. Olá pessoal tenho um site que tem uma área de notícias, a maior parte das notícias tem imagens e estas imagens tem legenda. Uso como editor de notícias o CKEditor, e funciona 100%. Estou com um problema no meu CSS e após vários dias de pesquisas não consegui resolver. O meu problema é que ao centralizar uma imagem a legenda fica alinhada para esquerda em um quadrinho pequeno. Conforme imagem abaixo: Se eu uso alinhamento à esquerda ou à direita, funciona normalmente. Conforme imagem abaixo: Algumas observações. - a legenda(<figcaption> não pode ser mais larga do que o <figure>. Código desta imagem que o CKEditor montou(deixei com alinhamento centralizado que é quando dá o erro): <div style="text-align:center"> <figure class="image" style="display:inline-block"><img alt="" height="150" src="/imagesnoticias/images/25_02_2017_20_23_08%20(1).jpg" width="250" /> <figcaption>Ut porttitor ut quam eu malesuada. Nunc nec iaculis dui, quis efficitur velit. Integer consequat lectus in fermentum condimentum.</figcaption> </figure> </div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris egestas convallis dapibus. Nullam rutrum justo eget dictum tempus. Sed vitae sagittis tortor, vel bibendum justo. Nullam pulvinar libero a imperdiet faucibus. In mattis vehicula volutpat. Quisque in velit massa. Cras ligula ex, dignissim ac venenatis vitae, rhoncus id nisl. Morbi maximus, nisi sit amet efficitur facilisis, ex urna volutpat massa, nec vestibulum erat dolor a massa. Cras ut nunc fringilla, gravida tortor id, egestas urna. Nullam non sapien id libero lacinia maximus vel vel libero. Aliquam quam tortor, scelerisque a est et, ullamcorper scelerisque nisi. Pellentesque nibh augue, bibendum ac mi sit amet, condimentum sodales quam. Sed nec dolor ut nisi tristique rhoncus quis ac diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque venenatis nunc non mi lobortis congue.</p> Segue o meu CSS destes itens: figure { display: table; background: #f5f5f5; border-width: 1px 1px 1px 1px; border-style: double; border-color: lightgray; padding: 2px; margin: 3px 8px 8px 0px; } figcaption { display: table-caption; font-size: 11px; background: #f5f5f5; border-width: 0px 1px 1px 1px; border-style: dotted; border-color: lightgray; caption-side: bottom; margin: 0 auto; max-width: 100%; padding: 2px; text-align: center; } Alguém poderia me dar uma ajuda ou alguma ideia para solução deste problema? Desde já agradeço a atenção de todos.
  21. Boa noite pessoal! Estou com uma dúvida e não sei nem por onde começar, seguinte: Eu tenho um sistema simples em PHP cadastro de usuário e etc... Porém esse sitema gera relatorios de pessoas, gostaria de saber se é possível com base nos dados dos clientes cadastrados eu passar os parametros como nome, endereço, cidade, rg etc.. para dentro de sites do tipo: https://servicos.dpf.gov.br/antecedentes-criminais/certidao É possível automatizar isso e trazer junto aos meus relatorios ? Estou usando o DomPDF para gerar os relatorios trazido do banco fora outras informações que o próprio solicitante marca.
  22. guma.cojogra@gmail.com

    Mapa mental em html e css

    Alguém poderia me ajudar a criar um mapa mental usando css e html? procurei na internet mas não consegui entender e não achei nenhum tutorial ou explicação que pudesse utilizar quais as propriedades css que devo utilizar para criar as linhas ligando um nó a outro? vou postar uma imagem de exemplo de como deve ficar. obrigado
  23. dayenne

    Problemas no iframe

    Olá desenvolvedor. Estou com um problema um tanto quanto bobo, porém não consigo resolver!!! Estou gerando um e-mail automático com html onde nele contém um vídeo, a pagina fica toda certinha, porém quando esse e-mail chega ao remetente,ele chega sem a parte do vídeo, onde tem o iframe e afins. Código da parte que NÃO vai para o e-mail. <div style="margin:0; padding:15px 50px 15px 50px; font-family: Arial, Helvetica, sans-serif; color:#8f8871; font-size:18px; line-height:16px; background-color:#FFF; border-top: 1px dashed #ccc" text-align:"center"> <strong>Não tenha dúvidas! Aperta o play e veja como é fácil montar o seu álbum.</strong><span style="padding-left:10px;"> </span> <br> <br> <iframe width="100%" height="315" src="https://www.youtube.com/embed/_wPfz-w2XDo" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture background-color: #fff;" allowfullscreen> </iframe> </div>
  24. clickanapolis

    Link posicionar em div dentro da pagina

    Bom dia, no meu site coloquei ao clicar no link ele vai para uma div dentro da propria pagina, visto que a mesma e uma unica pagina. O problema é que quando clica no link ele esta parando fora do inicio da div, o que devo fazer? <script type="text/javascript"> jQuery(document).ready(function ($) { $(".scroll").click(function (event) { event.preventDefault(); $('html,body').animate({ scrollTop: $(this.hash).offset().top }, 1000); }); }); </script> e chamo o link assim: <li><a href="#acimetech" class="scroll">A Cimetech</a></li>
  25. reginaldo123

    URL personalizada

    estou com dificuldade em criar uma url pernalizada exemplo href="www.bolacha,.com/novabolacha" value= "www.bolacha.com" quando o usuario copia a url para colocar em outra pagina quero que apareça o conteudo de value, e seja direcionado para o href.
×

Important Information

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