Posicionamento de elementos

JulioCesar12 · Junho 13, 2018

Estou desenvolvendo um site teste, mais pra treinar mesmo, e estou tendo dificuldades em acabar com a distância da imagens (duvida.png), se executarem vão ver que uma delas está muito distantes do rodapé e a outra está muito longe do cabeçalho, queria saber como posso melhorar o espaçamento, desde já obrigado.

<html>

	<head>
			<title> </title>
			<link href="Estilo.css " rel="stylesheet">
	</head>

<body>





<div class="cabeçalho"> 

<div class="limite">

	<img src="icone.png" class="logo"/> 

	<nav id="menu">
		<ul>
			<li><a href="#">  <img src="icone.png" class="icon-menu">  </a></li>
			<li><a href="#">  <img src="icone.png" class="icon-menu">  </a></li>
			<li><a href="#">  <img src="icone.png" class="icon-menu">  </a></li>
			<li><a href="#">  <img src="icone.png" class="icon-menu">  </a></li>
			<li><a href="#">  <img src="icone.png" class="icon-menu">  </a></li>
		</ul>
	</nav>

</div>
</div>





<div class="limite">
<div class="direita"> 

<h1>JAVASCRIPT</h1>
<h4>  é uma linguagem de programação interpretada. Foi originalmente implementada como<br/>
<p> parte dos navegadores web para que scripts pudessem ser executados do lado do cliente e interagissem<br/> 
com o usuário sem a necessidade deste script passar pelo servidor, controlando o navegador, realizando comunicação</br>
assíncrona e alterando o conteúdo do documento exibido.</h4> </p>
 
 <img src="duvida.png" class="duvida">
 
 <h1>CSS</h1>
<h4>  Cascading Style Sheets é um simples mecanismo para adicionar estilo a um documento web.
 Em vez de colocar a formatação dentro do documento, o CSS cria um link para uma página que contém os estilos.</h4> </p>

<img src="duvida.png" class="duvida">

 
</div>
</div>








<div class="esquerda"> 

<img src="duvida.png" class="duvida">

<h1>HTML</h1>
<h4> é o formato padrão para criação de páginas online e aplicações de web.<br/>
<p> Em conjunto com o CSS e Javascript,eles formam as pedras principais para a World Wide Web.</p> </h4>

</div>
</div>







<div class="rodape"> <div class="limite"> Final </div></div>







	
	



	

	
</body>
</html>

<!--**Some Address 987,</br></br> +34 9054 5455, </br></br> Madrid, Spain. 
<a href="#"  id="link"> Dribble </a></br></br>  <a href="#" id="link"> Twitter </a></br></br> <a href="#"  id="link"> Facebook</a>        </td>
This cute theme was created to showcase your</br></br> work in a simple way. Use it wisely.     </td>
!--> 

<!--<h1><p>Hi, I am Stanley! </p></br> </h1>

<h5><p>Hello everybody. I'm Stanley, a free handsome bootstrap theme coded by BlackTie.co. A really simple </br>
theme for those wanting to showcase their work with a cute & clean style.</p></br>
Please, consider to register to <a href="#" id="link">our newsletter</a>  to be update with our latest themes and freebies. Like </br>
always, you can use this theme in any project freely. Share it with your friends.
</h5>!-->

css:

*{
	margin: 0;
	padding:0;
}

body{
	background-image: url("fundo.jpg");	
	font-family: Arial;	
	background-size: 100%;
	background-repeat: no-repeat;
	background-attachment: fixed;
	
}

.limite{
	margin: 0 auto;
	position: relative;
	width: 85%;
}

.cabeçalho{
	background-color: #000000;
	height: 70px;
	width: 100%;
	position: fixed;
    z-index: 3;	
	top:0;
}



#menu ul{
	list-style: none;
	float: right;
	
	
}
#menu ul li{
	display: inline-block;
	margin-left: 60px;
	
}

#menu ul li a {
	color: white;
	text-decoration: none;
	font-weight: bold;
	font-size: 22px;
	text-transform: uppercase;	
	
}

.logo{
	width: 70px;
	float: left;
}

.icon-menu{
	width: 70px;
}

.esquerda{
	margin-top: 150px;
	margin-bottom: 100px;
	width: 500px;
	margin-left: 100vh;
	
}

.direita{
	margin-top: 150px;
	width: 500px;
	margin-right: 100vh;
	

}

.duvida{
	width: 100%;
	height: 35%;
	
}


.rodape{
  position: relative;
  width: 100%;
  height: 150px;
  background-color: #000000;
  z-index: 2;	  
  color: white;
  font-size: 50px;
}