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

  • Programação & Desenvolvimento
    • ASP
    • PHP
    • .NET
    • Java
    • C, C++
    • Delphi, Kylix
    • Lógica de Programação
    • Mobile
    • Visual Basic
    • Outras Linguagens de Programação
  • WEB
    • HTML, XHTML, CSS
    • Ajax, JavaScript, XML, DOM
    • Editores
  • Arte & Design
    • Corel Draw
    • Fireworks
    • Flash & ActionScript
    • Photoshop
    • Outros Programas de Arte e Design
  • Sistemas Operacionais
    • Microsoft Windows
    • GNU/Linux
    • Outros Sistemas Operacionais
  • Softwares, Hardwares e Redes
    • Microsoft Office
    • Softwares Livres
    • Outros Softwares
    • Hardware
    • Redes
  • Banco de Dados
    • Access
    • MySQL
    • PostgreSQL
    • SQL Server
    • Demais Bancos
  • Segurança e Malwares
    • Segurança
    • Remoção De Malwares
  • Empregos
    • Vagas Efetivas
    • Vagas para Estágios
    • Oportunidades para Freelances
  • Negócios & Oportunidades
    • Classificados & Serviços
    • Eventos
  • Geral
    • Avaliações de Trabalhos
    • Links
    • Outros Assuntos
    • Entretenimento
  • Script Brasil
    • Novidades e Anúncios Script Brasil
    • Mercado Livre / Mercado Sócios
    • Sugestões e Críticas
    • Apresentações

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

Found 214 results

  1. Olá....como vão ?? Eu peguei um CSS Multi-Level Menu como modelo na internet, e gostaria de fazer uma modificação !! O menu (no link abaixo) sem estar no Responsive está ocupando mais ou menos a metade da tela. Eu gostaria que ocupasse 100% !! Tentei fazer tal modificação por conta mas não consegui !! Link => CSS Multi-level Menu Alguém por favor poderia me dar uma ajuda ?? Desde já obrigado Carlos
  2. Olá pessoal !! Estou desenvolvendo um menu em CSS, e eu gostaria de colocá-lo no CSS Responsive: @media screen and (max-width: 800px) { } O link do menu de como está atual se encontra em: MENU LINK e o que eu desejo alcançar é: MENU RESPONSIVE LINK Por favor me ajudem.....abraço !!
  3. Boa tarde amigos, estou batendo a cabeça em uma questão de css, que não é nem de longe o meu forte... quero colocar umas bandeirinhas de backgroudo de uma div, porem não consigo faze-las ficarem lado a lado... background: url("be.png") no-repeat , url("us.png") no-repeat, url("au.png") no-repeat, url("br.png") no-repeat, url("ca.png") no-repeat, url("de.png") no-repeat, consigo repetir, mas quando é para colocar lado a lado ão funciona, o que devo substituir o no-repeat ali? muito obrigado!
  4. Esta é minha primeira pergunta aqui no fórum, estou tentando montar um site mas está acontecendo esse erro não sei porque quem puder ajudar ficaria muito agradecida segue o codigo: <!DOCTYPE html> <html lang="pt-br"> <head> <link rel="stylesheet" type="text/css" href="./css/main.css"> <meta charset="utf-8"/> <title>Primeiro projeto</title> </head> <body> <header class="menu principal"> <div class="header-1"> <div class="logo"> <img src="./img/logo loja certo.png"/> </div> <div class="redes sociais"> </div> </div> </header> </body> </html> css: .header-1{ background-color: #c77234; height: 60px; width: 100%; }
  5. Olá, comecei meus estudos em HTML e CSS a pouco tempo, eu começar isso pra mais depois, e aqui estamos enfim...sou bem novato é HTML e CSS então pf paciência porque vão prescisar...vou pular tudo isso e chegar logo na questão, na maioria dos sites tem uma função que quando você coloca o mouse em cima aparece outras coisas, aqui por exemplo se você colocar o mouse em cima da "navegações" e depois por em cima das "atividades" vai aparecer outras informações, como q faço isso?
  6. Tenho um trabalho para entregar amanhã (Curso - sou iniciante), porém estou com um problemas, porque a imagem que eu coloquei no Section está sobrepondo o meu Header quando eu rolo a página. Qual comando posso utilizar para deixar ela em "segundo plano"? A imagem era para estar abaixo da parte preta
  7. Boa tarde, tenho um desafio para cumprir e estou meio perdido, preciso criar uma vitrine semelhante a que está em anexo, porém não posso usar nenhum framework tem que ser tudo na unha, vi algumas coisas sobre carousel para fazer aquele tipo ali de aplicação, porem percebi que ali só conseguir botar imagens, e infelizmente não estou conseguindo fazer algo nem perto de semelhante a imagem anexada. Obs: o retrono do serviço ele é em JSON. Alguma dica de como iniciar essa vitrine? desde já agradeço a atenção de todos.
  8. <!doctype html> <html lang="pt-br"> <head> <title>titulo</title> <meta name="author" content="eu sinho - 17/03/2019"/> <meta name="description" content="Um jogo sobre empreendimento"/> <meta name="keywords" content="jogo, logica, raciocinio, historia"/> <meta charset="utf-8"/> <link rel="stylesheet" type="text/css" href="stilus.css"/> </head> <body> <h1 id="titulus">testanoooo</h1> <hr/> </body> <script type="text/javascript" src="scriptis.js" charset="utf-8"></script> </html> alert("seja bem vindo!!"); @charset "utf-8"; .titulus{ font-weight: bolder; } Quando eu carrego pela primeira vez no browser ele aparece normal, mas quando recarrego ele fica uma tela preta, tentei tirar o alert e resolveu o problema, será que é isso? Porque isso acontece? Sou bem iniciante nessa área web, então toda ajuda é bem vinda.
  9. Boa noite galera! Estou com o seguinte problema, estou criando uma página em que essa página o usuário escolhe um arquivo do pc, que será o layout do seu crachá, o layout aparece na tela sem texto nenhum e o usuário pode colocar tags como: {{nome}} {{funcao}} e etc. Só que não tem idéia de como fazer pra "editar" esse arquivo pela página, ou seja colocar os dados que ele digitar no layout do crachá. Não sei se é possivel editar esse arquivo png(ou psd), já pesquisei muito a respeito e não achei uma solução parar gerar esses crachás. Não precisa me dar algum código pronto, quero pelo menos uma luz, uma ferramenta que seja possível fazer isso. Obrigado!
  10. alguém pra me tirar uma duvida que está incomodando e muito. Bom, trabalhamos com Binario em matriz multinivel, temos uma "Arvore" como exemplo em nosso site, porém ela não fica da mesma forma quando vista do celular e a web já está responsiva, ou seja já está programada pra computador ou celular, tablets etc. Esta é a imagem do computador: no celular, fica assim: Algo está errado, ela fica toda desmontada^^ já tentei colocar barra de rolagem para que possa arrastar pra um lado e para outro, porem no celular não aparece a barra, somente no computador, gostaria de saber se alguém poderia dar essa ajudinha.
  11. Olá a todos do fórum e comunidade web, estou compartilhando aqui com vocês, um vídeo que acabei de produzir como editar arquivos, html, css e JavaScript diretamente do Google Chorme e ainda obter a visualização em tempo real. https://www.youtube.com/watch?v=RUREbXno7oM
  12. Olá pessoal, bom dia. Baixei um layout pronto de um flipbook em html5 (que tá nesse link: http://www.autostar.com.br/book_autostar/) pois não entendo de programação. O arquivo veio com as bibliotecas css e js, além da biblioteca com imagens que estão linkadas dentro do html5. A questão é que esse cliente solicitou que esse flipbook fosse responsivo e até agora, não consegui encontrar solução para esse problema. Poderiam me ajudar? Grato!
  13. Olá, Alguém poderia me instruir passo a passo como adicionar esse MENU do link no meu Blog? já pesquisei bastante sobre o assunto mas não encontrei ninguém explicando onde devo salvar as imagens usadas no MENU do Codigo CSS em questão. Deveria ser fácil já que o Blogger disponibiliza a opção de Add codigo CSS. Link do MENU que eu gostaria de Add: http://www.psdgraphics.com/html-css/psd-web-navigation-html-and-css-menus-set/
  14. Olá, pessoal, boa tarde !! Estudei toda uma apostila sobre CSS, porém não estou conseguindo realizar uma simples tarefa !! Ao passar o mouse no 'button.botao', ativar o movimento do 'div.traco' ! Eis abaixo o 'Código Fonte' que estou tentando: <!DOCTYPE html> <html> <head> <style> button.botao { width: 150px; height: 50px; border: none; background-color: black; color: red; font-size: 23px; } div.traco { width: 20px; height: 10px; background: red; -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */ transition: width 2s; } button.botao:hover div.traco { width: 150px; } </style> </head> <body> <button class="botao">Botao</button> <div class="traco"></div> </body> </html> Me ajudem por favor ! Obrigado !!
  15. Oi pessoal boa noite, minha duvida é: como eu deixo a li "pedidos de oração" em linha reta? me ajudem estou travado nisso a horas. apenas quero deixar o "pedidos de oração como se fosse numa linha só.
  16. Olá pessoal !! Eu preciso de alguma ajuda para resolver algumas dúvidas !! Se puder me ajudar eu agradeço !! Primeiro visite o link: http://terezanininha.com.br/CSS/Animations/Pagina_1_TryIt_3.html Veja o 'Código Fonte' pelo navegador !! O que estou tentando fazer ?? Eu quero que o elemento div, faça movimento de animation, vindo from {top:200px} to {top:0px} e paralisar no topo !! Neste exemplo, eu encontrei dois erros: - Primeiro Erro: Quando o div automaticamente começa a se movimentar, seu eu colocar o mouse sobre ele, antes de terminar o movimento, o div dá uma pulada direto para o topo !! "Eu não quero isso" !! Eu quero que se eu colocar o ponteiro do mouse sobre o div, que ele não dê esta subida repentina para o topo !! Que faça o movimento para o topo sem interrupção, mesmo se antes eu puser o ponteiro do mouse !! - Segundo Erro: Depois que o div cheguar ao topo, Se eu colocar o mouse nele, o fundo muda de cor, por animation ! Mas após isso, quando eu retiro o ponteiro do mouse, o div novamente cai para top:200px e começa o movimento para top:0px novamente ! O que eu quero é: que o div mova somente "uma vez" and "pare" em top:0px !! Depois de parar em top:0px, que fique intacto pra sempre e apenas faça o movimento de mudar a cor do fundo com o passar do mouse !! I tentei procurar na internet mas não achei algo que resolvesse esses dois problemas descritos acima ! Se possível, alguém poderia me dar uma ajuda testada que realmente funcione ?? Agradecido Carlos
  17. Bom dia! Gostaria de deixar o banner do meu site em Full width (largura total na tela do navegador). Alguém me ajuda? O site é www.bibiencanto.com.br. Veja o código do Slider: <div class="js-home-slider-container row-fluid slider-wrapper m-bottom m-bottom-half-xs "> <div class="js-home-slider-placeholder mobile-placeholder slider-placeholder-container p-relative overflow-none border-box" style="display: none;"> <div class="slider-figures-container full-width border-box overflow-none"> <div class="slider-placeholder-left-col pull-left"> <div class="slider-placeholder-square placeholder-color"> </div> </div> <div class="slider-placeholder-right-col pull-left"> <div class="slider-placeholder-line slider-placeholder-line-1 placeholder-color m-left-half"> </div> <div class="slider-placeholder-line slider-placeholder-line-2 placeholder-color m-left-half m-top-half"> </div> </div> </div> <div class="shine p-absolute full-width full-height"> </div> </div> <div class="js-slider-desktop-placeholder slider-desktop-placeholder" style="display: none;"> </div> <div class="js-home-slider-preloader slider-loading-icon svg-secondary-fill rotate" style="display: none;"> <svg baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" viewBox="-41 164.9 512 512"><path d="M415.4 536.6l-27.8-16a15.9 15.9 0 0 1-6.5-20.6 184.2 184.2 0 0 0-151.6-262.4 16 16 0 0 1-14.6-15.9v-32.1a16 16 0 0 1 17.2-16A248.5 248.5 0 0 1 429.7 297a248.4 248.4 0 0 1 8 232.8 15.8 15.8 0 0 1-22.3 6.8z"></path></svg> </div> <div class="bx-wrapper" style="max-width: 100%; visibility: visible; height: auto;"><div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 62px;"><ul class="js-home-slider slider" style="visibility: visible; height: auto; width: 715%; position: relative; transition-duration: 0s; transform: translate3d(-654px, 0px, 0px);"><li class="slider-slide bx-clone" style="float: left; list-style: none; position: relative; width: 218px;"><img src="//d26lpennugtm8s.cloudfront.net/stores/888/697/themes/luxury/slide-1539387295325-4202928935-e31b2cdd1995c5eb29d2fee01a0db8181539387366.png?157548447" alt="" class="slider-image" style="visibility: visible;"></li> <li class="slider-slide" style="float: left; list-style: none; position: relative; width: 218px;"><img src="//d26lpennugtm8s.cloudfront.net/stores/888/697/themes/luxury/slide-1539387295324-991022106-04f9444676f8e4d9783e416af6f847201539387359.jpg?157548447" alt="" class="slider-image" style="visibility: visible;"></li> <li class="slider-slide" style="float: left; list-style: none; position: relative; width: 218px;"><img src="//d26lpennugtm8s.cloudfront.net/stores/888/697/themes/luxury/slide-1539387295324-4438799467-05e4203ade50fa79ab3fd3105c3674211539387361.jpg?157548447" alt="" class="slider-image" style="visibility: visible;"></li> <li class="slider-slide" style="float: left; list-style: none; position: relative; width: 218px;"><img src="//d26lpennugtm8s.cloudfront.net/stores/888/697/themes/luxury/slide-1539387295324-7119946929-ff252e28c3a5fec6fdb73deb19bc007c1539387362.jpg?157548447" alt="" class="slider-image" style="visibility: visible;"></li> <li class="slider-slide" style="float: left; list-style: none; position: relative; width: 218px;"><img src="//d26lpennugtm8s.cloudfront.net/stores/888/697/themes/luxury/slide-1539387295324-478245130-af89b1eac01f1971d5a34cc91e431b441539387364.png?157548447" alt="" class="slider-image" style="visibility: visible;"></li> <li class="slider-slide" style="float: left; list-style: none; position: relative; width: 218px;"><img src="//d26lpennugtm8s.cloudfront.net/stores/888/697/themes/luxury/slide-1539387295325-4202928935-e31b2cdd1995c5eb29d2fee01a0db8181539387366.png?157548447" alt="" class="slider-image" style="visibility: visible;"></li> <li class="slider-slide bx-clone" style="float: left; list-style: none; position: relative; width: 218px;"><img src="//d26lpennugtm8s.cloudfront.net/stores/888/697/themes/luxury/slide-1539387295324-991022106-04f9444676f8e4d9783e416af6f847201539387359.jpg?157548447" alt="" class="slider-image" style="visibility: visible;"></li></ul></div><div class="bx-controls bx-has-pager bx-has-controls-direction"><div class="bx-pager bx-default-pager" style="display: block;"><div class="bx-pager-item"><a href="" data-slide-index="0" class="bx-pager-link">1</a></div><div class="bx-pager-item"><a href="" data-slide-index="1" class="bx-pager-link">2</a></div><div class="bx-pager-item"><a href="" data-slide-index="2" class="bx-pager-link active">3</a></div><div class="bx-pager-item"><a href="" data-slide-index="3" class="bx-pager-link">4</a></div><div class="bx-pager-item"><a href="" data-slide-index="4" class="bx-pager-link">5</a></div></div><div class="bx-controls-direction"><a class="bx-prev" href=""><span class="btn btn-primary btn-inverse btn-small"><svg class="svg-inline--fa fa-chevron-left fa-w-10 fa-2x" aria-hidden="true" data-fa-processed="" data-prefix="fa" data-icon="chevron-left" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z"></path></svg><!-- <i class="fa fa-chevron-left fa-2x"></i> --><span></span></span></a><a class="bx-next" href=""><span class="btn btn-primary btn-inverse btn-small"><svg class="svg-inline--fa fa-chevron-right fa-w-10 fa-2x" aria-hidden="true" data-fa-processed="" data-prefix="fa" data-icon="chevron-right" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"></path></svg><!-- <i class="fa fa-chevron-right fa-2x"></i> --><span></span></span></a></div></div></div> </div>
  18. Boa tarde estou com problemas no mainmenu em monitores pequenos, dependendo do tamanho ele duplica e o menu "atropela" o conteiner abaixo como visto na img abaixo: alguém saberia como resolver??? grato!!
  19. Olá, gostaria de saber se alguém consegue me ajudar. Eu atualizando as informações do site de uma amiga, mas depois de retirar algumas página e mudar algumas coisas no site, ele ficou todo alinhado a esquerda Esse é o site www.carioca-languages.com
  20. Estou com problema somente no Ios onde uma imagem de background não carrega CSS Observação: Carrega normalmente em todos navegadores em Windows, Linux, OS, Android e Windows Phone. No iOs n"ao carrega a imagem do background. Estou batendo cabeça e não vejo o erro. #home { width: 100%; height: 100%; background-color: #151515; background-image: url(../images/hero-bg.jpg); background-repeat: no-repeat; background-position: center 50%; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; background-attachment: fixed; min-height: 804px; position: relative; } #home .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: .2; background-color: #19191b; } .home-content-table { width: 100%; height: 100%; display: table; position: relative; text-align: center; } .home-content-tablecell { display: table-cell; vertical-align: middle; z-index: 500; } .home-content-tablecell .row { position: relative; padding-top: 16.2rem; padding-bottom: 15rem; } .home-content-tablecell h3 { font-family: "montserrat-bold", sans-serif; font-size: 2.2rem; color: white; text-transform: uppercase; letter-spacing: .3rem; margin: 0 0 .9rem 0; } .home-content-tablecell h1 { font-family: "montserrat-bold", serif; font-size: 9rem; line-height: 1.133; color: #FFFFFF; } .home-content-tablecell .more { margin: 4.8rem 0 0 0; } .home-content-tablecell .more .button { border-color: #FFFFFF; color: #FFFFFF; }
  21. Boa tarde, Sou novo em programação web (na verdade aprendi olhando na internet, ou seja sou bem, bem bem novo nisso mesmo) e estou tentando fazer um site para um amigo. Já tenho o esqueleto pronto, porém queria fazer uma coisa para ajudar na "contagem" de acesso. Como é um site relacionado a RPG, queria criar um popup quando o usuário sair da página, abrir uma mensagem dizendo a seguinte expressão: -"Obrigado pela preferencia e ao sair deixe uma moeda com a garçonete!" E ao lado da frase um busto de uma garçonete qualquer, e os 2 botões, o primeiro para dar uma moeda a garçonete e fechar a página e o segundo para fechar a página... Além disso, queria fazer um sistema vinculado ao botão de dar moeda a garçonete, com um contador na página do site, para saber quantas moedas a garçonete recebeu... Estou procurando mas como não sei mexer muito com javascript, css, php e afins... gostaria de uma ajuda de vocês, não faço ideia de onde começar o código... Caso alguém saiba, ficaria muito grato! Desde já agradeço Diego Rocha
  22. Fala pessoal, eu desenvolvi um site de pesquisa de endereços e estou com um problema agora que é o seguinte. Eu exibo uma lista usando ajax vindo do html pro php, dentro do php eu inseri nas linhas da lista dois botões, um para excluir aquela linha e outro caso o usuario(admin) deseje atualizar, mudar aquela linha. Segue o site abaixo:
  23. Fala galera, eu sou bem iniciante mesmo com linguagem html e css, e só utilizo das mesmas por questão de hobby na manutenção de sites etc. Esses dias eu encontrei um site gringo que fornecia códigos para realizar algumas funções, entre elas uma que me agradou bastante que foi o menu vertical. Ele é uma mistura de css e html e achei muito bom no meu site, o problema é o seguinte: além do menu vertical eu gostaria também que ficasse um slide no centro da página, no entanto o que está acontecendo é que o menu vertical meio que está empurrando o slide para baixo, ficando como a imagem abaixo: existiria alguma forma de conciliar os dois códigos de modo que o slide ficasse no centro? Ao lado direito do menu e não abaixo dele? Aqui estão os códigos do menu e do slide, que eu simplesmente copiei e colei na página html: 1. CÓDIGO DO MENU LATERAL <!DOCTYPE html> <html> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> body {margin:0} .icon-bar { width: 90px; background-color: #555; } .icon-bar a { display: block; text-align: center; padding: 16px; transition: all 0.3s ease; color: white; font-size: 36px; } .icon-bar a:hover { background-color: #000; } .active { background-color: #4CAF50 !important; } </style> <body> <div class="icon-bar"> <a class="active" href="#"><i class="fa fa-home"></i></a> <a href="#"><i class="fa fa-search"></i></a> <a href="#"><i class="fa fa-envelope"></i></a> <a href="#"><i class="fa fa-globe"></i></a> <a href="#"><i class="fa fa-trash"></i></a> </div> </body> </html> 2. CÓDIGO DO SLIDE <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * {box-sizing: border-box} body {font-family: Verdana, sans-serif; margin:0} .mySlides {display: none} img {vertical-align: middle;} /* Slideshow container */ .slideshow-container { max-width: 1000px; position: relative; margin: auto; } /* Next & previous buttons */ .prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -22px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; } /* Position the "next button" to the right */ .next { right: 0; border-radius: 3px 0 0 3px; } /* On hover, add a black background color with a little bit see-through */ .prev:hover, .next:hover { background-color: rgba(0,0,0,0.8); } /* Caption text */ .text { color: #f2f2f2; font-size: 15px; padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: center; } /* Number text (1/3 etc) */ .numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; } /* The dots/bullets/indicators */ .dot { cursor: pointer; height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } .active, .dot:hover { background-color: #717171; } /* Fading animation */ .fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; } @-webkit-keyframes fade { from {opacity: .4} to {opacity: 1} } @keyframes fade { from {opacity: .4} to {opacity: 1} } /* On smaller screens, decrease text size */ @media only screen and (max-width: 300px) { .prev, .next,.text {font-size: 11px} } </style> </head> <body> <div class="slideshow-container"> <div class="mySlides fade"> <div class="numbertext">1 / 3</div> <img src="img_nature_wide.jpg" style="width:100%"> <div class="text">Caption Text</div> </div> <div class="mySlides fade"> <div class="numbertext">2 / 3</div> <img src="img_fjords_wide.jpg" style="width:100%"> <div class="text">Caption Two</div> </div> <div class="mySlides fade"> <div class="numbertext">3 / 3</div> <img src="img_mountains_wide.jpg" style="width:100%"> <div class="text">Caption Three</div> </div> <a class="prev" onclick="plusSlides(-1)">&#10094;</a> <a class="next" onclick="plusSlides(1)">&#10095;</a> </div> <br> <div style="text-align:center"> <span class="dot" onclick="currentSlide(1)"></span> <span class="dot" onclick="currentSlide(2)"></span> <span class="dot" onclick="currentSlide(3)"></span> </div> <script> var slideIndex = 1; showSlides(slideIndex); function plusSlides(n) { showSlides(slideIndex += n); } function currentSlide(n) { showSlides(slideIndex = n); } function showSlides(n) { var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("dot"); if (n > slides.length) {slideIndex = 1} if (n < 1) {slideIndex = slides.length} for (i = 0; i < slides.length; i++) { slides.style.display = "none"; } for (i = 0; i < dots.length; i++) { dots.className = dots.className.replace(" active", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active"; } </script> </body> </html>
  24. 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
  25. E ae pessoal, então, estou criando um projeto para aprender algumas linguagens de programação mais rápido, por meio de um servidor Discord. Por agora queria algumas pessoas para me ajudar a organizar e modular a ideia, caso tenha interesse segue o link do convite limitado ao servidor: https://discord.gg/DCmkAcg