Ir para o conteúdo

Pesquisar na Comunidade

A mostrar resultados para tags ''css''.



Mais opções de pesquisa

  • Pesquisa por Tags

    Introduza as tags separadas por vírgulas.
  • Pesquisar por Autor

Tipo de Conteúdo


Fórum

  • Bem-vindos ao Portugal-a-Programar
    • Sugestões, Críticas ou Dúvidas relativas ao P@P
    • Acerca do P@P
  • Comunidade a Trabalhar
    • Wiki P@P
    • Apresentação de Projectos de Programação
    • Downloads
  • Revista PROGRAMAR
    • Revista PROGRAMAR
  • Desenvolvimento Geral
    • C
    • C++
    • Java
    • Haskell
    • Pascal
    • Python
    • Bases de Dados
    • Visual Basic Clássico
    • Visual Basic for Applications (VBA)
    • Dispositivos Móveis
    • Outras Linguagens
  • Desenvolvimento Orientado para Web
    • PHP
    • HTML
    • CSS
    • Javascript
    • Outras Linguagens de WebDevelopment
    • Desenvolvimento Web
  • Desenvolvimento .NET
    • C#
    • Visual Basic .NET
    • ASP.NET
    • WPF & SilverLight
  • Software e Sistemas Operativos
    • Software de Produtividade
    • Sistemas Operativos
    • SharePoint
    • Apresentação de Software
  • Informática
    • Interfaces Visuais
    • Computação Gráfica
    • Algoritmia e Lógica
    • Segurança e Redes
    • Hardware
    • Electrónica
    • Automação Industrial
    • Dúvidas e Discussão de Programação
    • Notícias de Tecnologia
  • Outras Áreas
    • Matemática
    • Dúvidas Gerais
    • Discussão Geral
    • Eventos
    • Anúncios de Emprego
    • Tutoriais
    • Snippets / Armazém de Código
  • Arquivo Morto
    • Projectos Descontinuados
    • System Empires

Blogs

  • Blog dos Moderadores
  • Eventos
  • Notícias de Tecnologia
  • Blog do Staff
  • Revista PROGRAMAR
  • Projectos
  • Wiki

Categorias

  • Revista PROGRAMAR
  • Tutoriais
  • Textos Académicos
  • Exercícios Académicos
    • Exercícios c/ Solução
    • Exercícios s/ Solução
  • Bibliotecas e Aplicações
  • Outros

Procurar resultados em...

Pesquisar conteúdos que contêm...


Data de Publicação

  • Início

    Fim


Última Actualização

  • Início

    Fim


Filtrar por número de...

811 resultados

  1. Reebelo

    Problema na formatação do site

    Boa tarde, estou com um problema com o css do meu site ele apenas funciona a partir do Laptop até ao 4K, alguém me sabe dizer o porquê? /*Mobile S*/ @media only screen and (max-width: 320px) { .content{ margin-left: 35%; margin-top: 250%; margin-right: 35%; background: -webkit-linear-gradient(left, #666666, #333333); padding-top: 5%; border-radius:15px; height: 320; } } /*Mobile M*/ @media only screen and (min-width:321px) and (max-width: 376px) { .content{ margin-left: 35%; margin-top: 128%; margin-right: 35%; background: -webkit-linear-gradient(left, #666666, #333333); padding-top: 5%; border-radius:15px; height: 320; } } /*Mobile L*/ @media only screen and (min-width:377px) and (max-width: 426px) { .content{ margin-left: 35%; margin-top: 111%; margin-right: 35%; background: -webkit-linear-gradient(left, #666666, #333333); padding-top: 5%; border-radius:15px; height: 320; } } /*Tablet*/ @media only screen and (min-width:427px) and (max-width: 768px) { .content{ margin-left: 35%; margin-top: 53%; margin-right: 35%; background: -webkit-linear-gradient(left, #666666, #333333); padding-top: 5%; border-radius:15px; height: 320; } } /*Laptop*/ @media only screen and (min-width:769px) and (max-width: 1025px) { .content{ margin-left: 35%; margin-top: 36%; margin-right: 35%; background: -webkit-linear-gradient(left, #666666, #333333); padding-top: 5%; border-radius:15px; height: 320; } } /* Laptop L*/ @media only screen and (min-width:1025px) and (max-width: 2559px) { .content{ margin-left: 35%; margin-top: 25%; margin-right: 35%; background: -webkit-linear-gradient(left, #666666, #333333); padding-top: 5%; border-radius:15px; height: 320; } } /* 4K*/ @media only screen and (min-width:2560px) { .content{ margin-left: 35%; margin-top: 13%; margin-right: 35%; background: -webkit-linear-gradient(left, #666666, #333333); padding-top: 5%; border-radius:15px; height: 320; } } Obrigado desde já!
  2. AAndr3

    ajuda sobre como fazer um select

    Boa tarde, Estou a criar para a minha pap um site de venda de carros, do género do stand virtual. https://imgur.com/iA9Zf4Z E queria saber como é que faço a condição para fazer com que ele va buscar ao servidor só o que foi introduzido pelo utilizador. Por exemplo o utilizador só quer pesquisar marca e o preco, entao como é que eu faço isso? obg
  3. Miguel Luís

    Criar Quiz

    Ola estou montando um quiz(perguntas e respostas), trabalho simples mas um pouco complicado para um novato estou querendo montar do seguinte jeito: Vai começar o QUIZ, vai ler a pergunta e por uma resposta, mas quando ela clicar na resposta, por exemplo se ela ou ele acertar o botão vai ficar verde e da um tempo de 3s e passa para a próxima, se ela ou ele erra vai ficar vermelho e depois vai aparecer a resposta certa que vai ficar verde e depois ir para a próxima pergunta por favor me ajudem o prozo é curto
  4. oamador

    Página simples responsiva

    Boas pessoal, Estive a tentar criar uma página simples apenas informativa com umas imagens e texto, O resultado foi este http://websportstv.orgfree.com/outro/responsive-full-background-image-demo.html Mas no telemóvel em vertical o background não preenche tudo, no tablet já preenche. Alguém me pode dar uma ajuda a finalizar isto? Cumprimentos.
  5. carcleo

    Centralizar submit no form

    Tenho a print abaixo: Estou tentando dar um margin: 0 auto no `botão submit` dentro do `form` mas nada que eu faça centraliza esse botão. Mas não posso fazer text-align: center senão vai centralizar todos os elementos do form. Eis o form <div class="administrador"> <h1 class="titulos">Cadastro de Administrador</h1> <form class="administradorCadastra"> <label class="labelPequeno">Tipo</label><select id="tipo" name="tipo" required class="typeTextMedio"> <option value="">Escolha o tipo</option> <option value="s">Super Administrador </option> <option value="c">Comum Administrador </option> </select><br /> <br /> <label class="labelPequeno">Nome</label><input type="text" class="typeTextMedio" maxlength="200" id="nome" name="nome" required /> <br /> <br /> <label class="labelPequeno">Login</label><input type="text" class="typeTextMedio" maxlength="<?php echo $constantes->getLenLogin(); ?>" id="login" name="login" required /> <br /> <br /> <label class="labelPequeno">Senha</label><input type="password" class="typeTextMedio" maxlength="<?php echo $constantes->getLenSenha(); ?>" id="senha" name="senha" required /> <br /> <br /> <img class="spinner" src="../_img/_bannerImgs/spinner.gif" /> <input type="submit" class="btnAcesso" value="Cadastrar Administrador" /><br /> <br /> <label class="resposta"></label> </form> </div> O que fazer?
  6. Minileandro

    Colocar imagem corretamente na div

    Olá pessoal, eu tenho aqui uma questão Sempre que crio uma div e tento colocar uma imagem, eu nunca sei como colocar no sitio que quero Exemplo, eu criei essa div -> http://prntscr.com/jjqzcb A parte azul escura é a imagem que quero colocar no sitio certo, neste caso, a imagem está muito para baixo (passa para baixo, onde não existe mais a zona redonda) e eu gostava de saber como puxar para qualquer lado, tipo para cima, para baixo (para a direita,centro,esquerda eu sei) Espero que tenha explicado bem, agradeço quem me ajudar. Aqui os códigos HTML: <html> <head> <link rel="stylesheet" href="style_test.css"> <title>CPI Mod</title> </head> <body> <div class="version"> <img width="1500" height="600" src="teste.png" align=""> </body> </html> Css: .version{ position: absolute; left: 4px; top: 10px; width:1330px; height:50px; overflow:hidden; background: url('background.png') top no-repeat; padding-top: 27px; padding-left: 24px; border-radius: 40px; box-shadow: 3px 3px #376c93; border: 2px; border-radius: 30px; }
  7. 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>
  8. carcleo

    Posicionamento de div sobre Slideshow

    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
  9. Ricceli Chaves

    Ajuda com background-image em html

    seguinte, meu chefe pediu para eu recriar o site para ele, eu nunca havia mexido com html/css programação estas coisas, vi alguns tutoriais e pareceu até simples, comecei a fazer e estava indo bem ate que cheguei na parte do background, dei os comandos possiveis pelo notepad++ e nada ia,mudei pra diversas versões chegando inclusive a usar uma de 2011 por medo de ser bug, o impressionante é que todos sites e tutoriais que visualizei dizem o msm codigo, porém comigo não funciona, cheguei a mudar de programa do notepad++ para o sublime text 3 e nada, eu não consigo passar da parte em que você coloca uma imagem de fundo, pois simplesmente ela não aparece, segue abaixo prints do html http://prntscr.com/j0s25b http://prntscr.com/j0s2aw http://prntscr.com/j0s2s4 se eu não conseguir colocar esta parte simples não posso avançar...
  10. Minileandro

    Problema com uma div e font

    Olá pessoal, venho aqui pedir uma ajuda acerca de uns testes que estou a fazer (apenas para treinar um pouco html e css) e tenho tido um problema. Eu queria colocar dentro de uma div um texto, mas em vez disso ele aparece fora da div e não aparece com a font que quero (eu acho que tenho uma solução para a font) Engraçado que tinha feito isto uma vez e tinha feito bem, mas agora passou um tempo e esqueci como fazer. Html: <html> <head> <link rel="stylesheet" href="style.css"> <title>Html Teste</title> </head> <body> <center><div class="icon"> </div></center> <center><div class="version"></center> <center><p style="font-size: 40px" class="">Teste teste teste teste<p></center> </div> </body> </html> Css: @import url("font.css"); body { font-family: 'proxima_nova_regular'; background-color:#3868D9; background-size: 100% auto; background-position: center; text-align: center; font-weight: 400 !important; -webkit-font-smoothing: antialiased; box-sizing: border-box; } .icon { position: fixed; width: 200px; height: 200px; /* Para testar imagem ---> https://i.imgur.com/cKbC9EO.jpg */ background-color: #FFFF; color: #FFFF; display: block; background-position: center; background-size: 100% auto; top: 2%; right: 570%; left: 570; /* Border radius */ border-radius: 30%; } .version { position: fixed; background-image: url("Homescreen Normal.png"); background-size: 100% auto; width: 700px; height: 400px; background-color: #FFFF; color: #FFF; top: 36%; right: 24%; left: 24%; text-align: center; /* Border radius*/ border-radius: 10%; }
  11. sEnte

    imagem em background

    Boa noite pessoal. Eu estou a tentar meter uma imagem a servir como background de um site, no entanto estou a ter alguns problemas. Este é o código que estou a usar. body { background-image: url("images/overlay.jpg"); background-attachment: fixed, fixed; background-position: top center; background-repeat: none, none; background-size: cover, 100%; } Desta maneira mostra desde o topo mas corta parte da parte inferior da imagem. já experimentei body { background-image: url("images/overlay.jpg"); background-attachment: fixed, fixed; background-position: fixed; background-repeat: none, none; background-size: contain; } Isto faz com que a altura da imagem fique perfeita mas em largura fica duplicada. Como é que posso resolver isto?
  12. rafaelcarvalho20

    Cabeçalho de relatório dando dor de cabeça.

    Olá, boa noite. Estou com dificuldades para gerar corretamente um PDF de relatório contido em uma view. A questão é a seguinte: Quando realizo a requisição para a VIEW através de um formulário POST e carrega a referida VIEW com a tabela de dados bonitinha e tudo mais. Daí quando pressiono as teclas de atalho do teclado: CTRL + P para imprimir ou gerar o PDF e me vem aquela janela de configuração, quando seleciono o layout de impressão como PORTRAIT ou RETRATO, o cabeçalho fica legal, bacana. Mas quando mudo para LANDSCAPE ou PAISAGEM, o cabeçalho só aparece na primeira página e nas demais fica só o espaço do cabeçalho vazio, mas o cabeçalho não aparece. Em outra situação, quando recarrego a página requisitada e o css foi definido para o modo paisagem, daí o cabeçalho fica normal apenas na primeira página e nas demais sem cabeçalho. Quando faço a alteração nesse momento para o modo retrato, o cabeçalho passa a existir em todas as páginas, mas se volto para paisagem, fica como no primeiro momento citado no parágrafo anterior. Meu código é o seguinte: CSS th#thimgHeader{ border-bottom: 1px solid #0000; padding: 0px 18px; text-align: center; } th#thimgHeader img{ width: 95%; padding: 5px; } th#thtituloHeader{ padding: 0px 0px; } th#thtituloHeader h4{ font-weight: bold; padding: 0px 0px 5px 0px; letter-spacing: 1px; } body{ background: rgba(13, 168, 255, 0); } @media print { body, .content, .page-header-fixed { padding: 0 !important; margin: 8px 5px 8px 5px !important; } .sidebar, .header, .panel-heading, .theme-panel { display: none !important; } } OBS.: Caso eu defina no CSS o size: A4; a página assume diretamente como Retrato e não me deixa realizar alteração na janela da impressora. Caso eu defina o size: A4 landscape; acontece a mesma coisa e automaticamente o cabeçalho não aparece da segunda página em diante. HTML <table id="data" class="row-border hover" cellspacing="0" width="98%"> <thead> <tr> <th id="thimgHeader" colspan="5"> <img src="{!! asset('/assets/img/relatorios/header-jp.png') !!}"> </th> </tr> <tr> <th id="thtituloHeader" colspan="5"> <h4 class="text-center"> {{ $titulo }} </h4> </th> </tr> <tr> <th>Código</th> <th>Assunto</th> <th style="text-align: center;">Tipo de Atendimento</th> <th>Data de Atendimento</th> <th>Nome</th> </tr> </thead> <tfoot id="footer"> <tr> <th colspan="5"> <h3 id="markPage"></h3> </th> </tr> </tfoot> <tbody> @foreach($atendimentos as $atendimento) <tr> <td>{{ $atendimento->id }}</td> <td>{{ $atendimento->assunto }}</td> <td style="padding-left: 2.4%;">{{ $atendimento->tipoatendimento }}</td> <td>{{ $atendimento->datareal }}</td> <td>{{ $atendimento->nome }}</td> </tr> @endforeach </tbody> </table> Alguém aqui poderia me ajudar com essa coisa que me está tirando o sono? Agradeço a atenção.
  13. carcleo

    Inserir keyframe via jQuery?

    Como inserir esse keyframe via jQuery? Tentei da forma abaixo mas não funcionou: var tempoTransicao = 5; var quantasImagens = $("ul.slider li img").size(); var tamanhoIntervalos = Math.round(100/quantasImagens); var t = 0; $('<style> @keyframe animacao', function() { for (i = 1; i <= quantasImagens; i++) { tMin = t + tempoTransicao; tMax = t + tamanhoIntervalos; t+=tamanhoIntervalos; document.write( tMin+"%" {margin-left: 0} tMax+"%" {margin-left: 0} ); if(i==0) tMin=0; if(i==quantasImagens) tMax=100; } }).appendTo('document'); HTML <ul class="slider"> <li> <img src="_imgs/_slideShow/1.png" /> <img src="_imgs/_slideShow/2.png" /> <img src="_imgs/_slideShow/3.png" /> <img src="_imgs/_slideShow/4.png" /> </li> </ul>
  14. rods

    Chat estático

    Olá, estou aprendendo PHP,HTML e estava tentando aprender mais sobre CSS (não sei quase nada ainda...) .chat{ border: 1px solid #B0BEC5; border-radius: 3px; height: 740px ; max-height: 100% ; padding: 1em; background-color:brown; width: 400px ; margin: 0 auto; right: 0 ; z-index: 100; bottom: 0 ; display: flex; flex-direction: column; justify-content: space-between; position: absolute; } Não sei se as informações acima são o suficiente para me ajudarem, tentei várias formas mas não consegui.... Eu consigo fazer o chat acompanhar o scroll do site pelo próprio CSS ou precisaria usar JS/derivados ?
  15. Boas, estou a desenvolver uma pequena página web em wordpress e estou com um problema que ao colocar a página inicial a ocupar o ecrã todo fica com uma pequena margem no fundo, já procurei pelos ficheiros todos e não encontro onde posso alterar aquele maldito 78px. Sendo aquele código inline onde o posso alterar? Deixo aqui duas imagens que penso que possam ajudar. Desde já obrigado.
  16. carcleo

    keyframe não popula com jQuery

    Pessoal, erro não está dando. Porém, o keyframe não está sendo populado. Onde estou errando? Tentei das duas formas abaixo e nenhuma funcionou. $(document).ready(function(e) { $("div.slider ul.slide").ready(function(e) { var tempoTransicao = 5; var quantasImagens = $("div.slider ul.slide li img").size(); var tamanhoIntervalos = Math.round(100/quantasImagens); var tempoImagens = 0; var t = 0; ///////////////////ANIMAÇÃO AQUI//////////////// $("<style>@keyframe tocaSlide").css(function() { for (i = 1; i <= quantasImagens; i++) { tMin = t + tempoTransicao; tMax = t + tamanhoIntervalos; t+=tamanhoIntervalos; tMin + "% : margin-left:-" + tempoImagens + "%", tMax + "% : margin-left:-" + tempoImagens + "%" tempoImagens+=100; if(i==0) tMin=0; if(i==quantasImagens) tMax=100; } }); ///////////////////ANIMAÇÃO AQUI//////////////// $("div.slider ul.slide").css({ 'animation-duration' : tempoTransicao + 's', }); }); }); e, $(document).ready(function(e) { $("div.slider ul.slide").ready(function(e) { var tempoTransicao = 5; var quantasImagens = $("div.slider ul.slide li img").size(); var tamanhoIntervalos = Math.round(100/quantasImagens); var tempoImagens = 0; var t = 0; for (i = 1; i <= quantasImagens; i++) { tMin = t + tempoTransicao; tMax = t + tamanhoIntervalos; t+=tamanhoIntervalos; ///////////////////ANIMAÇÃO AQUI//////////////// $("<style>@keyframe tocaSlide").css( tMin + "% : margin-left:-" + tempoImagens + "%", tMax + "% : margin-left:-" + tempoImagens + "%" ); ///////////////////ANIMAÇÃO AQUI//////////////// tempoImagens+=100; if(i==0) tMin=0; if(i==quantasImagens) tMax=100; } $("div.slider ul.slide").css({ 'animation-duration' : tempoTransicao + 's', }); }); }); Onde estou errando? Eis o HTML: <div class="slider"> <ul class="slide"> <li><img src="_imgs/_slideShow/1.png" /></li> <li><img src="_imgs/_slideShow/2.png" /></li> <li><img src="_imgs/_slideShow/3.png" /></li> <li><img src="_imgs/_slideShow/4.png" /></li> </ul> </div>
  17. Tenho um slideShow funcionando normalmente em uma página, http://hotplateprensas.com.br/estilos/slide.php, só para ele. Quando migrei para essa página. http://hotplateprensas.com.br/estilos/slide.php, O slide funciona, mas o que vem abaixo dele não aparece. HTML <div class="slideShow"> <div class="boxSlide"> <img src="_imgs/_slideShow/1.png" /> <img src="_imgs/_slideShow/2.png" /> <img src="_imgs/_slideShow/3.png" /> <div class="anterior"> <span class="setaSpan"><</span> <span class="boxSpan"></span> </div> <div class="proximo"> <span class="setaSpan">></span> <span class="boxSpan"></span> </div> </div> <div class="contador"> <span class="contaSlide">1</span> <span class="contaSlide">2</span> <span class="contaSlide">3</span> </div> </div> CSS @charset "utf-8"; /* CSS Document */ div.slideShow { position: relative; width: 100%; } div.slideShow div.boxSlide, div.slideShow div.contador { position: relative; display: block; width: 100%; } div.slideShow div.boxSlide,{ } div.slideShow div.boxSlide img { position: absolute; left: 0; top: 0; opacity: 0; width: 100%; } div.slideShow div.boxSlide img:first-child { opacity: 1; } div.slideShow div.boxSlide div.anterior, div.slideShow div.boxSlide div.proximo { position: absolute; display: block; top: 100px; } div.slideShow div.boxSlide div.anterior { left: 100px; } div.slideShow div.boxSlide div.proximo { right: 100px; } div.slideShow div.boxSlide div.anterior span, div.slideShow div.boxSlide div.proximo span { position: absolute; display: block; width: 30px; height: 30px; } div.slideShow div.boxSlide div.anterior span.boxSpan, div.slideShow div.boxSlide div.proximo span.boxSpan { background-color: rgb(200,200,200); opacity: .5; z-index: 1; } div.slideShow div.boxSlide div.anterior span.setaSpan, div.slideShow div.boxSlide div.proximo span.setaSpan { line-height: 30px; text-align: center; font-weight: bolder; cursor: pointer; z-index: 2; } div.slideShow div.boxSlide div span.setaSpan:hover + span.boxSpan { opacity: 1; } div.slideShow div.contador { top:240px; background-color:rgba(240,240,240,.5); } div.slideShow div.contador span.contaSlide { display: inline-block; width: 30px; height: 30px; line-height: 30px; text-align: center; background-color: rgb(200,200,200); cursor: pointer; opacity: .5; } div.slideShow div.contador span.contaSlide:hover { opacity: 1; } jQuery $(document).ready(function(e) { quantasImagens = $("div.slideShow div.boxSlide img").length-1; contador = 0; $("div.slideShow div.boxSlide div.anterior").click(function() { contador = contador==quantasImagens ? -1 : contador; contador++; $("div.slideShow div.boxSlide img").css("opacity",0); $("div.slideShow div.boxSlide img").eq(contador).css("opacity",1); }); $("div.slideShow div.boxSlide div.proximo").click(function() { contador = contador==0 ? quantasImagens+1 : contador; contador--; $("div.slideShow div.boxSlide img").css("opacity",0); $("div.slideShow div.boxSlide img").eq(contador).css("opacity",1); }); $("div.slideShow div.contador span.contaSlide").click(function() { index = $(this).index(); $("div.slideShow div.boxSlide img").css("opacity",0); $("div.slideShow div.boxSlide img").eq(index).css("opacity",1); }); }); Fazendo testes, descobri que o problema está aqui: div.slideShow div.boxSlide img { position: absolute; left: 0; top: 0; opacity: 0; width: 100%; } O Position:absolute está fazendo o elementos de baixo subirem. Já tentei: A) Colocar as imgs como position:relative, display:block e display:inline: Como o espaço do container não cabe, as imagens acabam ficando umas debaixo das outras. B) Tentei com display:none e fazendo display:block só na img que deve aparecer: Não adianta, elas acabam tomando espaço abaixo delas. Não sei mais o que fazer.
  18. dilsonjoomla

    Configuração global

    boa noite. sou super usuário do site que estou em desenvolvimento. porém o menu configurações globais sumiu apos eu criar um novo usuario administrador, não tenho mais acesso a nada e também o novo usuario não tem acesso a nenhuma configuração do site. alguém pode me ajudar por favor obg
  19. carcleo

    Abrir ul para cima

    Bom, criei um plugin de uma ul que preenche suas li's com os options de algum select. Tudo OK. Mas de repente estou com 4 problemas para resolver e dependo da ajuda de vocês. À principio, esse select pode ser visto em http://www.hotplateprensas.com.br/estilos/. 1) De uma forma geral, qualquer select, quando clicado, caso dê para abir suas options na vertical e para baixo, beleza, é a prioridade. No entando, quando é o caso em que o select está no fim da página, nesse cado, as options abrem para o alto aparecendo acima dos elementos html que estão em cima dela. O que eu preciso fazer é exatamente esse comportamento quando abrir a ul que está substituindo o select. Como fazer? 2) Se notarem bem no select, perceberam que quando abre o overflow scroll dele, dá para notar que existe um buraco entre o final da li e o inicio do scroll e dá para ver os elementos sobrescritos que estão abaixo por essa brecha. Como corrigir isso? 3) Quando abro a ul, aparece o scrool. Note que a ul abre como efeito de slideDown(), slideUp(). Será que existe uma forma de adicionar esse plugin também ao scroll? 4) O scrool, não aparece quando fecho a ul. Está certo, pois coloquei overflow: hidden. Mas Gostaria de fazer da mesma forma que a ul se retrai com efeito, o scroll também se retraisse da mesma forma. Será que trem jeito? HTML <div class="selectOptions"> <select required> <option value="1">Um</option> <option value="2">Dois</option> <option value="3">Três</option> <option value="4">Quatro</option> <option value="5">Cinco</option> <option value="6">Seis</option> <option value="7">Sete</option> <option value="8">Oito</option> </select> <label class="selecionada"></label> <ul> </ul> </div> CSS @charset "utf-8"; /* CSS Document */ .selectOptions { display:block; position:relative; width:200px; height:35px; } .selectOptions select { display:none; } .selectOptions .selecionada { display:block; } .selectOptions .selecionada:after { display: block; position: absolute; content: ""; top: 1px; right: 1px; width: 33px; height: 33px; background-image: url(../_imgs/setaBaixo.jpg); } .selectOptions .selecionada.setaBaixo:after { background-image: url(../_imgs/setaBaixo.jpg); } .selectOptions .selecionada.setaCima:after { background-image: url(../_imgs/setaCima.jpg); } .selectOptions ul { display:none; width:100%; } .selectOptions ul li{ cursor:pointer; } .selectOptions ul li, .selectOptions .selecionada { position:relative; width:94%; height:34px; line-height:34px; padding:0 3% 0 3%; border-bottom: rgb(200,200,200) 1px solid; background-color:rgb(240,240,240); } .selectOptions ul li:hover, .selectOptions .selecionada { background-color: rgb(200,200,200); } jQuery $(document).ready(function(e) { // entrega o primeiro elemento da select option à div .selecionada $(".selectOptions .selecionada").html($(".selectOptions select > option:first-child").html()); /*popula as li's*/ $(".selectOptions select > option").each(function() { //Não exibe a primeira li pois esta já está sendo exibida na .selecionada if($(this).is(':first-child')) $(".selectOptions ul").append("<li value='"+this.value+"' style='display:none;'>"+this.text+"</li>"); else $(".selectOptions ul").append("<li style='display:block;' value='"+this.value+"'>"+this.text+"</li>"); }); function exibeSelectUl () { $(".selectOptions ul > li").each(function() { if($.trim($(this).text()) === $.trim($(".selectOptions .selecionada").html())) $(this).css("display","none", "important"); else $(this).css("display","block","important"); }); $(".selectOptions ul").css("display","block"); } contador=0; $(".selectOptions .selecionada").click(function(e) { exibeSelectUl(); quantasLis = $(".selectOptions ul li").length; if(contador % 2 == 0) { $(".selectOptions .selecionada").addClass("setaCima").removeClass("setaBaixo"); $(".selectOptions ul li").css("display","none").slideDown(400); if(quantasLis > 4) { $(".selectOptions ul").css('height', '175px'); $(".selectOptions ul").css("overflow-y", "scroll"); } else { $(".selectOptions ul").css('height', 'auto'); $(".selectOptions ul").css("overflow-y", "auto"); } } else { $(".selectOptions .selecionada").addClass("setaBaixo").removeClass("setaCima"); $(".selectOptions ul li").slideUp(400, function(){ $(".selectOptions ul").css("overflow-y", "hidden"); }); } contador++; e.stopPropagation(); }); // ao clicar em qualquer coissa, fecha a ul caso ela esteja aberta $(document).on('click',function(e){ if( $(".selectOptions ul").css("overflow-y") == "auto" || $(".selectOptions ul").css("overflow-y") == "scroll") { $(".selectOptions .selecionada").trigger("click"); } }); /*ai clicar na li, busca correspondência na select option e o checa (marca)*/ //$(".selectOptions .selectOption ul li:not(:eq(0))").on( 'click',function(evt){ $( '.selectOptions ul li' ).on( 'click', function( evt ){ /*Joga a li selecionada a label*/ $(".selectOptions .selecionada").html($(this).html()); /*Joga a li selecionada ao topo da ul*/ $($(this).closest('ul')).prepend($(this)); // Armazena nome do maos que quer selecionar var li = $(this).attr("value"); // Guarda em opcao o elemento que retornar do filtro que vai testar entre as // options possíveis var opcao = $('.selectOptions select option').filter(function() { // testa entre as options qual delas tem o mesmo conteúdo que o desejado return $(this).attr('value') === li; }); exibeSelectUl(); // Redefine o atributo do elemento encontrado pra selecionado. opcao.attr('selected', true); }); });
  20. sEnte

    Animated Scrolling Image Caption em CSS

    Como o nome indica estou aqui a tentar criar uma legenda para uma imagem. Quando se mete o rato em cima da imagem aparece a legenda, no entanto estou com um pequeno problema. Se definer tamanho para a imagem a legenda não se vê, se não restringir o tamanho a legenda fica-se a ver por baixo da imagem. Será que dá para não restringir o tamanho da imagem e fazer desaparecer a legenda? fica aqui o fiddle para verem. https://jsfiddle.net/47uebazr/
  21. carcleo

    Encontrar o URL e alterar o style do href

    Boas, Tenho o seguinte php: $paginaCorrente = parse_url($_SERVER['REQUEST_URI'], PHP_URL_QUERY); e o seguinte HTML <ul class="menu"> <li><a href="?l1">Link 1</a></li> <li><a href="?l2">Link 2</a></li> <li><a href="?l3">Link 3</a></li> <li><a href="?l4">Link 4</a></li> </ul> E o seguinte JS $(document).find( "ul.menu a[href='<?php echo "?".$paginaCorrente ?>']" ).addClass( 'linkVisitado' ); Isso permite eu encontrar os parâmetros da url e saber qual item de menu vou marcar. Atualmente estou fazendo com JQuery. Gostaria de saber se há como fazer uma condicional em CSS de forma que consiga varrer o url e comparar com o href do elemento a. Encontrando, altera o seu estilo. Na verdade adiciona Class='linkVisitado' a esse href. Tentei das formas abaixo mas não funcionou. ul.menu li a { @if (ul.menu li a:href='?l1') background-color: rgb(0,0,0); @if ul.menu li a[href='?l1'] { background-color: rgb(0,0,0)}; }
  22. carcleo

    Forçar require em display:none

    Tenho o seguinte html: (Obs.: disponível para testes em http://www.hotplateprensas.com.br/estilos/) <ul class="payment-methods"> <li class="payment-method paypal"> <input name="payment_methods" type="radio" id="paypal"> <label for="paypal"></label> </li> <li class="payment-method pagseguro"> <input name="payment_methods" type="radio" id="pagseguro"> <label for="pagseguro"></label> </li> <li class="payment-method boleto"> <input name="payment_methods" type="radio" id="boleto"> <label for="boleto"></label> </li> </ul> Que mostra métodos de pagamento. Nele, os radio buttons estão com display:none para que os labels sejam mostrados em seu lugar. Existe uma forma de eu forçar que pelo menos 1 button, seja marcado mesmo que eles estejam com display:none? O resultado é esse: CSS @charset "utf-8"; /* CSS Document */ .divCheckList .valorBool, .divCheckList .divCheckBox { height: 34px; display: inline-block; border: rgb(222,222,222) 1px solid; vertical-align: middle; } .divCheckList .valorBool { line-height: 34px; } .divCheckList .labelCheckBox { position: relative; display: block; width: 60px; height: 34px; background-color: rgb(222,222,222); border: none; border-radius: 34px; -webkit-transition: .4s; transition: .4s; cursor: pointer; } .divCheckList .labelCheckBox:before { position: absolute; display: block; width: 26px; height: 26px; background-color: #FFF; border-radius: 50%; content: ""; margin: 4px; -webkit-transition: .4s; transition: .4s; } .divCheckList .divCheckBox .checkBox:checked + .labelCheckBox { background-color: blue; } .divCheckList .divCheckBox .checkBox:checked + .labelCheckBox:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); }
  23. BHAMF

    Problemas com Float

    Olá! Estou à aprender um pouco de HTML e já fiz 2 sites, mas o problema está na propriedade Float, (que sei basicamente pra que serve já, pelo que eu entendi serve pra colocar um argumento do lado, já que o HTML funciona em camadas e bota cada coisa embaixo) porém não estou sabendo usar tal propriedade, queria usa-la para colocar uma foto do meu projeto, o Lipiinn Program, neste site: http://bhamfprojects.hol.es, alguém pode me dar uma dica de como usar o Float? Agradeço desde já! B.H.A.M.F, Brasil, 03/10/2016, 15:16 (Horário de Brasília).
  24. João Almeida

    Imagem não aparece

    Bom dia a todos!!! Antes de mais, desejo uma feliz páscoa feliz!!!!! Estou a desenvolver uma galeria e surgiu-me a seguinte situação. Na imagem do Bruno Mars, sempre que "escrevo" o texto respetivo (24k Magic World Tour 2017), ele desaparece. No entanto, se copiar o texto (também já fiz a experiência de copiar a div toda) da imagem anterior, ele já aparece. <div class="box"> <div class="boxInner"> <img src="http://i68.tinypic.com/10h2hjm.jpg" /> <div class="titleBox">The Grammy’s 2017 <br>
Não perca nenhum momento do mais aclamado evento de prémios da indústria musical.</div> </div> </div> <div class="box"> <div class="boxInner"> <img src="http://i65.tinypic.com/plwkl.jpg" /> <div class="titleBox">24k Magic World Tour 29917</div> </div>
  25. RyujinLegacy

    CSS em Site

    Bom dia ! Será que alguem me consegue ajudar a colocar o meu site minimamente "bonito" para fazer uma apresentaçao? Estou a estudar programação ... e apenas nos ensinaram php e html .. apos uma pesquisa de css intensiva (ultimas duas semanas) concluiq que nao precebo nada de css xD E agora estou aqui a pedir ajuda a voces que serão a minha salvação (espero) Cumps Tiago Alves
×

Aviso Sobre Cookies

Ao usar este site você aceita os nossos Termos de Uso e Política de Privacidade. Este site usa cookies para disponibilizar funcionalidades personalizadas. Para mais informações visite esta página.