Problema com HTML5 e CSS3
Boa noite.
Estou usando HTML5, CSS3 e o editor notepad++.
Alguém saberia me informar como faço para subir um elemento da página para o topo dela?
No HTML é a tag "<aside>" e no CSS é o bloco aside{ }, ele está na parte de baixo da página e preciso colocá-lo no topo.
Abaixo segue códigos, HTML e CSS
Aguardo retorno
.container {
margin: 0 auto;
width: 960px;
}body {
background: #FFF1D6 url(images/noise.png);
font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
line-height: 1.6;
}article {
background-color: #FFF;
border: 1px solid #CCC;
border-color: #CCC #999 #999 #CCC;
margin-bottom: 20px;
padding: 10px;
float: left;
width: 660px;
}article h2 {
border-bottom: 1px dashed #7E9F19;
margin: 0;
}article a {
color: #2C88A7;
font-weight: bold;
}h1 a {
color: #7E9F19;
text-decoration: none;
}h1 a:hover {
background-color: #7E9F19;
color: #FFF;
}article img {
border: 1px solid #7E9F19;
float: left;
margin: 10px 10px 0 0;
padding: 2px;
}
.clear {
clear: both;
}aside {
background-color: #FFFBE4;
border: 1px solid #C9BC8F;
float: right;
padding: 10px;
width:260px;
}aside h3 {
font-size: 14px;
margin-top: 0;
}aside ol {
font-size: 12px;
}footer {
font-size: 12px;
text-align: center;
}<!doctype html>
<html lang = 'pt-BR'>
<head>
<meta charset = "UTF-8">
<link rel = "stylesheet" href = "FormatacaoSaoPaulo.css">
<title>O que mais eu gosto em São Paulo</title>
</head>
<body>
<div class = 'container'>
<h1><a href = ''>O que mais eu gosto em São Paulo</a></h1>
<!-- o nosso conteúdo vai aqui... -->
<article>
<h2>Passear na Avenida Paulista</h2>
<img src = 'paulista.jpg' width = '156px' height = '156px' alt = "O céu da avenida Paulista, foto por [http://www.flickr.com/photos/jairo_abud](http://www.flickr.com/photos/jairo_abud)">
<p>
Um dos principais centros financeiros da cidade, a avenida Paulista também possui diversas
opções de entretenimento. Endereço do Museu de Arte de São Paulo, <em>MASP</em>, do teatro
Gazeta e muitos outros, a região é de facíl acesso graças as diversas linhas de ônibus que
cruzam a avenida e a linha de metrô que passa por baixo dela.
</p>
<p>
A avenida Paulista é sempre assunto. O que será que estão falando a respeito no <a href =
'https://twitter.com/#!/search/Avenida Paulista' target = '_blank'>Twitter</a>
</p>
</article>
<article>
<h2>Os bares da Vila Madalena</h2>
<img src = 'piola.jpg' width = '156px' height = '156px' alt = "A varanda do Armazém Piola, foto por Fernando Moraes">
<p>
Depois de um dia de trabalho, nada melhor que um chopp, um petisco e uma conversa em uma mesa
de bar. Opções de sobra na região das ruas Aspicuelta, Fradique Coutinho e Wisard.
</p>
<p>
Veja quais os melhores bares e restaurantes da região no <a href = 'http://vejasp.abril.com.br/busca?chn=bares&qu=&nbh=Pinheiros%20/%20Vila/20Madalena' target = '_blank'>Guia VEJA São Paulo.</a>
</p>
</article>
<article>
<h2>O Parque Ibirapuera</h2>
<img src = 'ibirapuera.jpg' width = '156px' height = '156px' alt = "O Parque Ibirapuera, por [https://commons.wikimedia.org/wiki/File:Lago_do_Parque_do_Ibirapuera.JPG](https://commons.wikimedia.org/wiki/File:Lago_do_Parque_do_Ibirapuera.JPG)">
<p>
Um dos cartões postais da cidade, o parque dispõe de mais de 1,5km{^2} de área verde, lagos
artificiais e pistas de cooper e ciclismo. E se isso não fosse o suficiente, o parque costuma ser palco
de diversos eventos culturais ao longo do ano.
</p>
<p>
Veja no <a href = 'https://www.google.com.br/maps/dir//Av.+Paulista,+São+Paulo+-+SP/@-23.5567919,-46.6638185,17z/data=!4m8!4m7!1m0!1m5!1m1!1s0x94ce59c8da0aa315:0xd59f9431f2c9776a!2m2!1d-46.6544301!2d-23.563108?hl=pt-BR' target = '_blank'>mapa</a> como chegar ao parque.
</p>
</article>
<aside>
<h3>E existem muitos outros lugares interessantes na cidade...</h3>
<ol>
<li>O Mercado Municipal.</li>
<li>A Sala São Paulo.</li>
<li>Os estádios dos principais times de futebol da cidade.</li>
<li>Diversos museus, como o Memorial da América Latina, Museu da Língua Portuguesa e o Museu do Ipiranga.</li>
<li>E mais!</li>
</ol>
</aside>
</div>
<footer class = 'clear'>
<p>Parte do livro "HTML5 E CSS3: Domine a web do futuro."</p>
</footer>
</body>
</html>Discussão (1)
Carregando comentários...