Ir ao conteúdo
  • Comunicados

    • Gabriel Torres

      Seja um moderador do Clube do Hardware!   12-02-2016

      Prezados membros do Clube do Hardware, Está aberto o processo de seleção de novos moderadores para diversos setores ou áreas do Clube do Hardware. Os requisitos são:   Pelo menos 500 posts e um ano de cadastro; Boa frequência de participação; Ser respeitoso, cordial e educado com os demais membros; Ter bom nível de português; Ter razoável conhecimento da área em que pretende atuar; Saber trabalhar em equipe (com os moderadores, coordenadores e administradores).   Os interessados deverão enviar uma mensagem privada para o usuário @Equipe Clube do Hardware com o título "Candidato a moderador". A mensagem deverá conter respostas às perguntas abaixo:   Qual o seu nome completo? Qual sua data de nascimento? Qual sua formação/profissão? Já atuou como moderador em algo outro fórum, se sim, qual? De forma sucinta, explique o porquê de querer ser moderador do fórum e conte-nos um pouco sobre você.   OBS: Não se trata de função remunerada. Todos que fazem parte do staff são voluntários.
    • DiF

      Poste seus códigos corretamente!   21-05-2016

      Prezados membros do Fórum do Clube do Hardware, O Fórum oferece um recurso chamado CODE, onde o ícone no painel do editor é  <>     O uso deste recurso é  imprescindível para uma melhor leitura, manter a organização, diferenciar de texto comum e principalmente evitar que os compiladores e IDEs acusem erro ao colar um código copiado daqui. Portanto convido-lhes para ler as instruções de como usar este recurso CODE neste tópico:  
Jessé P. de Melo

CSS Itens do formulário não aparece !

Recommended Posts

Boa tarde.Sou novato em programação e estou tentando resolver um exercício.

Faça um framework de site onepage, dividido em três subseções home, serviços e fale conosco.

Estou com problema com a subseção fale conosco, ela não esta aparecendo os itens do formulário.

Segue código html:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title>Confeitaria</title>

<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
	<nav class="links">
		<label for="rd_home">Home</label>
		<label for="rd_servicos">Serviços</label>
		<label for="rd_fale_conosco">Fale Conosco</label>		
	</nav>
	<div class="scroll">
		<input type="radio" name="grupo" id="rd_home" checked="true">
		<input type="radio" name="grupo" id="rd_servicos">
		<input type="radio" name="grupo" id="rd_fale_conosco">
		<div class="sections">
			<div class="bloco" id="homejs">
				<div id="conteiner_home">
				<H1>Padaria</H1>
				<br>
				<p>Fazemos todo tipo de paes e guloseimas </p>
				</div>
			</div>
			<div class="bloco" id="servicosjs">
				<div id="conteiner_servicos">
					<article class="item">
						<h3>Doces</h3>
						<br>
						<p>Fazemos trufas, paes de mel, brigadeiro e tudo.</p>
						<br>
						<br>
						<h2>R$ 3,00</h2>
					</article>
					<article class="item">
						<h3>Salgados</h3>
						<br>
						<p>Fazemos coxinhas, esfirras, risoles e tudo.</p>
						<br>
						<br>
						<h2>R$ 4,00</h2>
					</article>
					<article class="item">
						<h3>Confeitarial</h3>
						<br>
						<p>Fazemos bolos de todos tipo e tamanhos</p>
						<br>
						<h2> RS 100,00</h2>
					</article>
				</div>
			</div>
			<div class="bloco" id="fale_conoscojs">
				<div id=>
					<form name="fomrcontato" action="" method="post">
						<h1>Contato</h1>
						<p class="nome">
							<input type="text" name="nome" placeholder="Infomme seu nome" required="required"> 
						</p>
						<p class="assunto">
							<input type="text" name="assunto" placeholder="Sobre o que quer falar" required="required">
						</p>
						<p>
							<textarea name="mesagem" placeholder="Deixe sua mensagem"></textarea>
						</p>
						<p class="enviar">
							<input type="submit" name="enviar" value="enviar">
						</p>
						
					</form>

				</div>
			</div>
		</div>

	</div>


</body>
</html>

 Segue codigo CSS:

	*{
		margin: 0;
		padding: 0;
	}
	.links{
		width: 100vw;
		height: 50px;
		position: fixed;
		display: flex;
	}
	.links label{
		padding: 10px 0;
		flex-grow: 1;
		cursor: pointer;
		transition: all .4s;
		text-align: center;
		font-family: 'Arial';
		font-size: 100%;
		color: #fff;
	}

	.links label:hover{
		background-color: rgba(255,255,255,.3);
	}

	.scroll input {
		display: none;
	}

	.bloco{
		width: 100vw;
		height: 100vh;
		display; flex;
	}

	.scroll{
		display: flex;
		width: 100vw;
		height: 100vh;
		overflow: hidden;
	}

	.sections{
		transition: all .4s;
	}

	.item{ 
		margin: 20px;
		padding: 10px;
		align-items: center;
		height: 45vh;
		width: 75vw;
		background-color: rgba(211,211,211,.8);
		border-radius: 30px;
	}

	.item h3{
		text-align: center;
	}

	.item p{
		text-align: justify;
		margin-top: 5vh;
		margin-bottom: 5vh;
	}
	.item h2{
		text-align: center;
	}

	#homejs{
		background-color: #7fbd42;
		/*background: url("../imagens/Home_page.png");*/
		background-size: cover;
		background-repeat: no-repeat;
	}
	#servicosjs{
		/*background: url("../imagens/Servicos.png");*/
		background-size: cover;
		background-repeat: no-repeat;
		align-items: center;
	}
	#precojs{
		background-color: #414950;
	}
	#fale_conoscojs{
		background-color: #aaa;
		/*background: url("../imagens/Fale_conosco.png");*/
		background-size: cover;
		background-repeat: no-repeat;
	}

	#rd_home:checked ~ .sections{
		margin-top:0vh;
	}

	#rd_servicos:checked ~ .sections{
		margin-top:-100vh;
	}
	#rd_fale_conosco:checked ~ .sections{
		margin-top:-200vh;
	}

	#homejs h1{
		position: relative;
		left: 45%;
		top: 40%;
	}

	#homejs p{
		text-align: left;
		position: relative;
		left: 35%;
		top: 50%;
	}

	#conteiner_servicos {
		background-color: rgba(211,211,211,.3);
		align-items: center;
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}

	#conteiner_home{
		background-color: rgba(211,211,211,.3);
		width: 100vw;
		height: 100vh;
	}

	#fale_conosco{
		position: relative;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-left: 20vw;
		flex-direction: row;
		height: 55vh;
		width: 65vw;
		border-radius: 30px;
		
	}

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Jessé P. de Melo

O princípio básico do One Page, é você dividir os blocos. Para que tudo funcione, é necessário que você defina o tamanho total do bloco para que ele ocupe a tela inteira. Nos links você usa as âncoras.

Se quiser deixar as âncoras suaves e deslizantes para baixo, terá que usar o javascript.

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olá foi definido no trecho.

19 minutos atrás, Jessé P. de Melo disse:

.bloco{ width: 100vw; height: 100vh; display; flex; }

Aqui o display esta errado mas já corrigi e teste, continua dando o mesmo problema.

Tudo funciona como esperado quando retiro o form , o problema esta no form ou melhor não sei como usar o css para resolver.

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Jessé P. de Melo Então, o seu erro está no CSS mesmo.

 

Primeiro aqui:

 

	.bloco{
		width: 100vw;
		height: 100vh;
		display: flex;
	}

No seu, o display está com ponto e virgula, ao invés de "dois pontos".

 

 

Mas o erro que está impedindo de aparecer seu form direito é porque não definiu que os elementos dele seja a nível de bloco.

 

Coloque assim:

#fale_conoscojs form input{
    display: block;
  }

Adicionando as linhas acima, você permite que o formulário apareça corretamente.

 

Veja online o seu exemplo: https://jsfiddle.net/dife/gsoz1gnc/

Para posicionar melhor ponha:

  #fale_conoscojs form{
    position: relative;
    top: 100px;
  }

 

  • Obrigado 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Muito obrigado.

 

Eu estudei isso ha muito tempo porém nunca pratiquei efetivamente. Agora estou sofrendo bastante...

 

Minha intenção é quando a pessoa clicar em submit vai carregar uma pagina php que vai se carregada dentro dessa div e enviar tudo para o email predefinido. Apos isso vai ou Abrir um alert do js escrito enviado que vai limpar todos os campos, ou vai carregar uma pagina na div do form que só vai exibir enviado, um empecilho é que vai fica travado nessa pagina.

 

o que você acha da ideia? Tem uma maneira melhor de se resolver isso?

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Jessé P. de Melo

Você pode fazer com ajax. O ajax é uma técnica em Javascript que permite fazer uma requisição assíncrona ao servidor e retornar em tempo real uma resposta.

 

O jeito mais fácil de lidar com o ajax é com o jQuery. Pois ele já possui funções prontas que facilitam o  uso.

 

Basicamente, você vai omitir o atributo action do formulário colocando action="#"    

Isso faz com que o formulário não envie por este atributo, já que vamos fazer pelo javascript.

 

HTML:

<form action="#" id="formulario">
   <input type="text" name="nome"  placeholder="Insira o nome"/>
  <input type="text" name="email"  placeholder="Insira o e-mail"/>
  <textarea name="mensagem" placeholder="Digite a sua mensagem..."></textarea>
  <input type="submit" id="enviar" value="Enviar Feedback"/>
</form>

Tome o formulário acima o nosso exemplo.

Naturalmente colocaríamos um arquivo php no action.  por exemplo action="recebeDados.php" que recebe os dados do formulário e enviaria o e-mail.

 

Como estamos omitindo, é necessário usar o javascript, no caso a bibliotecs jQuery.

Para utilizar, primeiro você precisa importar a biblioteca no seu projeto.

Podes, baixar os arquivos do site e colocar em uma pasta ou podes usar o CDN, que é uma espécie de repositor online que sempre terá a versão atualizada.

 

No exemplo utilizarei o CDN.  Basta colocar o código dentro do elemento <head> OU semanticamente correto no final da página antes de fechar a tag <body>:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Com isso você já pode usar o jQuery e ajax.

$(document).ready(function(){
   var enviar = $("#enviar");
   
   enviar.on("click", function(){
        var dados = $("#formulario").serialize();

        $.ajax({
              url:"recebeDados.php",
              method:"POST",
              dataType:"HTML",
              data: dados    
       }).done(function(retorno){
            //Pode usar um alert
            //alert(retorno);

            //Pode inserir o retorno em um elemento HTML
            //$(".msg-retorno").html(retorno);
       }).fail(function(retorno){
             //Pode usar um alert
            //alert(retorno);

            //Pode inserir o retorno em um elemento HTML
            //$(".msg-retorno").html(retorno);
       });
   });
  
});

Como o jQuery é encadeado, você pode chamar uma função a trás da outra.

$.ajax().done().fail()

 

Onde respectivamente são: 

$.ajax()  para configurar a função de requisição

done() para quando for bem sucedido.

fail() caso dê errado.

 

Repare que está comentado no código tanto a linha alert quanto a linha de msg-retorno.

No caso você vai escolher uma delas. O segundo insere o retorno da operação dentro de um <div class="msg-retorno">

 

A parte do php é bem simples. 

<?php
//Esta função converte String para array
parse_str($_POST["data"], $formdata);

//Variáveis extraídas do vetor convertido
$nome     = $formdata["nome"];
$email    = $formdata["email"];
$mensagem = $formdata["mensagem"];

/*
   Aqui você faz o envio do e-mail
   com as variáveis acima.

   $nome,  $email e $mensagem

   Existem diversas formas de enviar e-mails
   Porém recomendo usar a classe PHPmailer

   O retorno do envio será passado ao seu jQuery
   naquele parâmetro "retorno" que está dentro 
   da função done() ou fail()

*/

Bom, é por aí a coisa. :thumbsup:

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Uma outra duvida.

 

Sabe me dizer como mudo o plano de fundo do site quando passo o mouse em cima de uma div?

exemplo:

.item:hover{
	background-image(exemplo.jpg)
}

Esse código muda o plano de fundo da div e não o principal.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Pesquisando aqui achei uma solução plausível mas não consigo implementá-la. Ficaria assim:

.item:hover ~ div{
	background-image:url(exemplo.jpg);
}

mas continua sem ir.

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Jessé P. de Melo Na verdade a dica que você viu é bem simples e plausível.

Para implementar você deve criar um elemento para que possa receber a nova imagem a cada hover.

 

Por exemplo:

 

Vamos supor que queremos que 3 divs com cores diferentes, que mudem o background para a mesma cor daquela que você colocou o mouse em cima.

A estrutura básica DEVE ser assim:

<div class="menu">
	<div class="item um">DIV 1</div>
	<div class="item dois">DIV 2</div>
	<div class="item tres">DIV 3</div>
	<div class="bg"></div>
</div>

O elemento DIV class bg é onde será alterado.  Para que funcione você deve criar uma regra CSS e posicionar este elemento.

 

CSS:

/* Configuração dos "botões" */
.item {
	width: 100px;
	height: 50px;
	display: inline-block;
	color: #FFF;
	line-height: 50px;
	text-align: center;
}

/* Configuração do elemento que receberá as imagens ou cores */
.bg {
	position: fixed;
	z-index: -1;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	transition: .25s;
	pointer-events: none;
}

/*Configuração dos elementos div de forma unitária*/

/*Primeiro elemento div*/
.menu div:first-child {
	background: #ffca6d !important;
}

/*Segundo elemento div*/
.menu div:nth-child(2) {
	background: #ff6d6d !important;
}

/*Terceiro elemento div*/
.menu div:nth-child(3) {
	background: #6dffb9 !important;
}


/*
Configuração do HOVER de cada DIV
Aqui você pode substituir
o background com cores
pelo background com imagens
*/
/*Primeiro elemento*/
.menu div:first-child:hover ~ .bg {
	background: #ffca6d;
}

/*Segundo elemento*/
.menu div:nth-child(2):hover ~ .bg {
	background: #ff6d6d;
}

/*Terceiro elemento*/
.menu div:nth-child(3):hover ~ .bg {
	background: #6dffb9;
}

Veja o código acima em funcionamento:  https://jsfiddle.net/dife/kzzwzeq0/

Veja o mesmo exemplo acima, mas usando imagens:  https://jsfiddle.net/dife/kzzwzeq0/1/

 

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Não consegui fazer... E é horrível tentar explicar por uma caixa de texto, ainda mais quando tentei deixar o site sofisticado de mais para meus conhecimentos.

Segue link (google divre) de como esta atualmente.

A parte relativa a isso está na linha 213 do Css.

 

Tentei usar a section principal com uma margem para colar o background na região certa. Não funcionou.

		#conteiner_servicos div:first-child:hover ~ .sections{
			margin-top:-100vh;
			background-image:  url("../imagens/Sites.png");
			background-size: cover;
		}

 

Outra maneira que tentei foi usar o Id referente div região, mas também não funcionou.

		#conteiner_servicos div:first-child:hover ~ #servicosjs{
			background-image:  url("../imagens/Sites.png");
			background-size: cover;
		}

Pensei que pudesse estar relacionado ao posicionamento porém não identifico o erro, porque já foi definido tudo antes, tanto é que aceitou isso sem problemas.

 

		#servicosjs{
			background-image: url("../imagens/Servicos.png");
			background-size: cover;
			background-repeat: no-repeat;
			align-items: center;
		}

 

 

Quero que quando passe o mouse nos itens da pagina serviços o plano de fundo mude.

Poderia fazer para mim analisar o seu código? Estou me esforçando ao máximo mas esta travado.

E o pior de tudo é que quando terminar ainda tenho que deixar responsivo, fiz com valores relativos mas está dando errado com telas pequenas.

 

 

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário






Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×