Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

teffinho

Imagem fica com uma margin no bottom.

Por , em Desenvolvimento frontend

Recommended Posts

teffinho    0

teffinho
Postado

Olá pessoa, sou novato no fórum, e dessa vez não tive escolha vim procurar ajuda de vocês para me ajudar com um problema que estou tento com css/html.

 

Bom o problema é simples, eu fiz uma página em html dessa forma.

 

HTML

<!DOCTYPE html>
<head>
<link rel="stylesheet" href="css/style.css" media="screen"/>
</head>
<body>
	<div id="all">
		<div id="topo">TOPO
		</div>
		<div id="menu">MENU
		</div>
		<div id="centro">CENTRO
		</div>
		<div id="rodape">RODAPE
		</div>
	</div>
	<div id="image-rodape">
	<img src="image/image-rodape.png" width="100%"/>
	</div>
</body>
</html>

CSS

 


body{
background:#fff;
margin:0 auto;
}

#all{
margin:0 auto;
border:2px solid #000;
width:90%;
}

#topo{
font-family:arial;
text-align:center;
color:#000;
border:solid 2px #ccc;
height:200px;
margin:0 auto;
position:relative;
}

#menu{
font-family:arial;
text-align:center;
color:#000;
border:solid 2px #bbb;
height:40px;
}

#centro{
font-family:arial;
text-align:center;
color:#000;
border:solid 2px #aaa;
height:400px;
}

#rodape{
margin:0 auto;
font-family:arial;
text-align:center;
color:#000;
border:solid 2px #ccc;
height:150px;
}
#image-rodape{
background-height:10% 20%;
margin:-29% auto;
background-repeat:no-repeat;
height:100%;
width:100%;
z-index:-1;
position:relative;
text-align:center;
}

Ao final da página eu coloquei um rodapé que seria uma imagem, só que essa imagem não preenche toda a div, ou seja não preenche todo seu campo, gostaria de saber como posso está fazendo para que ela possa preencher todo o campo da div.

 

SecreenShot 1

 

ueh1.png

 

Olha só a margin que fica bem de baixo da imagem.

 

SecreenShot 2

 

bkur.png

 

Botei em vermelho aki em baixo a parte que fica a margem.

 

Espero que possam me ajudar :)

Compartilhar este post

Link para o post
Compartilhar em outros sites

Giovani    104

Giovani
Postado 


* { padding: 0; margin: 0; border: 0; }


Acho que resolve ;)


 


Qualquer dúvida pesquise sobre CSS Reset.



			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
			

		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
					
					
					






					
				
					
					
					






					
				
					
					
					






					
				
					
					
					






					
				
			
			



		

	


	
	

	

	







	

		
			
				Ir para a lista de tópicos
				Desenvolvimento frontend
			
		
	

	




	

	

	




						


	

		
	


					

					

	

		
        


	

		
    
			
				
					
					
  • 
				
					
					
  • 
				
					
					
  • 
				
			
		

	


		
            
			

	

		
		

			

				
			

		

	



		
	


					

				

			

			
		

		
		


	×
	

		

			

			

				
			


			
		

	



		

	































	
















		
			
		
		
		
		







	




	







	

		

			

				
Informação importante

				
Ao usar o fórum, você concorda com nossos Termos e condições.

			

			

				  Aceito