Ir ao conteúdo
  • Cadastre-se
navegador2

Cor da section não aparece em todo o fundo

Recommended Posts

Estou criando um site e no body usei um background de umas chaves amarelas, mas nas sections chamadas conteudo eu uso uma cor.

Em todas ficou ok, mas na de contato ao invés da cor amaralo claro que seria todo o fundo da section, em alguns pequenos pedaços esta aparecendo as chaves do body.

Observem do lado esquerdo onde tem nome assunto mensagem...

Do lado direito dos campos do formulario coloquei o mapa do google maps (por privacidade coloquei uma imagem branca para não aparecer o endereço.

Posto o html e css dos itens que eu acho que vão esclarecer vocês.

html

body {
	margin:0px;
	padding:0px;
	background-image:url(../imagens/background2.jpg);
	background-repeat:repeat;
	
}

<section id="conteudocontato"><!--Inicio da div conteudo que receberá o conteúdo central da tela--> 



<h1>CONTATO</h1>

<form id="formcontato" method="post" action="envia.php">

	<label for="assunto">Assunto:</label>
	<select id="assunto" name="assunto">
		<option value="orcamento">Orçamento</option>
		<option value="comentario">Comentário</option>
		<option value="critica">Crítica</option>
		<option value="elogio">Elogio</option>
		<option value="trabalheconosco">Trabalhe Conosco</option>
	</select>

	<p>
	<label for="nome">Nome:</label>
	<input type="text" name="nome" id="nome"/>
	</p>

	<p>
	<label for="e-mail">E-mail:</label>
	<input type="text" name="e-mail" id="e-mail"/>
	</p>

	<p>
	<label for="mensagem">Mensagem:</label>
	<textarea name="mensagem" id="mensagem" wrap="physical"></textarea>
	</p>

	<p>
	<input type="submit" name="enviar" id="enviar" value="Enviar"/>
	<input type="reset" name="limpar" id="limpar" value="Limpar"/>

	</p>
      
</form>

</section><!--Fim da div conteudo que receberá o conteúdo central da tela--> 
section#conteudocontato {
	clear:both;
	padding-top:1%;
	padding-bottom:1%;
	background-color:#FFC;
	font-size:16px;
	font-family:Verdana, Geneva, sans-serif;
	margin:auto;
	width:96%;
	padding-left:2%;
	padding-right:2%;
	position:relative;
	max-width:960px;
		
}

#formcontato{
	background-color:#FFC;
	float:left;
	position:relative;

}

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Nesses casos tente postar um link para um desses sites de prévia de códgio online. Fica muito mais fácil para vermos o que está acontecendo e também sugerir soluções. (:
 

Se você der um inspect no #conteudocontato verá que ele não está esticando para compreender os children dele. Nesses casos um overflow:auto salva. Quando por algum motivo o auto criar barras de rolagem onde não deve use hidden.

 

Preview: https://jsfiddle.net/qftph17x/

  • Curtir 1

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

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora





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

×