Jump to content

Search the Community

Showing results for tags 'css'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Comunidade
    • Sugestões, Críticas ou Dúvidas relativas ao P@P
    • Acerca do P@P
  • Comunidade a Trabalhar
    • Apresentação de Projectos de Programação
    • Downloads
    • Revista PROGRAMAR
  • Desenvolvimento Geral
    • C
    • C++
    • Java
    • Pascal
    • Python
    • Bases de Dados
    • 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
    • Apresentação de Software
  • Informática
    • Interfaces Visuais
    • Computação Gráfica
    • Algoritmia e Lógica
    • Segurança e Redes
    • Hardware
    • Electrónica e Automação Industrial
    • Matemática
    • Software de Contabilidade e Finanças
    • Dúvidas e Discussão de Programação
  • Outras Áreas
    • Notícias de Tecnologia
    • 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

Categories

  • 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

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Website


GitHub


LinkedIn


Twitter


Facebook

  1. Boa tarde, estava a fazer testes num projecto com full scroll apenas com css. Na versão horizontal, e como está full screen, é necessário usar a tecla esquerda ou direita do teclado para mover entre secções. Então queria criar uma seta numa div que ao ser clicada simulava que tinha sido pressionada a tecla esquerda ou direita. Mas não estou a conseguir. Abaixo o meu código. Um grande obrigado <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="css/style2.css"> <title>PROJECTO</title> </head> <body> <div class="slider"> <section> <div id="seta" style="">Seta</div> <h1>Section One</h1> </section> <section> <h1>Section Two</h1> </section> <section> <h1>Section Three</h1> </section> <section> <h1>Section Four</h1> </section> <section> <h1>Section Five</h1> </section> </div> </body> </html> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> $( "#seta" ).click(function() { console.log("entrou"); var e = jQuery.Event("keydown"); e.which = 39; // tecla direita $("body").trigger(e); }); </script> * { box-sizing: border-box; margin: 0; padding: 0; } body { overflow-y: hidden; } .slider { font-family: sans-serif; scroll-snap-type: x mandatory; display: flex; -webkit-overflow-scrolling: touch; overflow-x: scroll; } section { border-right: 1px solid white; padding: 1rem; min-width: 100vw; height: 100vh; scroll-snap-align: start; text-align: center; position: relative; } #seta{ background: #000; width: 50px; height: 20px; color: #fff; } .one{ background: rgb(5, 54, 125); } .two{ background: rgb(43, 211, 148); } .three{ background: rgb(5, 54, 125); } .four{ background: rgb(43, 211, 148) }
  2. Bom dia pessoal, não sei porque não consigo centrar minha barra de menu, já devo ter passado por cima do erro e não o vejo, será que alguém poderia ajudar me. Desde já obrigado. <div id="area-menu"> <nav id="menu"> <ul id="navegacao"> <li class="selecionado"><a href="index.html"></a></li> <li ><a href="artista.html"></a></li> <li ><a href="eventos.html"></a></li> <li ><a href="contacto.html"></a></li> </ul> </nav> </div> Ficheiro css #area-menu{ padding-top: 5px; } nav#menu{ margin: 0 auto; padding: 0; display: flex; align-items:center; max-width: 1020px; width: 100%; height:55px; } nav#menu ul{ display: block; text-align: center; justify-content:center; align-items:center; padding: 0; margin: 0 auto; width: 100%; } nav#menu ul li{ float: left; padding: 0px; list-style: none; position: relative; margin: 5px; } nav#menu ul li a{ display: block; width: 130px; font-family: 'Niconne', cursive; color:#8a1100; font-size:20px; padding:9px 17px; text-decoration: none; height:40px; box-shadow:2px 2px 3px #555; border-radius:3px; background: url('../imgs/menu.jpg') center bottom no-repeat; cursor:default; z-index: 1; }
  3. Estou a refazer um site de um cliente e as imagens não aparecem O html: <section class="u-align-center u-clearfix u-image u-shading u-section-1" href="img/pedrafundo2.jpg" data-image-width="1280" data-image-height="853"> <div class="u-clearfix u-sheet u-sheet-1"> <h1 class="u-text u-text-default u-text-1"> Mesas por Medida<br>Casa & Hotelaria</h1> <p class="u-large-text u-text u-text-variant u-text-2"> Fabricamos mesas altas, baixas, compridas, largas, 100% Personalizadas ao seu gosto! Preparadas para um uso diário e intensivo!</p> <a target="_blank" href="https://www.youtube.com/channel/UCZbv8-ylGYp4PITuZ-d-kqQ/playlists" class="u-border-none u-btn u-button-style u-hover-palette-5-base u-palette-5-light-1 u-btn-1"> Veja os nossos testes de resistência</a> </div> </section> O css .u-section-1 { background-position: 50% 50%; background-image: url('img/pedrafundo2.jpg'); } as outras mods são só visuais para o texto e essas coisas na ferramenta de inspecionar do google na consola encontrei um aviso a dizer "ERR_FILE_NOT_FOUND"
  4. Estou com uma questão e já não me recordo do método, sei que existia uma forma atomizada de colocar o site responsivo alguém sabe qual é? html <!DOCTYPE html> <html lang="pt"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" media="(min-width: 800px)" href="style\style.css"> <link rel="stylesheet" type="text/css" media="(max-width: 800px)" href="style\mobile.css"> </head> <body> <div class="img1"> <img src="logo.png"width="10%" height="15%"> </div> <header> <ul class="menul"> <li class="menuil"><a href="./contact.html">Contactos</a></li> <li class="menuil"><a href="./portfoliomain.html">Portfólio</a></li> <li class="menuil"><a href="./service.html">Serviços</a></li> <li class="menuil"><a href="./about.html">Sobre Nós</a></li> <li class="menuil"><a href="../index.html">Home</a></li> </ul> </header> <div class="descimg1"> <h6>Badger Tech</h6> </div> <div class="fc"> <div class="fci"> <div class="fcf"> <img src="img/about.jpg" class="imgbout1" alt="about"> </div> <div class="fcb"> <h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1> <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</a></b> aqui.</p> </div> </div> </div> <div class="spcH"></div> <div class="fc2"> <div class="fci2"> <div class="fcf2"> <img src="img/quefazes.jpg" class="imgbout1" alt="quefazemos" > </div> <div class="fcb2"> <h1>bbbbbbbbbbbbbbbbbbbbbb</h1> <p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p> </div> </div> </div> <div class="fc3"> <div class="fci3"> <div class="fcf3"> <img src="img/horas.jpg" class="imgbout1" alt="horas"> </div> <div class="fcb3"> <h1>cccccccccccccccccccccccccccc</h1> <p>ccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc</p> </div> </div> </div> <br> <br> <br> <br> <br> <br> <footer> <h6 class="copyr"> &#169; </h6> </footer> </body> </html> css /* about us*/ /*fc1*/ .fc { background-color: transparent; width: 300px; height: 600px; perspective: 1000px; margin-top:5%; margin-left:10%; } .fci { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.6s; transform-style: preserve-3d; } .fc:hover .fci { transform: rotateY(-180deg); } .fcf, .fcb { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .fcf { color: white; } .fcb { background-image: linear-gradient(#f24236 , rgba(0,0,0,0)); color: white; transform: rotateY(180deg); } /*fc2*/ .fc2 { background-color: transparent; width: 300px; height: 600px; perspective: 1000px; margin-top:-44.222222%; margin-left:40%; } .fci2 { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.6s; transform-style: preserve-3d; } .fc2:hover .fci2 { transform: rotateY(-180deg); } .fcf2, .fcb2 { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .fcf2 { color: white; } .fcb2 { background-image: linear-gradient(#f24236 , rgba(0,0,0,0)); color: white; transform: rotateY(180deg); } /*fc3*/ .fc3 { background-color: transparent; width: 300px; height: 600px; perspective: 1000px; margin-top:-44.233333333%; margin-left:70%; } .fci3 { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.6s; transform-style: preserve-3d; } .fc3:hover .fci3 { transform: rotateY(-180deg); } .fcf3, .fcb3 { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .fcf3 { color: white; } .fcb3 { background-image: linear-gradient(#f24236 , rgba(0,0,0,0)); color: white; transform: rotateY(180deg); } /*a about*/ .aabout{ color: black; } .imgbout1{ width:300px; height:600px; } tem mais codigo mas decidi colocar só esta pagina Alguém me pode ajudar?
  5. Boa tarde pessoal. Estou formatando com css um menu de um site, o problema é que com a função hover funciona, mas quando coloco numa classe active não, o que pode estar errado. Arquivo css nav#menu li:hover{ background-position:top; color:firebrick; } nav#menu ul li a.active{ background-position:top; color:firebrick; } arquivo html <nav id="menu"> <section> <ul> <li> <a href='index.php' class='active'> Inicio</a></li> <li> <a href='artista.php' > Artista</a></li> <li> <a href='comments.php' > Comentários</a></li> <li> <a href='contactos.php' > Contactos</a></li> </ul> </nav> </section>
  6. John Hebert Trindade

    a+a

    Boa tarde pessoal. Sei que, quando colocamos o "a" no css estamos a formatar um link (a href), mais não sei o que quer dizer quando é a+a, alguem pode me explicar. exemplo nav#menu a+a:before{ }
  7. Boa noite pessoal espero que estejam todos bem!!! Estou a tentar criar um popup apenas com html e css e, embora já tenho conseguido em parte, sempre que dou refresh à página o popup aparece por breves segundos... Estes são os códigos que tenho, tanto css e html: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8"><meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="QuemSomos.css"> <title>Quem Somos</title> </head> <body> <header class="header"> <nav> <a href="#"><img class="logo" src="#" alt="Foto da Loja"></a> <ul class="headerLinks"> <li class="headerLI"><a href="#">Página Inicial</a></li> <li class="headerLI"><a class="selecionado" href="#">Quem Somos</a></li> <li class="headerLI"><a href="#">Login</a></li> </ul> </nav> </header> <br><br> <footer class="footer"> <ul class="footerLinks"> <li class="footerCTG"><a href="#">FPS</a></li> <li class="footerCTG"><a href="#">RPG</a></li> <li class="footerCTG"><a href="#">Desporto</a></li> <li class="footerCTG"><a href="#">Sobrevivência</a></li> </ul> <ul class="footerLinks2"> <li class="footerCTG"><a href="#">Estratégia</a></li> <li class="footerCTG"><a href="#">Corrida</a></li> <li class="footerCTG"><a href="#">Simulação</a></li> </ul> <ul class="footerLinksCtc"> <li class="footerCTG"><a class="butaoPopup" href="#">Contactos:</a></li> <div id="popup1" class="overlay"> <div class="popup"> <h2>Contactos:</h2> <a class="fechar" href="#">&times;</a> <div class="conteudo"> Nº de Telémovel: [...] <br> Email: [...] </div> </div> </div> </ul> <ul class="footer_imagem"> <li class="footerIMG"><img class="IPSIMG" src="ESTS.png" alt="Localização da loja"></li> </ul> </footer> </body> </html> CSS: body{ font-family: verdana; margin: 0; } /* Header */ .header{ margin: 5px; background-color: gray; padding: 20px; border-radius: 15px; text-align: center; height: 80px; } .logo{ float: left; margin: 0; padding: 0; max-width: 95px; height: auto; } ul.headerLinks{ float: right; list-style-type: none; margin: 0; padding: 0; overflow: hidden; } li.headerLI{ float: left; margin: 0; padding: 20px 20px 3px 3px; } li a{ display: inline-flex; color: white; text-align: center; padding: 12px 14px; border-radius: 5px; text-decoration: none; } li a.selecionado{ background-color: darkred; } li a:hover:not(.selecionado){ background-color: darkred; } /* Fim do header */ /* Footer */ .footer{ margin: 5px; background-color: gray; padding: 20px; border-radius: 15px; text-align: center; height: 250px; } ul.footerLinks{ float: left; text-align: left; list-style-type: none; margin: 5px; margin-left: 100px; padding-top: 40px; padding-right: 1px; padding-left: 25px; padding-bottom: 10px; overflow: hidden; } ul.footerLinks2{ float: left; text-align: left; list-style-type: none; margin: 5px; margin-left: 15px; padding-top: 85px; padding-left: 1px; padding-right: 25px; padding-bottom: 10px; overflow: hidden; } ul.footerLinksCtc{ float: left; text-align: left; list-style-type: none; margin: 5px; margin-left: 15px; padding-top: 170px; padding-left: 1px; padding-right: 25px; overflow: hidden; } .butaoPopup{ cursor: pointer; } .overlay{ position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.7); transition: opacity 500ms; visibility: hidden; opacity: 0; } .overlay:target{ visibility: visible; opacity: 1; } .popup{ margin: 70px auto; padding: 20px; background: #fff; border-radius: 5px; width: 30%; position: relative; transition: all 0.5s ease-in-out; } .popup h2{ margin-top: 0; color: #333; font-family: verdana; } .popup .fechar{ position: absolute; top: 20px; right: 30px; transition: all 200ms; font-size: 30px; font-weight: bold; text-decoration: none; color: #333; } .popup .fechar:hover{ color: darkred; } .popup .conteudo{ max-height: 30%; overflow: auto; } @media screen and (max-width: 700px){ .footerCTG{ width: 70%; } .popup{ width: 70%; } } ul.footer_imagem{ float: right; list-style-type: none; margin: 5px; margin-left: 15px; padding-top: 50px; padding-left: 1px; padding-right: 200px; padding-bottom: 50px; overflow: hidden; } img.IPSIMG{ border-radius: 15px; margin: 0; padding: 0; max-width: 150px; height: auto; } /* Fim do Footer */ Para já ainda só tenho o footer e header, entrentanto vou adiantar o main content. Desde já peço desculpa pela mensagem tão grande. Em relação ao problema, se me puderem ajudar agradecia imenso!!! Cumprimentos e mantenham-se seguros :)
  8. Boa tarde! Ola a todos, estou a fazer um curso online de fundamentos de html e css e como projecto final pediram me para recrear o site da apple (apple.com/mz/) Utilizei css grid para separar os conteudos, mas numa das grids tenho que posicionar o texto com hyperlinks por baixo da div. Agradecia que alguem me ajuda-se se nao estiver a incomodar. o que ue fiz até agora foi o seguinte: no html: <div id="tvplus"> <h3 id="title-h2"> <h3><a href="#"><i class="fa fa-apple"></i></a>tv+</h3> <h3>Get 1 year of Apple TV+ free when</h3> <h3>you buy an apple device</h3> </h3> <p><a href="#">Learn more</a>&nbsp;&nbsp;&nbsp;></p> </div> e o css: #title-h2 { font-size: 10px; } Por favor se não estiver a incomodar, peço uma dica de como por o referido texto na parte inferior da caixa da div
  9. Boa Tarde Como é que eu coloco o código responsivo ? <section class="mt-5" id="menu"> <div class="container"> <div class="row"> <div class="col"> <h2 class="text-center">Menu</h2> </div> </div> <div class="row"> <div class="col"> <nav class="section_menu__nav"> <ul> <li class="active"> <a href="javascript:void(0)" data-filter="1">Almoço & Jantar</a> </li> <li> <a href="javascript:void(0)" data-filter="2">Bebidas</a> </li> </ul> </nav> </div> </div> <div class="row filter-container"> <div class="col-md-6 filtr-item" data-category="1" data-sort="value"> <div class="section_menu__item"> <div class="row"> <div class="col-3"> <div class="section_menu__item__img"> <img src="assets/img/5.jpg" alt="..."> </div> </div> <div class="col-7"> <h4>Picanha Grelhada</h4> <p>Acompanhamento: Arroz, Batatas Fritas</p> </div> <div class="col-2"> <div class="section_menu__item__price text-center">15,00€</div> </div> </div> </div> </div> <div class="col-md-6 filtr-item" data-category="2" data-sort="value"> <div class="section_menu__item"> <div class="row"> <div class="col-3"> <div class="section_menu__item__img"> <img src="assets/img/11.jpg" alt="..."> </div> </div> <div class="col-7"> <h4>Vinho Verde Gazela</h4> </div> <div class="col-2"> <div class="section_menu__item__price text-center">5,00€</div> </div> </div> </div> </div> <div class="col-md-6 filtr-item" data-category="1" data-sort="value"> <div class="section_menu__item"> <div class="row"> <div class="col-3"> <div class="section_menu__item__img"> <img src="assets/img/6.jpg" alt="..."> </div> </div> <div class="col-7"> <h4>Filetes de Pescada </h4> <p>Acompanhamento: Arroz, Salada, Limão, Salsa</p> </div> <div class="col-2"> <div class="section_menu__item__price text-center">9,50€</div> </div> </div> </div> </div> <div class="col-md-6 filtr-item" data-category="2" data-sort="value"> <div class="section_menu__item"> <div class="row"> <div class="col-3"> <div class="section_menu__item__img"> <img src="assets/img/12.jpg" alt="..."> </div> </div> <div class="col-7"> <h4>Vinho Tinto Qtª da Espiga</h4> </div> <div class="col-2"> <div class="section_menu__item__price text-center">95,00€</div> </div> </div> </div> </div> <div class="col-md-6 filtr-item" data-category="1" data-sort="value"> <div class="section_menu__item"> <div class="row"> <div class="col-3"> <div class="section_menu__item__img"> <img src="assets/img/7.jpg" alt="..."> </div> </div> <div class="col-7"> <h4>Entrecosto Grelhado</h4> <p>Acompanhamento: Batatas Assadas, Arroz, Limão, Cebola</p> </div> <div class="col-2"> <div class="section_menu__item__price text-center">12,50€</div> </div> </div> </div> </div> <div class="col-md-6 filtr-item" data-category="2" data-sort="value"> <div class="section_menu__item"> <div class="row"> <div class="col-3"> <div class="section_menu__item__img"> <img src="assets/img/13.jpg" alt="..."> </div> </div> <div class="col-7"> <h4>Vinho Tinto Barca Velha</h4> </div> <div class="col-2"> <div class="section_menu__item__price text-center">650,00€</div> </div> </div> </div> </div> <div class="col-md-6 filtr-item" data-category="1" data-sort="value"> <div class="section_menu__item"> <div class="row"> <div class="col-3"> <div class="section_menu__item__img"> <img src="assets/img/8.jpg" alt="..."> </div> </div> <div class="col-7"> <h4>Sardinhas Grelhadas</h4> <p>Acompanhamento: Batatas Cozidas, Limão, Molho à Escabeche</p> </div> <div class="col-2"> <div class="section_menu__item__price text-center">13,50€</div> </div> </div> </div> </div> <div class="col-md-6 filtr-item" data-category="2" data-sort="value"> <div class="section_menu__item"> <div class="row"> <div class="col-3"> <div class="section_menu__item__img"> <img src="assets/img/14.jpg" alt="..."> </div> </div> <div class="col-7"> <h4>Vinho Tinto Mouchão</h4> </div> <div class="col-2"> <div class="section_menu__item__price text-center">175,00€</div> </div> </div> </div> </div> <div class="col-md-6 filtr-item" data-category="1" data-sort="value"> <div class="section_menu__item"> <div class="row"> <div class="col-3"> <div class="section_menu__item__img"> <img src="assets/img/9.jpg" alt="..."> </div> </div> <div class="col-7"> <h4>Salmão Assado</h4> <p>Acompanhamento: Molho de Cogumelos</p> </div> <div class="col-2"> <div class="section_menu__item__price text-center">7,50€</div> </div> </div> </div> </div> <div class="col-md-6 filtr-item" data-category="2" data-sort="value"> <div class="section_menu__item"> <div class="row"> <div class="col-3"> <div class="section_menu__item__img"> <img src="assets/img/16.png" alt="..."> </div> </div> <div class="col-7"> <h4>Quinta dos Carvalhais Tinto</h4> </div> <div class="col-2"> <div class="section_menu__item__price text-center">8.50€</div> </div> </div> </div> </div> <div class="col-md-6 filtr-item" data-category="1" data-sort="value"> <div class="section_menu__item"> <div class="row"> <div class="col-3"> <div class="section_menu__item__img"> <img src="assets/img/10.jpg" alt="..."> </div> </div> <div class="col-7"> <h4>Bifinhos de Frango</h4> <p>Acompanhamento: Puré de Batata Doce</p> </div> <div class="col-2"> <div class="section_menu__item__price text-center">10,00€</div> </div> </div> </div> </div> <div class="col-md-6 filtr-item" data-category="2" data-sort="value"> <div class="section_menu__item"> <div class="row"> <div class="col-3"> <div class="section_menu__item__img"> <img src="assets/img/15.jpg" alt="..."> </div> </div> <div class="col-7"> <h4>Rótulo Touriga Nacional</h4> </div> <div class="col-2"> <div class="section_menu__item__price text-center">6.50€</div> </div> </div> </div> </div> </div> </div> </section> .section_menu__item__price{ margin-top: 0; margin-bottom: .5rem; } .section_menu__item__price{ font-family: Playfair Display,serif; font-weight: 400; line-height: 1.42857; margin-bottom: .5rem; color: #151515; } .section_menu__item__price{ margin-bottom: .8em; } .section_menu__item__price{ font-size: 1.375rem; } .section_menu__item { padding: 1rem 0; border-bottom: 1px solid #f0f0f0; } .section_menu__item__img { position: relative; overflow: hidden; height: 0; padding-bottom: 100%; } .section_menu__item__img>img { position: absolute; top: 0; left: 0; width: auto; max-width: 1000px!important; height: 100%!important; max-height: 100%; } .section_menu__nav>ul { padding-left: 0; list-style-type: none; text-align: center; } .section_menu__nav>ul>li { display: inline-block; } .section_menu__nav>ul>li>a { font-family: Lato,sans-serif; font-size: .75rem; font-weight: 900; position: relative; display: block; padding: 1rem; transition: color .1s; letter-spacing: .05em; text-transform: uppercase; color: #777; } .section_menu__nav>ul>li>a:active,.section_menu__nav>ul>li>a:active:focus,.section_menu__nav>ul>li>a:active:hover,.section_menu__nav>ul>li>a:focus,.section_menu__nav>ul>li>a:hover { text-decoration: none; color: #151515; } .section_menu__nav>ul>li.active>a:after { transform: translateY(0); opacity: 1; } Na transição desta imagem: https://prnt.sc/t71lva e esta https://prnt.sc/t71lyv . o site fica sem responsabilidade!
  10. Fala pessoal, boa noite a todos... Sou novo aqui no fórum, e também nessa área de desenvolvimento.. Comecei a estudar um pouco mais focado nessa área a dois meses atrás. Um livro que eu gostei muito quando o vi, foi do autor Jon Duckett (HTML e CSS: Projete e Construa Websites). Só que não consigo achar o livro aqui em Portugal com a edição em português, alguém de vocês sabem onde posso encontrar, na web ou livraria que tenha o mesmo em português? Só achei até agora em alguns sites direcionados para o Brasil. Não encontrei assunto relacionado usando a pesquisa do fórum. Obrigado.. Cumprimentos
  11. Boa tarde pessoa, para me facilitar meu trabalho estou tentando criar um sistema para preencher automaticamente uns documentos, mais para isso quero criar uma tela de login responsivo, para todos os formatos, até ai tudo bem. Três coisa não estou conseguindo fazer bem. Quando estou com o telemóvel em pé fica bem, quando viro-o fica desconfigurado. Onde estou a errar? E também a imagem do user e Background não fica correctamente, terei que usar média Queries para cada formato? Índex.php <!DOCTYPE html> <html lang="pt-pt"> <head> <meta charset="UTF-8"> <title>Preenchimento de Documentos</title> <link rel="stylesheet" href="css/estilo.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> </head> <body> <header> <div class="formulario"> <h1>Login</br><small> versão 1.0</small></h1> <div class="img-user"> <img src='imgs/img-user.png'> </div> <h2>Autenticação do Sistema</h2> <form> <div class="campo"> <input type=text required=""> <label>email</label> </div> <div class="campo"> <input type=password required=""> <label>Password</label> </div> <input type="checkbox" checked="checked" class="checkbox"> <label class= "checkbox2">guardar dados</label></br></br> <button>Entrar</button> <p id="registo">Registar</p> </form> </div> </header> </body> </html> estilo.css @charset "UTF-8"; *{ padding: 0; margin: 0; box-sizing: border-box; font-family: arial; } body{ width: 100%; height: auto; } header{ height: 100vh; width: 100%; background: url('../imgs/bg.gif'); background-repeat: no-repeat; background-size: cover; display: flex; justify-content: center; align-items:center; user-select:none; } .img-user{ width:100px; height:100px; left:0; right:0; margin:auto; top: 18%; position: absolute; background:#fff; border-radius:50%; display:flex; justify-content: center; } .img-user img{ width:80%; } h1{ margin-top: 50px; text-align:center; font-size:2rem; } h1 small{ font-size: 1rem; color:gray; } h2{ text-align:center; margin: 20px; } header .campo input{ width:90%; padding:10px; font-size:17px; background: transparent; border:none; border-bottom: solid 1px black; letter-spacing:2px; outline:none; margin:20px; } .formulario{ height: 550px; padding: 20px; background: rgba(255,255,255,0.5); border-radius:40px 10px 40px 10px; box-shadow: 0 20px 20px; } header .campo{ position: relative; } header .campo label{ position:absolute; top:0; left:0; padding: 10px; margin-left: 10px; font-size:16px; pointer-events: none; } header .campo input:focus~label, header .campo input:valid~label{ top:-20px; transition:0.5s; font-size:10px; } .checkbox2{ font-size: 13px; } header button{ width:100%; height:40px; border:none; outline:none; background: linear-gradient(to right, #505050, #909090); color: #fff; padding:10px 20px; font-size:15px; cursor:pointer; border-radius: 4px; } #registo{ margin-top: 20px; font-weight:bold; text-align:center; cursor:pointer; }
  12. Boa tarde, Sou iniciante em javascript, e estava a fazer um site em que pretendia colocar um carrinho de compras. Não posso usar Jquery. O que fiz foi primeiramente colocar os dados em local storage, e quando se clicar no carrinho de compras, mostrar uma div com os dados que foram guardados em local storage. A minha dificuldade é passar os dados de local storage para o programa, e apresentá los numa div. segue parte do código que fiz. <div class="carrinho_de_compras_total"> <button onclick="mostrar()">carrinho_de_compras</button> <div class="mostrar_carrinho_de_compras" style="height: 200px; width: 100%;"> <div class="itens"></div> <div class="total_dinheiro"></div> </div> </div> function compra_bilhete(n) { if(n==1) { var tipo_bilhete= "espetáculo"; ndias=1; var nome=document.getElementById('tipo_b1').innerHTML; var nadultos=document.getElementById('a_b1').value; var ncriancas=document.getElementById('c_b1').value; if(nadultos==0 & ncriancas==0) { alert("numero de pessoas inválido"); return } preco_dia= 50*nadultos + 30*ncriancas; precoTotal=preco_dia *ndias; } else if(n==2) { var tipo_bilhete= "espetáculo"; ndias=1; var nome=document.getElementById('tipo_b2').innerHTML; var nadultos=document.getElementById('a_b2').value; var ncriancas=document.getElementById('c_b2').value; if(nadultos==0 & ncriancas==0) { alert("numero de pessoas inválido"); return } preco_dia= 50*nadultos + 30*ncriancas; precoTotal=preco_dia *ndias; } else if(n==3) { var tipo_bilhete= "espetáculo"; ndias=1; var nome=document.getElementById('tipo_b3').innerHTML; var nadultos=document.getElementById('a_b3').value; var ncriancas=document.getElementById('c_b3').value; if(nadultos==0 & ncriancas==0) { alert("numero de pessoas inválido"); return } preco_dia= 50*nadultos + 30*ncriancas; precoTotal=preco_dia *ndias; } // else if(n==4) // { // var tipo_bilhete= "espetáculo"; // // var ndias=document.getElementById('dias_b2').innerHTML; // var tipo_espetaculo=document.getElementById('tipo_b3').innerHTML; // var nadultos=document.getElementById('a_b4').value; // var ncriancas=document.getElementById('c_b4').value; // var preco; // preco= 50*nadultos + 30*ncriancas; // } else if(n==5) { var tipo_bilhete= "Parque"; var ndias=document.getElementById('dias_p1').value; var nome=document.getElementById('tipo_p1').innerHTML; var nadultos=document.getElementById('a_p1').value; var ncriancas=document.getElementById('c_p1').value; if(nadultos==0 & ncriancas==0) { alert("numero de pessoas inválido"); return } preco_dia= 50*nadultos + 30*ncriancas; precoTotal=preco_dia *ndias; } else if(n==6) { var tipo_bilhete= "Parque"; var ndias=document.getElementById('dias_p2').value; var nome=document.getElementById('tipo_p2').innerHTML; var nadultos=document.getElementById('a_p2').value; var ncriancas=document.getElementById('c_p2').value; if(nadultos==0 & ncriancas==0) { alert("numero de pessoas inválido"); return } preco_dia= 50*nadultos + 30*ncriancas; precoTotal=preco_dia *ndias; } else if(n==7) { var tipo_bilhete= "Parque"; var ndias=document.getElementById('dias_p3').value; var nome=document.getElementById('tipo_p3').innerHTML; var nadultos=document.getElementById('a_p3').value; var ncriancas=document.getElementById('c_p3').value; if(nadultos==0 & ncriancas==0) { alert("numero de pessoas inválido"); return } preco_dia= 50*nadultos + 30*ncriancas; precoTotal=preco_dia *ndias; } // Pega a lista já cadastrada, se não houver vira um array vazio var carrinho_de_compras = JSON.parse(localStorage.getItem('carrinho-compras') || '[]'); // Adiciona reserva carrinho_de_compras.push({ tipo_de_bilhete: tipo_bilhete, dias: ndias, nome:nome, numero_adultos: nadultos, numero_criancas: ncriancas, preco_total: precoTotal }); // Salva a lista alterada localStorage.setItem("carrinho-compras", JSON.stringify(carrinho_de_compras)); alert("Bilhete adicionado ao carrino de compras"); } function mostrar(){ for (i=0;i<99;i++) { var x=JSON.parse(localStorage.getItem('carrinho-compras')); if(x==null) return; // quando não houver mais dados no local storage, sai do ciclo for } } Se alguém me pudesse ajudar agradecia imenso. Cumprimentos
  13. Boa noite caros Programadores, Estou a precisar de fazer um botão em que o comando deste é dado quando este é pressionado, isto é, (num smartphone) eu mal pressione com o dedo o botão, este envie logo o comando, e não espera que retire o dedo. Isto é possível? Não sei se me fiz entender. Obrigado
  14. Preciso fazer com que as spans e a ul fiquem alinhadas verticalmente ao centro da div#banner mas não está funcionando como tentei! Fiz uma tentativa e cheguei mais perto, embora o conteúdo tenha alinhado ao centro verticalmente como era o esperado, parece que não ocupou verticalmente todo a altura da div#banner.. html, body { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: content-box; } #banner { position: relative; width: 1536px; height: 610px; background-image: url("img/home1.jpg"); background-attachment: fixed; background-repeat: no-repeat; background-position: center top; z-index: -1; } #banner:before { content: ''; position: absolute; width: 100%; height: 100%; margin: 0 auto; background-image: linear-gradient(#004425, #072f1c 130%); opacity: .6; } #banner span { display: block; font-weight: bolder; font-size: 20pt; } #banner span, #banner ul { vertical-align: middle; display: inline-block; } <div id='banner'> <span id=volta><</span> <ul> <li><h1>Teste 1</h1></li> <li><h2>Teste 2</h2></li> </ul> <span id=avanca>></span> </div>
  15. Então, tenho o css html, body { margin: 0; padding: 0; } #banner { position: relative; width: 1536px; height: 610px; background-image: url("img/home1.jpg"); background-attachment: fixed; background-repeat: no-repeat; background-position: center top; z-index: -1; } #banner:before { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-image: linear-gradient(#004425, #072f1c 130%); opacity: .6; } e, o HTML <div id=banner></dv> teste <br /> teste <br /> teste <br /> teste <br /> teste <br /> teste <br /> teste <br /> teste <br /> teste <br /> teste <br /> teste <br /> teste <br /> teste <br /> teste <br /> Funciona corretamente. No entanto, o bloco de teste <br /> Não desce, fica no fundo da div.banner. Porque?
  16. Bom dia pessoal, em alguma parte do meu código css estou desabilitando meus href sem querer, isso acontece quando a tela fica inferior a 767px. Por favor ajudem, já estou cansado de olhar e não consigo encontrar. /* Base */ * { outline:none; } html, body { height: 100%; } body { font-family: 'Open Sans', sans-serif; font-size: 13px; line-height: 1.6em; color: #8c8c8c; background-color: #fff; } h1, h2, h3, h4, h5, h6 { font-family: 'Open Sans', sans-serif; } a { color: #404040; } a:hover { color: #404040; transition-property: all; transition-duration: 0.3s; transition-timing-function: linear; } a.none:hover { text-decoration: none; } /* Header */ .logo{ background-image: url(img/logotipo.png); background-size: contain; background-position:center center; background-repeat: no-repeat; font-size:0; width:350px; height: 150px; } .top { background: linear-gradient(to right, #efefef, #4169E1); padding: 5px 0; color: #fff; } .top p { margin: 0; } .top ul { margin: 0; padding: 0; } .top li i { color: #fff; } .top li a { color: #fff; } .top li a:hover { text-decoration: none; } .top li a:hover,.top li a:hover i { color: #005FA6; transition-property: all; transition-duration: 0.3s; transition-timing-function: linear; } /* Menu */ .navbar { -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; margin-bottom: 0; } .navbar .container { position: relative; } .navbar-default { -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; width: 100%; border: none; border-bottom: 1px solid #e7e7e7; background-color: #fff; } .navbar-default .navbar-nav > li > a { color: #404040; font-weight: normal; font-size: 13px; } .navbar-default .navbar-nav > li > a:hover { background-color: transparent; color: #005FA6; } .navbar-default .navbar-nav > .open > a,.navbar-default .navbar-nav > .open > a:hover,.navbar-default .navbar-nav > .open > a:focus { background-color: transparent; color: #005FA6; } .navbar-default .navbar-nav .active > a,.navbar-default .navbar-nav .active > a:hover,.navbar-default .navbar-nav .active > a:focus { color: #005FA6; background-color: transparent; } .navbar-default .navbar-toggle { margin: 10px 0 0 15px; } .navbar-default .navbar-toggle,.navbar-default .navbar-toggle:hover,.navbar-default .navbar-toggle:focus { border: none; background: #f3f3f3; } .navbar-default .navbar-toggle i { font-size: 31px; } .navbar-default .navbar-collapse { float: right; border-top: none; padding-left: 0; padding-right: 0; } .navbar-brand>img { padding: 5px; } @media screen and (max-width: 768px) { .navbar-default .navbar-collapse { padding-left: inherit; padding-right: inherit; } } @media screen and (max-width: 992px) { .navbar-default .navbar-collapse { width: 100%; margin-left: 0; margin-right: 0; max-height: none; } } @media (min-width:768px) { .navbar>.container .navbar-brand,.navbar>.container-fluid .navbar-brand { margin-left: 0; } } .main-navbar-nav { -moz-transition: all 0.3s linear; -o-transition: all 0.3s linear; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } .main-navbar-nav > li > a { padding-top: 30px; padding-bottom: 30px; line-height: 1; } .main-navbar-nav li > .dropdown-menu { -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; min-width: 225px; border: none; border-top: 2px solid #005FA6; } .main-navbar-nav li > .dropdown-menu > li > a { padding: 10px; position: relative; color: #404040; line-height: 1.12857143; font-size: 12px; } .main-navbar-nav li > .dropdown-menu > li > a:hover,.main-navbar-nav li > .dropdown-menu > li > a:focus { color: #005FA6; background-color: transparent; } .main-navbar-nav li > .dropdown-menu > li > a i { position: absolute; right: 20px; top: 50%; margin-top: -8px; font-size: 16px; } @media screen and (min-width: 993px) { .main-navbar-nav .dropdown:hover > .dropdown-menu { display: block; } .main-navbar-nav .dropdown:hover > .dropdown-menu .dropdown:hover .dropdown-menu { left: 225px;top: 0; margin-top: -2px; } } @media screen and (max-width: 992px) { .main-navbar-nav > li { border-bottom: 1px solid #f3f3f3; } .main-navbar-nav > li:last-child { border-bottom: none; } .main-navbar-nav > li > a { padding-top: 12px; padding-bottom: 12px; } } .navbar-brand { height: auto; padding: 0; } @media screen and (max-width: 992px) { .navbar-toggle { display: block; } .navbar-collapse.collapse { display: none !important; } .main-navbar-nav.navbar-nav,.main-navbar-nav.navbar-nav > li { float: none !important; } .navbar-collapse.collapse.in { display: block !important; overflow-y: auto !important; } } /* Hero */ .hero_area { background-image: url(img/hero.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover; height: 475px; padding: 0; } .hero_content { padding: 80px 0; } .hero_content h1 { text-shadow: 1px 1px 2px rgba(0,0,0,0.75); color: #005FA6; font-weight: 700; font-size: 42px; } .hero_content h2 { text-shadow: 1px 1px 2px rgba(0,0,0,0.25); color: #000; font-weight: 700; font-size: 32px; margin-top: 0; width: 55%; line-height: 38px; text-align:center; } /* Boxes */ .boxes_area { padding-top: 40px; padding-bottom: 10px; padding-left: 0; padding-right: 0; background-color: #f8f8f8; } .box { position: relative; } .box h3 { position: relative; margin-bottom: 20px; padding-bottom: 20px; } @media (min-width:769px) { .boxes_area div[class*="col-"]:after { content: " "; display: block; position: absolute; top: 0; right: 0; width: 1px; height: 100%; background-color: #ebebeb; } .boxes_area div[class*="col-"]:last-child:after { display: none; } } /* Home */ .home_content h2:after,.box h3:after { content: ''; position: absolute; width: 30px; background-color: #005FA6; height: 2px; left: 0; bottom: 0; } .box i { position: absolute; right: 0; top: 0; margin: 0; color: #005FA6; font-size: 45px; } .boxes_area h3 { font-size: 16px; font-weight: 500; margin-top: 0; margin-bottom: 18px; } .boxes_area .box p{ text-align: justify; padding-top:5%; } .services { padding-top: 50px; padding-bottom: 50px; } h2.section-title { text-align: center; color: #404040; } .services p.desc { text-align: center; font-size: 13px; margin-bottom: 20px; } .services .media { margin-top: 30px; } .services .media i { font-size: 45px; color: #005FA6; } .services .media h4 { font-size: 15px; font-weight: 600; color: #404040; } .services .media p { text-align: justify; } /* Veja Também */ .home-area { padding-bottom: 50px; } .home_content h2 { position: relative; font-size: 17px; font-weight: 600; padding-bottom: 20px; color: #404040; margin-bottom: 30px; } .home_list ul { margin: 0; padding: 0; float: left; width: 100%; } .home_list ul li { list-style: none; } .home_list .thumbnail { border: none; padding: 0; } .thumbnail .caption { padding: 9px; color: #404040; padding-left: 0; padding-right: 0; } .home_list h3 { font-size: 16px; font-weight: 600; margin-top: 10px; margin-bottom: 10px; color: #404040; } .home_list p { color:#8c8c8c; } .home_list a.btn { font-size: 13px; padding: 0; color: #005FA6; } .home_bottom .row { margin-left: -5px; margin-right: -5px; } .home_bottom div[class*="col-"] { padding-right: 5px; padding-left: 5px; position: relative; } /* Referencias */ .carousel-control{ width: 4%; } .carousel-control.left,.carousel-control.right { margin-left:0; background-image:none; } @media (max-width: 767px) { .carousel-inner .active.left { left: -100%; } .carousel-inner .next { left: 100%; } .carousel-inner .prev { left: -100%; } .active > div { display:none; } .active > div:first-child { display:block; } } @media (min-width: 767px) and (max-width: 992px ) { .carousel-inner .active.left { left: -50%; } .carousel-inner .next { left: 50%; } .carousel-inner .prev { left: -50%; } .active > div { display:none; } .active > div:first-child { display:block; } .active > div:first-child + div { display:block; } } @media (min-width: 992px ) { .carousel-inner .active.left { left: -25%; } .carousel-inner .next { left: 25%; } .carousel-inner .prev { left: -25%; } } /* Rodape */ footer.site-footer { background: #e6e6e6; padding: 20px 0 0; float: left; width: 100%; } footer.site-footer h4 { font-size: 17px; font-weight: 500; } footer.site-footer ul { padding-left: 0; margin-bottom: 20px; list-style: none; } footer.site-footer ul a { color: #666; font-size: 13px; } footer.site-footer p { font-size: 13px; } footer.site-footer p a { color: #666; } p.text { color: #666; } #copyright { background: #404040; color: #ccc; padding: 15px 0; font-size: 12px; margin-top: 20px; } #copyright p{ margin: 0; float: left; font-size: 12px; text-align: center; } .site-footer li a:hover { color:#005FA6; } ul.big li { float: left; width: 49%; } ul.big li:nth-child(2n) { margin-left: 2%; } @media (max-width:462px) { .fbox:last-child { margin-top: 20px; float: left; width: 100%;} } /* Maillist */ .login-form-1 { max-width: 300px; border-radius: 5px; display: inline-block; } .main-login-form { position: relative; } .login-form-1 .form-control { border: 0; box-shadow: 0 0 0; border-radius: 0; background: transparent; color: #555555; padding: 7px 0; font-weight: bold; height:auto; } .login-form-1 .form-control::-webkit-input-placeholder { color: #999999; } .login-form-1 .form-control:-moz-placeholder,.login-form-1 .form-control::-moz-placeholder,.login-form-1 .form-control:-ms-input-placeholder { color: #999999; } .login-form-1 .form-group { margin-bottom: 0; border-bottom: 2px solid #fff; padding-right: 20px; position: relative; } .login-form-1 .form-group:last-child { border-bottom: 0; } .login-group { background: #efefef; color: #999999; border-radius: 8px; padding: 10px 20px; } .login-group-checkbox { padding: 5px 0; } .login-form-1 .login-button { position: absolute; right: -25px; top: 50%; background: #ffffff; color: #999999; padding: 11px 0; width: 50px; height: 50px; margin-top: -25px; border: 5px solid #efefef; border-radius: 50%; transition: all ease-in-out 500ms; } .login-form-1 .login-button:hover { color: #555555; transform: rotate(450deg); } .login-form-1 .login-button.clicked { color: #555555; } .login-form-1 .login-button.clicked:hover { transform: none; } .login-form-1 .login-button.clicked.success { color: #2ecc71; } .login-form-1 .login-button.clicked.error { color: #e74c3c; } /* Breadcrumb */ .bread_area { border-bottom: 1px solid #e7e7e7; padding: 10px 0; margin-bottom: 40px; } .breadcrumb { margin: 0; background: #fff; padding: 0; } /* Page */ .page-main { float: left; width: 100%; background-color: #fff; margin-bottom: 30px; line-height: 3.0em; text-align: justify; } .contact{ line-height: 2.0em; } /* Entry (Contacto) */ .entry{ padding: 5%; } /* Category - Florista - frota */ .category-main { float: left; width: 100%; background-color: #fff; margin-bottom: 30px; } .category-content h3 { font-size: 19px; margin-bottom: 20px; } .category-main .media { margin-top: 30px; } .category-main .media:first-child{ margin-top: 0; } .category-main ul li { list-style: none; position: relative; } .category-main .media-left { padding-right: 20px; } .category-main .meta { position: absolute; bottom: 0; border-bottom: 2px solid #e7e7e7; width: 71%; min-height: 30px; line-height: 24px; padding-bottom: 3px; } .category-main .category-meta { width: 67%; } .category-main .meta .arc-comment { float: left; margin-right: 5px; border-right: 2px solid #e7e7e7; padding-right: 7px; } .category-main .meta .arc-comment a, .archive ul.arc-share li a { color: #333; font-size: 15px; } .category-main .meta .arc-comment a:hover, .archive ul.arc-share li a:hover { text-decoration: none; color: #ff1515; } .category-main .meta .arc-date { float: right; font-size: 15px; color: #333; } .category-main ul.arc-share { float: left; margin: 0; padding: 0; margin-right: 5px; } .category-main ul.arc-share li{ float: left; list-style: none; margin-left: 10px; } .category-main .archive-cat a { color: #ff1515; } .category-main .archive-cat a:hover { color: #333; text-decoration: none; } /* Form Contact */ .page-main .tipo_contacto{ text-align:center; } .page-main form p{ line-height:2.0em; } .page-main form input[type="text"], form input[type="email"], form input[type="url"]{ padding: 0; width:100%; height: 30px; } .page-main form textarea{ width:100%; height: 200px; } /* showroom */ .category-main ul ul{ display: none; } /* Sidebar */ .widget h4,h2.page-title, h2.category-title { position: relative; margin-top: 0; padding-bottom: 20px; margin-bottom: 20px; font-size: 17px; font-weight: 700; color: #404040; width: 100%; } .widget h4 { font-size: 15px; margin-left: 15px; } .widget h4:after,h2.page-title:after, h2.category-title:after { content: ''; position: absolute; width: 30px; background-color: #005FA6; height: 2px; left: 0; bottom: 0; } .widget { margin-bottom: 30px; } .sidebar ul { padding-left: 15px; padding-right: 15px; margin: 0; } .sidebar ul li { list-style: none; } .sidebar ul li a { padding: 3px 15px; display: block; margin-left: -15px; margin-right: -15px; color: #404040; } .sidebar li.current a { background-color: #005FA6; margin-left: -15px; margin-right: -15px; color: #FFFFFF; } .sidebar ul li a:hover { background-color: #005FA6; color: #FFFFFF; text-decoration: none; transition-property: all; transition-duration: 0.2s; transition-timing-function: linear; } /* Responsive */ @media screen and (max-width:462px) { .logo{ background-image: url(img/logotipo.png); background-size: contain; background-position:center center; background-repeat: no-repeat; font-size:0; width:250px; height: 100px; } .top { text-align: center; } .top ul.list-inline{ float: none !important; text-align: center; } .hero_content { padding: 80px 0; } .hero_content h1 { font-size: 32px; } .hero_content h2 { width: 90%; font-size: 21px; } /*.boxes_area .row {margin-left: -20px;margin-right: -20px;}*/ .boxes_area .box p { margin-bottom: 30px; } .services .media .media-left { padding-right: 15px; } .category-content .media-body { float: left; position: relative; width: 100%; } .category-content .media-body h3 { margin-top: 20px; } .category-main .meta { position: relative; width: 100%; } .category-main .meta .pull-left { margin-left: 40px; } .category-main .meta .pull-right { display: none; } .sidebar { margin-top: 40px; } } @media (min-width:463px) and (max-width:768px) { .hero_content { padding: 60px 0; } .hero_content h1 { font-size: 25px; } .hero_content h2 { padding-top: 2%; width: 55%; font-size: 20px; } .logo{ background-image: url(img/logotipo.png); background-size: contain; background-position:center center; background-repeat: no-repeat; font-size:0; width:250px; height: 100px; } .fbox { float: left; } .fbox:nth-child(3) { float: right !important; } }
  17. O código: <html> <head> <title>MVC PDO CRUD</title> <link rel="shortcut icon" type="image/x-icon" href="imgs/favicon.png"/> <style> /* CSS Document */ @import url('http://fonts.googleapis.com/css?family=Open+Sans'); *, *:before, *:after, *:active, *:hover { font-family: 'Open Sans'; margin: 0; padding: 0; border:0; outline: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: content-box; /*Comprimir(diminuir) as medidas do elemento para não aumentá-lo quando adicinar margin e padding*/ } ul { list-style: none; }ul.topo{ background-color: #000000; color: #FFFFFF; } ul.topo li { text-align: center; } ul.ulHorizontal { height: 50px; } ul.ulHorizontal li { display: inline-block; line-height: 50px; } ul.ulHorizontal li img { vertical-align: middle; } img { max-width: 100%; } a, a:hover { text-decoration: none; } button, input[type=button], input[type=submit], input[type=reset] { cursor: pointer; background-color: #CCCCCC; } button:hover, input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover { background-color: #DCDCDC; border: 1px rgba(0,0,0,.2) solid; } button:active, input[type=button]:active, input[type=submit]:active, input[type=reset]:active { background-color: #FFFFFF; } /************ CORES **************/ .bgcCinza100 { background-color: #CCC; } .bgcCinza25 { background-color: #DCDCDC; } .bgcPreto100 { background-color: #000; } .bgcBranco100 { background-color: #FFF; } .bgcVermelho100 { background-color: #F00; } .bgAzulCiano { background-color: #007EAE; } /************ CORES **************/ </style> <script type="text/javascript" src="scripts/js/bibliotecas/jquery-3.4.1.min.js"></script> <script> function verifica(msg) { return confirm(msg); }; </script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <body> <ul class="ulHorizontal topo"> <li style="width:200px">CATEGORIA</li><!-- --><li style="width:200px">NOME</li><!-- --><li style="width:100px">PREÇO</li><!-- --><li style="width:100px">FRETE</li><!-- --><li style="width:100px">TRANSPORTE</li><!-- --><li style="width:100px">EDITAR</li><!-- --><li style="width:100px">BLOQUEIO</li><!-- --><li style="width:100px">EXCLUIR</li> </ul> <ul class=ulHorizontal id=listaRegistros style="background-color:#CCC"> <li style="text-align:left; width:200px;">Leve</li><!-- --><li style="text-align:left; width:200px;">Produto 1</li><!-- --><li style="text-align:right; width:100px;">120.33</li><!-- --><li style="text-align:center; width:100px;">1</li><!-- --><li style="text-align:center; width:100px;">Correios</li><!-- --><li style="text-align:center; width:100px;"><a href=""><img src="imgs/editar.png" height="30px" title="Editar Produto"/></a></li><!-- --><li style="text-align:center; width:100px;"><a href="" onclick="return verifica('Deseja Bloquear este produto');" ><img src="imgs/bloquear.png" height="30px" title="Bloquear Produto" /></a></li><!-- --><li style="text-align:center; width:100px;"><a href="" onclick="return verifica('Deseja Excluir este produto?');" ><img src="imgs/excluir.png" height="30px" title="Excluir Produto"/></a></li> </ul> </body> </html> Os problemas: Na verdade eu gostaria de saber o porque de quando vou medir as alturas das lís elas estão se alterando. As li's de acordo com o css devem ser de 50px lisas, sem bordas. Lis só de texto, estão reduzindo para 49,6px Lis com as imagens, estão reduzindo para 30px Onde está o erro? Obs.: Esse comportamento é visto no Chrome e somente no inspector. Pois no visual se vê normalmente.
  18. Boa tarde pessoal, sou novo aqui no site. Estou reformulando meu site para ser responsivo, só que necessito de algo que não sei como fazer e nem encontrei nada, talvez não encontrei por não ter digitado o nome correcto do assunto. Estou fazendo uma galeria de fotos, mas gostaria que só aparecesse a primeira imagem e somente ao clicar nela que as restantes fossem apresentadas. exemplo: <div class="fotos"> <a href="img/carros.jpg" title="Carro Funerário"> <img class="media-object" src="img/carro1.jpg" alt="Post"> <img class="media-object" src="img/carro2.jpg" alt="Post"> <img class="media-object" src="img/carro3.jpg" alt="Post"> <img class="media-object" src="img/carro4.jpg" alt="Post"> </a> </div> script $(document).ready(function() { $('.fotos').magnificPopup({ delegate: 'a', type: 'image', gallery:{enabled:true} }); }); já tentei colocar: .fotos{ display: none; } .fotos{ visility: hidden; } mas não deu certo, por favor ajudem me.
  19. Tenho o seguinte conteudo HTML sendo gerado em um loop PHP $html .= " <ul class='border'> <li style='text-align: left; border-bottom: .1px rgb(0,0,0) solid;'><label class='labelPequeno'>Gcéu</label> : " . $celula[ "nomeCelula" ] . "</li> <li style='text-align: left; border-bottom: .1px rgb(0,0,0) solid;' class='backCinza'><label class='labelPequeno'>Supervisor de Setor</label> : " . $nomeLideres[ "nomeLiderSetor" ] . "</li> <li style='text-align: left; border-bottom: .1px rgb(0,0,0) solid;'><label class='labelPequeno'>Líder</label> : " . $celula[ "nomeLider" ] . "</li> <li style='text-align: left;'><label class='labelPequeno'>Auxiliar</label> : " . $celula[ "nomeAuxiliar" ] . "</li> </ul> <ul class='border'> <li style='text-align: left; border-bottom: .1px rgb(0,0,0) solid;'><label class='labelPequeno'>Dias que acontece</label> : " . $celula[ "diaReunioes" ] . "</li> <li style='text-align: left;'><label class='labelPequeno'>Membros Ativos</label> : " . $membros . "</li> </ul>"; Isso acontece na pagina x.php por exemplo. Nessa mesma pagina x.php existe um form que envia, via POST, um campo hidden com o value sendo a variavel acima criada com seu conteudo para uma pagina que vai gerar um arquivo pdf. Estou gerando PDF's com o codigo abaixo usando a biblioteca FPDF require_once "_classes/_util/_PDF/PDF.php"; $html = $_POST["htmlPDF"]; $pdf = new PDF; $pdf->AddPage(); $pdf->SetFont('Arial','B',16); $pdf->WriteHTML( utf8_decode ( $html ) ); $pdf->Output("relatorio.pdf","D"); Acontece que nesse arquivo eu não posso inserir as chamadas aos arquivos de style. O problema: $_POST["htmlPDF"] Tráz um HTML . Nesse caso, o pdf está saindo sem style. Será que existe uma forma de quando estiver sendo gerada a variável que contem o html, aproveitar e inserir via código (dinamicamente) os estilos direto nas tags? Ou ainda inserir no objeto HTML a folha de style?
  20. CÓDIGO: ul.ulVertical { border: .1px rgb(0, 0, 0) solid; list-style: none; width: 800px; height: 100px; } ul.ulVertical li { display: inline-block; width: 100px; height: 30px; text-align: center; border-top: .1px rgb(0, 0, 0) solid; transform: rotate(270deg); transform-origin: top right; } ul.ulVertical li:last-chield { border: none; } HTML: <ul class="ulVertical"> <li>Passo 1</li> <li>Passo 2</li> <li>Passo 3</li> <li>Passo 4</li> <li>Passo 5</li> <li>Passo 6</li> <li>Passo 7</li> <li>Passo 8</li> <li>Passo 9</li> <li>Passo 10</li> <li>Passo 11</li> <li>Passo 12</li> <li>Passo 13</li> </ul> Esse código funciona. Mas devido à largura na horizontal da li ser de 100px, isso leva a um distanciamento entre as li's de tamanho igual ao de sua largura na horizontal. O que eu preciso? Arranjar uma forma de aproximar as li's de uma forma que NÃO haja espaço entre elas quando estiverem na vertical. Note que a dificuldade aí é que se você reduzir o height das li's não resolverá pois a distância na horizontal entre as li´s se dá pelo width de cada li e NÃO pelo seu height. Oque fazer nesse caso SEM usar display: flex?
  21. http://prntscr.com/mb703j Eu quando coloco a pass á primeira bem e depois meto mal ele continua com o certo e com o texto todo descodificado e eu nao consigo descorribir o erro quem me puder ajudar agradecia!!
  22. Cristiano Marques

    software

    olá a ideia e fazer pequenos software que possam acelerar e manter a qualidade de ensino/aprendizagem. E uma das ferramentas deste seculo está a nossa disposição: WEB O porrifólio de aplicativos tende ao infinito educacional. Então a proposta é vamos criar-los? os Softwares? Cristiano Marques
  23. 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á!
  24. 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
  25. 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?
×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.