Ir para conteúdo

Pesquisar na Comunidade

Mostrando resultados para as tags ''css''.

  • Pesquisar por Tags

    Digite tags separadas por vírgulas
  • Pesquisar por Autor

Tipo de Conteúdo


Todas as áreas do Fórum

  • 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

Encontrar resultados em...

Encontrar resultados que...


Data de Criação

  • Início

    FIM


Data de Atualização

  • Início

    FIM


Filtrar pelo número de...

Data de Registro

  • Início

    FIM


Grupo


Google+


Hangouts


Skype


Twitter


deviantART


Github


Flickr


LinkedIn


Pinterest


Facebook


Site Pessoal


Localização


Interesses

Encontrado 951 registros

  1. <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="description" content="curso de bootstrap 3"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"> <title>3° site com bootstrap tabelas</title> <style> .table-striped > tbody > tr{ background-color:red; } .table-hover > tbody >tr:hover{ background-color:blue; color:white; } </style> </head> <body> <div class="container-fluid"> <h3 class="text-center">Tabelas</h3> </div> <div class="row"> <div class="col-md-6"> <table class="table table-striped table-condensed table-hover table-bordered"> <thead> <tr > <th>Protocolo</th> <th>Razão Social</th> <th>CNPJ</th> </tr> </thead> <tbody> <tr> <td>0001</td> <td>Bootstrap essencial - ME</td> <td>00.000.000/0001-00</td> </tr> <tr > <td>0002</td> <td>Bootstrap essencial - ME</td> <td>00.000.000/0002-00</td> </tr> <tr> <td>0003</td> <td>Bootstrap essencial - ME</td> <td>00.000.000/0003-00</td> </tr> <tr> <td>0004</td> <td>Bootstrap essencial - ME</td> <td>00.000.000/0004-00</td> </tr> </tbody> </table> </div> <div class="col-md-6"> <div class="table-responsive"> <table class="table"> <thead> <tr> <th>Protocolo</th> <th>Razão Social</th> <th>CNPJ</th> </tr> </thead> <tbody> <tr> <td class="success">0001</td> <!--linhas decoradas--> <td class="danger">Bootstrap essencial - ME</td> <td class="warning">00.000.000/0001-00</td> </tr> <tr class="success"> <td>0002</td> <td>Bootstrap essencial - ME</td> <td>00.000.000/0002-00</td> </tr> <tr class="warning"> <td>0003</td> <td>Bootstrap essencial - ME</td> <td>00.000.000/0003-00</td> </tr> <tr class="active"> <td>0005</td> <td>Bootstrap essencial - ME</td> <td>00.000.000/0005-00</td> </tr> <tr class="info"> <td>0004</td> <td>Bootstrap essencial - ME</td> <td>00.000.000/0004-00</td> </tr> </table> </div> <!--tabela responsiva--> </div> </div> <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> </body> </html> acima site usando a versão antiga <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="description" content="curso de bootstrap 3"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous"> <title>3° site com bootstrap tabelas</title> <style> .table-striped > tbody > tr{ background-color:red; } .table-hover > tbody >tr:hover{ background-color:blue; color:white; } </style> </head> <body> <div class="container-fluid"> <h3 class="text-center">Tabelas</h3> </div> <div class="row"> <div class="col-md-6"> <table class="table table-striped table-condensed table-hover table-bordered"> <thead> <tr > <th>Protocolo</th> <th>Razão Social</th> <th>CNPJ</th> </tr> </thead> <tbody> <tr> <td>0001</td> <td>Bootstrap essencial - ME</td> <td>00.000.000/0001-00</td> </tr> <tr > <td>0002</td> <td>Bootstrap essencial - ME</td> <td>00.000.000/0002-00</td> </tr> <tr> <td>0003</td> <td>Bootstrap essencial - ME</td> <td>00.000.000/0003-00</td> </tr> <tr> <td>0004</td> <td>Bootstrap essencial - ME</td> <td>00.000.000/0004-00</td> </tr> </tbody> </table> </div> <div class="col-md-6"> <div class="table-responsive"> <table class="table"> <thead> <tr> <th>Protocolo</th> <th>Razão Social</th> <th>CNPJ</th> </tr> </thead> <tbody> <tr> <td class="success">0001</td> <!--linhas decoradas--> <td class="danger">Bootstrap essencial - ME</td> <td class="warning">00.000.000/0001-00</td> </tr> <tr class="success"> <td>0002</td> <td>Bootstrap essencial - ME</td> <td>00.000.000/0002-00</td> </tr> <tr class="warning"> <td>0003</td> <td>Bootstrap essencial - ME</td> <td>00.000.000/0003-00</td> </tr> <tr class="active"> <td>0005</td> <td>Bootstrap essencial - ME</td> <td>00.000.000/0005-00</td> </tr> <tr class="info"> <td>0004</td> <td>Bootstrap essencial - ME</td> <td>00.000.000/0004-00</td> </tr> </table> </div> <!--tabela responsiva--> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script> </body> </html> o que denunciou a falha do framework foi a table-striped não ter funcionado e o estados nas linhas da tabela.
  2. marcelocardoso

    carrousel, tamanho da imagem no CSS

    AJUDA... Segue exemplo de carrousel. Feito em Jquery, CSS, e html. 1) O mesmo funciona, porém o CSS não tem opção para aumentar o tamanho da imagem, segue código: <section class="container-fluid parallax parallax_shadow"> <div class="row"> <div id="mn_clientes" class="col-lg-12 col-md-12 col-sm-6"> <h4 class="text-left space_top10" style=""> TExto do Carrousel </h4> <div class="row"> <div class="carrousel_padrao"> <ul class="carrousel_padrao__slides"> <li class="item"><img src="../site/img.jpg"></li> <li class="item"><img src="../site/img.jpg"></li> <li class="item"><img src="../site/img.jpg"></li> </ul> <div class="carrousel_padrao__arrow carrousel_padrao__arrow--left space_top40"> <span class="fa fa-arrow-left font_24px"></span> </div> <div class="carrousel_padrao__arrow carrousel_padrao__arrow--right space_top40"> <span class="fa fa-arrow-right font_24px"></span> </div> </div> </div> </div> </div> </section> <script> $(document).ready(function() { 'use strict'; var carousel = function carousel(options) { var _carousel = { paused: false, stopped: false, options: { speed: 3000, acceleration: 5, reverse: false, selector: '.carrousel_padrao', slidesSelector: '.carrousel_padrao__slides', leftArrowSelector: '.carrousel_padrao__arrow--left', rightArrowSelector: '.carrousel_padrao__arrow--right' }, init: function init() { var options = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0]; // Copy options to this.options for (var prop in options) { if (!options.hasOwnProperty(prop)) break; this.options[prop] = options[prop]; } // Cache nodes var carousel = document.querySelector(options.selector || this.options.selector); var slides = this._slides = carousel.querySelector(this.options.slidesSelector); this._leftArrow = carousel.querySelector(this.options.leftArrowSelector); this._rightArrow = carousel.querySelector(this.options.rightArrowSelector); // Multiply speed value by the number of slides this.options.speed = this.options.speed * slides.children.length; // Set slides container width this.width = slides.offsetWidth; // Repeat elements slides.innerHTML = slides.innerHTML + slides.innerHTML + slides.innerHTML; this._registerEvents(); this._animate(); }, _registerEvents: function _registerEvents() { var _this = this; var speed = this.options.speed; var reverse = this.options.reverse; this._rightArrow.addEventListener('mouseover', function() { _this.options.speed = speed / _this.options.acceleration; _this.options.reverse = false; }); this._rightArrow.addEventListener('mouseleave', function() { _this.options.speed = speed; _this.options.reverse = reverse; }); this._leftArrow.addEventListener('mouseover', function() { _this.options.speed = speed / _this.options.acceleration; _this.options.reverse = true; }); this._leftArrow.addEventListener('mouseleave', function() { _this.options.speed = speed; _this.options.reverse = reverse; }); // Pause when cursor is over carousel this._slides.addEventListener('mouseover', this.pause.bind(this)); this._slides.addEventListener('mouseleave', this.start.bind(this)); // Pause when cursor is over carousel window.addEventListener('resize', function() { _this.width = _this._slides.offsetWidth; }); }, pause: function pause() { this.paused = true; }, start: function start() { this.paused = false; }, stop: function stop() { this.stopped = true; }, _animate: function _animate() { var _this2 = this; var slides = this._slides; var oneThird = slides.lastElementChild.getBoundingClientRect().right / 3; var framesCount = 0; var step = 0; var posX = 0; var animate = function animate() { if (!_this2.paused) { framesCount = _this2.options.speed * 60 / 1000; step = oneThird / framesCount; posX += _this2.options.reverse ? step : -step; slides.style.transform = 'translateX(' + posX + 'px)'; if (_this2.options.reverse) { if (posX >= _this2.width - oneThird) { posX = _this2.width - oneThird * 2; } } else { if (Math.abs(posX) >= oneThird * 2) { posX = -oneThird; } } }!_this2.stopped && requestAnimationFrame(animate); }; animate(); } }; _carousel.init(options); return _carousel; }; window.onload = function() { return carousel({ selector: '.carrousel_padrao' }); }; });</script> CSS: .carrousel_padrao { width: 100%; position: relative; margin-top: 20px; } .carrousel_padrao__slides { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0; padding: 0; height: auto; list-style: none; will-change: transform; } /* .carrousel_padrao .carrousel_padrao__slides > .item > img, .carrousel_padrao .carrousel_padrao__slides > .item > a > img { display: block; width: 100%; height: auto; } */ .carrousel_padrao__arrow { width: 30px; height: 30px; position: absolute; top: 70%; z-index: 1; -webkit-transform: translateY(-50%) rotate(45deg); transform: translateY(-50%) rotate(45deg); background-color: white; } .carrousel_padrao__arrow--left { left: 15px; cursor: pointer; background-color: #ff9326; border-radius: 30px; color: #ff9326; /* -webkit-box-shadow: 0px 0px 8px -1px rgba(171, 171, 171, 1); -moz-box-shadow: 0px 0px 8px -1px rgba(171, 171, 171, 1); box-shadow: 0px 0px 8px -1px rgba(171, 171, 171, 1); */ } .carrousel_padrao__arrow--right { right: 15px; cursor: pointer; background-color: #ff9326; border-radius: 30px; color: #ff9326; /* -webkit-box-shadow: 0px 0px 8px -1px rgba(171, 171, 171, 1); -moz-box-shadow: 0px 0px 8px -1px rgba(171, 171, 171, 1); box-shadow: 0px 0px 8px -1px rgba(171, 171, 171, 1); */ } .carrousel_padrao__arrow--right:hover, .carrousel_padrao__arrow--left:hover { transition: 1s ease; -webkit-transition: all 100ms ease-in; -webkit-transform: scale(1.5); -ms-transition: all 100ms ease-in; -ms-transform: scale(1.5); -moz-transition: all 100ms ease-in; -moz-transform: scale(1.5); transition: all 100ms ease-in; transform: scale(1.5); } Estou com problemas no CODIGO acima, na parte que está comentado no CSS. Tentei inserir aquele código para acertar o tamanho da mensagem, mas não vai.... SUGESTÕES:::???? Obrigado.
  3. Prezados, Estou com um problema chatinho no carrossel de imagens. Recentemente comecei a implementar esse carrossel e no browser do computador ele abri legal contudo no celular ele fica com um espaço logo depois da imagem. irei compartilhar o link aqui do GitHub, vocês irão visualizar normal no navegador, quando clica em inspecionar vocês irão visualizar ele com um espaço enorme abaixo da imagem. Link: https://almondhorizon.github.io/Atelie/ Alguém com mais experiencia poderá me ajudar? Agradeço a atenção de todos. Atenciosamente, Rafael Brito
  4. Boa noite! estou desenvolvendo esse site http://agricolaterranova.com.br/e na parte de noticias eu estou buscando de outro site. a busca das noticias está ok, mas eu não consigo estilizar o meu onde estão as noticias. eu quero que fique como do site que eu estou pegando as informacoes https://www.noticiasagricolas.com.br/noticias/. eu gostaria que alguém me ajudasse para que o resultado ficasse igual o arquivo em anexo Desde ja agradeço pela ajuda, meu whats caso alguem queria falar diretamente (44) 99829-3326-Fabiano Obrigado!
  5. Anderson.dsm

    Contador de data/hora e ano

    Olá, estou criando um sistema de postagens, ao fazer a postagem eu tenho os seguintes conteudos... Título Descrição Imagem Publicado em: Dia/mês/ano - hora Publicado por: Nome Mas eu gostaria que quando eu fisse a postagem fosse assim: Dia/mês/ano há 1 minuto, e assim por diante até chegar 24:00 horas, depois disso só mostra-se isso -> Publicado em: Dia/mês/ano há 1 dia, 2 dias, 3 dias e por diante até chegar o ano. 1 ano, 2 anos. Etc, alguém pode me explicar como fazer isso. Sei apenas publicar para que mostre a hora e data, mas não a contagem como expliquei. Agradeço quem ajudar. Um exemplo disso que expliquei está no anexo (print) que mandei..
  6. raphaelgs

    Sistema de previa da moldura de fotos

    Preciso de um sistema que o usuário do site, faça o upload das fotos dentro de uma moldura com três imagens, e que ele veja a Previa de como vai ficar depois disso conclua a comprar. Alguém conhece algum plugin ou que me ajude fazer um.
  7. manolegal

    Diminuir espaço vertical bootstrap

    Olá amigos Gostaria de diminuir o espaçamento entre linhas no bootstrap, porém não está funcionando. Tentei da seguinte forma: .form_cad form{ margin: 0!important; padding: 0!important;} .form_cad h3{ margin: 0!important; padding: 0!important;} .form_cad row { margin: 0!important; padding: 0!important;} .form_cad form-group{ margin: 0!important; padding: 0!important;} .form_cad input-group{ margin: 0!important; padding: 0!important;} .form_cad select{ text-align: left; margin: 0!important; padding: 0!important;} .form_cad label{ margin: 0!important; padding: 0!important;} .form_cad a{ margin: 0!important; padding: 0!important;} .form_cad button{ margin: 0!important; padding: 0!important;} Meu formulário: <div class="container-fluid"> div class="row-fluid"> <div class="col-md-10"> <h3 class="page-header">Meu Form</h3> <div class="row"> <form id="cadastro" class="form_cad" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>"> <div class="row"> <div class="form-group col-md-3 col-md-offset-2"> <label>Data Solicitação</label> <div class="form-group"> <div class='input-group date' id='cal'> <input class="form-control form_input_recebe_foco" type="text" id="data_solicitacao" name="data_solicitacao" required autofocus maxlength="10" value="" placeholder="(Obrigatório)"> <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span> </div> </div> </div> </div> <!-- /row --> <div class="row"> <div class="form-group col-md-3 col-md-offset-2"> <label for="qdade_horas">Quantidade Horas</label> <input class="form-control form_input_recebe_foco" type="text" id="qdade_horas_dec" name="qdade_horas" maxlength="5" required autocomplete="off" value=""> </div> </div> <!-- /row --> .......... O estilo css não está funcionando em relação a diminuir o espaçamento entre as linhas do formulário. O que preciso fazer?
  8. Clovis Alberto Block

    Hover com tamanhos diferentes no menu principal e submenus

    Olá amigos, Baixei o código de um "mega menu" e passei a adapta-lo às minhas necessidades. O problema que não consigo resolver é acertar os tamanhos do hover, nos menus secundários está ok, porem no menu principal o hover está maior do que cada item de menu, executando o código é fácil perceber, basta navegar no menu principal que o problema já é percebido. Tenho a impressão que o menu principal "herdou" dos menus secundários o tamanho do hover. Gostaria de deixar o tamanho do hover no menu principal proporcional ao comprimento de cada texto. Estou anexando os arquivos, inclusive nos mesmos deixei minhas tentativas de acerto em forma de comentários. Sou novo em HTML/CSS, então se virem código ruim, fiquem à vontade para opinar. Por favor, expliquem como se eu tivesse 08 anos rsrsrsr... P.S: Como faço para anexar meus arquivos fonte html e css3? Desde já agradeço. Clovis Alberto Block
  9. Madk

    Button fora de posicao

    Bom, estou tentando por a TAG button do "PEDIR" logo abaixo do PREÇO, mas ele nao esta ficando como se estivesse dentro da div onde o botei, so e movido por fora. Ele nao esta ficando em cima da Imagem. A div tem o tamanho e largura os mesmos que a Imagem, ja usei o float, botei a margin-top etc.. (esses margins 0, botei para testar, ver se ficaria no topo da imagem). Como posso deixar ele em baixo do preço. <div id="pizza1"> <a href="#"><img src="images/piz1.png"/></a> <button>PEDIR</button> </div> #pizza1 { height: 268px; width: 578px; background-color: white; margin-left:35px; } #pizza1 button{ float: auto; margin-top: 0px; margin-right: 0px; background-color: green; width: 203px; height: 53px; font-family: sans-serif; }
  10. Olá, boa tarde pessoal Eu estou criando uma página para o restaurante do meu padrasto, e como eu sou meio novo nesse mundo da criação web, eu estou tendo algumas dificuldades. O meu principal problema é que eu defini as posições dos elementos da página como "position: absolute;", e acho que por isso quando eu tento abrir a página em uma tela diferente ou quando eu minimizo a página o estilo dela não fica fixo, e isso é muito ruim. Na minha tela, com a janela maximizada, parece ótimo, mas quero deixar ótimo para qualquer resolução (a minha é de 1366x768). Vou aqui o código para vocês poderem dar uma olhada, e antes de nada, eu já vou dizendo que deve ter bastantes erros/redundâncias no código, mas ainda estou aprendendo. Obrigado, me ajudem por favor kkk HTML: <!DOCTYPE html> <html> <head> <title>MegaFome</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="mega.css"> </head> <body> <header class="topo"> <img id="marcatopo" src="megafome.jpg"><br><br> <div> <h1>COMA. SABOREIE. VIVA.</h1> <div class="historia"> <h2 id="know">CONHEÇA A HISTÓRIA DO MEGAFOME</h2> <a href="" id="botão">Por trás das cortinas</a> </div> <img > </div> </header> <div class="bg-img"></div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <div class="corpo"> <div id="first"> <img src="585ac04a4f6ae202fedf2938.png" id="fries"> <h1 id="firsth1">MONTE SEU PRÓPRIO BURGER</h1><br><br><br><br> <p id="firstp">Cansado de que outros montem o seu hambúrguer?<br>Cansado de ter que escolher sempre as mesmas opções?<br>Agora você pode montar do SEU jeito</p> </div> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <div id="second"> <img id="burgerpic" src="burgers-large.png"> <h1 id="secondh1">CHEGOU O MEGAFOME</h1> <p id="secondp">A burgueria onde você decide o hambúrguer que você mais ama</p> </div> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <div id="third"> <img id="molhos" src="545884.png"> <h1 id="thirdh1">FAÇA DO JEITO QUE VOCÊ GOSTA</h1> <ul id="list"> <li>ESCOLHA A CARNE</li> <li>DEFINA O TAMANHO</li> <li>ADICIONE O QUE VOCÊ MAIS GOSTA</li> <li>OPTE PELO SEU PÃO FAVORITO</li> <li>ACRESCENTE OS ACOMPANHAMENTOS <b>QUE VOCÊ QUISER</b></li> </ul> </div> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <div id="fourth"> <img id="marca" src="garantia.png"> <h1 id="fourthh1">E... PRONTO!</h1> <h2 id="fourthh2">DESFRUTE DO MELHOR BURGER<br>QUE JAMAIS HAVIA IMAGINADO</h2> </div> </div> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <div class="footer"> <h3 id="seguir">SIGA-NOS</h3> <a target="_blank" href="https://www.facebook.com/pointdasdeliciasburgueria/?ref=br_rs"><img id="face" src="facebook_circle-512.png"></a> <div class="box"></div><div class="linha"></div> <h3>MAIS SOBRE MEGAFOME</h3> <div class="form"> <form action="http://scripts.redehost.com.br/formmail.aspx" method="post"> <input type=hidden name="destino" value="hipnoterapiamaciel@gmail.com"> <div> <label for="name">Nome:</label> <input type="text" id="name" /> </div> <div> <label for="mail">E-mail:</label> <input type="email" id="mail" /> </div> <div> <label for="msg">Mensagem:</label> <textarea id="msg"></textarea> </div> <div class="button"> <button type="submit">Enviar sua mensagem</button> </div> </form> </div> </div> </body> </html> ______________________________________ CSS: body { background-color: #e6e6e6; font-family: Verdana; color: #b90000; } .topo { text-align: center; } #marcatopo { position: absolute; left: 3%; border-radius: 100px; width: 15%; opacity: 1; } h1 { font-size: 47px; font-weight: bold; -webkit-transition: 3s ease-out; -moz-transition: 3s ease-out; -o-transition: 3s ease-out; transition: 3s ease-out; } .bg-img { background: url('./burguercapa.png'); position: absolute; left: 0px; right: 0px; z-index: -1; background-size: cover; background: linear-gradient(to top, rgba(255, 225, 255, 0) 50%, #e6e6e6), url(burguercapa.png); background-size: cover; height: 100%; width: 100%; } #botão { text-decoration: none; position: absolute; border: 1px solid #ffcc00; width: 20%; font-size: 20px !important; left: 76%; font-weight: lighter; border-radius: 15px; bottom: 9px; color: white !important; background-color: yellow; -moz-border-radius: 8px; -webkit-border-radius: 8px; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffcc00), color-stop(100%,#ff6600)) !important; background: -webkit-linear-gradient(top, #ffcc00, #ff6600) !important; background: -moz-linear-gradient(top, #ffcc00, #ff6600) !important; background: -ms-linear-gradient(top, #ffcc00, #ff6600) !important; background: -o-linear-gradient(top, #ffcc00, #ff6600) !important; } #botão:hover { border: 1px solid #ff6600; background: #ff6600 !important; -webkit-transition: 0.5s ease-in; -moz-transition: 0.5s ease-in; -o-transition: 0.5s ease-in; transition: 0.5s ease-in; } .historia { border: solid; border-width: thin; border-color: darkred; box-shadow: 10px 10px 20px; width: 45%; position: relative; left: 22%; padding-right: 140px; height: 68px; border-radius: 25px; } #first { position: absolute; text-align: right; color: white !important; background: #e60000 !important; width: 100%; left: 0px; right: 0px; height: 60%; } #firsth1 { position: absolute; right: 25px; } #firstp { text-align: justify !important; position: absolute; font-style: italic; font-size: 22px !important; right: 85px; bottom: 120px; } #fries { position: absolute; left: 30px; right: 80px; width: 40%; bottom: 100px; } #second { position: absolute; background: #ff9900 !important; width: 100%; left: 0px; right: 0px; height: 60%; top: 189%; color: white !important; } #burgerpic { position: absolute; right: 0px; width: 50%; bottom: 40px; } #secondh1 { position: absolute; left: 25px; } #secondp { text-align: justify !important; position: absolute; font-style: italic; font-size: 22px !important; left: 30px; bottom: 145px; } #third { position: absolute; text-align: right; color: white !important; background: #4d79ff !important; width: 100%; left: 0px; right: 0px; height: 60%; } #thirdh1 { position: absolute; right: 25px; } #list { text-align: justify !important; position: absolute; font-style: italic; font-size: 22px !important; right: 85px; bottom: 120px; } #molhos { position: absolute; left: 30px; right: 80px; width: 30%; bottom: 100px; } #fourth { position: absolute; background: #66ff99 !important; width: 100%; left: 0px; right: 0px; height: 60%; top: 308.5%; color: white !important; } #fourthh1 { position: absolute; left: 25px; } #fourthh2 { text-align: justify !important; position: absolute; font-style: italic; left: 160px; bottom: 140px; } #marca { position: absolute; right: 70px; width: 50%; bottom: 100px; } .box { width: 50%; float: left; height: 200px; } .linha { border-left: 2px solid ; box-sizing: border-box; } #seguir { position: absolute; bottom: -284%; left: 100px; } #face { position: absolute; width: 4%; margin-top: 4%; left: 7%; } .form { margin-bottom: 20%; } #name { box-sizing: } form { right: 20%; position: absolute; width: 400px; padding: 1em; border: 1px solid #CCC; border-radius: 1em; } form div + div { margin-top: 1em; } label { display: inline-block; width: 90px; text-align: right; } input, textarea { font: 1em sans-serif; width: 300px; -moz-box-sizing: border-box; box-sizing: border-box; border: 1px solid #999; } input:focus, textarea:focus { border-color: #000; } textarea { vertical-align: top; height: 5em; resize: vertical; } .button { padding-left: 90px; } button { margin-left: .5em; }
  11. marcelocardoso

    jquery slideUP + Hide

    GALERA! Tenho um script que estou desenvolvendo para exibir em determinada SCROLL somente. Até ai, td bem... porém, depois que o SCROLL sobe novamente, o código não aceita mais o CLICK. (onde deve estar o ERRO no JQUERY). CODE JQUERY>>> <script type="text/javascript"> jQuery(document).ready(function() { $(window).scroll(function() { nScrollPosition = $(window).scrollTop(); if (nScrollPosition > 3300) { $("#box_slidetop").fadeIn(); $("#box_slidetop").hover(function() { $("#box_slidetop_extra").animate({ bottom: '50px' }, 200); }, function() { $(this).animate({ bottom: '50px' }, { duration: 800, easing: 'easeOutBounce' }); }); } else { $("#box_slidetop, #box_slidetop_extra").fadeOut(); } }); }); </script> CODE HTML>>> <div id="box_slidetop" class="" style="display: none;"> <div class="text-center space_bottom10 space_top20 d-none d-sm-block"> <p class="text-center"> <b>AJUDE ESTA CAUSA, PROGRAMADORES...!</b> </p> </div> </div> <div id="box_slidetop_extra"> <div class="col-md-10 offset-1 text-center space_top20 space_lr40"> <form method="post" class="form-white" action="form/acoes.asp"> <div class="col-md-5 pull-left"> <input type="text" class="form-control" id="campo_nome" name="campo_nome" placeholder="Digite seu nome" required> </div> <div class="col-md-6 pull-left"> <input type="email" class="form-control" id="campo_email" name="campo_email" placeholder="Digite seu email" required> </div> <div class="col-md-1 pull-left"> <button type="submit" class="btn btn-md btn-primary">ENVIAR</button> </div> </form> </div> </div> OBS: O script ao descer o SCROLL aparece uma barra na tela (#BOX_SLIDETOP) depois de aparecer, você passa o mouse em cima (HOVER) abre o (#BOX_SLIDETOP_EXTRA), aí some o #BOX_SLIDE e fica somente o BOX_SLIDE_EXTRA. depois quando retorno o scroll novamente para cima, ele some, depois se VOLTO para a posição onde aparece a DIV, ele não executa mais a AÇÃO DO JQUERY. Se conseguirem me dar uma luz no JQUERY, agradeço. Obrigado.
  12. alysson122010

    Ordem de Widget e corpo do site versão mobile

    Gente estou com um problema, esse meu site http://enjoeiseoficial.com.br/entrar/ em versão mobile está mostrando primeiro os widgets ao invés do form de login. Como resolver isso??
  13. Carcleo

    Falha ao final do slide show

    Estou tentando fazer um slide show personalizado para fins de aprendizagem. Avancei bastante já. Porém estou tendo um erro do qual não estou conseguindo me livrar. O slide corre bem, mas quando chega na ultima imagem, ele acha uma imagem em branco e bota ela no lugar em que deveria ser exibida a primeira imagem novamente. Cada imagem do slide tem uma legenda feito com um label e ambos dentro de uma div. O link abaixo mostra o slide em funcionamento. http://funerariasaopedro.net.br/novo/index6.php Vou postar abaixo o código completo. Se alguém puder me ajudar desde já agradeço. CSS <style> * { margin: 0; padding: 0; } .fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; } div.slider { overflow: hidden; position: relative; width: 100vw; height: 300px; } div.slider:hover { animation-play-state: paused; } div.slider > div.slide { display: none; position: absolute; top: 0; left: 0; width: 100%; height: auto; } div.slider div.slide img { width: 100%; } div.slider div.ativa { display: block; } div.slider div.ativa img { animation: slider 1s linear; animation-fill-mode: forwards; } div.slider div.ativa img:hover { -moz-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s; } @keyframes slider { 0% { transform: scale(1); } 100% { transform: scale(1.1); } } @-webkit-keyframes fade { from { opacity: .4 } to { opacity: 1 } } @keyframes fade { from { opacity: .4 } to { opacity: 1 } } div.slider div.slide span { position: absolute; width: 100%; line-height: 40px; bottom: 0; z-index: 500; color: rgb(255,255,255); text-align: center; } div.slider nav { position: absolute; bottom: 0; width: 100%; height: 40px; background-color: rgb(0, 0, 0, .5); z-index: 400; text-align: center; } div.slider nav button.anterior, div.slider nav button.proximo { position: absolute; width: 100px; height: 40px; text-align: center; } div.slider nav button.anterior { left: 10%; } div.slider nav button.proximo { right: 10%; } div.slider nav button.proximo label { top: calc(50%-20px); } </style> JAVASCRIT <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script> $(document).ready(function(e) { //$("div.slider").height($("div.slider div.slide").height()) const blocos = $("div.slider div.slide"); function startslider() { ativa = $("div.slider div.ativa") if (!$(ativa).next().length) { ativa = blocos[0] } $(ativa) .removeClass("ativa") .next() .addClass("ativa") setTimeout(startslider, 5000) } setTimeout(startslider, 5000) $("nav button.anterior").click(function(){ prev = $("div.slider div.ativa").prev(); // alert (blocos.length); prev = prev.length ? prev : blocos[ blocos.length - 1 ]; mostraBloco(prev); }) $("nav button.proximo").click(function(){ next = $("div.slider div.ativa").next(); next = next.length ? next : blocos[0]; mostraBloco(next); }) /* Função para exibir as imagens */ function mostraBloco(next) { ativa = $("div.slider div.ativa") $(ativa).removeClass("ativa") $(next).addClass("ativa") } }); </script> HTML <div class="slider"> <div class="slide fade ativa"> <img src="_img/_banner/_site/bg_1.jpg" /> <span>Este é 1</span> </div> <div class="slide fade"> <img src="_img/_banner/_site/bg_2.jpg" /> <span>Este é 2</span> </div> <div class="slide fade"> <img src="_img/_banner/_site/bg_3.jpg" /> <span>Este é 3</span> </div> <nav> <button class="anterior">Anterior</button> <button class="proximo">Próximo</button> </nav> </div>
  14. Carlos Amendola

    ajuda bootstrap css

    Olá pessoal boa tarde estou corrigindo algumas falhas no site http://dev.maples.com.br/sardenberg/. logo no inicio do site , temos a apresentação de 3 posts. Um que pega 8 colunas e outros 2 que pegam o tamanho de 4 colunas cada. os menores devem ficar um abaixo do outro e ao lado esquerdo do maior, de forma alinhada. por alguma razão esses dois estão como se estivessem na mesma row, só que preciso que um fique abaixo do outro e os dois alinhados ao lado do post maior. se eu fizer uma outra row entre eles este segundo não irá para baixo do bloco? preciso de uma orientação abraços
  15. Tenho um site estático em HTML (site), e um blog em Wordpress em um subdiretório desse site (blog). Fiz download de um tema para esse blog e fui customizando para que o header e o footer fiquem iguais ao site, linquei todos os links (CSS, JS) corretamente, estaria tudo certo se não fosse pelo Menu principal do header. Como vocês podem ver pelos links ele está desconfigurando no blog. Já passei horas inspecionando tudo e não consigo achar a solução. Acredito que alguma parte do CSS ou do JS do tema que baixei está interferindo nele, mas não consigo identificar o(s) erro(s). Por isso peço a ajuda de alguém com mais experiência e agradeço muito a atenção desde já!
  16. Carlos Web Soluções Web

    CSS Dropdown Menu - Adicionar lista ao lado de um link !

    Olá !! Seguindo as instruções do site 'W3Schools', criei um menu dropdown em javascript, como mostra o link abaixo: http://www.terezanininha.com.br/Exemplo_proprio_4.html Só que eu queria, por exemplo, após clicar no botaõ e mostrar a lista, ao passar o mouse no link 'Link2' por exemplo, aparecesse outra lista no lado direito com mais novas opções de links !! Como fazer isso ?? Noa guardo Desde já, obrigado !
  17. Rogerio Pancini

    Gráfico em css ou jquery

    Boa noite pessoal. Será que é possível criar uma gráfico assim com jquery, html ou css? Na verdade, acho que o problema seria criar as setas. Se alguém já fez algo do tipo e puder dar uma luz, eu agradeço.
  18. William Rett

    Deletar e atualizar

    boa noite estou com uma duvida no seguinte aspecto estou tentado fazer um sistema de cadastro porem queria fazer na consulta tanto atualizar como excluir , porem mesmo quebrando cabeça não consigo fazer funcionar e isso ja esta me deixando doido um amigo me recomendou o fórum a algum tempo atras ja li algumas matérias aqui e hj vim pedir ajuda de vocês vou colocar uma foto do que quero fazer e anexar o código tb. CÓDIGO ABAIXO ,ate comentei umas partes pra mostrar o que estava tentado fazer . <?php include_once("conexao.php"); $filtro =isset($_GET['filtro'])?$_GET['filtro']:""; $sql="select * from usuarios where nome like '%$filtro%' order by nome"; $consulta=mysqli_query($conexao,$sql); $registros=mysqli_num_rows($consulta); /*tentado fazer o delete no botao*/ $deleta=isset($_GET['deleta'])?$_GET['deleta']:""; $sql2="DELETE FROM usuarios WHERE codigo == deleta"; $consulta2=mysqli_query($conexao,$sql2); ?> <!doctype html> <html> <head> <meta charset="utf-8"> <title>Home</title> <link rel="stylesheet" type="text/css" href="css/estilo3.css"> </head> </body> <div class="container"> <nav> <ul class="menu"> <a href="Cadastro.php"><li><img src="img/add.png" height="50px" width="50px"></li></a> <a href="consultas.php"><li><img src="img/consultar.png" height="50px" width="50px"></li></a> </ul> </nav> <section> <h1 class="t">Consultas de Cadastro</h1> <form method="get" action="" class="f"> <label for='filtro' class='c2'>Filtrar por Nome </label><input type="text" id="filtro" name="filtro" class="campo2" required autofocus /> <input type="submit" value="Pesquisar" class="btn"/> </form> <?php print "<br><p class='txt'>Resultado da pesquisa com a palavra <strong>nome:$filtro</strong></p>"; print"<br>"; print "<br><p class='txt'>Numero de Clientes : $registros clientes encontrados.</p>"; print"<br>"; print"<br>"; while ( $exibirRegistros= mysqli_fetch_array($consulta)) { $codigo = $exibirRegistros[0]; $nome = $exibirRegistros[1]; $email = $exibirRegistros[2]; $senha = $exibirRegistros[3]; $telefone= $exibirRegistros[4]; $endereco= $exibirRegistros[5]; print"<article>"; print"<label for='Codigo' class='abc'>Codigo:</label> <input type='text' id='Codigo' value='$codigo' placeholder='$codigo' disabled='disabled' class='campo'/><br>"; print"<label for='Nome' class='abc'>Nome:</label><input type='text' id='Nome' value='$nome' placeholder='$nome' disabled='disabled' class='campo'/><br>"; print"<label for='email' class='abc'>E-mail:</label><input type='text' id='email' value='$email' placeholder='$email' disabled='disabled' class='campo'/><br>"; print"<label for='senha' class='abc'>senha:</label> <input type='text' id='senha' value='$senha' placeholder='$senha' disabled='disabled' class='campo'/><br>"; print"<label for='telefone' class='abc'>telefone:</label><input type='text' id='telefone' value='$telefone' placeholder='$telefone' disabled='disabled' class='campo'/><br>"; print"<label for='endereco' class='abc'>Endereço:</label><input type='text' id='endereco' value='$endereco' placeholder='$endereco' disabled='disabled' class='campo'/><br>"; /* form pra gerar o get pra conseguir puxar o Delete*/ print"<form method='get' action=''>"; /* Id deleta , name deleta , value daleta*/ print"<input type='submit' value='deleta' name='deleta' class='btn2' onclick='($codigo)'/>"; print"</form>"; print"<input type='submit' value='Alterar' class='btn2'/>"; print"</article>"; } mysqli_close($conexao); ?> </section> </div> </html>
  19. Erik Etsuji Kato

    Bug do HTML sendo transferido para os arquivos externos

    Bom dia galera do fórum imasters. Bom é o seguinte: Eu estou construindo um site completo usando HTML, CSS, JS e PHP, apenas para fim de estudos (por enquanto), e de repente me deparo com um bug que eu não sei nem como descrever... o quando eu uso qualquer arquivos externo (css, js, mp4, etc), o html da pagina principal vai pra dentro dele, e o navegador buga, só que o arquivo original fica tudo certo! Eu já apaguei todo o projeto e comecei do zero, porém ainda continua o bug!!!!!!!! Segue uma print do depurador do Chrome com o arquivo .mp4 (que existe), como parte do html da pagina principal dentro dele, eu juro que não entendi :/ . Desde já agradeço!
  20. Vitor Leite

    Centralizar texto verticalmente

    Oi pessoal. Boa tarde! Estou tentando alinhar o texto verticalmente em uma DIV, porém sem sucesso. Do lado direito, onde temos um badge escrito 12 até consigo com line-height, porque o height é especificado. Porém do lado esquerdo escrito nível não sei como fazer, pois não tenho um height especificado. Alguem pode me ajudar? Obrigado, bom final de semana e feriado! :) Código HTML <div id="stats"> <div id="nivel"><h2>NÍVEL: <span class="badge">12</span></h2></div> </div> Código CSS: #stats { width:960px; margin:0px auto 10px auto; } #stats h2, #stats span { margin:0; font-family: 'Open Sans Condensed', sans-serif; font-size:22px; color:#FFF; font-weight: 300; } #nivel { width:250px; display:inline-block; border-radius:5px; border:2px solid #1b252e; padding:5px 15px 5px 15px; box-sizing: border-box; text-align: left; } .badge { width:40px; height:50px; background-color:#6c9cbb; border-radius:30px; text-align: center; text-shadow: 1px 1px 4px #000; border:3px solid #2F556E; } #stats span { float:right; }
  21. programadorweb2016

    texto dentro do search

    Boa tarde pessoal, ja fiz de tudo para encontrar o texto que fica dentro do search http://prntscr.com/jaxzep desse tema e não encontrei http://demo.sparklewpthemes.com/sparklestore/shop/ Queria encontrar para poder alterar pq esta em ingles, se alguem tiver alguma ideia de onde fica ficarei muito grato.
  22. Felipe Medeiross

    Ajuda para criar formulario para impressao

    E aí galera! Eu tenho pouca experiencia com isso e como nao achei nada semelhante na internet ao que eu pretendo fazer, então fica dificil fazer sem alguma ajuda. O que eu quero fazer é uma pagina simples em html. Nessa pagina deve ter um formulario que pega os dados do usuario ao preencher o formulario. Esses dados serão usados apenas para impressao e não será armazenado. Ou seja, quando o usuario clicar em "imprimir" todos os dados do formulário será impresso e os dados serão perdidos. Quero fazer isso usando apenas javascript, css e html. Se for necessario usar outra linguagem que não seja necessario um servidor tudo bem. Eu gostaria de uma sugestão de como fazer esse processo de enviar os dados para ser impressos.
  23. Zecaspider

    Formatação condicional html css Javascript

    Olá pessoal, preciso fazer com que os valores numéricos de uma tabela html sejam mostrados de forma condicionada, por exemplo todos os valores abaixo de 10 sejam mostrados à vermelho, e os valores acima sejam mostrados à azul. Alguém sabe alguma forma em css ou Javascript para o efeito? Espero ter sido claro a explicar , e agradeço toda a ajuda possível.
  24. Alanartes

    Efeito fade na transição de background

    Tenho esse script que fica trocando as imagens do backgraund, agora quero criar um efeito fade, abaixo tenho um css que faz isso numa página, alguém pode dar uma dica: Script funcionado: <script type="text/javascript">// <![CDATA[ var imageCount = 0; var currentImage = 0; var images = new Array(); images[0] = 'fotos/1.png'; images[1] = 'fotos/2.png'; images[2] = 'fotos/3.png'; images[3] = 'fotos/4.png'; images[4] = 'fotos/5.png'; var preLoadImages = new Array(); for (var i = 0; i < images.length; i++) { if (images[i] == "") break; preLoadImages[i] = new Image(); preLoadImages[i].src = images[i]; imageCount++; } function startSlideShow() { if (document.body && imageCount > 0) { document.body.style.backgroundImage = "url("+images[currentImage]+")"; document.body.style.backgroundAttachment = "fixed"; document.body.style.backgroundRepeat = "no-repeat"; document.body.style.backgroundPosition = "center center"; document.body.style.backgroundSize = "100% 100%"; currentImage = currentImage + 1; if (currentImage > (imageCount-1)) { currentImage = 0; } setTimeout('startSlideShow()', 3000); } } startSlideShow(); // ]]></script> Efeito CSS desejado: @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes fadeIn { 0% { opacity: 0;} 100% { opacity: 1; } } @-o-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .fadeIn { -webkit-animation: fadeIn 3s ease-in-out; -moz-animation: fadeIn 3s ease-in-out; -o-animation: fadeIn 3s ease-in-out; animation: fadeIn 3s ease-in-out; }
  25. Bom Dia! Tenho a seguinte página <!doctype html> <html> <head> <meta charset="utf-8"> <title>Slider</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="_css/aos.css"> <link rel="stylesheet" type="text/css" href="_css/jquery.cycle2.css"> <script type="text/javascript" src="_js/jquery.js"></script> <script type="text/javascript" src="_js/jquery.cycle2.min.js"></script> <style> @import url('http://fonts.googleapis.com/css?family=Open+Sans'); * { font-family: 'Open Sans'; margin: 0; padding: 0; box-sizing: content-box; } img { border: 0; max-width: 100%; } ul { list-style: none; } ul li { display: inline; } .aos-all { width: 1000px; max-width: 98%; margin: 10vh auto 0 auto; } .aos-item { display: inline-block; float: left; width: 40%; height: 300px; padding: 20px; } .aos-item__inner { position: relative; width: 100%; height: 100%; float: left; background: #1da4e2; line-height: 260px; text-align: center; color: #fff; } @media screen and (max-width: 800px) { .aos-item { width: 50%; } } .logo { width : 432px; -webkit-animation : logo-anim 1s; -moz-animation : logo-anim 1s; -o-animation : logo-anim 1s; animation : logo-anim 1s; } @-webkit-keyframes logo-anim { 0% { opacity : 0; transform : translateY(-50px); -webkit-transform : translateY(-50px); -moz-transform : translateY(-50px); -o-transform : translateY(-50px); -ms-transform : translateY(-50px); } 100% { opacity : 1; transform : translateY(0px); -webkit-transform : translateY(0px); -moz-transform : translateY(0px); -o-transform : translateY(0px); -ms-transform : translateY(0px); } } @-moz-keyframes logo-anim { 0% { opacity : 0; transform : translateY(-50px); -webkit-transform : translateY(-50px); -moz-transform : translateY(-50px); -o-transform : translateY(-50px); -ms-transform : translateY(-50px); } 100% { opacity : 1; transform : translateY(0px); -webkit-transform : translateY(0px); -moz-transform : translateY(0px); -o-transform : translateY(0px); -ms-transform : translateY(0px); } } @-o-keyframes logo-anim { 0% { opacity : 0; transform : translateY(-50px); -webkit-transform : translateY(-50px); -moz-transform : translateY(-50px); -o-transform : translateY(-50px); -ms-transform : translateY(-50px); } 100% { opacity : 1; transform : translateY(0px); -webkit-transform : translateY(0px); -moz-transform : translateY(0px); -o-transform : translateY(0px); -ms-transform : translateY(0px); } } @keyframes logo-anim { 0% { opacity : 0; transform : translateY(-50px); -webkit-transform : translateY(-50px); -moz-transform : translateY(-50px); -o-transform : translateY(-50px); -ms-transform : translateY(-50px); } 100% { opacity : 1; transform : translateY(0px); -webkit-transform : translateY(0px); -moz-transform : translateY(0px); -o-transform : translateY(0px); -ms-transform : translateY(0px); } } .logo-atividades { position : absolute; top : 0; center : 0; width : 100%; height : 500px; text-align : center; overflow : hidden; z-index : 20; } .atividades { color : #FFF; height : 115px; overflow : hidden; position : absolute; top : 80%; margin-top : -176px; width : 100%; pointer-events : none; text-align : center; z-index : 10; } .atividades a { text-decoration : none; } .atividades ul { list-style : none; padding : 0; margin : 10px 0 0; position : relative; height : 100px; font-size : 36px; font-weight : 300; text-align : center; font-family : 'Lato', sans-serif; letter-spacing : 5px; text-transform : uppercase; z-index : 100; } .atividades ul li { width : 100%; text-align : center; position : absolute; opacity : 0; top : 85px; line-height : 100px; -webkit-transition : all 0.5s ease-in-out; -moz-transition : all 0.5s ease-in-out; -o-transition : all 0.5s ease-in-out; transition : all 0.5s ease-in-out; transition-timing-function : ease; -webkit-transition-timing-function : ease; /* Safari and Chrome */ } .atividades ul li.ativa { opacity : 1; top : 0; -webkit-transition : all 1s ease-in-out; -moz-transition : all 1s ease-in-out; -o-transition : all 1s ease-in-out; transition : all 1s ease-in-out; transition-timing-function : ease; -webkit-transition-timing-function : ease; /* Safari and Chrome */ } } </style> </head> <body> <div class="cycle-slideshow" data-cycle-fx=fadeout data-cycle-timeout=5000 data-cycle-pause-on-hover="true" data-cycle-slides="div.slide"> <div class="logo-atividades"> <div style="margin-top: 100px;"> <a href="http://www.funerariasaopedro.net.br"> <img class="logo" src="_img/logoFuneraria.png" alt="Logo"/> </a> <div class="atividades"> <ul> <li class="ativa">Agência Funerária</li> <li>Funerais</li> <li>Cremações</li> <li>Trasladações</li> <li>Tanatopraxias</li> <li>Exumações</li> <li>Artigos Religiosos</li> <li>Atendimento 24h</li> </ul> </div> </div> </div> <!-- prev/next links --> <div class="cycle-prev"></div> <div class="cycle-next"></div> <div class="cycle-pager"></div> <div class="slide"> <img src="_img/_banner/_site/1.png" /> </div> <div class="slide"> <img src="_img/_banner/_site/2.png" /> </div> <div class="slide"> <img src="_img/_banner/_site/3.png" /> </div> <div class="slide"> <img src="_img/_banner/_site/4.png" /> </div> </div> <div class="aos-item" data-aos="fade-right"> <div class="aos-item__inner"> <h3>Esquerda</h3> </div> </div> <div class="aos-item" data-aos="fade-left"> <div class="aos-item__inner"> <h3>Direita</h3> </div> </div> <div class="aos-item" data-aos="fade-up"> <div class="aos-item__inner"> <h3>Baixo Cima</h3> </div> </div> <div class="aos-item" data-aos="fade-down"> <div class="aos-item__inner"> <h3>Cima Baixo</h3> </div> </div> <div class="aos-item" data-aos="fade-in"> <div class="aos-item__inner"> <h3>Baixo Cima</h3> </div> </div> <div class="aos-item" data-aos="fade-in"> <div class="aos-item__inner"> <h3>Cima Baixo</h3> </div> </div> <script> function homeTitleAnimation(){ var interval; var counter = 1; var myFunc = function() { var cur = $('.atividades ul li').length; if(cur == counter) { $('.atividades ul li.ativa').removeClass('ativa'); $('.atividades ul li').first().addClass('ativa'); counter = 1; } else { counter++; $('.atividades ul li.ativa').removeClass('ativa').next().addClass('ativa'); } }; interval = setInterval(myFunc, 4000); } homeTitleAnimation(); </script> <script src="_js/aos.js"></script> <script> AOS.init({ easing: 'ease-in-out-sine' }); </script> </body> </html> Tudo funciona corretamente com exceção do posicionamento da logo e da ul que rodam sobre o Slideshow que não estou conseguindo posiciona-los sobre o Slideshow. <div class="cycle-slideshow" data-cycle-fx=fadeout data-cycle-timeout=5000 data-cycle-pause-on-hover="true" data-cycle-slides="div.slide"> <div class="logo-atividades"> <div style="margin-top: 100px;"> <a href="http://www.funerariasaopedro.net.br"> <img class="logo" src="_img/logoFuneraria.png" alt="Logo"/> </a> <div class="atividades"> <ul> <li class="ativa">Agência Funerária</li> <li>Funerais</li> <li>Cremações</li> <li>Trasladações</li> <li>Tanatopraxias</li> <li>Exumações</li> <li>Artigos Religiosos</li> <li>Atendimento 24h</li> </ul> </div> </div> </div> <!-- prev/next links --> <div class="cycle-prev"></div> <div class="cycle-next"></div> <div class="cycle-pager"></div> <div class="slide"> <img src="_img/_banner/_site/1.png" /> </div> <div class="slide"> <img src="_img/_banner/_site/2.png" /> </div> <div class="slide"> <img src="_img/_banner/_site/3.png" /> </div> <div class="slide"> <img src="_img/_banner/_site/4.png" /> </div> </div> Onde estou errando? Esse código pode ser visto em : http://funerariasaopedro.net.br/novo/ Na página, se derem um ctr+a, poderão notar no canto direito e abaixo do slide, a ul rodando normalmente. Porém a posição correta dela é no meio do slide e ao centro. Com relação à logomarca que está escondida atrás do slide, sua posição é acima do slide e acima da ul
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.