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

  • Q&A Desenvolvimento
    • Perguntas e respostas rápidas
  • Desenvolvimento e Banco de Dados
    • HTML e CSS
    • Java
    • Javascript
    • .NET
    • PHP
    • Python
    • Ruby
    • Mobile
    • Ambientes de Desenvolvimento
    • Arquitetura e Métodos Ágeis
    • Banco de Dados
    • DevOps
    • Desenvolvimento de Games
    • E-Commerce e Pagamentos Online
    • SEO e Otimizações
    • WordPress
    • Algoritmos & Outras Tecnologias
  • Design e Produto
    • Fotografia
    • Photoshop
    • Design de interfaces e UX
    • Edição/Produção de Vídeos
    • Marketing Online
    • Desenho, Ilustração e 3D
  • Entretenimento e uso pessoal
    • Geral
    • Segurança & Malwares
    • Gadgets e wearable
    • Softwares e Apps
    • Entretenimento

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Google+


Hangouts


Skype


Twitter


deviantART


Github


Flickr


LinkedIn


Pinterest


Facebook


Site Pessoal


Localização


Interesses

Found 1264 results

  1. marcelocardoso

    limitar itens paginação...

    olá pessoal. Estou disponibilizando um script para paginação de noticias, ele funciona, porém, ao adaptar codigo usado da internet, não encontrei maneiras de LIMITAR os REGISTROS. Se alguém quiser contribuir, na parte da paginação, agradeço. preciso limitar os registros em 10 em 10 a paginação primeiro < 1 2 3 4 5 6 7 8 9 10 > ultimo <section class="container-fluid"> <div class="row mb-5"> <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12 mb-5"> <h1 class="text-center"> Informações e noticias </h1> <h3 class="text-center"> Atualizações diárias de conteúdos advocatícios e judiciais </h3> </div> <div class="col-xl-8 col-lg-8 col-md-8 col-sm-8 col-xs-12 mt-2 p-5" style="height: auto;"> <% IF IsEmpty(Request.QueryString("idnot")) OR IsNull(Request.QueryString("idnot")) THEN SQL1 = "SELECT * FROM dbluz_noticias ORDER BY id DESC LIMIT 1" ELSE SQL1 = "SELECT * FROM dbluz_noticias WHERE id = "& Request.QueryString("idnot") &" ORDER BY id DESC LIMIT 1" END IF SET strNoticias = Server.CreateObject("ADODB.Recordset") strNoticias.Open SQL1, conexao, 3, 3 IF strNoticias.EOF THEN %> <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center"> <h1>AVISO!</h1> <h4 style="color: green;"> Não existem noticias cadastradas no momento, <br> ou não existe registro para este ID informado. </h4> </div> <% ELSE DO WHILE NOT strNoticias.EOF %> <div class="box-noticias-data"> <%=strNoticias("dbluz_data")%> </div> <div class="box-noticias-subtitulo"> <%=strNoticias("dbluz_subtitulo")%> </div> <div class="box-noticias-titulo mt-4"> <%=strNoticias("dbluz_titulo")%> </div> <div class="box-noticias-descricao mt-5 text-justify"> <%=strNoticias("dbluz_descricao")%> </div> <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12 text-right box-noticias-fonte line-dotted-top mt-3 mb-5 p-2"> <span class="mb-5 mt-2 p-2 bg-success"> <a href="index.asp?idnot=<%=strNoticias("id")%>" role="button" class="btn btn-clean"> <span class="fa fa-print fa-1x font-color-var1"></span> </a> </span> </div> <% strNoticias.MoveNext Loop SET strNoticias = Nothing %> </div> <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-xs-12 mt-5 p-0"> <% SQL2 = "SELECT * FROM dbluz_noticias " SET strNoticiasBlocos = Server.CreateObject("ADODB.Recordset") strNoticiasBlocos.Open SQL2, conexao, 3, 3 IF strNoticiasBlocos.EOF THEN %> <div class="row"> <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center"> <h1>AVISO!</h1> <h4 style="color: green;">Não existem noticias cadastradas no momento, <br> ou não existe registro para este ID informado.</h4> </div> </div> <% ELSE ItensExibidos = 1 'Qtde de Itens' NumeroDaPagina = Request.QueryString("pg") IF NumeroDaPagina = "" THEN NumeroDaPagina = 1 TotalDeRegistros = UBound(strNoticiasBlocos.GetRows,2)+1 InicioDaPagina = ((ItensExibidos*NumeroDaPagina)-ItensExibidos) FinalDaPagina = ItensExibidos IF TotalDeRegistros <= ItensExibidos THEN PaginaTotal = 1 ELSEIF (TotalDeRegistros MOD ItensExibidos = 0) THEN PaginaTotal = (TotalDeRegistros/ItensExibidos) ELSE PaginaTotal = (TotalDeRegistros/ItensExibidos) + 1 PaginaTotal = Cint(PaginaTotal) END IF strNoticiasBlocos.close SQL3 = SQL2 & "WHERE id != (SELECT max(id) FROM dbluz_noticias) ORDER BY id DESC LIMIT "& InicioDaPagina &" , "& FinalDaPagina &"" strNoticiasBlocos.Open SQL3, conexao, 3, 3 %> <div class="row"> <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12 mb-2"> <% DO WHILE NOT strNoticiasBlocos.EOF %> <div class="box-noticias-data-min"><%= strNoticiasBlocos("dbluz_data")%></div> <div class="box-noticias-titulo-min mt-1 mb-1"> <a href="index.asp?idnot=<%=strNoticiasBlocos("id")%>" class=""> <%= strNoticiasBlocos("dbluz_titulo")%> </a> </div> <div class="box-noticias-descricao-min hidden-sm hidden-xs mb-4 line-dotted-top"> <%= LEFT(strNoticiasBlocos("dbluz_descricao"),200)%> </div> <% strNoticiasBlocos.MoveNext Loop %> </div> <% END IF END IF %> </div> <div class="col-xl-12 col-lg-12 col-md-12 col-md-12 col-xs-12"> <ul class="pagination pagination-sm"> <% IF Cint(NumeroDaPagina) = 1 THEN %> <li class="page-item disabled"> <a class="page-link fa fa-home" href="?pg=1" tabindex="-1"></a> </li> <li class="page-item disabled"> <a class="page-link" href="?pg=<%=NumeroDaPagina-1%>" tabindex="-1">Anterior</a> </li> <% ELSE %> <li class="page-item"> <a class="page-link fa fa-home" href="?pg=1" tabindex="-1"></a> </li> <li class="page-item"> <a class="page-link" href="?pg=<%=NumeroDaPagina-1%>" tabindex="-1">Anterior</a> </li> <% END IF %> <% FOR intID = 1 TO PaginaTotal IF intID = Cint(NumeroDaPagina) THEN %> <li class="page-item active"><a class="page-link" href="#"><b><%=intID%></b></a></li> <% ELSE %> <li class="page-item"> <a class="page-link" href="?pg=<%=intID%>"> <%=intID%> </a> </li> <% END IF NEXT %> <% IF Cint(NumeroDaPagina) = PaginaTotal THEN %> <li class="page-item disabled"> <a class="page-link" href="?pg=<%=NumeroDaPagina+1%>">Proxima</a> </li> <li class="page-item disabled"> <a class="page-link fa fa-arrow-circle-right" href="?pg=<%=PaginaTotal%>"></a> </li> <% ELSE %> <li class="page-item"> <a class="page-link" href="?pg=<%=NumeroDaPagina+1%>">Proxima</a> </li> <li class="page-item"> <a class="page-link fa fa-arrow-circle-right" href="?pg=<%=PaginaTotal%>"></a> </li> <% END IF %> </ul> </div> <div class="col-xl-12 col-lg-12 col-md-12 col-md-12 col-xs-12"> <div class="text-right p-1" style="font-size: 10px;"> Navegando na página <b id="barra_numero"><%= NumeroDaPagina %></b> de <b id="barra_total"><%= PaginaTotal %></b> </div> <div class="text-right p-1" style="font-size: 10px; color: dimgray;"> TOTAL DE <b id="barra_registro"><%= TotalDeRegistros %></b> REGISTROS </div> </div> </div> </div> </section> CODIGO DA PAGINACAO EXTRAIDO DA PARTE DE CIMA, a parte que preciso ajustar.... <ul class="pagination pagination-sm"> <% IF Cint(NumeroDaPagina) = 1 THEN %> <li class="page-item disabled"> <a class="page-link fa fa-home" href="?pg=1" tabindex="-1"></a> </li> <li class="page-item disabled"> <a class="page-link" href="?pg=<%=NumeroDaPagina-1%>" tabindex="-1">Anterior</a> </li> <% ELSE %> <li class="page-item"> <a class="page-link fa fa-home" href="?pg=1" tabindex="-1"></a> </li> <li class="page-item"> <a class="page-link" href="?pg=<%=NumeroDaPagina-1%>" tabindex="-1">Anterior</a> </li> <% END IF %> <% FOR intID = 1 TO PaginaTotal IF intID = Cint(NumeroDaPagina) THEN %> <li class="page-item active"><a class="page-link" href="#"><b><%=intID%></b></a></li> <% ELSE %> <li class="page-item"> <a class="page-link" href="?pg=<%=intID%>"> <%=intID%> </a> </li> <% END IF NEXT %> <% IF Cint(NumeroDaPagina) = PaginaTotal THEN %> <li class="page-item disabled"> <a class="page-link" href="?pg=<%=NumeroDaPagina+1%>">Proxima</a> </li> <li class="page-item disabled"> <a class="page-link fa fa-arrow-circle-right" href="?pg=<%=PaginaTotal%>"></a> </li> <% ELSE %> <li class="page-item"> <a class="page-link" href="?pg=<%=NumeroDaPagina+1%>">Proxima</a> </li> <li class="page-item"> <a class="page-link fa fa-arrow-circle-right" href="?pg=<%=PaginaTotal%>"></a> </li> <% END IF %> Desde já obrigado...
  2. Problema em definir largura e disposição horizontal de tabelas com resultado de while Como iniciante em programação estou tendo problemas para estilizar uma tabela dentro de um script PHP. Possuo o seguinte script: <?php $sql = 'SELECT * FROM psd_produtos'; $stmt = $conn->query($sql); echo '<table>'; while($row = $stmt->fetch(PDO::FETCH_OBJ)){ echo " <td> <tr><h1>$row->prd_nome <br /></h1></tr> <tr><p>$row->prd_detalhe <br /></p></tr> <tr>$row->prd_valor <br /></tr> </td> "; } echo '</table>'; ?> Ele funciona perfeitamente, buscando e produzindo um loop das informações que preciso, porém, gostaria que o resultado me retornasse em tabelas que ficasse dispostas horizontalmente lado a lado, e imaginei colocar uma classe CSS que estabelecesse a largura da tabela em 400px com um float que me permitiria alinhar o resultado em “4 colunas”. Porém, essa classe não funciona dentro do script. Tentei echo '<table class="tabela-produto">'; e não funciona. A mesma classe, que estabelece uma largura para a tabela, aplicada a uma tabela fora do script funciona e isso tirou minha dúvida se este tópico seria sobre CSS/HTML ou PHP. Como posso fazer para obter meu objetivo com este script, alinhando horizontalmente o resultado do while em tabelas dispostas horizontalmente em 4 colunas?
  3. Ewfc2005

    Texto aparecer ao rolar página

    Queria saber como faço para fazer um texto aparecer ao rolar a pagina igual ao desse site: https://ciesalon.com/services
  4. Prezados, bom dia. Gostaria de uma ajudar, sobre um script que estou criando. Não estou conseguindo fazer a comparação entre data e horário, tipo assim : eu quero que quando o usuário faça um agendamento ex: data 15/07/2019 horário: 10h00 ás 12h00, não pode ter outro agendamento nessa data 15/07/2019 e nem entre esse horário 10h00 às 12h00. Mais pode ter outro agendamento nessa data 15/07/2019, mais não no mesmo horário. Abaixo está meu script : <!DOCTYPE html> <html> <head> <title>GESTÃO DE CASOS</title> <meta lang="pt-br" charset="utf-8"> <link rel="icon" type="imagem/png" href="../gestao/img/logo.png" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <script type="text/javascript" src="../bootstrap/sweetalert/dist/sweetalert.js"></script> </head> <body> <?php if(!isset($_SESSION)) { session_start(); } date_default_timezone_set('America/Sao_Paulo'); header('Content-type: text/html; charset=utf-8'); if (isset($_POST["submit"])) { $hr_agendamento = ('H:i:s'); $now = date('Y-m-d H:i:s'); $planoID = $_POST["planoID"]; $pacienteID = $_POST["pacienteID"]; $unidadeID = $_POST["unidadeID"]; $dt_programada = $_POST["dt_programada"]; $hr_inicial = $_POST["hr_inicial"]; $hr_final = $_POST["hr_final"]; $atendimentoID = $_POST["atendimentoID"]; } $unidade = $_SESSION['unidade_referencia']; include ("../administracao/conn.php"); $agenda = "SELECT a.hr_inicial, a.hr_final, DATE_FORMAT( `dt_programada` , '%d/%m/%Y' ) AS `data_formatada` , b.unidadeID, b.unidade_referencia FROM tb_agenda a INNER JOIN tb_unidade b ON a.unidadeID = b.unidadeID WHERE b.unidade_referencia = $unidade"; /* nessa parte que não estou conseguindo fazer a comparação , consigo pegar a variável que o usuário digita, porém não estou conseguindo trazer do banco de dados*/ IF ( (["dt_programada"] == $_POST["dt_programada"]) && (["hr_inicial"] == $_POST["hr_inicial"]) && (["hr_final"] == $_POST["hr_final"])) { echo "<script> swal('ATENÇÃO','DATA E HORÁRIO JÁ CADASTRADO', 'warning').then(function() {window.location = '../plano/escolha_paciente_plano.php';});</script>"; } ELSE { $sql = "INSERT INTO tb_agenda (planoID, pacienteID, unidadeID, dt_programada, hr_inicial, hr_final, atendimentoID) values ('$planoID','$pacienteID', '$unidadeID', '$dt_programada', '$hr_inicial', '$hr_final', '$atendimentoID')"; if (mysqli_query($connect, $sql)) { echo "<script>swal('BOM TRABALHO!', 'AGENDA CADASTRADA COM SUCESSO!', 'success').then(function() {window.location = '../plano/escolha_paciente_plano.php';});</script>"; $x = 'Agenda criada com sucesso'; include "../administracao/agenda_log.php"; } else { echo "<script>swal('INFELIZMENTE', 'NÃO FOI POSSÍVEL CADASTRAR A AGENDA', 'warning').then(function() {window.location = '../plano/escolha_paciente_plano.php';});</script>" . $sql . "<br>" . mysqli_error($connect); $x = 'Não foi possível criar a agenda'; include "../administracao/agenda_log.php"; } } ?> </body> </html>
  5. Mansnotrich

    CSS nao aparece

    tenho este código no login.php: E funciona bem no web mas depois fiz este codigo em css e nao aparece no web:
  6. galera, no print mostra onde é examente que estou falando. quando eu clico a página recarregar e acaba voltando o menu pro seu estado normal. vou deixar abaixo o html da página. ```` <div class="nav-side-menu"> <div class="brand"> @if(!empty(Auth::user()->usr_foto)) <img id="fotoUsuMenu" src="{{Auth::user()->usr_foto}}"> @else <img id="fotoUsuMenu" src="{{asset('imagens/ImgUsuario.jpg')}}"> @endif <br> <span style="font-variant:small-caps;font-weight:bold;">{{Auth::user()->username}} <b>|</b></span> <a style="color:red; text-decoration: none; font-weight:bold" href="{{ route('logout') }}" onclick="event.preventDefault(); document.getElementById('logout-form').submit();"> Sair </a> <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;"> @csrf </form> </div> <i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i> <div class="menu-list"> <ul id="menu-content" class="menu-content collapse out"> <li> <a href="/dashboard" ><i class="fa fa-tachometer-alt sidebar-icon"></i> Dashboard</a> </li> <li data-toggle="collapse" data-target="#CadPessoas" class="collapsed"> <a><i class="fa fa-life-ring fa-users"></i> Cadastros Pessoas<span class="arrow"><i class="fa fa-angle-down"></i></spam></a> </li> <ul class="sub-menu collapse" id="CadPessoas"> <li><a href="/ListaColaboradores" id="psicologo"><i class="fa fa-angle-right"></i> Psicólogos</a></li> <li><a href="/ListaPacientes" id="pacientes"><i class="fa fa-angle-right"></i> Pacientes <small><i class="fa fa-external-link"></i></small></a></li> </ul> <li data-toggle="collapse" data-target="#CadGerais" class="collapsed"> <a><i class="fa fa-life-ring fa-pen"></i> Cadastros Básicos<span class="arrow"><i class="fa fa-angle-down"></i></spam></a> </li> <ul class="sub-menu collapse" id="CadGerais"> <li><a href="/ListaTiposAtendimentos" id="tipoAten"><i class="fa fa-angle-right"></i> Tipos de Atendimentos</a></li> <li><a href="/ListaSintomasQueixas" id="sinQuei"><i class="fa fa-angle-right"></i> Sintomas Queixas <small><i class="fa fa-external-link"></i></small></a></li> <li><a href="/ListaSalasLocal" id="salas"><i class="fa fa-angle-right"></i> Salas <small><i class="fa fa-external-link"></i></small></a></li> </ul> <li> <a href="/event"><i class="fa fa-clipboard-list"></i> Marcação de Consultas</a> </li> <li data-toggle="collapse" data-target="#relatorios" class="collapsed"> <a><i class="fa fa-chart-line"></i> Relatórios<span class="arrow"><i class="fa fa-angle-down"></i></spam></a> </li> <ul class="sub-menu collapse" id="relatorios"> <li><a href="/RelConsultaPsicologos" id="conPsi"><i class="fa fa-angle-right"></i>Consultas Por Psicólogos</a></li> <li><a href="/RelFormStatusPaciente" id="relStatus"><i class="fa fa-angle-right"></i>Pacientes Por Status <small><i class="fa fa-external-link"></i></small></a></li> </ul> <li data-toggle="collapse" data-target="#config" class="collapsed"> <a><i class="fa fa-cog"></i> Configurações<span class="arrow"><i class="fa fa-angle-down"></i></spam></a> </li> <ul class="sub-menu collapse" id="config"> <li><a href="/ListaUsuarios" id="usuario"><i class="fa fa-angle-right"></i>Usuários</a></li> <li><a href="/ConfiguracoesSistema" id="parametro"><i class="fa fa-angle-right"></i>Parâmetros do Sistema <small><i class="fa fa-external-link"></i></small></a></li> <li><a href="/ListaEmpresa" id="dadosEmpresa"><i class="fa fa-angle-right"></i>Cadastro de Empresas <small><i class="fa fa-external-link"></i></small></a></li> </ul> </ul> </div> </div>
  7. Bom dia, Boa tarde, Boa noite. Alguem poderia me ajudar a implementar um botão de fechar neste codigo css para um player de video Estou batendo cabeça e não consigo implementar um botão,para fechar este segundo video menor, que esta rodando dentro do maior, alguem poderia dar uma luz EXEMPLO DO VIDEO https://testeblogdetestes.blogspot.com/2019/07/blog-post_60.html <style type="text/css"> #Video1 { position:; top: 50px; left:10px; width:500px; border:0px solid blue; display:block; z-index:99; } #Video2 { position:absolute; top: 70px; left:120px; width:200px; border:0px solid red; z-index:100; } </style> </head> <body> <center> <video id="Video1" controls loop autoplay > <source src="https://lh3.googleusercontent.com/orPU3x-H8_xqOJ-CoVw-fyBKqdngFrL7g3YJD6j4tUbZO5mLMC15cn 5aKQBd0kIhNvt3NKomiPU9EHv_tKYvfNKwJ1-hvmKEX-ldqCmwNeq_VtQYVeMEmylhFAq9vND_EhHbYO5iYg=m18" type="video/mp4" /> </video></center> <center><video id="Video2" muted autoplay controls > <source src="https://lh3.googleusercontent.com/orPU3x-H8_xqOJ-CoVw-fyBKqdngFrL7g3YJD6j4tUbZO5mLMC15cn 5aKQBd0kIhNvt3NKomiPU9EHv_tKYvfNKwJ1-hvmKEX-ldqCmwNeq_VtQYVeMEmylhFAq9vND_EhHbYO5iYg=m18" type="video/mp4" /> HTML5 Video not supported </video></center>
  8. Guga Alves

    Tornar bottom div meio arredondadas

    Pessoal seguinte, gostaria de saber se é possível fazer este efeito em uma div: Imagem sem utilizar imagens.
  9. Vinicius Bazan

    Relógio da violência - usando JS

    Estou precisando de ajuda em um site que eu e mais algumas pessoas estamos desenvolvendo, é um site com finalidade escolar, visto que eu e os demais integrantes desse grupo estamos desenvolvendo ele para obter nota, o tema é produzir um site que aborde a violência contra as mulheres. O ponto aqui é que chegamos a conclusão que seria legal temos um relógio que mede a violência em tempo real, assim ele pegaria a hora do computador e faria um calculo que iria ficar atualizando um número na tela. Por exemplo, digamos que você queira ver quantas mulheres sofreram abuso verbal até agora, e ao mudar o filtro para abuso verbal vai aparecer as seguintes mensagens na tela: A cada 0,00 segundos uma mulher sofre de abuso verbal 0.000.000 Mulheres sofreram até agora. Esse número teria que ficar mudando a todo momento, então digamos que uma mulher sofra um abuso verbal a cada 2 segundos, então de 2 em 2 segundos aquele número aumenta em 1 (usando a hora do PC). Além disso seria possível trocar o filtro para outras formas de abuso como agressão física, psicológica e outras Para vocês entenderem melhor, basicamente o que queremos fazer é isso: relógio da violencia Acontece que a gente não manja muito de javascript pra isso, por isso resolvi pedir ajuda em um fórum, eu possuo conhecimento em HTML, PHP e CSS apenas (me falaram que talvez de para fazer com PHP também, estou pesquisando sobre isso), então minha duvida é como elaborar esse código no java e estilizar ele no css depois?
  10. Ola estou com um problema em JavaScript O objetivo e digitar um ID/Nome em um input e ele buscar em um arquivo XML fazendo autocomplete e preencher outros dois inputs com os atributos associado ao ID/Nome da base XML. GIF de exemplo, obs(exatamente oque pretendo fazer): http://blog-media.chromaticsites.com.s3.amazonaws.com/google-places-autocomplete-3/autocomplete-error.gif Link do XML: https://www.w3schools.com/js/cd_catalog.xm Segue meu código: <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> </head> Nome:<input id="idInput"> UF:<input id="idInput02"> Ano:<input id="idInput03"> <script> var ValorXML1 = []; $(document).on('keyup' , '#idInput' ,function(){ var keyvalue = $("#idInput").val(); var xhttp; xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { ValorXML1 = []; CaregarXML(this , keyvalue); } }; xhttp.open("GET", "https://www.w3schools.com/js/cd_catalog.xml", true); xhttp.send(); }); function CaregarXML(xml , key) { var x, i, xmlDoc , key; xmlDoc = xml.responseXML; x = xmlDoc.getElementsByTagName("TITLE"); var cont = 0; for (i = 0; i < x.length; i++) { var valor = x[i].childNodes[0].nodeValue.trim(); var pattern = valor.substring(0 , key.length); if(key.toUpperCase() == pattern.toUpperCase() && cont < 5){ ValorXML1.push(valor); cont++; } } $("#idInput").autocomplete({ source: ValorXML1 }); } $( function() { $( "#idInput" ).autocomplete({ source:ValorXML1 }); }); </script>
  11. Bom dia, boa tarde e boa noite! Estou precisando de ajuda em um site que eu e mais algumas pessoas estamos desenvolvendo, é um site com finalidade escolar, visto que eu e os demais integrantes desse grupo estamos desenvolvendo ele para obter nota, o tema é produzir um site que aborde a violência contra as mulheres. O ponto aqui é que chegamos a conclusão que seria legal temos um relógio que mede a violência em tempo real, assim ele pegaria a hora do computador e faria um calculo que iria ficar atualizando um número na tela. Por exemplo, digamos que você queira ver quantas mulheres sofreram abuso verbal até agora, e ao mudar o filtro para abuso verbal vai aparecer as seguintes mensagens na tela: A cada 0,00 segundos uma mulher sofre de abuso verbal 0.000.000 Mulheres sofreram até agora. Esse número teria que ficar mudando a todo momento, então digamos que uma mulher sofra um abuso verbal a cada 2 segundos, então de 2 em 2 segundos aquele número aumenta em 1 (usando a hora do PC). Além disso seria possível trocar o filtro para outras formas de abuso como agressão física, psicológica e outras Para vocês entenderem melhor, basicamente o que queremos fazer é isso: relógio da violencia Acontece que a gente não manja muito de javascript pra isso, por isso resolvi pedir ajuda em um fórum, eu possuo conhecimento em HTML, PHP e CSS apenas (me falaram que talvez de para fazer com PHP também, estou pesquisando sobre isso), então minha duvida é como elaborar esse código no java e estilizar ele no css depois?
  12. Estou iniciando uns estudos com o TypeScript e estou usando ele em uma aplicação minha que está sendo desenvolvida com o .NET Core Razor. Eu estou precisando de fazer um código em que abra um modal Bootstrap usando apenas o TypeScript. Sem o jQuery... Eu não sei como fazer isso, nao achei função que outras pessoas ja fizeram para isso, apenas com o Angular(que eu nao estou usando). Mas agora estou precisando. Espero que me ajudem nessa. Eu tentei fazer usando "display", mas não consegui. A questão é o seguinte. Eu preciso fazer um <select> em que se o usuario escolher a opção "Sim", abrirá o modal com algumas opções a serem preenchidas, e ao mesmo tempo terei um botão(caso a opção seja "sim"), para ele clicar e poder mudar oque colocou nas opçoes do modal. Como eu tentei fazer: <div class="modal fade d-none" id="modalExemplo" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Título do modal</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Fechar"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary">Fechar</button> <button type="button" class="btn btn-primary">Salvar mudanças</button> </div> </div> </div> </div> <select class="form-control w-100" id="data_test" onchange="modalOpen()"> <option value="NA">Não analizar</option> <option value="S">Sim</option> <option value="N">Não</option> </select> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalExemplo"> Abrir modal de demonstração </button> function modalOpen() { if ((<HTMLInputElement>document.getElementById("data_test")).value == "S") { (<HTMLInputElement>document.getElementById("modalExemplo")).classList.remove("d-none"); } else { (<HTMLInputElement>document.getElementById("modalExemplo")).classList.add("d-none"); } } Já que estou usando o Bootstrap, por que não usar a classe "d-none"? Então tentei fazer desta maneira... mas não funcionou
  13. Olá estou tendo problemas para compilar e instalar o bootstrap em minhas paginas web, sei que no site do próprio framework existe uma versão já compilada nos arquivos para download, já tenho ela baixada e descompactada na pasta do site e com os devidos links para chamar o css e javascript para a pagina a ser carregada mas ainda sim o botstrap não aplicado a pagina. <!doctype html> <html lang="pt-br"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="/css/bootstrap.css"> <title>Hello, world!</title> </head> <body> <h1>Hello, world!</h1> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </body> </html> Segue uma imagem com o caminho até o arquivo bootstrap.css dentro da pasta css na pasta do site. O caminho esta correto mesmo assim ele não atribui o arquivo a pagina subsequentemente não a estiliza. O mesmo ocorre quando chamo o javascript que baixei já compilado mas nessa versão deixei o do CDN apenas para ver se funcionava esta rodando apena do CDN. Compilei eu mesmo usando aplicativos de compilação de sass mesmo assim ele não atribui a estilização a pagina poderia me dizer se este código BASE esta errado ou desponibilizar algum exemplo de um arquivo em que a ligação do bootstrap a uma pagina web esta feita corretamente. Agradeço desde já a quem puder ajudar!
  14. Gutovr

    css na tabela classificacao

    Galera boa noite, preciso de ajuda provavelmente com css para a tabela do site que estou criando. Esta como na primeira imagem quando coloco o escudo dos times, fica tudo torto e gostaria que ficasse num padrao como do brasileirao.. como na segunda imagem. ajuda pf
  15. bbianchini

    Criar tabelas com cada linha do Banco

    Boa tarde, Poderiam me auxiliar? Consigo puxar os dados do meu banco de dados, cada linha certinho, mas preciso organizar cada linha em uma coluna, ou poder formatar com CSS, para ficar certinho e não só jogado na tela. Banco de dados: CREATE DATABASE portoBianchini; USE portoBianchini; CREATE TABLE Usuario ( idUsuario INTEGER NOT NULL AUTO_INCREMENT, nomeCompleto VARCHAR(50) NOT NULL, senha VARCHAR(20) NOT NULL, PRIMARY KEY(idUsuario) ); CREATE TABLE Navio ( idNavio INTEGER NOT NULL AUTO_INCREMENT, transportadora VARCHAR(50) NOT NULL, comandante VARCHAR(50) NOT NULL, matrícula VARCHAR(20) NOT NULL, PRIMARY KEY(idNavio) ); CREATE TABLE Caminhao ( idCaminhao INTEGER NOT NULL AUTO_INCREMENT, trasportadora VARCHAR(50) NOT NULL, motorista VARCHAR(50) NOT NULL, placa VARCHAR(10) NOT NULL, PRIMARY KEY(idCaminhao) ); CREATE TABLE Container ( idContainer INTEGER NOT NULL AUTO_INCREMENT, remetente VARCHAR(50) NOT NULL, destinatario VARCHAR(50) NOT NULL, localizacao VARCHAR(3) NOT NULL, origem VARCHAR(7) NOT NULL, destino VARCHAR(7) NOT NULL, dtEntrada datetime NOT NULL, codigo VARCHAR(20), PRIMARY KEY(idContainer) ); CSS que utilizo: * { margin: 0; padding: 0; } body { font: 100% normal Arial, Helvetica, sans-serif; background: #161712; } form, input, select, textarea { margin: 0; padding: 0; color: #ffffff; } div.box { margin: 0 auto; text-align: center; width: 500px; background: #222222; margin-top: 50px; border: 1px solid #262626; } div.box img { margin-top: 5px; width: 120px; height: 75px; } div.box h1 { color: #ffffff; font-size: 22px; text-transform: uppercase; padding: 5px 0 5px 5px; border-bottom: 1px solid #161712; } div.box h2 { color: #ffffff; font-size: 18px; text-transform: uppercase; padding: 5px 0 5px 5px; border-bottom: 1px solid #161712; } div.box h3 { color: #ffffff; margin-top: 15px; padding: 5px 0 5px 5px; } div.box label { width: 100%; display: block; background: #1C1C1C; border-top: 1px solid #262626; border-bottom: 1px solid #161712; padding: 10px 0 10px 0; } div.box label span { display: block; color: #bbbbbb; font-size: 12px; float: left; width: 100px; text-align: right; padding: 5px 20px 0 0; } div.box .input_text { padding: 10px 10px; width: 200px; background: #262626; border-bottom: 1px double #171717; border-top: 1px double #171717; border-left: 1px double #333333; border-right: 1px double #333333; } div.box .button { color: white; margin: 10px; width: 160px; height: 50px; background: #CC0000; border-bottom: 1px double #660000; border-top: 1px double #660000; border-left: 1px double #FF0033; border-right: 1px double #FF0033; } Página que preciso formatar: <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <title>Saída de Container</title> <link rel="stylesheet" type="text/css" href="index.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="shortcut icon" href="image/logo.jpg" > </head> <body> <div class="box"> <!--FORMULÁRIO DE CADASTRO--> <form method="post" id="cadastrocontainer"> <h1>Cadastro Saída Container</h1> <label> <span>Código</span> <input id="cod" name="cod" type="text" class="input_text"/> </label> </form> <button onclick="window.location.href='scontainer.php'" class="button">Cadastrar</button> <button onclick="window.location.href='pageInicial.php'" class="button">Cancelar</button> </div> <div class="box"> <form> <?php $db = new PDO( 'mysql:host=localhost;dbname=portobianchini;charset=utf8', 'root', '' ); $db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); $resultado = $db->query('SELECT * FROM container'); foreach($resultado as $linha) { echo "*ID:*".' '.$linha['idContainer'].' '."*Remetente:*".' '.$linha['remetente'].' '."*Destinatário:*".' '.$linha['destinatario'].' '."*Localização:*".' '.$linha['localizacao'].' '."*Origem:*".' '.$linha['origem'].' '."*Destino:*".' '.$linha['destino'].' '."*Data de Entrada:*".' '.$linha['dtEntrada'].' '."*Código:*".' '.$linha['codigo']."<br>"."<br>"; } ?> </form> </div> </body> </html> Em anexo coloquei como aparece a tela agora para mim. Obrigado desde já, amigos.
  16. gbL078

    Animação de keyframe

    Consegui resolver o problema, por favor podem deletar o tópico.
  17. Bom dia, peço humildemente a ajuda de vocês, Enfim, estou fazendo um exemplo de site, só para teste mesmo, onde terá uma janela principal perguntando em qual site a pessoa quer ir(1 só empresa, porém dois negócios) ai se a pessoa clicar em alguma das melecas, quero que ela abra mostrando o site, ou só uma imagem mesmo
  18. Criar um sistema de votação para uma premiação musical. Esse sistema deverá ser desenvolvido utilizando HTML + Javascript ES6. a) Existem 4 candidatos concorrendo ao prêmio: i) Rita Lee (número 100) ii) Cartola (número 101) iii) Ney Matogrosso (número 102) iv) Anitta (número 103) b) Para realizar a votação, o usuário terá que digitar seu CPF e o número do candidato. i) O usuário não pode votar duas vezes. ii) Se o usuário votar em um número inválido, o sistema contabilizará esse voto como nulo. c) Devido a um conflito da confraternização, a candidata Anitta foi desclassificada mas não deu tempo de retirá-la do painel de votação. Você terá que realizar uma validação avisado que o voto nela não é válido (dando a possibilidade desse mesmo usuário votar em outro candidato). d) O sistema deve mostrar automaticamente a quantidade e porcentagem de voto de cada candidato (parecido com o protótipo). i) O cálculo da porcentagem dos candidatos deverá desconsiderar os votos nulos LINK DO PROTOTIPO: https://www.figma.com/proto/S8tKx3hDbJJNaWJ9WFjzINVY/Prova?node-id=0%3A1&viewport=766%2C1015%2C0.5&scaling=scale-down&redirected=1
  19. Layout Responsivo Desalinhado: Estou criando um site de filmes e a cada momento que incluo algo o layout se estica para a direita ficando impossível de concertar sou novato e não sei onde estou errando me ajudem. Estou tentando criar um site de filmes responsivo mais o layout estar completamente desalinhado estirando a todo momento que incluo alguma imagem para a direita me ajudem por favor. Codigo CSS abaixo: *{ padding: 0px; margin: 0px; } a{ text-decoration:none; color:#999; } body{ font-family: arial; color:#eaeeef; background-color: #36454f; /*Fundo Escur0*/ margin-left: -100px; margin-top: -16px; } .font400{ font-size: 4em; } .font350{ font-size: 3.5em; } .font300 { font-size: 3em; } .font200 { font-size: 2em; } .font180 { font-size: 1.8em; } .font12{ font-size:12px; } .font10{ font-size:10px; } .font18{ font-stretch: 18px; } .branca{ color:#FFFFFF } .cinza { color: #CBCCCD; } .vermelho_1{ color:#ff0000; } ul{ list-style:none; } /*Imagem do Menu*/ img{ width:35px; margin-left: 100px; margin-top: 10px; } input[type="checkbox"] { display:none; } nav { background-color: rgba(16,16,16,.5); width:150px; height:100%; left: -150px; position: absolute; transition: all .5s; } input[type="checkbox"]:checked ~ nav { transform: translateX(150px); } ul{ top:80px; position:absolute; width: 100%; } a{ background: block; padding:10px 5px; color: white; } a:hover{ background-color: rgba(); color: black; } label{ padding: 15px; position: absolute; z-index:1; /*icone*/ } /* Formatação de chamada principal da imagem em destaque*/ .chamada{ background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(https://img.youtube.com/vi/NOEQ7wVKIew/maxresdefault.jpg); background-position: center center; /* Centraliza a imagem no centro da tela*/ background-repeat: no-repeat;/* Não repete a imagem*/ background-size: cover; /* Ocupa toda a tela sem distorcer a imagem*/ background-attachment: fixed; height: 100vh; /*100% do view height*/ display: flex; } .area_chamada { margin: auto; margin-bottom:150px; text-align: center; } h2 { margin: 0px; } .titulo{ font-family: 'Open Sans', sans-serif; text-transform: uppercase; line-height: 1.1em; font-weight: 400; text-shadow: 2px 3px 0px rgba(0,0,0,.8); color: #CBCCCD; } .subtitulo{ font-family: 'Open Sans', sans-serif; text-transform: uppercase; line-height: 1.1em; font-weight: 400; text-shadow: 2px 3px 0px rgba(0,0,0,.8); height: 80px; } .parte_superior{ /*banner de 280px na largura e 120px*/ width: 100vw; height: 0px; display: flex; align-items: center; margin-top: 17px; margin-left: 50px; } /*imagem do logo*/ .logo> img { width:250px; margin-top: 0px ; margin: 160px; } .pesquisa { width:500px; height:40px; margin:200px auto; display: flex; margin-top: 80px; margin-left: 40px; border-bottom-width: 2px; } #texto { width:520px; height:50px; float:left; font-family:Arial, Helvetica, sans-serif ; font-size:18px; background: #151515; border: #151515; border-radius: 6px 0px 0px 6px; display: flex; color: white; justify-content: space-around; } #texto:focus { border: solid 2px #1f1f1f; } .btn { height:34px; width:17px; background:#ff0000; padding:6px 8px; cursor:pointer; display: flex; margin-top: -10px; border: solid 0px #ff0000; border-radius: 0px ; margin-left: 0px; } button{ padding: 12px; border-width: 0px; border-radius: 0px 6px 6px 0px; height: 50px; background: #ff0000; width: 60px; } /*Move todo o Slide*/ .miniaturas{ height: 290px; width: 180px; display: flex; padding: 0px 2%; margin-top: -250px; margin-left: 90px; margin-top: -100px; } /*Move todo o menu do slide*/ .horizontal{ display: flex; justify-content: center ; margin-left: 70px; justify-content: space-around; width: 200px; color: dimgrey; margin-top: 450px; } .ativo{ margin:0px; color:white; } .black_clover> img{ height: 290px; width: 180px; display: flex; margin: 10px; position: relative; z-index: 1; transition: all 0.5s linear; } .black_clover > img:hover{ opacity: 0.2; } .one_punch_man> img{ height: 290px; width: 180px; display: flex; margin: 10px; position: relative; z-index: 1; transition: all 0.5s linear; } .one_punch_man > img:hover{ opacity: 0.2; } .Dororo> img{ height: 290px; width: 180px; display: flex; margin: 10px; position: relative; z-index: 1; transition: all 0.5s linear; } .Dororo > img:hover{ opacity: 0.2; } .shingek_3>img{ height: 290px; width: 180px; display: flex; margin: 10px; position: relative; z-index: 1; transition: all 0.5s linear; } .shingek_3 > img:hover{ opacity: 0.2; } .Mob>img{ height: 290px; width: 180px; display: flex; margin: 10px; position: relative; z-index: 1; transition: all 0.5s linear; } .Mob > img:hover{ opacity: 0.2; } .kimetsu_no_yaiba>img{ height: 290px; width: 180px; display: flex; margin:10px; position: relative; z-index: 1; transition: all 0.5s linear; } .Kimetsu_no_yaiba > img:hover{ opacity: 0.2; } .figuras { display: flex; margin-left: 50px; justify-content: space-between; padding: 4%; height: 290px; width: 180px; } figure { margin: 0px; display: flex; } figcaption{ width: 180px; height: 290px; background-color: black; display: flex; min-height:290px; margin: 10px; margin-top: -300px; } .grana{ display: flex; } .baner{ padding-top: 100px; display: flex; } /*move o banner e a primeira coluna de animes*/ .bittube>a>img{ display: flex; width: 400px; margin: 0px 580px; margin-top: 20px; } .posts{ margin-top: 100px; padding: 0px -400px; display: flex; margin-left: 180px; } .primeira{ display: flex; } .primeira > ul > li{ display:inline-block; margin-top: 1220px; margin-left: 20px; } .One_Piece>img{ height: 290px; width: 180px; display: flex; margin:10px ; position: relative; z-index: 1; transition: all 0.5s linear; } .One_Piece> img:hover{ opacity: 0.2; } .tate_no_yusha>img{ height: 290px; width: 180px; display: flex; margin:10px ; position: relative; z-index: 1; transition: all 0.5s linear; } .tate_no_yusha> img:hover{ opacity: 0.2; } .naruto_shippuden>img{ height: 290px; width: 180px; display: flex; margin:10px ; position: relative; z-index: 1; transition: all 0.5s linear; } .naruto_shippuden> img:hover{ opacity: 0.2; } .Nanatsu_no_taizai>img{ height: 290px; width: 180px; display: flex; margin:10px ; position: relative; z-index: 1; transition: all 0.5s linear; } .Nanatsu_no_taizai> img:hover{ opacity: 0.2; } .dragon_ball_super>img{ height: 290px; width: 180px; display: flex; margin:10px ; position: relative; z-index: 1; transition: all 0.5s linear; } .dragon_ball_super> img:hover{ opacity: 0.2; } .boku_no_hero_academia>img{ height: 290px; width: 180px; display: flex; margin:10px ; position: relative; z-index: 1; transition: all 0.5s linear; } .boku_no_hero_academia> img:hover{ opacity: 0.2; } /*Move toda a segunda coluna de animes*/ .coluna{ margin-top: 50px ; margin-left: 180px; display: flex; } .segunda{ display: flex; } .boruto>img{ height: 290px; width: 180px; display: flex; margin:10px ; position: relative; z-index: 1; transition: all 0.5s linear; } .boruto> img:hover{ opacity: 0.2; } .isekai_maou>img{ height: 290px; width: 180px; display: flex; margin:10px ; position: relative; z-index: 1; transition: all 0.5s linear; } .isekai_maou> img:hover{ opacity: 0.2; } .bleach>img{ height: 290px; width: 180px; display: flex; margin:10px ; position: relative; z-index: 1; transition: all 0.5s linear; } .bleach> img:hover{ opacity: 0.2; } .fairy_tail>img{ height: 290px; width: 180px; display: flex; margin:10px ; position: relative; z-index: 1; transition: all 0.5s linear; } .fairy_tail> img:hover{ opacity: 0.2; } .tensei_shitara>img{ height: 290px; width: 180px; display: flex; margin:10px ; position: relative; z-index: 1; transition: all 0.5s linear; } .tensei_shitara> img:hover{ opacity: 0.2; } .Tokyo_Ghoul>img{ height: 290px; width: 180px; display: flex; margin:10px ; position: relative; z-index: 1; transition: all 0.5s linear; } .Tokyo_Ghoul> img:hover{ opacity: 0.2; } /*Move toda a coluna de séries*/ .coluna_series{ margin-top: 120px ; margin-left: 180px; display: flex; } .primeira_series{ display: flex; } .primeira_series > ul > li{ display:inline-block; margin-top: 2020px; margin-left: 20px; } .Atirador>img{ height: 290px; width: 180px; display: flex; margin:10px ; position: relative; z-index: 1; transition: all 0.5s linear; } .Atirador> img:hover{ opacity: 0.2; } .Game_of_thrones>img{ height: 290px; width: 180px; display: flex; margin:10px ; position: relative; z-index: 1; transition: all 0.5s linear; } .Game_of_thrones> img:hover{ opacity: 0.2; } .La_casa_de_papel>img{ height: 290px; width: 180px; display: flex; margin:10px ; position: relative; z-index: 1; transition: all 0.5s linear; } .La_casa_de_papel> img:hover{ opacity: 0.2; } .lucifer>img{ height: 290px; width: 180px; display: flex; margin:10px ; position: relative; z-index: 1; transition: all 0.5s linear; } .lucifer> img:hover{ opacity: 0.2; } .sons_of_anarchy>img{ height: 290px; width: 180px; display: flex; margin:10px ; position: relative; z-index: 1; transition: all 0.5s linear; } .sons_of_anarchy> img:hover{ opacity: 0.2; } .vikings>img{ height: 290px; width: 180px; display: flex; margin:10px ; position: relative; z-index: 1; transition: all 0.5s linear; } .vikings> img:hover{ opacity: 0.2; } /*Move toda a coluna de séries*/ .coluna_series2{ margin-top: 50px ; margin-left: 180px; display: flex; } .segunda_series2{ display: flex; } .segunda_series2 > ul > li{ display:inline-block; margin-top: 2020px; margin-left: 20px; } .The_purge>img{ height: 290px; width: 180px; display: flex; margin:10px ; position: relative; z-index: 1; transition: all 0.5s linear; } .The_purge> img:hover{ opacity: 0.2; } .titans>img{ height: 290px; width: 180px; display: flex; margin:10px ; position: relative; z-index: 1; transition: all 0.5s linear; } .titans> img:hover{ opacity: 0.2; } .the_big_bang_theory>img{ height: 290px; width: 180px; display: flex; margin:10px ; position: relative; z-index: 1; transition: all 0.5s linear; } .the_big_bang_theory> img:hover{ opacity: 0.2; } .o_último_guardião>img{ height: 290px; width: 180px; display: flex; margin:10px ; position: relative; z-index: 1; transition: all 0.5s linear; } .o_último_guardião> img:hover{ opacity: 0.2; } .legends_of_tomorrow>img{ height: 290px; width: 180px; display: flex; margin:10px ; position: relative; z-index: 1; transition: all 0.5s linear; } .legends_of_tomorrow> img:hover{ opacity: 0.2; } .chernobyl>img{ height: 290px; width: 180px; display: flex; margin:10px ; position: relative; z-index: 1; transition: all 0.5s linear; } .chernobyl> img:hover{ opacity: 0.2; } /*Move toda a coluna de séries*/ .coluna_fimes{ margin-top: 120px ; margin-left: 180px; display: flex; } .segunda_filmes{ display: flex; } .segunda_filmes > ul > li{ display:inline-block; margin-top: 2820px; margin-left: 20px; } .avangers_Age>img{ height: 290px; width: 180px; display: flex; margin:10px ; position: relative; z-index: 1; transition: all 0.5s linear; } .avangers_Age> img:hover{ opacity: 0.2; } .capitan_marvel>img{ height: 290px; width: 180px; display: flex; margin:10px ; position: relative; z-index: 1; transition: all 0.5s linear; } .capitan_marvel> img:hover{ opacity: 0.2; } .capitao_america>img{ height: 290px; width: 180px; display: flex; margin:10px ; position: relative; z-index: 1; transition: all 0.5s linear; } .capitao_america> img:hover{ opacity: 0.2; } .guerra_civil>img{ height: 290px; width: 180px; display: flex; margin:10px ; position: relative; z-index: 1; transition: all 0.5s linear; } .guerra_civil> img:hover{ opacity: 0.2; } .doutor_estranho>img{ height: 290px; width: 180px; display: flex; margin:10px ; position: relative; z-index: 1; transition: all 0.5s linear; } .doutor_estranho> img:hover{ opacity: 0.2; } .hulk_o_inacreditavel>img{ height: 290px; width: 180px; display: flex; margin:10px ; position: relative; z-index: 1; transition: all 0.5s linear; } .hulk_o_inacreditavel> img:hover{ opacity: 0.2; } .coluna_fimes1{ margin-top: 50px ; margin-left: 180px; display: flex; } .segunda_filmes1{ display: flex; } .segunda_filmes1> ul > li{ display:inline-block; margin-top: 2820px; margin-left: 20px; } .iron_man>img{ height: 290px; width: 180px; display: flex; margin:10px ; position: relative; z-index: 1; transition: all 0.5s linear; } .iron_man> img:hover{ opacity: 0.2; } .thor>img{ height: 290px; width: 180px; display: flex; margin:10px ; position: relative; z-index: 1; transition: all 0.5s linear; } .thor> img:hover{ opacity: 0.2; } .a_lenda_do_golem>img{ height: 290px; width: 180px; display: flex; margin:10px ; position: relative; z-index: 1; transition: all 0.5s linear; } .a_lenda_do_golem> img:hover{ opacity: 0.2; } .maligno>img{ height: 290px; width: 180px; display: flex; margin:10px ; position: relative; z-index: 1; transition: all 0.5s linear; } .maligno> img:hover{ opacity: 0.2; } .as_trapaceiras>img{ height: 290px; width: 180px; display: flex; margin:10px ; position: relative; z-index: 1; transition: all 0.5s linear; } .as_trapaceiras> img:hover{ opacity: 0.2; } .homem_de_ferro2>img{ height: 290px; width: 180px; display: flex; margin:10px ; position: relative; z-index: 1; transition: all 0.5s linear; } .homem_de_ferro2> img:hover{ opacity: 0.2; } .rodape{ padding: 25px; color: white font-size:1.5em; display: flex; padding-top: 3600px; padding-left: 350px; } .rodape li{ margin-right:20px; padding-top: 50px; } .parceria{ display: flex; padding-top: 3600px; padding-left: 350px; } .parceria li{ margin:-20px 10px; display:flex; <<<<<<<<Codigo Html abaixo>>>>>>>>
  20. ricardonews

    colocando css em um login

    Olá pessoal eu tenho essa imagem de um login que vou mostrar aqui, consegui o css dela , porem não consegui colocar no meu login, eu vou deixar o login em html, em css eu estou dificuldade. Desde já agradeço a todos então eu o css dela é esse aqui *{margin:0; padding:0;} html{ height:100%; background: linear-gradient(rgba(38, 128, 101, 0.9), rgba(52, 177, 140, 0.9)); } .erros, .ok { width:390px; padding:5px; background:rgba(238, 249, 113, 0.9); margin: 20px auto 0 auto; border: 1px solid rgba(222,239,10,0.9); border-radius: 4px; color: #333; } .ok{background: rgba(155,222,143,0.9);border-color: rgba(68, 171, 50, 0.9);color:white;} body{ font-family: "Trebuchet MS", tahoma, arial; } #formulario{ width:500px; margin:40px auto; text-align:center; position:relative; } #formulario fieldset{ background:white; border:0 none; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; box-shadow:0 0 15px 1px rgba(0,0,0, 0.4); padding:20px 30px; box-sizing: border-box; width:80%; margin:0 10%; position:absolute; } #formulario input, #formulario textarea{ padding:10px; border:1px solid rgba(38, 128, 101, 0.9); border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; outline:none; box-sizing: border-box; width:100%; font:14px "Trebuchet MS", tahoma, arial; color:#090; margin-bottom:10px; } #formulario .acao{ width:100px; background:rgba(38, 128, 101, 0.9); color:white; text-transform:uppercase; font-weight:bold; padding:12px 0; float:left; margin-right:5%; } #formulario .acao:hover{background:rgba(52, 177, 140, 0.9); cursor:pointer;} Aqui abaixo é o html que eu não consegui deixar no css do jeito que está na imagem. <!doctype html> <html> <?php require_once"config.php"; ?> <head> <title>APRENDIZ DE JS</title> <link href="style.css" rel="stylesheet" type="text/css"> <script src="jquery-3.2.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $("#but_submit").click(function(){ var username = $("#meu_nome").val().trim(); var password = $("#minha_senha").val().trim(); if( username != "" && password != "" ){ $.ajax({ url:'pesquisar.php', type:'post', data:{username:username,password:password}, success:function(response){ var msg = ""; if(response == 1){ window.location = "home.php"; }else{ msg = "Invalid username and password!"; } $("#message").html(msg); } }); } }); }); </script> </head> <body> <div class="container"> <div id="div_login"> <h1>Login</h1> <div id="message"></div> <div> <input type="text" class="textbox" id="meu_nome" name="meu_nome" placeholder="Username" /> </div> <div> <input type="password" class="textbox" id="minha_senha" name="minha_senha" placeholder="Password"/> </div> <div> <input type="button" value="logar" name="but_submit" id="but_submit" /> </div> </div> </div> </body> </html>
  21. Quero que meus links tenham marcadores e que os marcadores fiquem selecionados juntos com o link. Pra isso, coloquei o LI dentro do A. <a><li>meu link</li></a> Só que o link ficou muito grande. Mesmo com o mouse longe do texto, ele já ativa o link. Vejam na imagem. Vejam o código: CSS #links_uteis { width:482px; height:230px; float:right; margin-top:20px; margin-right:20px; font-size:20px; list-style-type:disc; list-style-position:inside; } #links_uteis table { width:420px; margin-left:10px; } #links_uteis td { width:210px; padding:5px 10px 5px 10px; } #links_uteis a:hover { text-decoration:underline; color:#D90000; } HTML <div id="links_uteis"> Links úteis <div class="barra_titulo"></div> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td> <a href="#" target="_blank"><li>Inmetro</li></a> </td> <td> <a href="#" target="_blank"><li>Seplag</li></a> </td> </tr> <tr> <td> <a href="#" target="_blank"><li>Ipsemg</li></a> </td> <td> <a href="#" target="_blank"><li>IOF-MG</li></a> </td> </tr> <tr> <td> <a href="#" target="_blank"><li>ALMG</li></a> </td> <td> <a href="#" target="_blank"><li>MGS</li></a> </td> </tr> <tr> <td> <a href="#" target="_blank"><li>Portal de serviços</li></a></td> <td> <a href="#" target="_blank"><li>Portal do servidor</li></a></td> </tr> </table> </div> <!--Fecha a div links_uteis-->
  22. Bom dia pessoal Estou estruturando um slideshow puro em css3 + html mas percebi que vou precisar de jquery para algumas funções, eu vinculei radios com lables para a navegação do menu e consegui montar em jquery o efeito "active" para quando é clicado em um botão, tudo funcionando perfeitamente e responsivamente nos browsers. Só que agora eu preciso que os slides passem automaticamente e vinculados a navegação, trocando ambos da direta pra esquerda, mantendo o efeito "active" na navegação com harmonia com as imagens, todos os exemplos que saí atrás na internet não vinculam radios com lables para navegação, então isso está me causando uma dificuldade além do que esperava, desde já agradeço a ajuda de vocês Segue abaixo os códigos Index.html <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="slidershow middle"> <div class="slides"> <input type="radio" name="r" id="r1" checked> <input type="radio" name="r" id="r2"> <input type="radio" name="r" id="r3"> <input type="radio" name="r" id="r4"> <input type="radio" name="r" id="r5"> <div class="slide s1"> <a href="#"> <img src="1.jpg" alt=""></a> </div> <div class="slide"> <a href="#"><img src="2.jpg" alt=""></a> </div> <div class="slide"> <a href="#"><img src="3.jpg" alt=""></a> </div> <div class="slide"> <a href="#"><img src="4.jpg" alt=""></a> </div> <div class="slide"> <a href="#"><img src="5.jpg" alt=""></a> </div> </div> <div class="navigation"> <label for="r1" class="bar active"></label> <label for="r2" class="bar"></label> <label for="r3" class="bar"></label> <label for="r4" class="bar"></label> <label for="r5" class="bar"></label> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <script type="text/javascript"> $(document).on('click', 'label', function() { $(this).addClass('active').siblings().removeClass('active') }) </script> </body> </html> style.css *{ margin: 0px; padding: 0px;} .slidershow{ width: 100%; height: 100%; overflow: hidden; position: absolute; max-height: 70%; } .middle{ position: absolute; } .navigation{ position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; } .bar{ width: 60px; height: 5px; background-color: #c1c0c0; margin: 6px; cursor: pointer; transition: 0.4s; } .bar:hover{ background: #ddcf19; } .bar.active{ background: #ddcf19; } input[name="r"]{ position: absolute; visibility: hidden; } .slides{ width: 500%; height: 100%; display: flex; } .slide{ width: 20%; transition: 0.6s; } .slide a{ display: block; width: 100%; height: 100%; cursor: pointer;} .slide img{ width: 100%; height: 100%; object-fit: cover; } #r1:checked ~ .s1{ margin-left: 0; } #r2:checked ~ .s1{ margin-left: -20%; } #r3:checked ~ .s1{ margin-left: -40%; } #r4:checked ~ .s1{ margin-left: -60%; } #r5:checked ~ .s1{ margin-left: -80%; } Basicamente quero como o link abaixo mas vinculando meus controles de navegação Exemplo
  23. É o seguinte no cabeçalho do meu projeto tem uma parte um link que leva a parte principal do site, nessa parte a imagem que está lá dentro redireciona o visitante pra página de destino até aí beleza, mas como eu tenho de definir um tamanho pra imagem eu faço via style na tag do link mesmo no <a style=" "></a>, mas quando tento colocar essa parte do código em uma linha dentro do arquivo CSS que contém todas as estilizações padrão, ele simplesmente não acontece. Vou postar a parte do código e como acho que deveria ser, mas pelo jeito não é essa a forma correta. <body> <div id="site"> <div id="cabecalho"> <div id="link_home"> <a href="index.php"> <img src="imagens/logo.png" alt="logo" style="height: 50px;"/><!--Esse style="height: 50px;" é que eu quero no CSS pra estilização padrão--> </a> </div><!--Final botão logo--> body { background-color: #131521; width: 1000px; margin: auto; font-family: Arial, Helvetica, sans-serif; } #site { background-color: #ffffff; width: 1000px; float: left; } #cabecalho{ background-color: #ffffff; float: left; width: 1000px; height: 70px; } #link_home{ float: left; height: 50px; margin-top: 5px; margin-left: 5px; } #link_home a img { height: 50px; } /* Quando eu coloco aqui no CSS e tiro do HTML ele não funciona */ A grande moral é que eu não sei como indicar pro CSS que é pra alterar somente aquela img daquele a que está dentro daquela DIV
  24. Bom dia galera venho aqui falar que to com uma duvida imensa mesmo eu criei 4 botões como na foto e eu quero mover pro lado que ta em vermelho mas de jeito nenhun eu consigo alguem pode me ajudar? codigo: < <div class="menubarra"> <img src="imagens/logo.png" alt="Logo" title="" width="200"> <a href="" class="btn btn-purple">Login</a> <a href="" class="btn btn-purple">Carrinnho</a> <a href="" class="btn btn-purple">Amei</a> <a href="" class="btn btn-purple">Notificacao</a> </div> > CSS: < .menubarra{ background: #1E90FF; top: 100%; margin-block-end: 0%; left: 100px; } >
  25. jujubeas

    Quiz

    Ola pessoal, alguém tem algum código javascript ou pode me dar algum link como referencia que tenha um questionario/quiz que use arrays e estruturas de repetição?
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.