Jump to content

Search the Community

Showing results for tags 'css'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • 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
    • 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
    • Matemática
    • Dúvidas e Discussão de Programação
    • Notícias de Tecnologia
  • Outras Áreas
    • 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...

Found 822 results

  1. 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>
  2. carcleo

    Bloco entrando na div

    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?
  3. John Hebert Trindade

    Link href

    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; } }
  4. carcleo

    Lis se reduzindo de altura

    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.
  5. John Hebert Trindade

    Ocultar Imagem

    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.
  6. AJBM

    Dúvida como fazer scroll de texto

    Boas, Eu quero fazer scroll de um texto da direita para a esquerda e não quero que a página fique sem texto, pretendo algo fluído Eu tenho isto, mas não estou a conseguir obter o comportamento pretendido. <marquee behavior="scroll" direction="left" scrollamount="20" scrolldelay="0"> <h1>TEXTO PARA RODAR</h1> </marquee> Obrigado.
  7. oykvi

    Animação PHP

    delete post
  8. carcleo

    inserir Style no PDF

    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?
  9. 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
  10. carcleo

    Li´s saindo da UL

    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?
  11. nandeseasy

    registo.php script

    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!!
  12. 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á!
  13. 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
  14. 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
  15. 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.
  16. 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?
  17. 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; }
  18. 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>
  19. 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
  20. 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...
  21. 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%; }
  22. 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?
  23. 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.
  24. 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>
  25. 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 ?
×
×
  • 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.