CSS Itens do formulário não aparece !

Jessé P. de Melo · 31 de maio de 2018

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;
		
	}

DiF · 31 de maio de 2018

@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.

Jessé P. de Melo · 31 de maio de 2018

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.

DiF · 31 de maio de 2018

@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;
  }

Jessé P. de Melo · 31 de maio de 2018

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?

DiF · 1 de junho de 2018

@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.

Jessé P. de Melo · 2 de junho de 2018

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.

Jessé P. de Melo · 2 de junho de 2018

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.

DiF · 2 de junho de 2018

@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/

Jessé P. de Melo · 4 de junho de 2018

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;
		}