Prezados na apostla aberta acima, há um exercio de float right que cita o seguinte enunciado:
4) Queremos que a imagem da Família Pelho esteja žutuando a direita no texto na seção sobre a História da empresa. Para isso, use a propriedade float no CSS.
Como a <figure> com a imagem da família Pelho ainda não possui id, adicione um:
<figure id="familia-pelho">
Agora podemos referenciar o elemento através de seu id em nosso CSS, indicando a žflutuação e uma margem para espaçamento:
#familia-pelho {
float: right;
margin: 0 0 10px 10px;
}Teste o resultado. Repare como o texto é renderizado ao redor da imagem, bem diferente de antes
Porém, com a formatação acima, a imagem anda apenas para a direita e não se alinha com o texto da história, como é o resultado esperado da apostila. Gostaria de saber se errei algum passo do exercicio. Segue doc html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<img src = img/logo.png>
<link rel="stylesheet" href="css/sobre.css" title="Sobre a Mirror Fashion"
</head>
<body>
<h1>A Mirror Fashion</h1>
<p>
A <strong>Mirror Fashion</strong> é a maior empresa comércio eletrônico no segmento de moda em todo o mundo.
Fundada em 1932, possui filiais em 124 países, sendo líder de mercado com mais de 90% de
participação em 118 deles.
Nosso centro de distribuição fica em <a href="https://maps.google.com.br/?q=Jacarezinho">Jacarezinho, no Paraná </a>. De lá, saem 48 aviões que
distribuem nossos produtos às casas do mundo todo. Nosso centro de distribuição:
Compre suas roupas e acessórios na Mirror Fashion. Acesse <a href="index.html">nossa loja</a> ou entre em contato
se tiver dúvidas. Conheça também nossa <a href="#historia">história</a> e nossos <a href="#diferenciais">diferenciais</a>.
</p>
<h2 id="historia">História</h2>
<p>
A fundação em 1932 ocorreu no momento da descoberta econônica do interior do Paraná. A
família <em>Pelho</em>, tradicional da região, investiu todas as suas economias nessa nova iniciativa,
revolucionária para a época. O fundador <em>Eduardo Simões Pelho</em>, dotado de particular visão
administrativa, guiou os negócios da empresa durante mais de 50 anos, muitos deles ao lado
de seu filho <em>E. S. Pelho Filho</em>, atual CEO. O nome da empresa é inspirado no nome da família.
</p>
<p>
O crescimento da empresa foi praticamente instantâneo. Nos primeiros 5 anos, já atendia 18 países.
Bateu a marca de 100 países em apenas 15 anos de existência. Até hoje, já atendeu 740 milhões
de usuários diferentes, em bilhões de diferentes pedidos.
</p>
<p>
O crescimento em número de funcionários é também assombroso. Hoje, é a maior empregadora do
Brasil, mas mesmo após apenas 5 anos de sua existência, já possuía 30 mil funcionários. Fora do
Brasil, há 240 mil funcionários, além dos 890 mil brasileiros nas instalações de Jacarezinho e
nos escritórios em todo país.
</p>
<p>
Dada a importância econômica da empresa para o Brasil, a família Pelho já recebeu diversos prêmios,
homenagens e condecorações. Todos os presidentes do Brasil já visitaram as instalações da Mirror
Fashion, além de presidentes da União Européia, Ásia e o secretário-geral da ONU.
</p>
<figure id="familia-pelho">
<img src = "img/Familia-Pelho.jpg">
<figcaption>Familia Pelho</figcaption>
</figure>
<figure id="centro-distribuicao">
<img src="img/centro-distribuicao.png">
<figcaption>Centro de distribuição Mirror Fashion</figcaption>
</figure>
<h2 id="diferenciais">Diferenciais</h2>
<ul>
<li>Menor preço do varejo, garantido</li>
<li>Se você achar uma loja mais barata, leva o produto de graça</li>
<li>Pague em reais, dólares, euros ou bitcoins</li>
<li>Todas as compras com frete grátis para o mundo todo</li>
<li>Maior comércio eletrônico de moda do mundo</li>
<li>Atendimento via telefone, email, chat, twitter, facebook, carta, fax e telegrama</li>
<li>Presente em 124 países</li>
<li>Mais de um milhão de funcionários em todo o mundo</li>
</ul>
<div id ="rodape">
<img src = "img/logo.png">
©Copyright Mirror FAshion
</div>
</body>
</html>CSS:
body {
color: #333333;
font-family: "Lucida Sans Unicode","Lucida Grande",sans-serif;
margin-left: auto;
margin-right: auto;
width: 940px;
}
h1{
background-image: url(../img/sobre-background.jpg);
padding: 10px;
}
h2{
border-bottom: 2px solid #333333;
margin-top: 30px;
}
p{
padding: 0 20px;
text-indent: 15px;
}
figure{
background-color: #F2EDED;
border:1px solid #ccc;
text-align: center;
padding: 15px;
margin: 30px;
}
figcaption{
font-style: italic;
margin-top: 10px;
}
#centro-distribuicao {
margin-left: auto;
margin-right: auto;
width: 550px;
}
#rodape{
color: #777;
margin: 30px 0;
padding:30px 0;
}
#rodape img{
margin-right: 30px;
vertical-align: middle;
width: 94px;
}
#familia-pelho{
float: right;
}Obrigado!
