Posicionamento de elementos
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></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;
}Discussão (1)
Carregando comentários...