Pesquisar na Comunidade
Mostrando resultados para as tags ''css''.
Encontrado 329 registros
-
Como mudar o cor da letra de um active em um menu no boostrtrap <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container"> <a class="navbar-brand" href="#"> <img src="icone.png" height="60px" alt="Logo"> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse d-lg-flex justify-content-end" id="navbarSupportedContent" style="font-size: 20px;"> <ul class="navbar-nav" > <li class="nav-item active" > <a class="nav-link" href="#">Inicio</a> </li> <li class="nav-item" > <a class="nav-link" href="#">Login</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Aluno</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Professor</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Fale Conosco</a> </li> </ul> </div> </div> </nav>
-
Bom dia, meus amigos! Td bem com vcs? Estou precisando de mais uma ajudinha de vcs. Tenho um codigo aqui e não estou acertando a mão nele, estou apanhando desse tal de media queries rsrsrs. Vejam os exemplos de como estão os meus codigos: Gostaria que no Desktop ficasse como o Mobile, e os dois centralizado na pagina, notem que não estão. segue meu codigo: <style type="text/css"> /* My opinion */ body { background-image: url(imagens/slide_1.jpg); margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; } /* Section clientes */ .container-cards { flex-wrap: wrap; display: inline-flex; width: 100%; align-items: center; } .box-container { /*border: 1px solid red;*/ display: flex; background: #FFFFFF; font:80%/1 Arial; font-size: 14px; border-radius: 5px; align-items: center; width: 100px; height: 120px; border: 2px solid #AAAAAA; margin: 10px; box-shadow: 0 0 10px #ddd; } .box-container .box-image img { width: 93px; height: 93px; text-align: center; } .title { margin-bottom: 10px; font-size: 16px; font-weight: bold; color: #000; } .description { font-size: 14px; color: #8a8686; } </style> </head> <body> <!--My option--> <div align="center"> <img src="imagens/logo.png" width="200px" height="192px"/></div> <br/> <div align="center"> <div class="container-cards"> <div class="box-container" onclick="location.href='cardapio_pizza.php'" style="cursor:pointer;" align="center"> <section class="box-image"> <img src="imagens/banner_pizzas.png"/><br/> <label class="title"><b>Pizzas</b></label> </section> </div> <div class="box-container" onclick="location.href='cardapio_pizza_cone.php'" style="cursor:pointer;"> <section class="box-image"> <img src="imagens/banner_pizzas_cone.png"/><br/> <label class="title"><b>Pizzas no Cone</b></label> </section> </div> <div class="box-container" onclick="location.href=''" style="cursor:pointer;"> <section class="box-image"> <img src="imagens/banner_porcoes.png"/><br/> <label class="title"><b>Porções</b></label> </section> </div> <div class="box-container" onclick="location.href='cardapio_lanches.php'" style="cursor:pointer;"> <section class="box-image"> <img src="imagens/banner_lanches.png"/><br/> <label class="title"><b>Lanches</b></label> </section> </div> <div class="box-container" onclick="location.href='cardapio_fritas.php'" style="cursor:pointer;"> <section class="box-image"> <img src="imagens/banner_cone_fritas.png"/><br/> <label class="title"><b>Cone de fritas</b></label> </section> </div> <div class="box-container" onclick="location.href='cardapio_refri.php'" style="cursor:pointer;"> <section class="box-image"> <div align="center"> <img src="imagens/banner_refri_sucos.png"/><br/> <label class="title"><b>Bebidas</b></label> </div> </section> </div> </div> <div align="center"> <font size="2" color="#FFFFFF" face="arial"> <p>Horário de atendimento:<br/>Segunda á Sexta das 19:00 as 22:00<br/>Sextas, Sábados e Domingos das 19:00 as 23:30</p> </font> </div>
-
Quero criar um simulador de mineração, tipo assim: Quando clicar em "INICIAR" os números vão começar a crescer numa velocidade que eu possa regular no código, e quando clicar em "PARAR" ele pare, e quando eu sair do app e voltar ele possa continuar salvo. Mas eu não consigo fazer, já tentei de diversas formas! Se alguém puder ajudar eu agradeço!!
-
Boa noite, meus amigos! Td bem com vcs? Olha eu novamente... rsrsrsrs...... Meus Deus mas como é dificiiiiil esse tal de CSS, tentei fazer um curso online, o cara é muito doido, e quase me deixou doido tbm kkkkkkk, abandonei......kkk Galera estou tentando colocar linhas pontilhadas estilo cardápio. MODA DA CASA (Mussarela, provolone, parmesão e catupiry etc.) $0,00 ........................................................................................................................... alguem pode me dar um help? obrigado!
-
CSS - Orientação referente marcadores de Slider
violin101 postou um tópico no fórum Desenvolvimento frontend
Caros amigos, membros do grupo. saudações... Desculpa em recorrer ao auxílio dos amigos, mas estou com uma pequena dúvida, que não estou conseguindo resolver. Tenho um Slider onde mostro Empresa Parceiras. <<=== até aqui tudo bem. O problema é que não estou conseguindo incluir no slider os BUTTON's de Avançar e Recuar. Quando tento colocar os marcadores eles não ficam lado a lado. Abaixo posto o código. CSS está assim: <style> /* Slider */ .slick-slide { margin: 0px 20px; } .slick-slide img { max-width: 100%; } .slick-slider{ position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list{ position: relative; display: block; overflow: hidden; margin: 0; padding: 0; } .slick-list:focus{ outline: none; } .slick-list.dragging{ cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track{ position: relative; top: 0; left: 0; display: block; } .slick-track:before, .slick-track:after { display: table; content: ''; } .slick-track:after{ clear: both; } .slick-loading .slick-track{ visibility: hidden; } .slick-slide{ display: none; float: left; height: 100%; min-height: 1px; } [dir='rtl'] .slick-slide { float: right; } .slick-slide img{ display: block; } .slick-slide.slick-loading img{ display: none; } .slick-slide.dragging img{ pointer-events: none; } .slick-initialized .slick-slide{ display: block; } .slick-loading .slick-slide{ visibility: hidden; } .slick-vertical .slick-slide{ display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden{ display: none; } </style> O HTML está assim: <div class="container"> <h2>Empresas - Parceiras</h2> <section class="list-logos slide"> <div class="slide"><img src="https://s2.glbimg.com/PE9lTOWcKUlnHVGSjv_OqVcPM7w=/e.glbimg.com/og/ed/f/original/2019/10/25/cloud-blue-high-clouds-its-in-the-air-sky-air-2294671.jpg"></div> <div class="slide"><img src="https://conhecimentocientifico.r7.com/wp-content/uploads/2019/10/nuvens-como-sao-formadas-principais-tipos-e-caracteristicas-2.jpg"></div> <div class="slide"><img src="https://hardcore.com.br/wp-content/uploads/sites/2/2020/09/onda-do-bem.jpg"></div> <div class="slide"><img src="https://statig2.akamaized.net/bancodeimagens/3i/dv/7j/3idv7j5fqayakev9ltglmr97m.jpg"></div> <div class="slide"><img src="https://uploads.metropoles.com/wp-content/uploads/2020/01/15192306/mar-praia-600x400.jpg"></div> </section> </div> <div class="clearfix"></div> O JS está assim: <script> $(document).ready(function(){ $('.list-logos').slick({ slidesToShow: 3, slidesToScroll: 1, autoplay: true, autoplaySpeed: 1500, arrows: false, dots: true, pauseOnHover: false, responsive: [{ breakpoint: 768, settings: { slidesToShow: 4 } }, { breakpoint: 520, settings: { slidesToShow: 3 } }] }); }); </script> Caros amigos, como consigo colocar os botões de Avançar e Recuar mais os indicadores abaixo das imagens ? Grato, Cesar -
[Resolvido] Erro de formataçao web to mobile
Matheus B. Siqueira postou um tópico no fórum Desenvolvimento frontend
Olá, estou criando um modal para o usuário preencher alguns dados. Realizei a formatação em colunas com o bootstrap em web, porém, ao passar para mobile, a formatação muda tudo. Gostaria de sugestões de como poderia solucionar o problema. Não manjo muito da responsividade. Segue abaixo as imagens mobile e web, respectivamente, junto ao código do modal; <div class="modal fade" id="modalAutentMonitor" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Autenticar monitor</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Fechar"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body text-md-center"> <!--SEÇÃO--> <div class="form-row"> <div class="form-group"> <div class="col-12 col-md-12"> <input type="password" class="form-control" id="codigo_monitor" name="codigo_monitor" placeholder="Código:"> <br> </div> </div> <div id="botoes_monitor" class="col-6 col-md-8 offset-md-2"> <button type="submit" name="btnAutentMonitor" id="btnAutentMonitor" class="btn btn-outline-warning">Enviar</button> <button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#modalSelecionar" data-dismiss="modal">Voltar</button> </div> </div> <h6 class="text-center" id="resposta_c_r"></h6> <div id="correto" class="d-none"><i class='iconize fas fa-thumbs-up'></i></div> <div id="incorreto" class="d-none"><i class='iconize fas fa-thumbs-down'></i></div> </div> </div> </div> </div> -
Boa noite! Td bem com vcs? Peguei um codigo de modal muito util para mim, mas ele naun sai do lugar, estou tentando posiciona lo em outro lugar e naun consigo. Ja fiz de tudo e nada resolveu alguém pode me ajudar? Gostaria que ele ficasse, aonde eu colocar ele aceitar e rodar. segue o codigo abaixo: <style> body {font-family: Arial, Helvetica, sans-serif;} * {box-sizing: border-box;} /* Button used to ppen the contact form - fixed at the bottom of the page */ .open-button { background-color: #555; color: white; padding: 16px 20px; border: none; cursor: pointer; opacity: 0.8; position: fixed; bottom: 23px; right: 28px; width: 280px; } /* The popup form - hidden by default */ .form-popup { display: none; position: fixed; bottom: 0; right: 15px; border: 3px solid #f1f1f1; } /* Add styles to the form container */ .form-container { max-width: 300px; padding: 10px; background-color: white; } /* Full-width input fields */ .form-container input[type=text], .form-container input[type=file], .form-container input[type=textarea] { width: 100%; padding: 15px; margin: 5px 0 22px 0; border: none; background: #f1f1f1; } /* When the inputs get focus, do something */ .form-container input[type=text]:focus, .form-container input[type=file]:focus, .form-container input[type=textarea]:focus { background-color: #ddd; outline: none; } /* Set a style for the submit/login button */ .form-container .btn { background-color: #4CAF50; color: white; padding: 16px 20px; border: none; cursor: pointer; width: 100%; margin-bottom:10px; opacity: 0.8; } /* Add a red background color to the cancel button */ .form-container .cancel { background-color: red; } /* Add some hover effects to buttons */ .form-container .btn:hover, .open-button:hover { opacity: 1; } </style> <button class="open-button" onclick="closeForm()">Open Form</button> <div class="form-popup" id="myForm"> <form action="/action_page.php" class="form-container"> <h1> <img src="http://mercatotal.com.br/gnservice/img/logotipo2.png" width="170px" height="70px"/></h1> <label for="nome"><b>Nome:</b></label> <input type="text" placeholder="Seu Nome" name="nome" required/> <label for="foto"><b>Foto:</b></label> <input type="file" placeholder="Sua Foto" name="foto" required/> <label for="comment"><b>Comentários:</b></label> <textarea placeholder="Seu Comentário" name="depoimento" cols="36,7" rows="10" required></textarea> <button type="submit" class="btn">Login</button> <button type="button" class="btn cancel" onclick="openForm()">Close</button> </form> </div> muito obrigado!
-
[Submenu] Menu horizontal com submenu vertical.
Jag Panzer postou uma questão Perguntas e respostas rápidas
Olá camaradas estou desenvolvendo um menu com submenu, o problema é que o submenu fica horizontalmente, atualmente estou usando apenas o HTML e o CSS, vou colocar ambos aqui: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>TesT</title> <link rel="stylesheet" href="testilo.css"> </head> <body> <h1>Teste 2</h1> <h1> Desenvolvendo Menu</h1> <img src="cabala2.jpg" alt="Árvore" width="120" height="120" id="imgpos"> <br> <hr> <br> <nav id="menu"> <ul> <li><a href="index.html">HOME</a></li> <div class="dropdown"> <button class="dropbtn"> <li><a href="meses.html">Mêses</a></li> </button> <div class="dropdown-content"> <ul > <li><a href="#nissan">Nissan</a></li> <li><a href="#iyar">Iyar</a></li> <li><a href="#sivan">Sivan</a></li> <li><a href="#tamuz">Tamuz</a></li> <li><a href="#av">Av</a></li> <li><a href="#elul">Elul</a></li> <li><a href="#tshrei">Tishrei</a></li> <li><a href="#cheshvan">Cheshvan</a></li> <li><a href="#kislev">Kislêv</a></li> <li><a href="#tevet">Tevêt</a></li> <li><a href="#shevat">Shevat</a></li> <li><a href="#adar">Adar</a></li> </ul> </div> </div> <li><a href="12tribos.html">As 12 Tribos</a></li> <li><a href="arvore.html">Árvore da Vida</a></li> <li><a href="alfabeto.html">Alfabeto Hebraico</a></li> <li><a href="banco.html">Banco de Mapas</a></li> </ul> </nav> </body> </html> Agora vou colocar o CSS: body{ background-color:rgb(0, 132, 255); } nav#titulos h1{ color: white; font-size: 30px; margin-top: -2px; text-align: center; } nav#titulos h2{ color: white; padding: 5px; font-size: 30px; text-align: center; } .dropbtn{ background-color: darkblue; } .dropdow { float: left; overflow: hidden; } .dropdow .dropbtn { font-size: 16px; border: none; outline: none; color: white; padding: 14px 16px; background-color: darkblue; font-family: inherit; margin: 0; } .navbar a:hover, .dropdown:hover .dropbtn { background-color: rgb(10, 214, 241); } .dropdown-content { display: none ; position: absolute; background-color: darkblue; min-width: 160px; box-shadow: 0px 8px 16px 0px rgb(10, 214, 241); z-index: 1; } .dropdown-content a { float: none; color: darkblue; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover { background-color:darkblue; } .dropdown:hover .dropdown-content { display: flex; justify-content: space-between; } hr { border-color: white; margin-top: -20px; } nav#menu{ display: flex; overflow: hidden; margin-top: -10px; background-color: darkblue; float: none; text-align: left; padding: 0px 0px 10px 0px; } nav#menu ul { margin:-5px 0 ; padding: 0; background-color: darkblue; overflow: hidden; right: auto; float: left; } nav#menu li{ display: flex; border: none; } nav#menu ul li { display: inline; padding: -10px; } nav#menu li a { display: inline-block ; color: white; padding:19px 39px; margin: none ; text-decoration:none ; transition: background-color 1s; } nav#menu li a:hover { background-color:rgb(10, 214, 241); } nav#menu li.active{ background-color:rgb(10, 214, 241);; } h1{ color: white; text-align: center; } p { color: white; text-align: center; } p{ text-align: center; } h2 { color: gold; text-align: center; text-decoration:none; } a { color: gold; } #imgpos { position: absolute; left: 5px; top: 10px; } nav#menu ul { width: 100%; display: table; } nav#menu ul li { display:table-cell; list-style: none; } -
Boa tarde, meus amigos (as)! Estou tentando fazer uma box desse jeito da foto em anexo. Este é o código que estou tentando fazer ficar igual a da foto... alguém pode me ajudar ? fieldset{ width:100%; height:100%; padding: 1em; font:80%/1 sans-serif; border-radius: 10px; padding: 5px; min-height:1px; background: -webkit-linear-gradient(90deg, #CCCCCC, #FFFFFF) repeat scroll 0 0 transparent; background: -moz-linear-gradient(90deg, #CCCCCC, #FFFFFF) repeat scroll 0 0 transparent; border: 1px solid #AAAAAA; border-radius: 10px 10px 10px 10px; box-shadow: 0 0 15px #AAAAAA; font-size: 15px; color: #000; text-transform: uppercase; text-align: center; } div.box { width: 250px; display: inline-block; padding: 15px; min-height:1px; } <div class="box"> <fieldset onclick="location.href='#'" style="cursor:pointer;" align="center"> <img src="btn-galeria.png" width="130" height="130" /> <br/><br/> <span> Galeria de Fotos</span> <br/><br/> </fieldset> </div>
-
Bom dia! Estou tentando alterar itens de um select mas não estou conseguindo. Estou usando a biblioteca do selectize.js mas, não consigo alterar os elementos. Estou tentando deixar uma parte dos elementos em negrito e o resto normal mas não estou conseguindo altera-los ou encontrar algum elemento que me ajude a resolver. Resumindo; quero deixar tudo que está antes do - em negrito. Lembrando que tenho outros elementos e que tudo que estiver antes do - deixar em negrito e o resto normal. Não sei por onde começar a pesquisar e peco a compreensão de todos. Pois, sou iniciante. Desde já agradeço pela atenção. Segue exemplo abaixo:
-
Como bloquear o espaço para não digitar no input text?
kaioneresm postou um tópico no fórum Desenvolvimento frontend
Olá, tenho um formulario que pede um nome de usuário. Preciso que ao tentar digitar o espaço do teclado ele não funcione. Ou seja o input text bloquea no mesmo momento que for digiado. Alguem pode me ajudar? Obrigado !! -
Estou com o seguinte erro: Ao acessar o meu site na pagina principal tudo ok. Porém quando acesso em um menu que vai carregar um arquivo que está em uma pasta e não na pasta raiz, ai o arquivo css não é carregado. <a href="usuarios"> home</a> chamo o arquivo funcionarios na mesma pasta onde está o arquivo index.php -funciona <a href="usuarios/usuarios"> home</a> Pasta 'usuarios' e dentro dela chamo o arquivo 'usuarios' - ai não funciona Descobri que quando entro na pasta usuários fica assim, com a basta no diretório do arquivo. Como corrigir? <link rel="stylesheet" href="http://localhost/keiri/admin/usuarios/plugins/fontawesome-free/css/all.min.css "> Meu htaccess RewriteRule ^([a-z]+)\/?$ dashboard.php?arquivo=$1 [NC,L] RewriteRule ^([a-z]+)\/([a-z]+)$ dashboard.php?pasta=$1&arquivo=$2 [NC,L] RewriteRule ^([a-z]+)\/([a-z]+)\/([0-9]+)$ dashboard.php?pasta=$1&arquivo=$2&item=$3 [NC,L]
-
Ola boa tarde! Td bem com vcs? Alguém poderia me dar uma luz, de como fazer essas imagens ficar a frente do slideshow e qnd responsivo aparecer de 3 em 3. obrigado pela atenção.
-
Olá boa tarde, estou apredendo bootstrap e gostaria de tirar uma duvida se possível. Existem class especificas do bootstrap que eu acharia melhor fazer de maneira não padronizada mas não sei se isso teria impacto no final. Exemplo: margin-top no bootstrap é mt, e são predefinidos 0 a 5 os niveis. Mas se eu quiser usar uma margem diferente da apresentada nesses niveis usando margin-top: 30% por exemplo, vai mudar alguma coisa? Obg. Talvez essa duvida seja besta mas estou no começo do bootstrap
-
Campo input no formato link clicável
crhistianosa postou um tópico no fórum Desenvolvimento frontend
Tenho uma página HTML que possui um campo para se digitar o texto da pesquisa, um botão pesquisar e um campo input text que me mostra o resultado. Ocorre que o conteúdo desse resultado é uma URL. Então, gostaria que ficasse clicável e direcionasse para o respectivo link. Não tenho como predefinir a url no código html, pois existem centenas de urls como resultado da busca. Preciso que o input identifique qual o link está ali e redirecione ao ser clicado. Como faço isso? -
DIV do Formulário centraliza "Carrossel" ao clicar
daviassumpcao postou um tópico no fórum Desenvolvimento frontend
Estou buscando uma orientação ou referência para desenvolver algo similar ao formulário dessa página do iPhone https://www.apple.com/shop/buy-iphone/iphone-se ... quando selecionamos alguma opção, a div que contém o formulário centralizar na página e rola feito um carrossel. Estou completamente perdido com essa demanda que recebi... agradeço antecipadamente a todos que derem uma força. Abraço -
Pagina "MEUS PEDIDOS" em um sistema de loja virtual
joelsonoliveirasouza postou um tópico no fórum PHP
Boa noite pessoal, estou com um problema no momento de buscar os itens dos pedidos, estou utilizando o carregamento de templates Smarty onde no arquivo TPL tenho uma pagina chamada clientes_pedidos.tpl onde contem {foreach from=$PEDIDOS item=P} buscando os dados do pedido e dentro desse foreach preciso ter outro foreach para que possa buscar os itens do pedido para apresentar na pagina clientes_pedidos.tpl, vou anexar algumas imagens. quando insiro foreach dentro do outro ele mostra somente o primeiro dados buscado do banco (ele mostra o mesmo dado em todos os pedidos). Desde já agradeço pela atenção de todos. Arquivo: clientes_pedidos.tpl <div class="main-panel" > <div class="content"> {foreach from=$PEDIDOS item=P} <div class="container-fluid" style="background: white;"> <section class="invoice"> <!-- title row --> <div class="row"> <div class="col-xs-12"> <h2 class="page-header"> <i class="fa fa-globe"></i><i> {if $P.ped_pag_status == 'NAO'} <td style="width: 15%"><span class="label label-danger">{$P.ped_pag_status}</span></td> {elseif $P.ped_pag_status == 'Pago'} <td style="width: 15%"><span class="label label-success">{$P.ped_pag_status}</span></td> {elseif $P.ped_pag_status == ''} <td style="width: 15%"><span class="label label-danger">Erro no pagamento</span></td> {else} <td style="width: 15%"><span class="label label-info">{$P.ped_pag_status}</span></td> {/if} </i> <small class="pull-right">Data: {$P.ped_data}</small> </h2> </div><!-- /.col --> </div> <!-- info row --> <div class="row invoice-info"> <div class="col-sm-4 invoice-col"> <b>Informações</b><br/> <br/> <b>Codigo Pedido:</b> {$P.ped_id}<br/> <b>Forma Pagamento:</b> {$P.ped_pag_forma}<br/> <b>Nota Fiscal: </b> <a>Baixar</a> </div> <div class="col-sm-4 invoice-col"> <b>Dados Entrega</b><br/> <br/> Rua Hebreus, 849, Canaã<br> Ipatinga-Mg, 35.164-170<br> </div><!-- /.col --> <div class="col-sm-4 invoice-col"> <b>Dados Contato</b><br/> <br/> Contato: (31) 9 9964-2340<br/> Email: essence@hotmail.com.br<br> </div><!-- /.col --> </div><!-- /.row --> <br> <!-- Table row --> <div class="row"> <div class="col-xs-12 table-responsive"> <table class="table table-striped"> <thead> <tr> <th>IMAGEM</th> <th>ITEM</th> <th>QUANTIDADE</th> <th>VALOR</th> <th>DETALHES</th> </tr> </thead> <tbody> {foreach from=$ITENSPEDIDO item=I} <tr> <td>{$I.1.ped_cod}</td> <td>Call of Duty</td> <td>3</td> <td>R$ 64,50</td> <form name="itens" method="post" action="{$PAG_ITENS}"> <input type="hidden" name="cod_pedido" id="cod_pedido" value="{$P.ped_cod}"> <td><button>Detalhes</button></td> </form> </tr> {/foreach} </tbody> </table> </div><!-- /.col --> </div><!-- /.row --> <div class="row"> <!-- accepted payments column --> <div class="col-xs-6"> <br> <p class="lead">Informações Adicionais</p> <p class="text-muted well well-sm no-shadow" style="margin-top: 10px;"> Todos os produtos essence são devidamentes embalados, adotando todas as medidas de segurança que seu produto chegue com 100% de sua integridade. </p> </div><!-- /.col --> <div class="col-xs-6"> <br> <p class="lead">Data do Pedido 20/06/2020</p> <div class="table-responsive"> <table class="table"> <tr> <th style="width:50%">Subtotal:</th> <td>R$250,30</td> </tr> <tr> <th>Frete</th> <td>R$10,34</td> </tr> <tr> <th>Desconto</th> <td>R$3,00</td> </tr> <tr> <th>Total:</th> <td>R$363,64</td> </tr> </table> </div> </div><!-- /.col --> </div><!-- /.row --> <!-- this row will not appear when printing --> <div class="row no-print"> <div class="col-xs-12"> <a href="invoice-print.html" target="_blank" class="btn btn-default"><i class="fa fa-print"></i> TROCA OU DEVOLUÇÃO</a> <button class="btn btn-success pull-right"><i class="fa fa-credit-card"></i> CONFIRMAR RECEBIMENTO</button> <button class="btn btn-primary pull-right" style="margin-right: 5px;"><i class="fa fa-download"></i> AJUDA</button> </div> </div> </section> </div> <div style="width: 100%; height: 20px; background: transparent;"></div> {/foreach} </div> </div> </div> Arquivo: clientes_pedidos.php <?php $smarty = new Template(); Login::MenuCliente(); $pedidos = new Pedidos(); $pedidos->GetPedidosCliente($_SESSION['CLI']['cli_id']); $smarty->assign('PEDIDOS', $pedidos->GetItens()); $smarty->assign('PAG_ITENS', Rotas::pag_ClienteItens()); $arrayNumeroPedido = $pedidos->GetItens(); foreach ($arrayNumeroPedido as $key) { $itens = new Itens(); $pedido = filter_var($key['ped_cod'], FILTER_SANITIZE_STRING); $itens->GetItensPedido($pedido); $array = array($itens->GetItens()); $smarty->assign('ITENSPEDIDO', $array); $smarty->assign('TOTAL', $itens->GetTotal()); } $smarty->display('clientes_pedidos.tpl'); ?> -
Bons dias, fórum! Procurei uma área específica para o JavaFX e não encontrei... Estou aprendendo a usar essa biblioteca, está ficando interessante, se assemelha às tecnologias web com as quais tenho muita familiaridade pois uso há anos. Mas o CSS do JavaFX é diferente daquele do consórcio W3, e não estou encontrando material para entender esse -fx-CSS... A referência CSS da Oracle (https://docs.oracle.com/javase/8/javafx/api/javafx/scene/doc-files/cssref.html) é obscura e não contém as infos que preciso, apesar de esclarecer muitas coisas... Passa uma impressão de que eles não querem que todos saibam! Por exemplo: ao estilizar uma menu-bar, mudei seu background, alterei a cor da fonte dos menus, mas eles ficaram colados uns nos outros, e eu não entendi como escolher a propriedade CSS adequada do FX para controlar a distância dos menus. Pude usar um padding, mas ao executar, quando abrimos um menu, os outros ainda são empurrados pois ainda que suas inscrições estejam separadas, os botões do menu ainda estão colados. O tutoriais não abordam o CSS do FX em profundidade, focam-se nos objetivos dos projetos e suas abordagens... Rsrs, podia ter no W3Schools... Alguém pode me ajudar com isso??? Grato desde já! Lucas Ribeiro
-
Estou com dificuldade para chamar um arquivo CSS usando a configuração de um arquivo php. O bootstrap também não surte efeito na paginas Vejam só Config.php <?php define('APP_NOME','Projeto GIBI'); define('URL','http://localhost/bora_php'); index.php <?php include './../app/configuracao.php'; include './../app/Libraries/Rota.php'; include './../app/Libraries/Controller.php'; ?> <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="<?=URL?>/public/css/estilos.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" > <title><?= APP_NOME?></title> </head> <body> <?php $rotas = new Rota(); ?> <script src="https://code.jquery.com/jquery-3.5.1.min.js" ></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" ></script> <script src="<?=URL?>/public/css/script.js" ></script> </body> </html> estilo.css html{ background-color: red; } Estou tentando seguir a padronização MVC(que por sinal eu tenho certa dificuldade), então não consigo achar onde estou errando
-
Definir borda inferior de 1px para todos os navegadores
luiz monteiro postou um tópico no fórum Desenvolvimento frontend
Tudo bem pessoal! Estou há alguns dias pesquisando e usando diferentes dicas para resolver o problema para que a borda inferior de 1px aplicada em quatro boxes sejam exibidas igualmente no chrome, safari, mozilla, opera e IE. A estrutura é a seguinte: ==========CSS html, body, span, p, form, img, a, ul, ol, li, table, tr, td, div { margin: 0px; padding: 0px; border:none; outline:none; list-style-type:none; box-sizing: border-box; } * { font-size: 14px; font-family: verdana, arial; } .container { width: 608px; height: 421px; margin: auto; margin-top: 50px; overflow: hidden; } .box_one, .box_two { display: inline-block; width: 300px; height: 250px; overflow: hidden; } .border_bottom { border-bottom: #f5f5f5 solid 1px; } .border_bottom_white { border-bottom: #fff solid 1px; } .espaco { margin-right: 2px; } .box_tree, .box_four, .box_fift { display: inline-block; width: 198px; height: 149px; margin-top: 20px; overflow: hidden; } .vertical { vertical-align: top; } ============HTML <content> <div class="container"> <div class="box_one border_bottom_white espaco vertical">box one in first line</div> <div class="box_two border_bottom vertical">box two in first line</div> <div class="box_tree espaco border_bottom vertical">box tree in second line</div> <div class="box_four espaco border_bottom vertical">box four in second line</div> <div class="box_fift border_bottom vertical">box fift in second line</div> </div> </content> O que ocorre é que cada navegador exibe de uma maneira diferente, mesmo resetando o box-sizing: border-box; o font-size e o font-family. Essa configuração do CSS foi a mais próxima do desejável. A estrutura do HTML precisa ser essa aí. Agradeço desde já. -
Olá pessoal, eu estou começando meu curso de programação Full Stack e tive a tarefa de fazer uma página mais parecida possível com essa. Mas estou com muita dificuldade na hora de colocar essa <DIV> branca dentro dessa <DiV> preta. Eu já consegui colocar os links nas imagens do Facebook e do Instagram, porém não consigo alinhar elas no canto direito, meu <h1> vem junto... Muito obrigado pela atenção galera
-
Boa tarde amigos, Quero copiar o efeito hover, que aparece na foto de perfil do login, o qual consiste em uma borda externa, que não influencia no tamanho. Tentei atribuiu o box-sizing:border-box; // ele diminui a imagem e traz a borda para dentro.
-
Oi, tenho um flip para virar a imagem, bem pequeno e funcional, mas ao colocar um rodapé, ele simplesmente invade esse rodapé Creio que tem haver alguma coisa com o position: absolute, mas não entendo nada de css <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"> </head> <body> <!-- CSS DO FLIP --> <style> .flip-container:hover .flipper{ transform: rotateY(180deg); /* se quiser uma animação na vertical, troque por rotateX(180deg) */ } .flipper{ width: 100%; height: 100%; transition: transform 0.8s; transform-style: preserve-3d; } .front, .back{ position: absolute; width: 100%; height: 100%; } .back{ transform: rotateY(180deg); } </style> <center> <div class="flip-container"> <div class="flipper"> <div class="front"> <img src="https://d3mwk3f7r8fv9u.cloudfront.net/images/zohO24tyN2WB8etR3nhZPvhf.png" /> </div> <div class="back"> <img src="https://d3mwk3f7r8fv9u.cloudfront.net/images/XkAkTVqVPbLB3cK5njqdun66.png" /> </div> </div> </div> <!-- AQUI COMEÇA O RODAPÉ --> <!-- CSS DO RODAPÉ --> <style> @import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap'); *{ margin: 0; padding: 0; color: #d9d9d9; box-sizing: border-box; font-family: 'Poppins', sans-serif; } .content1{ position: relative; margin: 130px auto; text-align: center; padding: 0 20px; } .content1 .text{ font-size: 2.5rem; font-weight: 600; color: #202020; } .content1 .p{ font-size: 2.1875rem; font-weight: 600; color: #202020; } footer{ position: fixed; bottom: 0px; width: 100%; background: #111; } .main-content{ display: flex; } .main-content .box{ flex-basis: 50%; padding: 10px 20px; } .box h2{ font-size: 1.125rem; font-weight: 600; text-transform: uppercase; } .box .content{ margin: 20px 0 0 0; position: relative; } .box .content:before{ position: absolute; content: ''; top: -10px; height: 2px; width: 100%; background: #1a1a1a; } .box .content:after{ position: absolute; content: ''; height: 2px; width: 15%; background: #f12020; top: -10px; } .left .content p{ text-align: justify; } .left .content .social{ margin: 20px 0 0 0; } .left .content .social a{ padding: 0 2px; } .left .content .social a span{ height: 40px; width: 40px; background: #1a1a1a; line-height: 40px; text-align: center; font-size: 18px; border-radius: 5px; transition: 0.3s; } .left .content .social a span:hover{ background: #f12020; } .center .content .fas{ font-size: 1.4375rem; background: #1a1a1a; height: 45px; width: 45px; line-height: 45px; text-align: center; border-radius: 50%; transition: 0.3s; cursor: pointer; } .center .content .fas:hover{ background: #f12020; } .center .content .text{ font-size: 1.0625rem; font-weight: 500; padding-left: 10px; } .center .content .phone{ margin: 15px 0; } .right form .text{ font-size: 1.0625rem; margin-bottom: 2px; color: #656565; } .right form .msg{ margin-top: 10px; } .right form input, .right form .msgForm{ width: 100%; font-size: 1.0625rem; background: #151515; padding-left: 10px; border: 1px solid #222222; } .right form input:focus, .right form .msgForm:focus{ outline-color: #3498db; } .right form input{ height: 35px; } .right form .btn{ margin-top: 10px; } .right form .btn button{ height: 40px; width: 100%; border: none; outline: none; background: #f12020; font-size: 1.0625rem; font-weight: 500; cursor: pointer; transition: .3s; } .right form .btn button:hover{ background: #000; } .bottom center{ padding: 5px; font-size: 0.9375rem; background: #151515; } .bottom center span{ color: #656565; } .bottom center a{ color: #f12020; text-decoration: none; } .bottom center a:hover{ text-decoration: underline; } @media screen and (max-width: 900px) { footer{ position: relative; bottom: 0px; } .main-content{ flex-wrap: wrap; flex-direction: column; } .main-content .box{ margin: 5px 0; } } </style> <div class="content1"> <div class="text"> Fully Responsive Footer Section</div> <div class="p"> HTML and CSS (Flexbox)</div> </div> <footer> <div class="main-content"> <div class="left box"> <h2> About us</h2> <div class="content"> <p> CodinNepal is a YouTube channel where you can learn web designing, web development, ui/ux designing, html css tutorial, hover animation and effects, javascript and jquery tutorial and related so on.</p> <div class="social"> <a href="https://facebook.com/coding.np"><span class="fab fa-facebook-f"></span></a> <a href="#"><span class="fab fa-twitter"></span></a> <a href="https://instagram.com/coding.np"><span class="fab fa-instagram"></span></a> <a href="https://youtube.com/c/codingnepal"><span class="fab fa-youtube"></span></a> </div> </div> </div> <div class="center box"> <h2> Address</h2> <div class="content"> <div class="place"> <span class="fas fa-map-marker-alt"></span> <span class="text">Birendranagar, Surkhet</span> </div> <div class="phone"> <span class="fas fa-phone-alt"></span> <span class="text">+089-765432100</span> </div> <div class="email"> <span class="fas fa-envelope"></span> <span class="text">abc@example.com</span> </div> </div> </div> <div class="right box"> <h2> Contact us</h2> <div class="content"> <form action="#"> <div class="email"> <div class="text"> Email *</div> <input type="email" required> </div> <div class="msg"> <div class="text"> Message *</div> <!-- NOTE: Due to more textarea tag I got an error. So I changed the textarea name to changeit. Please change that changeit name to textarea --> <changeit id=".msgForm" rows="2" cols="25" required></changeit> <!-- replace this changeit name to textarea --> <br /> <div class="btn"> <button type="submit">Send</button> </div> <div class="bottom"> <center> <span class="credit">Created By <a href="https://youtube.com/c/codingnepal">CodingNepal</a> | </span> <span class="far fa-copyright"></span> 2020 All rights reserved. </center> </div> </body> </html>
-
Eu preciso de ajuda para poder publicar meu site. O professor mandou faze-lo em HTML e CSS e eu fiz mas eu não sei postar e manter as imagens. Quando consegui postar as imagens não foram junto. O link q consegui fazer sem as imagens ficou assim: http://hyundai.droppages.com/
-
Olá pessoas, Estou tentando fazer uma versão de impressão usando CSS eu queria colocar um cabeçalho e um rodapé em todas as paginas, O problema é que o conteúdo vem do banco de dados, e dependendo do tamanho dos parágrafos em algumas vezes o texto acaba ficando em cima do cabeçalho ou do rodapé.. alguém tem alguma idéia de como posso fazer isso? Meu cód está assim: header {font-family:Arial;font-size: 22px;color: #000;text-align: center;} footer {font-family:Arial;font-size: 10px; color: #CD090C;text-align: center;} article {font-family:Arial;font-size: 14px; color: #000;text-align: justify;} @page {size: A4;margin: 11mm 17mm 17mm 17mm;} @media print { header {position: fixed;top: 0;} footer {position: fixed;bottom: 0;} article {position: relative;top:40px;} .content-block, p {top:40px;page-break-inside: avoid;} html, body {width: 210mm;height: 297mm;} } E no HTML <header>CABEÇALHO</header> <article>Conteudo.. texto.. etc..</article> <footer>Texto do Rodapé</footer>
