Olá galera, estou com uma dúvida e um problema ao mesmo tempo...
Estou no projeto do site e blog porém ao decorrer do curso eu fui fazendo de acordo com o meu "estilo", acontece que na hora de mover para a direita o conteúdo (nav e img) eles simplismente não sobem para o topo...
Alguém poderia por gentileza me ajudar a encontrar o erro e explicar com mais detalhes aonde errei... Confesso que fiquei muito confusa nesta etapa do curso...
Este é o arquivo CSS:
main div{
margin: 20px 40px;
width: 80%;
clear: both;
}
aside div,nav{
float: right;
width: 15%;
box-sizing: border-box;
clear: right;
}
img{
float: right;
clear: right;
}
aside{
clear: right;
box-sizing: border-box;
}
.rodape{
clear: both;
}
.titulo-principal{
text-transform: uppercase; /* deixa o texto em letras maiusculas */
color: white; /* cor do texto */
background-color: darkgray; /* cor de fundo do texto */
font-size: 60px; /* tamanho da fonte do texto */
text-align: center; /* formatação da posição do texto */
padding: 30px; /* tamanho da caixa do texto */
border: 1px; /* acrescenta borda a caixa do texto*/
margin-bottom: 25px; /* espaçamento dentro da caixa de texto */
}
.subtitulo-principal-2{
font-size: 30px;
text-align: inherit;
clear: both; /* faz com que todo float não fique a direita e sim a esquerda */
}
main h1,h2{ /* configurações da fonte utilizada, linkada no HTML */
font-family: 'Nanum Gothic', sans-serif;
font-family: 'Anton', sans-serif;
font-family: 'Pacifico', cursive;
font-family: 'Srisakdi', cursive;
font-family: 'Gloria Hallelujah', cursive;
font-family: 'Orbitron', sans-serif;
}
p{
margin: 20px 0; /* margem do espaçamento */
}
em{
font-style: italic; /* estilo da formatação do texto, italico */
}
strong{
font-weight: bold; /* fonte em negrito na sua intensidade */
}
body{ /* formatação do corpo da página */
font-size: 15px;
background-color: rgb(229,229,229); /* cor definida a base da mistura de vermelho, verde e azul */
color: black;
text-align: justify;
font-family: monospace, sans-serif; /* estilo da fonte */
line-height: 1.5; /* espaçamento entre-linhas */
}
blockquote{ /* formataçao da caixa de texto de citação */
margin: 20px 40px;
background-color: lightgray;
color: black;
font-family: 'Gloria Hallelujah', cursive;
font-family: 'Nanum Gothic', sans-serif;
font-family: 'Orbitron', sans-serif;
font-family: 'Pacifico', cursive;
font-family: 'Srisakdi', cursive;
font-family: 'Anton', sans-serif;
padding: 10px;
border: 1px solid black;
width: 250px;
box-sizing: border-box; /* define o tamanho da caixa de texto desde a sua borda */
}
.bloco-1{
float: right; /* move a caixa de texto */
}
.bloco-2{
float: left;
}
aside nov,h1,footer,ul,il,a{
font-family: 'Nanum Gothic', sans-serif;
font-family: 'Anton', sans-serif;
font-family: 'Pacifico', cursive;
font-family: 'Srisakdi', cursive;
font-family: 'Gloria Hallelujah', cursive;
font-family: 'Orbitron', sans-serif;
}
nav{
background-color: darkgray;
color: black;
text-align: center;
padding: 10px;
width: 240px;
margin: 20px;
display: inline-block; /* controla o layout */
box-sizing: border-box; /* considera o valor da caixa toda, desde a sua borda*/
}
.rodape{
background-color: black;
color: white;
text-align: center;
padding: 20px;
}
article{
padding-bottom: 30px;
border-bottom: 1px solid #ccc;
margin-bottom: 20px;
}
ul,a{
color: black;
text-decoration: none; /* tira o sublinhado dos links*/
display: inline-block;
}
.links-de-navegacao{
text-transform: lowercase;
}
.alinhar{
display: inline-block;
}
.redes-sociais-github{
width: 40px;
height: 40px;
font-size: 0;
background-image: url(github.png); /* adiciona imagem ao conteudo da classe indicada */
}
.redes-sociais-twitter{
width: 40px;
height: 40px;
font-size: 0;
background-image: url(twitter.png);
}
.redes-sociais-linkedin{
width: 40px;
height: 40px;
font-size: 0;
background-image: url(linkedin.png);
}
