Jump to content

natant1

Members
  • Content count

    11
  • Joined

  • Last visited

Community Reputation

1 Comum

About natant1

  • Birthday 12/04/1997

Informações Pessoais

  • Sexo
    Masculino
  • Localização
    Rio de Janeiro

Contato

  • Twitter
    @natant1
  1. natant1

    alinhamento de div

    Muito obrigado! A altura da div pai estava como auto mas ai eu adicionei um overflow: hidden; e resolveu o problema. Utilizar o overflow foi uma solução boa? Há uma melhor para nao precisar utilizar uma altura fixa? Obrigado
  2. natant1

    alinhamento de div

    Eae galera, blz? Estou com um problema aqui de css que nao consigo resolver. Eu tenho um código php que vai fazer uma consulta no banco de dados para álbuns de um determinado artista. Eu gostaria que quando retornasse, fosse exibido assim Mas, quando alguma div tem mais de duas faixas, neste caso a primeira, acontece que a ultima faixa da outra div fica "grudada" com a ultima faixa da primeira. assim: Alguem saberia me informar o que esta acontecendo e como posso resolver isso? Códigos: https://jsfiddle.net/natant1/94wh5d6u/ <div id="conteudoAlbum"> <img src="https://upload.wikimedia.org/wikipedia/en/8/89/In_the_Zone.png" /> <span id="TituloAlbum">In The Zone</span> <a id="faixa" href="#"> <span id="numeroFaixa">1</span> <div id="iconnum"><img src="https://i.ytimg.com/vi/LOZuxwVk7TU/maxresdefault.jpg" height="85px" /></div> <span id="nomeFaixa">Toxic</span> </a> <a id="faixa" href="#"> <span id="numeroFaixa">1</span> <div id="iconnum"><img src="https://i.ytimg.com/vi/LOZuxwVk7TU/maxresdefault.jpg" height="85px" /></div> <span id="nomeFaixa">Toxic</span> </a> </div> <div id="conteudoAlbum"> <img src="https://upload.wikimedia.org/wikipedia/pt/9/92/Britney_Circus_Album.png" /> <span id="TituloAlbum">Circus</span> <a id="faixa" href="#"> <span id="numeroFaixa">1</span> <div id="iconnum"><img src="https://i.ytimg.com/vi/lVhJ_A8XUgc/maxresdefault.jpg" height="85px" /></div> <span id="nomeFaixa">Circus</span> </a> </div> #conteudoAlbum{ position: relative; background: white; width: 300px; height: auto; margin-top: 30px; margin-right: 40px; display: inline-block; -webkit-box-shadow: 9px 10px 49px -18px rgba(0,0,0,0.75); -moz-box-shadow: 9px 10px 49px -18px rgba(0,0,0,0.75); box-shadow: 9px 10px 49px -18px rgba(0,0,0,0.75); } #TituloAlbum{ position: relative; font-family: Arial; font-size: 1.4em; color: black; display: block; padding-left: 20px; padding-top: 5px; padding-bottom: 15px; } #faixa{ position: relative; display: block; height: 85px; width: 100%; line-height: 85px; background-color: rgba(0, 0, 0, 0.05); margin-bottom: 20px; } #faixa:hover{ background-color: rgba(0, 0, 0, 0.1); } #numeroFaixa{ position: absolute; display: block; padding-left: 10px; padding-right: 10px; font-family: Arial; font-size: 1.4em; color: #45C0CF; display: inline-block; } #iconnum{ position: relative; left: 33px; display: inline-block; max-height: 85px; } #iconnum img{ display: inline-block; max-height: 85px; } #nomeFaixa{ position: absolute; display: block; left: 200px; font-family: Arial; font-size: 1.4em; color: black; display: inline-block; }
  3. natant1

    alinhar input ao centro da div

    Você mais uma vez me salvando Eu tinha tentado aplicar 'inline-block' na label e no input antes mas não adiantou, porem não lembrava do 'vertical-align' para aplicar. Muito obrigado ♡♡!!
  4. natant1

    Busca no banco com $_GET[] do php

    Leônidas, Refiz seu código, aplique fazendo os ajustes e vê se agora funciona <?php $conexao = mysqli_connect("localhost","root",""); /*Conectando com o banco de dados*/ mysqli_select_db($conexao, "NOME DO SEU BANCO DE DADOS AQUI"); /*Selecionando o banco que você quer trabalhar*/ $getcliente = $_GET['conteudocliente']; $sql = "SELECT * from clipes WHERE artista like '%$getcliente%'"; $query = mysqli_query($conexao,$sql); while($resultadobusca = mysqli_fetch_array($query)){ $resultado_nomelocal = $resultadobusca['locais_nome']; echo $resultado_nomelocal; echo "<br>"; }; ?> Lembre-se que o que você quer imprimir deve estar dentro do 'while' Não se esqueça de fazer a conexão com o banco de dados e selecionar o banco que você quer trabalhar antes de executar os códigos. Qualquer dúvida estamos ai
  5. natant1

    alinhar input ao centro da div

    Oi Henrique, Obrigado pela dica do input dentro do label, vou refazer essa parte com os outros. Porem, quando eu aplico font-size, o input desce e nao fica centralizado :( :( https://jsfiddle.net/natant1/92fnddu5/2/ Inseri borda na label e no input para ver melhor o que está acontecendo e ficou tudo mais bizarro kkkkkkkkkkk o input ultrapassa a label......
  6. natant1

    alinhar input ao centro da div

    Alguém tem alguma solução para subir com esse input para deixar ele meio que centralizado na div? Ja tentei de tudo que eu conheço e não consigo. SOCORRO!!! Como fica: Como eu quero: código: https://jsfiddle.net/natant1/6khds56a/1/ ou HTML: <div id="pesquisaArtista"> <label for="artista">Artista: <input id="artista" name="artista" type="text"/> </label> </div> <div id="pesquisaGenero"> <label for="genero">Gênero: <input id="genero" name="genero" type="text"/> </label> </div> <div id="pesquisaAlbum"> <label for="album">Álbum: <input id="album" name="album" type="text"/> </label> </div> CSS: #pesquisaArtista{ background-color: #4aae27; height: 40px; width: 90%; max-width: 300px; padding-top: 0px; display: inline-block; } #pesquisaArtista label{ color: white; font-family: Agency FB; font-size: 1.9em; } #pesquisaArtista input{ position: relative; color: grey; padding: 5px; width: 170px; margin-top: -30px; } #pesquisaGenero{ background-color: #cda009; height: 40px; width: 90%; max-width: 300px; padding-top: 0px; color: white; display: inline-block; } #pesquisaGenero label{ color: white; font-family: Agency FB; font-size: 1.9em; } #pesquisaGenero input{ position: relative; color: grey; padding: 5px; width: 170px; margin-top: -30px; } #pesquisaAlbum{ background-color: #053d74; height: 40px; width: 90%; max-width: 300px; padding-top: 0px; display: inline-block; } #pesquisaAlbum label{ color: white; font-family: Agency FB; font-size: 1.9em; } #pesquisaAlbum input{ position: relative; color: grey; padding: 5px; width: 170px; margin-top: -30px; }
  7. natant1

    padding chrome vs firefox

    Oi Henrique, Muito obrigado pela sua resposta, o "-moz-document url-prefix" foi o q melhor solucionou meu problema. Reduzir tudo a apenas Padding não resolveu. você saberia me informar o por quê disso estar acontecendo já que o CSS3 & Level 4 conseguem lidar bem em todos os navegadores atuais? Abraços
  8. natant1

    padding chrome vs firefox

    estava trabalhando no meu projeto e decidi verificar como ele estava ficando em diferentes navegadores até que me deparei com isso: No chrome, em meu menu e em outra area do site, onde está sendo aplicada a propriedade padding, o resultado é o desejado: Ja no firefox, no menu e nesta mesma área, acontece isso: Alguém tem alguma solução para este problema? Como é possível diferenciar o padding pro chrome e pro firefox?. Não é de meu conhecimento um -moz- para padding :( aqui esta o codigo do meu menu: CSS: * { margin: 0px; padding: 0px; } header{ position: relative; height: 79px; width: 100%; background-color: #053d74; } ul#menuprinc { position: absolute; font-size: 1.38em; top: 29px; width: 578px; right: 100px; } ul#menuprinc a { text-decoration: none; color: white; font-family: Agency FB; } ul#menuprinc li { display: inline; padding-right: 26px; padding-left: 29px; } ul#menuprinc li.lancamentos { border-bottom: 5px solid #762d2f; padding-bottom: 21px; -webkit-transition: border-bottom 0.2s; -moz-transition: border-bottom 0.2s; } ul#menuprinc li.topYoutube { border-bottom: 5px solid #c0a035; padding-bottom: 21px; -webkit-transition: border-bottom 0.2s; -moz-transition: border-bottom 0.2s; } ul#menuprinc li.maisAssistidos { border-bottom: 5px solid #579840; padding-bottom: 21px; -webkit-transition: border-bottom 0.2s; -moz-transition: border-bottom 0.2s; } ul#menuprinc li.comoFunciona { border-bottom: 5px solid white; padding-bottom: 21px; -webkit-transition: border-bottom 0.2s; -moz-transition: border-bottom 0.2s; } ul#menuprinc li.lancamentos:hover, header ul#menuprinc li.topYoutube:hover, header ul#menuprinc li.maisAssistidos:hover, header ul#menuprinc li.comoFunciona:hover { border-bottom: 5px solid #053d74; } HTML: <header> <nav> <ul id="menuprinc"> <a href="#"><li class="lancamentos">Lançamentos</li></a><a href="#"><li class="topYoutube">Top Youtube</li></a><a href="#"><li class="maisAssistidos">Artistas</li></a><a href="#"><li class="comoFunciona">Como Funciona</li></a> </ul> </nav> </header> https://jsfiddle.net/natant1/gtd9m051/2/ Obrigado
  9. natant1

    esconder texto grande e ao passar mouse mostrar

    Amigo consegui!! Estudando o código que você me passou eu fui adaptando e consegui o que eu queria. https://jsfiddle.net/natant1/w8q5p38L/6/ Muito obrigado!!
  10. natant1

    esconder texto grande e ao passar mouse mostrar

    Gostei muito, mas ainda não esta como eu gostaria! Tentei adaptar para o que eu quero mas na hora de mostrar, nao sobe. Ele desce e sobrepõem o que esta escrito embaixo, da um olhada: https://jsfiddle.net/natant1/3djw80q4/1/ pra evitar isso, eu tentei botar um transition no top mas ai, nomes que ocupam 3 linhas fica legal, mas o que ocupam apenas 2 sobe demais: https://jsfiddle.net/natant1/w8q5p38L/2/ Os dados são recuperados do banco de dados por isso nao tem como eu ter um controle sobre qual vai ocupar 2 e qual vai ocupar 3 linhas. Você teria alguma solução para isso? Abraços
  11. Gente Eu tenho uma tag <p></p> que retorna do banco de dados o nome de um vídeo, só que alguns nomes são muito grandes e acabam estragando o visual do site. Eu queria saber se tem como encurtar esse nome e quando a pessoa passar o mouse em cima ele ir aparecendo. Exemplo: tenho o nome "Britney Spears - Megamix (2016 Billboard Music Awards Performance)" por ser muito grande, eu queria que exibisse "Britney Spears - Megamix (20...": e quando a pessoa parasse o mouse em cima do nome acontecesse isso: (OBS: Imagens trabalhadas no photoshop) É possivel fazer com jquery? Obrigado
×

Important Information

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