Problema com HTML5 e CSS3

klestadt@hotmail.com · Fevereiro 13, 2016

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">
				
				<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">

				<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>

rikaschmitt · Fevereiro 15, 2016

A soma das larguras está maior que a largura do "container", por isso que a sidebar não está ficando no lugar certo.

Primeiro adiciona isso ao seu CSS para consertar as larguras:

* { box-sizing: border-box; }

Que faz com que o padding não seja somado a largura/altura do elemento.

(ou você apenas ajusta a largura, diminuindo os valores)

Dai depois você coloca a sidebar lá pra cima do código, antes do primeiro <article>, pois com ela lá embaixo, ela está alinhando ao último <article>.

Entrar

Arquivado

Problema com HTML5 e CSS3

Recommended Posts

klestadt@hotmail.com 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

rikaschmitt 54

Compartilhar este post

Link para o post

Compartilhar em outros sites

Oriantação - Java Netbeans Componentes Template AdminLTE

Orientação - Codificação Caracteres Especiais em Java

Não consigo carregar imagem do captcha no meu formulário

Conteúdo Similar

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante