Jump to content

Search the Community

Showing results for tags 'css3'.



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 51 results

  1. Rasp

    Border radius inverso

    Pessoal, bom dia. Estou convertendo um layout de um cliente para responsivo. Durante a jornada, estou tirando vários elementos que foram desenvolvidos com imagens e os convertendo para CSS, porém, estou com uma dúvida: Como fazer um "border radius inverso" (conforme imagem anexo)? Lembro de muito tempo atrás ter visto algo semelhante em algum blog (não me lembro se feito com css ou jquery), porém, não consigo encontrar ou não estou sabendo como pesquisar. Alguém poderia me dar um help? Obrigado!
  2. Mech

    Como fazer um text drop?

    Preciso fazer um textdrop em html5 e css3. Basicamento isso: > Pergunta 1 Ao clicar no Pergunta 1, aparecer um texto logo em baixo assim: > Pergunta 1 >Resposta 1 Eu fiz o código, mas o texto desaparece rapidamente: HTML: <nav id="mainnav"> <ul class="wrapper-menu"> <li class="wrapper-dropdown"> <a>PERGUNTA</a> <ul class="dropdown"> <li>Texto Resposta</li> CSS: #mainnav ul{ list-style: none; } #mainnav ul li{ padding:10px 15px; background-color: whitesmoke; } .wrapper-menu{ position:relative; } .dropdown{ position:absolute; left:0; display:none; } .wrapper-dropdown:active > .dropdown{ display:block; }
  3. Olá pessoal, estou com uma dúvida, já pesquisei mas não encontrei nenhuma solução. Quero trocar a classe de uma div em css3 por meio de JavaScript. Por exemplo eu clico em um botão e o mesmo chama uma função em JavaScript que vai mudar a classe design1 para a classe design2 desta div. Abaixo esta o código feito. alguém poderia me ajudar ? Obrigado. <html> <head> <title></title> </head> <style type="text/css"> .design1{ background-color: blue; width: 200px; height: 200px; margin-bottom: 30px; } .design2{ background-color: yellow; width: 250px; height: 250px; margin-bottom: 30px; } </style> <script type="text/javascript"> function mudarClasse(){ document.getElementById("quadrado").style./****Não sei oque colocar aqui para mudar a classe*****/; } </script> <body> <div class="design1" id="quadrado"></div> <input type="button" name="botao" value="Mudar de classe" onclick="mudarClasse()"> </body> </html>
  4. evertongouveia

    Formulário de pesquisa em ajax

    Boa noite galera, estou tentando fazer com que uma página só mostre o resultado quando eu clicar em "Buscar" já tentei de várias formas e não consigo. Queria que mostrasse o resultado a partir do preenchimento do formulário. Segue abaixo o meu código: <!DOCTYPE html> <head> <title>Conveniados</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/colors/main.css" id="colors"> <script> $(document).ready(function(e) { $("form[ajax=true]").submit(function(e) { e.preventDefault(); var form_data = $(this).serialize(); var form_url = $(this).attr("action"); var form_method = $(this).attr("method").toUpperCase(); $("#loadingimg").show(); $.ajax({ url: form_url, type: form_method, data: form_data, cache: false, success: function(returnhtml){ $("#result").html(returnhtml); $("#loadingimg").hide(); } }); }); }); </script> </head> <body> <?php $conveniados = array(); $destaques = array(); $servicos = array(); $locais = array(); $especialidades = array(); $convs = json_decode(file_get_contents('http://url.com.br/Service/BackOffice.svc/retornaConveniado')); foreach($convs as $conv){ $info = array(); $info["nome"] = $conv->nmConveniado; $info["categoria"] = $conv->listaEspecialidade[0]->nmEspecialidade; $especialidades[] = $conv->listaEspecialidade[0]->nmEspecialidade; $info["endereco"] = $conv->listaEndereco[0]->nmLogradouro; $info["bairro"] = $conv->listaEndereco[0]->nmBairro; $info["cidade"] = $conv->listaEndereco[0]->nmCidade; $info["telefone"] = $conv->dsTelefone1; $locais[] = $conv->listaEndereco[0]->nmCidade; $info["estado"] = $conv->listaEndereco[0]->sgEstado; $servicos_str = ''; $k=0; foreach($conv->listaServico as $serv_str){ $k++; $servicos[] = $serv_str->nmServico; if($k==count($conv->listaServico)){ $servicos_str .= $serv_str->nmServico; } else { $servicos_str .= $serv_str->nmServico.', '; } } $info["servicos"] = $servicos_str; $info["imagem"] = $conv->listaImagem[0]->nmArquivo; $conveniados[] = $info; if($conv->flDestaqueSite){ $destaques[] = $info; } } $_especialidades = array_unique($especialidades); $_servicos = array_unique($servicos); $_locais = array_unique($locais); asort($_especialidades); asort($_servicos); asort($_locais); ?> <!-- Wrapper --> <div id="wrapper"> <!-- Header Container ================================================== --> <header id="header-container"> <!-- Header --> <div id="header"> <div class="container"> <!-- Left Side Content --> <div class="left-side"> <!-- Logo --> <div id="logo"> <a href="index.html"><script type="text/javascript"> //<![CDATA[ window.__mirage2 = {petok:"c15ffef9e9bc60c90529128598972fc85e861c0e-1529018942-86400"}; //]]> </script> <script type="text/javascript" src="https://ajax.cloudflare.com/cdn-cgi/scripts/04b3eb47/cloudflare-static/mirage2.min.js"></script> <img data-cfsrc="images/logo.png" alt="" style="display:none;visibility:hidden;"><noscript><img src="images/logo.png" alt=""></noscript></a> </div> <!-- Mobile Navigation --> <div class="mmenu-trigger"> <button class="hamburger hamburger--collapse" type="button"> <span class="hamburger-box"> <span class="hamburger-inner"></span> </span> </button> </div> </div> <div class="right-side"> <div class="header-widget"> <a href="#" class="button border with-icon">Seja um conveniado <i class="sl sl-icon-plus"></i></a> </div> </div> </div> </div> </header> <div class="clearfix"></div> <div class="main-search-container" data-background-image="images/main-search-background-01.jpg" style="background-image: url("images/main-search-background-01.jpg");"> <div class="main-search-inner"> <div class="container"> <div class="row"> <div class="col-md-12"> <h2 class="text-center">Conveniados Anjo da Guarda</h2> <h4 class="text-center">Localize o conveniado desejado</h4> <form method="post" ajax="true" action=""> <div class="main-search-input"> <div class="main-search-input-item"> <input type="text" placeholder="Nome do conveniado" id="searchQuery" value=""> </div> <div class="main-search-input-item"> <select data-placeholder="Cidade" class="chosen-select" style="display: none;"> <?php foreach($_locais as $local){ ?> <?php if(trim($local)!=''){ ?> <option value="<?php echo $local; ?>"><?php echo $local; ?></option> <?php } ?> <?php } ?> </select> </div> <div class="main-search-input-item"> <select data-placeholder="Categoria" class="chosen-select" style="display: none;"> <option>Categoria</option> </select> </div> <div class="main-search-input-item"> <select data-placeholder="Especialidade" class="chosen-select" style="display: none;"> <?php foreach($_especialidades as $especialidade){ ?> <?php if(trim($especialidade)!=''){ ?> <option value="<?php echo $especialidade; ?>"><?php echo $especialidade; ?></option> <?php } ?> <?php } ?> </select> </div> <div class="main-search-input-item"> <select data-placeholder="Serviço" class="chosen-select" style="display: none;"> <option value>Serviços</option> <?php foreach($_servicos as $servico){ ?> <?php if(trim(servico)!=''){ ?> <option value="<?php echo $servico; ?>"><?php echo $servico; ?></option> <?php } ?> <?php } ?> </select> </div> <input type="submit" class="button" value="Buscar" /> </div> </form> </div> </div> </div> </div> </div> <div class="container "> <div class="row"> <div class="col-md-12 margin-top-40"> <div class="row"> <!-- Lista --> <?php $d=0; ?> <?php shuffle($destaques); ?> <?php foreach($destaques as $destaque){ ?> <?php $d++; if($d<=2){ ?> <div class="col-lg-12 col-md-12"> <div class="listing-item-container list-layout"> <a href="#" class="listing-item"> <!-- Imagem --> <div class="listing-item-image"> <img data-cfsrc="<?php echo $destaque["imagem"]; ?>" alt="" style="display:none;visibility:hidden;"><noscript><img src="<?php echo $destaque["imagem"]; ?>" alt=""></noscript> <span class="tag"><?php echo $destaque["categoria"]; ?></span> </div> <!-- Conteúdo --> <div class="listing-item-content"> <div class="listing-badge anunciante">Anunciante</div> <div class="listing-item-inner"> <h3><?php echo $destaque["nome"]; ?> <i class="verified-icon"></i></h3> <span><?php echo $destaque["telefone"]; ?></span></br> <span><?php echo $destaque["endereco"]; ?>, <?php echo $destaque["bairro"]; ?>, <?php echo $destaque["cidade"]; ?> - <?php echo $destaque["estado"]; ?></span> </div> </div> </a> </div> </div> <?php } ?> <?php } ?> <!-- Lista / Fim --> <center><a href="#" class="button border with-icon margin-bottom-20">Ver mais</a></center> <!-- Lista --> <?php $d=0; ?> <?php foreach($conveniados as $conveniado){ ?> <?php $d++; if($d<=5){ ?> <div class="col-lg-12 col-md-12" especialidade="<?php echo $conveniado["categoria"]; ?>" local="<?php echo $conveniado["cidade"]; ?>" nome="<?php echo $conveniado["nome"]; ?>" servicos="<?php echo $conveniado["servicos"]; ?>"> <div class="listing-item-container list-layout"> <a href="#" class="listing-item"> <!-- Imagem --> <div class="listing-item-image"> <?php if($conveniado["imagem"] != ''){ ?> <img data-cfsrc="<?php echo $conveniado["imagem"]; ?>" alt="" style="display:none;visibility:hidden;"><noscript><img src="<?php echo $conveniado["imagem"]; ?>" alt=""></noscript> <?php } else { ?> <img data-cfsrc="images/sem-imagem.jpg" alt="" style="display:none;visibility:hidden;"><noscript><img src="images/sem-imagem.jpg" alt=""></noscript> <?php } ?> <span class="tag"><?php echo $conveniado["categoria"]; ?></span> </div> <!-- Conteúdo --> <div class="listing-item-content"> <div class="listing-item-inner"> <h3><?php echo $conveniado["nome"]; ?></h3> <span><?php echo $conveniado["telefone"]; ?></span></br> <span><?php echo $conveniado["endereco"]; ?>, <?php echo $conveniado["bairro"]; ?>, <?php echo $conveniado["cidade"]; ?> - <?php echo $conveniado["estado"]; ?></span> </div> </div> </a> </div> </div> <?php } ?> <?php } ?> </div> <!-- Paginação --> <div class="clearfix"></div> <span id="result"><a href="http://wp.me/p2O9K2-b">jQuery + AJAX form submit script.</a></span> <div class="row"> <div class="col-md-12"> <!-- Paginação --> <div class="pagination-container margin-top-20 margin-bottom-40"> <nav class="pagination"> <ul> <li><a href="#" class="current-page">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#"><i class="sl sl-icon-arrow-right"></i></a></li> </ul> </nav> </div> </div> </div> <!-- Paginação / Fim --> </div> </div> </div> <!-- Footer ================================================== --> <div id="footer" class="margin-top-15"> <!-- Main --> <div class="container"> <!-- Copyright --> <div class="row"> <div class="col-md-12"> <div class="copyrights">© 2017 Afagu. Todos os direitos reservados.</div> </div> </div> </div> </div> <!-- Footer / End --> <!-- Back To Top Button --> <div id="backtotop"><a href="#"></a></div> </div> <!-- Wrapper / End --> <!-- Scripts ================================================== --> <script data-cfasync="false" src="../../cdn-cgi/scripts/f2bf09f8/cloudflare-static/email-decode.min.js"></script><script type="text/javascript" src="scripts/jquery-2.2.0.min.js"></script> <script type="text/javascript" src="scripts/mmenu.min.js"></script> <script type="text/javascript" src="scripts/chosen.min.js"></script> <script type="text/javascript" src="scripts/slick.min.js"></script> <script type="text/javascript" src="scripts/rangeslider.min.js"></script> <script type="text/javascript" src="scripts/magnific-popup.min.js"></script> <script type="text/javascript" src="scripts/waypoints.min.js"></script> <script type="text/javascript" src="scripts/counterup.min.js"></script> <script type="text/javascript" src="scripts/jquery-ui.min.js"></script> <script type="text/javascript" src="scripts/tooltips.min.js"></script> <script type="text/javascript" src="scripts/custom.js"></script> <!-- Google Autocomplete --> <script> function initAutocomplete() { var input = document.getElementById('autocomplete-input'); var autocomplete = new google.maps.places.Autocomplete(input); autocomplete.addListener('place_changed', function() { var place = autocomplete.getPlace(); if (!place.geometry) { window.alert("No details available for input: '" + place.name + "'"); return; } }); if ($('.main-search-input-item')[0]) { setTimeout(function(){ $(".pac-container").prependTo("#autocomplete-container"); }, 300); } } </script> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAgeuuDfRlweIs7D6uo4wdIHVvJ0LonQ6g&amp;libraries=places&amp;callback=initAutocomplete"></script> </body> </html>
  5. Soneca_BO

    Efeito Transição Css3

    Bom dia, Eu já desenvolvo web faz um tempo. um dia peguei um código web kit que quando mudava o tamanho da tela o meu responsivo não fazia a nimção muito rapida, mas fazia de uma forma suave e agradável.. só que não lembro exatamente o que fiz... alguém sabe algum efeito de transição que faça o ajuste suave nos box das div etc.. obs.: trabalho com todas div em % caso necessite, se não precisar uso px, para manter o conteúdo fixo. do layout ele esta ok.. só queria o efeito da transição de vagar.. tipo mudou o tamanho da tela ele faz um efeito tipo de slow.. desde já agradeço.
  6. 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
  7. Estou tentando posicionar os elementos fora da div aplicando uma margem negativa, mas quando faço isso, o elemento fica "por baixo" da div e não por cima. Como gostaria que ficasse: (inputs) Como realmente está ficando: Como pode ver pela seleção, o conteúdo está fora da div, mas não está aparecendo. Tentativas: já apliquei position:relative e coloquei um z-index: 2; no form para ficar em cima, mas não deu certo. Alguém tem uma ideia?
  8. DinhoPHP

    Div flutuante

    Olá gente! No site que estou trabalhando, preciso fazer guia de favoritos que fica posicionada sempre à direita e ao ser clicada, exibe os imóveis favoritos, como no site do Zap Imóveis. Estou com dificuldades de como fazê-la ficar visível a todo tempo. Dei uma interrompida no código (por motivo de força maior) e pouco tenho ainda, mas deixarei o código. Caso alguém saiba até o que devo pesquisar, por favor, me avise. O resultado pode ser visto clicando aqui! home.php <?php require_once("include/head.php"); ?> <body> <div style="display:none;" class="tips"><?=__FILE__?></div> <div class="tail-top"> <?php require_once (DIR_BLOCO . "/header_home.php"); //require_once(DIR_BLOCO . "/bloco_busca_topo.php"); ?> <div class="ImageTop"> <?php require_once(DIR_BLOCO . "/bannerhome.php"); ?> <?php require_once(DIR_BLOCO . "/bloco_busca_home.php"); ?> </div> <div class="mainhome"> <?php require_once(DIR_BLOCO . "/autenticacao.php"); /*require_once(DIR_BLOCO . "/box_mapa.php");*/ require_once(DIR_BLOCO . "/bloco_anuncios_destaques.php"); require_once(DIR_BLOCO . "/bloco_banners_meio.php"); require_once(DIR_BLOCO . "/bloco_cidades_destaque.php"); require_once(DIR_BLOCO . "/bloco_noticias_destaques.php"); require_once(DIR_BLOCO . "/bloco_botao_anuncie_rodape.php"); ?> </div> </div> <div id="show_favorite" class="navbar navbar-inverse" data-spy="affix" data-offset-top="197"> <?php require_once(DIR_BLOCO . "/bloco_favorite_div.php"); /*AQUI É O ARQUIVO DA DIV FAVORITOS*/ ?> </div> <?php require_once(DIR_BLOCO . "/rodape.php"); ?> </body> </html> bloco_favorite_div.php <div style="display:none;" class="tips"><?=__FILE__?></div> <div id="box_favorite" style="background-color: #00307d;"> <i class="fa fa-heart-o 1g" aria-hidden="true"></i> <div id="content_btn_favorite" class="col-md-4"> <h2>FAVORITOS</h2> <div id="content_divs_favorite"> <div id="divs_favorite"> </div> </div> </div> </div> css_div_favorite.php /* DIV DOS FAVORITOS */ #show_favorite{ display: flex; overflow: hidden; box-sizing: border-box; border-color: red; height: 500px; width: max-content; } #box_favorite{ } #content_btn_favorite{ } #content_divs_favorite{ } #divs_favorite{ }
  9. Felipe Massulini

    Como inserir o autofocus no botão?

    Bom dia pessoal. No menu do meu projeto, apenas tem um botão com uma lupa, e quando ele é clicado, abre o campo de texto para ser pesquisado. Porém quando clico nele, preciso clicar novamente no campo de texto para que eu possa digitar. Gostaria de saber como faço para que o clique da lupa, ja abra o campo de texto com o cursor nele pronto para digitar. Obs: Sou iniciante.
  10. DinhoPHP

    Preciso desse estilo visual

    Olá! Preciso urgentemente de ajuda, para desenvolver um estilo de busca avançada, como a do Zap Imóveis (no modo mobile). É possível fazer no CSS puro ou há FrameWorks? Fico no aguardo! Não consegui enviar a imagem por erro no site deste fórum.
  11. Alguém pode me explicar de forma rápida de que forma eles trabalham juntos?
  12. Pessoal, com vocês o CSS, as vezes, para de funcionar derrepente em um navegador, mas nos outros funciona perfeitamente? Gostaria de saber porque isso ocorre. Eu acredito que seja problema de compatibilidade entre os navegadores, mas o estranho é que se eu colocar ele diretamente na página ele funciona normalmente, mas se eu linkar ele assim, por exemplo: "<link rel="stylesheet" href="css/index.css">" ele as vezes para de funcionar em um navegador e no outro dia "as vezes" volta a funcionar normalmente. Gostaria de saber se dá para corrigir isso, se não der eu vou colocar puro na página, mesmo que fique menos organizado.
  13. Bom eu desconheço de é possível definir uma porcentagem da borda então alguém teria como me dar uma luz para criar esse efeito. Vejamos a print do efeito: html: CSS: Basicamente é isso uma curva reta semi-vertical uns 20 a 25 graus. Mas qual o problema se eu consigo fazer? O problema é que do jeito que fiz usei uma borda para criar o efeito e como disse até onde eu sei não dar para por uma borda por porcentagem, assim sendo não podendo adequar a um design responsivo. Então quando a screen é abaixo do padrão da borda cria-se uma extensa barra de rolagem para suprir a falta de espaço na tela. Obs.: Quero conseguir fazer isso só com CSS, porque com Javascript é só controlar a largura da borda com a largura de tela. E essa não é minha intenção. Obrigado.
  14. Joob

    CSS para Firefox (outros)

    Boas Malta, Estou aqui com um pequeno problema.. No Chrome roda bem, até no Internet Explore, quero que aparece o scroll na horizontal, mas no Firefox não aparece.. .title { font-weight: bold; max-width: 640px; } Basicamente, quero que quando passe desse max-width, que fique com scroll.. sem em qualquer browser.. não testei no Opera por acaso. mas no Firefox sei que não está a funcionar. Abraço
  15. Kimo Gordinho

    Menu Drop Down com HTML5 e CSS3

    Oi, bom dia. Então... eu estou testando meus conhecimentos básicos de HTML5 e CSS3 e como teste eu peguei um site e estou tentando montar ele do zero, mas acho que vou ficar só com o menu mesmo, enfim. O meu problema é que eu consegui fazer o menu drop down e eu queria que os itens do submenu dos itens do meu menu principal, demorassem para desaparecer quando eu tirasse o cursor do mouse de cima do item do menu principal. Exemplo: O meu item "Editar Perfil" tem os seus seguintes subitens: "Resumo", "Configurações da Conta", "Look and Layout" e "Perfil no Fórum". Eu quero que ao retirar o cursor do mouse de cima do item "Editar Perfil" do meu menu principal, em contrapartida os itens do meu submenu permaneçam aparecendo dentro de um limite de tempo, como por exemplo, três segundos.
  16. JonasGz

    PREENCHER BACKGROUND LENTAMENTE

    Bom dia, estou querendo fazer um efeito de ao passar o mouse a barra seja preenchida lentamente da esquerda para a direita, mas não sei qual propriedade do transition que muda a direção do preenchimento, segue como está até o momento: www.jonaschagas.info/efeito
  17. MrPhantomRed

    Menu em HTML5 E CSS3

    Preciso de ajuda com o menu que estou fazendo no meu site. Bem, já fiz de tudo pra tentar arrumar esse site, mas não consigo, por isso estou mandando meu código HTML e CSS aqui. HTML5: <!DOCTYPE html> <html lang="pt-br"> <head> <title>RUGBY</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="_css/normalize.css"> <link rel="stylesheet" type="text/css" href="_css/index.css"> <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800' rel='stylesheet' type='text/css'> <link rel="shortcut icon" href="_imagens/favicon.ico" type="image/x-icon"> <link rel="icon" href="_imagens/favicon.ico" type="image/x-icon"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body class="center clearfix"> <header> <h1><a href="home.html" title="Logotipo Rugby"><img src="_imagens/Rugby.png"><span></span></a></h1> <!-MENU-!> <nav> <ul class="menu"> <li><a href="#"><img id="icone" src="_imagens/menu2.png"></a> <ul> <li><a href="#">Inicio</a></li> <li><a href="#">Entenda o Rugby</a> <ul> <li><a href="#">Guia para iniciantes</a></li> <li><a href="#">Glossário</a></li> <li><a href="#">História do rugby</a></li> </ul> </li> <li><a href="#">Onde jogar</a> <ul> </ul> </li> <li><a href="#">Sobre</a> <ul> <li><a href="#">Contato</a></li> <li><a href="#">Sobre "nós"</a></li> </ul> </li> </ul> </ul> </nav> <!-FIM MENU-!> </header> <section class="welcome"> <h2>RUGBY</h2> <h3><span>TEXTO </span>TEXTO TEXTO <span> TEXTO</span> TEXTO TEXTO TEXTO.</h3> </section> <section class="container"> <div class="brancoex"> <h3>TITULO</h3> <p>TEXTOTEXTOTEXTOTEXTOTEXTOTEXTOTEXTO<span class="btn"><a href="estrutura.html" title="Leia mais...">Leia mais...</a></span></p> </div> <div class="fonteex"> <h3>TITULO</h3> <p>TEXTOTEXTOTEXTOTEXTOTEXTOTEXTOTEXTO<span class="btn"><a href="fonte.html" title="Leia mais...">Leia mais...</a></span></p> </div> <div class="menuex"> <h3>TITULO</h3> <p>TEXTOTEXTOTEXTOTEXTOTEXTOTEXTOTEXTO<span class="btn"><a href="menu.html" title="Leia mais...">Leia mais...</a></span></p> </div> </section> <footer> <small class="copyright"> <p>&copy 17087</p> </small> </footer> </body> </html> CSS3: body{ background:#282828; color:#dadada; font-family: "Open Sans", Helvetica, sans-serif, arial; font-size: 1.125em; font-weight: 300; line-height: 22px; text-align: left; text-shadow:1px 1px 0px #4c4c4c; } .center{ margin: 0 auto; max-width:1200px; width: 90%; } .clearfix:before, .clearfix:after { content: &quot; &quot;; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } /*fim do clearfix*/ img, picture, video, embed { max-width: 100%; } h1, h2{ color:#666666; font-size: 60px; font-weight: 800; letter-spacing: -3px; line-height: 60px; } h3{ font-size: 32px; font-weight: 300; letter-spacing: -2px; line-height: 38px; } p{ font-weight: 300; letter-spacing: -1px; } a, a:link, a:visited{ color:#a56256; font-weight:400; text-decoration:none; } a:hover{ color:#FE5E41; text-decoration:underline; text-shadow:none; } header{ border-bottom: 1px solid #E0E0E0; height:150px; width:100%; } /* Logotipo */ header h1 a{ display:block; float:left; height:120px; text-indent:-9999; width:35%; margin-top:-20px; margin-left:-100px; } /*nav - menu de navegação*/ nav{ float:right; margin-top:78px; text-align:right; width:41.6666666666667%; } /*SEÇÃO WELCOME*/ .welcome{ height:290px; text-align:center; width:100%; } h2 span{ font-size:1em; font-weight:300px; letter-spacing:-0.0333333333em; line-height:1em; } .welcome h3{ margin:0 auto; width:75%; } /* CONTAINER - CONTEUDO COM 3 COLUNAS */ .container{ background-color:#160d0b; height: 417px; padding:2.5%; width:95%; } .brancoex, .fonteex, .menuex{ float:left; position:relative; text-align:center; width:31.57894736842105%; } .brancoex, .fonteex{ margin-right: 2.631578947368421%; } .menuex{ background-color:#1a1a1a; margin-right:0px; } .brancoex{ background-color:#1a1a1a; } .fonteex{ background-color:#1a1a1a; } /*imagens*/ #brancoex img, #fonteex img, #menuex img{ margin: 10px auto -15px auto; text-align:center; img { max-width:100% } } /*formatação do texto*/ .container h3{ color:white; font-size: 1.77777777778em; font-weight: 300; letter-spacing: -0.0625em; margin-bottom: 30px; text-shadow:none; } .container p{ background-color:#434343; float:left; height:160px; padding: 1.9444444444444445%; position:absolute; width-max:100%; text-align:justify; top:225px; } /*formatação do botão*/ span.btn{ font-size:1.1111111111em; font-weight: 400; letter-spacing:-0.1em; height:27px; margin-top: 30px; position:absolute; right: 1px; text-align:center; text-shadow:none; width:33.33333333333333%; } span.btn a{ color:#1a1a1a; padding: 2px 3.333333333333333%; } .brancoex span.btn a{ background-color:#868686; } .fonteex span.btn a{ background-color:#868686; } .menuex span.btn a{ background-color:#868686; } /*Seção FOOTER - Rodape com 2 colunas*/ footer{ clear:both; height: 50px; padding: 10px 0; width:100%; } .copyright{ float:left; margin-left:2.5%; } .desenvolvedor{ float:right; } .desenvolvedor figure{ width:100%; } #menuu{ border:none; margin-left:-32.9%; width:100%; height:100%; overflow:hidden; margin } /*MENU*/ /*esse aqui oculta as marcações da lista*/ .menu{ list-style:none; float:left; } /*esse faz ficar na horizontal*/ .menu li{ position:relative; float:left; } /*esse aqui muda a cor dos links e tira o efeito de link no menu não suspenso*/ .menu li a{ color:black; text-decoration:none; display:block; } #icone{ width:17%; height:17%; } Imagem do menu em anexo. Podem editar o layout do menu como quiserem, apenas me ajudem a deixar coerente isso tudo. Há páginas em cima de outras. t.t
  18. html <section> <nav> <ul> <li><a href="index.html">Index</a></li> <li><a href="index.html">Index</a></li> <li><a href="index.html">Index</a></li> <li><a href="index.html">Index</a></li> <li><a href="index.html">Index</a></li> <li><a href="index.html">Index</a></li> </ul> </nav> </section> css #topo{ background:#000; width:100%; text-align:center; margin-top:-10px; position:fixed; } nav ul{ list-style: none; text-align:center; width:100%; margin-top:25%; position:absolute; } como vcs podem ver o menu está sobre o topo eu queria que ele passasse por de trás do topo é só um exemplo que o position absolute está passando sobre o position fixed
  19. Estou tendo dificuldades para criar uma transição na criação de bordas no css3. Quero que ao passar o mouse, crie a borda lentamente, mas mesmo usando a transição a borda é criada instantaneamente. Queria saber como faz aquele efeito para o traço da da borda caminhe de uma ponta a outra até fechar o quadrado, em x segundos. Mas a transição não faz nada com a borda... h1 a:hover { border: 1px solid black; transition: 2s; } não tem jeito para aplicar a transição na criação da borda?
  20. Pessoal, estou estudando sobre unidades de medidas do CSS. Estou com a seguinte duvida: Para sites responsivos, a medida EM só serve para dizer o tamanho da fonte? Posso formatar uma div em forma de caixa toda com a medida EM? No caso, essa medida fica fixa? Ou responsiva? Fiz um teste e deu que ficou fixa. Mas a EM é uma medida pra sites responsivos, então o certo não era o caixa ficar de acordo com a tela do dispositivo? ou isso fica com a porcentagem (%)? Exemplo: <!DOCTYPE html> <html> <head> <title>teste</title> <style> div { background-color: aqua; width: 30.8em; height: 30.8em; } </style> </head> <body> <div> </div> </body> </html> Aqui tenho um exemplo em que a div "pai" é em % e a div filho é com a unidade EM. Nesse caso, ele não deveria pegar o valor da porcentagem do pai, e automaticamente reduzir o tamanho da div filho? Isso parece bastante com a unidade de medida PX. <!DOCTYPE html> <html> <head> <title>teste</title> <style> #pai { background-color: aqua; width: 100%; height: 100%; } #filho { background-color: indianred; width: 30.0em; height: 30.0em; } </style> </head> <body> <div id = "pai"> <div id = "filho"> </div> </div> </body> </html> No caso, pra formatação de div's com width e height, tenho que utilizar % sempre que quiser deixar responsivo ? Se sim, isso significa que em questão de formatação de imagem o EM e REM seria praticamente a mesma coisa que o pixel? sempre ficando no mesmo tamanho independente do dispositivo como no exemplo a cima? Outra pergunta: O EM e REM é só pra tamanho de fontes ou da pra fazer a coisa a cima? Outra pergunta: Qual a unidade de medida mais utilizada hoje em dia pra sites responsivos? EM, REM ou outra melhor? Desde já obrigado!
  21. Boa tarde... Tenho uma dúvida simples mas para quem nunca se preocupou muito com organização de código css essa dúvida pode ser muito relevante... como vocês me recomendariam organizar o css no meu projeto...vamos supor que meu projeto(site) tenha um menu com 3 paginas html: pagina1.html (uma listagem de cliente por exemplo) pagina2.html (um cadastro de cliente por exemplo) pagina3.html (um formulario de contato por exemplo) eu poderia ter um unico arquivo css que poderia chamar de style.css por exemplo ou voces me recomendariam um arquivo css para cada pagina??? e outra duvida é em relação a quando eu for desenvolver meu site pensando em responsividade...é mais viavel eu ter um unico arquivo pagina1.css com a formatacao do layout para celular, tablet e computador de cada pagina ou seria melhor arquivos diferentes...por exemplo...pagina1-celular.css....pagina1-tablet.css...pagina1-computador.css?????? como voces fazem???? desde já agradeço e peço desculpas pela minha ignorancia!
  22. Olá pessoal. Ainda não tenho muito conhecimento no desenvolvimento Web, porem já sei bastante coisa. Estou criando uma Engine para Visual Novels que vou disponibilizar como Open Source. Para quem não conhece esse tipo de game, ele é como um livro em que você vai lendo as falas, vendo os personagens por trás e ainda com trilha sonora. Sem contar que você pode fazer escolhas que vão modificar a história. Em fim, estou quase terminando a primeira versão da minha engine. Porem não sei como fazer para colocar ela aparecendo em todo o navegador. Vou postar uma imagem aqui de como está agora: Clique para acessar a imagem (Sprite e background não foram feitos por mim, só usei de modelo para construir o código. Quando eu colocar no GitHub irei criar minhas proprias imagens) O que quero é que ela fique fixa em toda área do navegador. O que devo estudar? Estudei DOM mas meu conhecimento ainda é pouco já que foquei mais na aprendizagem com o console e agora estou partindo pro documento. Tem como fazer isso sem um Framework? Não queria usar um Framework por que estou fazendo a Engine com puro JavaScript. Ainda estou pensando em como deixar o game responsivo (se tiverem alguma dica pra mim podem falar). Um pouco sobre a Engine: Não fiz com a Canvas porque ainda não estudei sobre ela. Fiz com o DOM normal e JS orientado a objetos. Não usei funções de ordem superior por que ainda não estudei sobre elas mas utilizei funções como setTimeout. Primeiro o usuario irá se deparar com o Menu, onde terá a opção de iniciar o jogo ou continuar. Iniciando o jogo, a personagem irá explicar um pouco sobre o poder da engine. Os textos são passados com um efeito onde aparece letra por letra. Também podemos mudar a posição do personagem como também da espressão do rosto dele apenas acrescentando as determinadas propriedades no objeto. Fora que terá música de fundo que é a unica coisa que falta implementar no projeto. Tudo isso orientado a objeto, onde só precisamos digitar em determinado objeto, a propriedade que queremos que ele tenha. Sou um cara que estuda programação a 7 meses sósinho. Mas não significa que estudei JS por todo esse tempo. Estudei lógica, depois HTML5 e CSS3, um pouco de Bootstrap e por fim estou me aprofundando no JS. Desde já obrigado pessoal!
  23. Quero saber como enviar atraves dados atraves do modal, quando eu envio o codigo da erro ou como id indefinido no index ou variaveis nome descriçao e quantidade indefinidas como estilo ultilizo o locawebstyle //Esse é o Arquivo Alterar.php <?php include "connection.php"; $nome = $_POST['nome_equipamentos']; $quantidade = $_POST['quant_equipamentos']; $descricao = $_POST['descricao']; $id = $_GET['id']; $alterar = mysql_query("UPDATE `tb_equipamentos` SET `nome_equipamentos` = '$nome', `quant_equipamentos` = '$quantidade', `descricao_equipamentos` = '$descricao' WHERE `tb_equipamentos`.`idTB_equipamentos` = '$id'"); if($alterar){ echo '<script>alert("Dados Alterados com Sucesso");</script>'; } // echo '<script>window.location.href="listaequipamento.php"</script>'; @mysql_close("connection.php"); ?> ------------------------------------------------------------------------------------------------------------------------------------ //Esse é a parte do Modal <div class="ls-modal" id="myAwesomeModal" > <form method="post" action="alterar.php"> <div class="ls-modal-large"> <div class="ls-modal-header"> <button data-dismiss="modal">&times;</button> <h4 class="ls-modal-title">Alterar Dados do Equipamento</h4> </div> <div class="ls-modal-body" id="myModalBody" align="center"> <label><b>Nome do Equipamento:</b></label> <br><br> <input type="text" name="nome_equipamentos" autofocus required> <br><br> <label><b>Quantidade:</b></label> <br><br> <input type="number" min="1" required name="quant_equipamentos"> <br><br> <label class="ls-label"> <b class="ls-label-text">Descrição:</b> <textarea rows="12" cols="30" name="descricao" required></textarea> </label> </div> <div class="ls-modal-footer"> <button class="ls-btn ls-float-right" data-dismiss="modal">Cancelar</button> <a href="alterar.php?id=<?php echo $linha['idTB_equipamentos']; ?>" class="ls-btn-primary">Alterar Dados</a> </div> <?php }}?> </div> </form> </div> ---------------------------------------------------------------------------------------------------------------------------------------- //Aqui tem o codigo da verificação das linhas do banco <tbody> <?php $consulta = mysql_query("select * from tb_equipamentos"); if($consulta){ while($linha = mysql_fetch_assoc($consulta)){ ?> <tr> <td value="<?php ?>"> <?php echo $linha['nome_equipamentos'];?> </td> <td class="ls-ico-pencil2"> <a data-ls-module="modal" data-target="#myAwesomeModal">Alterar</a> </td> <td class="ls-ico-remove"> <a href="excluir.php?id=<?php echo $linha['idTB_equipamentos']; ?>">Excluir</a> </td> </tr> </tbody>
  24. Clauido José

    Problema .navbar-collapse

    Bom dia galera estou com um problema no meu .navbar-collapse quando o clico para aparecer ele esta ficando abaixo no banner principal e não pega a pagina toda não consigo acertar ele olha meu código: <!--Inicio Nav--> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="col-sm-12"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li><a href="#"><span class="glyphicon glyphicon-home" style="padding: 0px 10px"></span>Home</a></li> <li><a href="#"><span class="glyphicon glyphicon-info-sign" style="padding: 0px 10px"></span>A Empresa</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="true"> <span class="glyphicon glyphicon glyphicon-th" style="padding: 0px 10px"></span> Persianas <span class="caret"></span></a> <ul class="dropdown-menu" id="persinas"> <asp:DataList ID="itemPersianas" RepeatColumns="1" runat="server"> <itemtemplate> <li><span style="padding-left:15px;"></span><a href="produtos.aspx?ProdutosId=<%# Eval("MenuId")%>"> <%# Eval("Titulo") %> </a></li> </itemtemplate> </asp:DataList> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"> <span class="glyphicon glyphicon-th-large" style="padding: 0px 10px"></span> Cortinas <span class="caret"></span></a> <ul class="dropdown-menu" id="cortinas"> <asp:DataList ID="itemCortinas" RepeatColumns="1" runat="server"> <itemtemplate> <li><span style="padding-left:15px;"></span><a href="produtos.aspx?ProdutosId=<%# Eval("MenuId")%>"> <%# Eval("Titulo") %> </a></li> </itemtemplate> </asp:DataList> </ul> </li> <li><a href="#"><span class="glyphicon glyphicon-globe" style="padding: 0px 10px"></span>Parceiros</a></li> <li><a href="#"><span class="glyphicon glyphicon-envelope" style="padding: 0px 10px"></span>Contato</a></li> </ul> <form class="navbar-form navbar-right" runat="server" role="search" action="#" method="get" id="BuscaForm"> <div class="input-group"> <asp:TextBox ID="BuscaTextBox" runat="server" class="form-control" placeholder="Pesquisar produtos" name="BuscaTextBox" style="padding:6px 6px;"></asp:TextBox> <div class="input-group-btn"> <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button> </div> </div> </form> </div> </div> </div> </nav> <!--Fim nav--> meu css: /* navbar /* barra de menu principal */ .navbar a{ color: #fff; } .navbar a:hover{ color: #333; } .navbar-default{ background: -moz-linear-gradient(top, #CCC 80%, #fefefd 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f2f1), color-stop(100%,#fefefd)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #CCC 80%,#fefefd 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #CCC 80%,#fefefd 100%); /* Opera 11.10+ */ border-radius:0px; height:30px } .navbar-default .navbar-nav > li > a{ color:#fff; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { background-color:#333; color:#fff; } .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus{ background-color:#333; color:#fff; } .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus{ background-color:#333; color:#fff; } #cortinas{ width: 70px; margin-left:-10px; border-radius: 10px; box-shadow: 5px 5px black; } #cortinas li { width: 100%; padding-bottom:05px; } #persinas{ width: 230px; margin-left:-30px; border-radius: 10px; box-shadow: 5px 5px black; } #persinas li{ padding-bottom:10px; } .navbar-nav > li > .dropdown-menu{ background: -webkit-linear-gradient(top, #CCC 95%,#fefefd 100%); /* Chrome10+,Safari5.1+ */ color:#000; font-size: 12px; } /* mobile version */ .navbar .navbar-collapse { background: -webkit-linear-gradient(top, #CCC 95%,#fefefd 100%); /* Chrome10+,Safari5.1+ */ } .navbar.navbar-default .nav-collapse { background: -webkit-linear-gradient(top, #CCC 95%,#fefefd 100%); /* Chrome10+,Safari5.1+ */ } .btn.btn-circle { border-radius: 50px; } .btn.btn-outline { background-color: transparent; }
  25. DinhoPHP

    Dúvida com divs flex

    Olá! Estou com um problema com div flex, onde esta recebe dados vindo de um banco de dados (pequenos textos). Vi um método aonde esta div se ajusta conforme o tamanho da tela, e aumenta conforme o conteúdo adicionado, porém está muito esquisito como mostra o link da figura. Gostaria que as divs dos doze meses exibam o seu conteúdo e permaneçam alinhadas. <div id="footer_programacao_geral"> <div id="info_programacao_anual"> <span class="titulo_info">Janeiro</span> <pre><span class="txt_justify"><?php foreach ($coletou as $dados){ echo utf8_encode($dados->janeiro);}?></span></pre> </div> ... </div> estilo #footer_programacao_geral{ display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: baseline; margin:15px 0px 20px 0px; } #info_programacao_anual{ max-width: 100%; height: 100%; /*Alterar para 100%*/ margin: auto 5px 15px 5px; border: solid 1px #ff6f63; box-shadow: #696969 0px 5px 4px; background-color: rgba(250, 246, 247, 0.85); text-align: justify; } .titulo_info{ display: block; text-align: center; color: #fff; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f85032+0,f16f5c+50,e73827+100 */ background: #f85032; /* Old browsers */ background: -moz-linear-gradient(left, #f85032 0%, #f16f5c 50%, #e73827 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #f85032 0%,#f16f5c 50%,#e73827 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #f85032 0%,#f16f5c 50%,#e73827 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f85032', endColorstr='#e73827',GradientType=1 ); /* IE6-9 */ } .txt_justify{ display: block; padding: 3px; text-align: justify; }
×

Important Information

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