No segundo exemplo do css aparece a Display: Block. Sobre o que se trata essa linha de comando, esse assunto não foi abordado em aula e estou confuso sobre sua inclusão sem qualquer instrução ou comentário
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
No segundo exemplo do css aparece a Display: Block. Sobre o que se trata essa linha de comando, esse assunto não foi abordado em aula e estou confuso sobre sua inclusão sem qualquer instrução ou comentário
o display:block serve para dizer que o elemento deve ficar em uma linha diferente, caso vc queira deixar o elemento na mesma linha deve utilizar o display: inline
o detalhamento está na aula 7
Assim como o Eduardo disse, utilizamos o display: block para informar que aquele elemento irá ocupar o espaço de uma linha, de um "bloco" no fluxo, ou seja, será o único elemento daquela linha. Já o display: inline, informa que o elemento deve ficar na mesma linha que os outros elementos em questão.
olá, numas das citações (fiat), utilizando o display: block, não consegui quebrar a linha e colocar o autor na linha de baixo...
Meu CSS
body {
font-family: "Crimson Text", serif;
background-color: #F2FFFC;
line-height: 1.5;
margin:0;
}
.head-pagina {
font-family: "Open Sans Condensed", sans-serif;
font-size: 60px;
color:#FFFFFF;
text-align: center;
background-color: #851944;
padding: 25px;
margin:0px;
border-bottom: 5px solid #000000;
text-transform: uppercase;
}
main a{
color:#851944;
font-family: "Open Sans Condensed", sans-serif;
}
.area-conteudo{
width: 720px;
margin-left: auto;
margin-right: auto;
padding-top: 30px;
padding-bottom: 30px;
}
h2{
font-family: "Open Sans Condensed", sans-serif;
font-size: 30px;
}
p{
text-align: justify;
margin: 20px 0;
}
strong {
font-weight: bold;
}
em {
font-style: italic;
}
.box-depoimento {
background-color: #D9E5E3;
padding:20px;
border:5px solid #C2CCCA;
width: 250px;
box-sizing: border-box;
margin: 20px 40px;
display: block;
}
.fiat {
float: right;
}
.petrobras {
float: left;
}
aside{
background-color: #3C1D3D;
color:#F2FFFC;
padding: 20px;
}
aside h1{
font-size: 30px;
margin-bottom: 25px;
text-transform: uppercase;
}
aside a{
color:inherit;
font-family: "Open Sans Condensed", sans-serif;
}
.area-menu {
width: 300px;
margin: auto;
text-align: center;
}
.icones-redes-sociais li{
display: inline-block;
margin-top: 20px;
}
nav a{
color:#F2FFFC;
font-family: "Open Sans Condensed", sans-serif;
text-transform: lowercase;
}
footer{
color:#9ba09f;
padding: 20px;
}
.tags {
background-color: #edeaea;
margin-top: 10px;
}
.rodape {
background-color: black;
}
article {
border-bottom: 1px solid lightgrey;
padding-bottom: 30px;
margin-bottom: 20px;
}
.link-leia-mais {
background-color: #908e8e;
font-family: "Open Sans Condensed", sans-serif;
font-size: 18px;
font-style: normal;
color: #ffffff;
text-align: center;
padding: 5px;
margin-top: 5px;
margin-bottom: 0px;
display: block;
}
.icones-redes-sociais a {
display: block;
width: 40px;
height: 40px;
/* text-indent: -99999px; */
font-size: 0;
}
.github {
background-image: url("github.png");
}
.twitter {
background-image: url("twitter.png");
}
.linkedin {
background-image: url("linkedin.png");
}
cite {
float: right;
font-style: italic;
display: block;
}Meu HTML:
<!DOCTYPE html>
<html>
<head>
<title>Biografia do João da Silva</title>
<meta charset= utf-8>
<link rel="icon" href="favicon.png">
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="site.css">
<!-- carrega a fonte Crimson Text nas versões normal, itálico e negrito -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Crimson+Text:400,400italic,600">
<!-- carrega a fonte Open Sans Condensed na versão negrito, -->
<!-- que é a única necessária para os cabeçalhos -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700">
</head>
<body>
<main>
<h1 class="head-pagina">Sobre mim</h1>
<div class="area-conteudo">
<p>Moro em São Paulo mas atendo clientes do mundo todo. Sou conhecido por fazer produtos de <em>qualidade</em>, <em>durabilidade</em> e que agregam valor para meus clientes.</p>
<p>Trabalho usando a web como plataforma, ou seja, respiro HTML5, CSS3 e JavaScript (ou melhor: ECMASCript). Crio sites para todos, seguindo as principais diretivas de acessibilidade, responsividade e web semântica, sem descuidar da qualidade de código.</p>
<h2>Como trabalho</h2>
<blockquote class="box-depoimento fiat">
<p>João é o melhor desenvolvedor front-end com quem já trabalhei. Muito eficiente e muito capaz. Recomendo sem dúvidas!<cite> José Souza, Fiat</cite></p>
</blockquote>
<p>Satisfazer meus clientes é prioridade. Para isso, garanto um processo de desenvolvimento altamente interativo, baseado em feedback contínuo.</p>
<p><strong>Não trabalho com escopo fechado</strong>: o cliente é que decide quando o produto está pronto.</p>
<p>Também não trabalho com prazos fechados: qualidade é importante demais para ser sacrificada.</p>
<h2>Experiência</h2>
<blockquote class="box-depoimento petrobras">
<p>João domina as tecnologias como ninguém. Eu apresentava um problema, ele tinha na ponta da língua a solução mais adequada com as tecnologias mais recentes. <cite> Manoel Santos, Petrobrás</cite>
</blockquote>
<p>Já desenvolvi projetos para grandes empresas como <a href="http://www.bmw.com">BMW</a>, <a href="http://www.uol.com.br">UOL</a> e <a href="http://www.ibm.com">IBM</a>. Neles, o foco principal era entregar uma experiência imersiva e impactante para o usuário final sem descuidar do desempenho e da acessibilidade da página.</p>
<p>Também já fui contratado para transformar grandes portais, como <a href="http://www.terra.com.br">Terra</a> e <a href="http://www.g1.globo.com/">G1</a>, em páginas responsivas. Fui responsável por renovar o layout, reorganizar o conteúdo e re-escrever o código de forma mais reaproveitável.</p>
<h2>Comunidade</h2>
<p>Procuro repassar meu conhecimento para a comunidade. Para isso, já dei diversas palestras e mantenho um <a href="blog.html">blog</a>.</p>
</div>
</main>
<img src="eu.jpg" alt="Foto do João da Silva">
<aside class="area-menu">
<h1>João da Silva</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="bio.html">Sobre mim</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contato.html">Contato</a></li>
</ul>
</nav>
<ul class="icones-redes-sociais">
<li><a class="github" href="https://github.com/git-joaodasilva">Github</a></li>
<li><a class="twitter" href="https://twitter.com/twitter-joaodasilva">Twitter</a></li>
<li><a class="linkedin" href="https://br.linkedin.com/pub/linkedin-joao-da-silva/32/4/508">LinkedIn</a></li>
</ul>
</aside>
<footer class="rodape">
<p>© João da Silva 2014</p>
</footer>
</body>
</html>Consegui resolver no CSS de outra forma (menos correta), mas queria entender por que o float não funcionou
cite {
display: block;
font-style: italic;
text-align: right;
width: 100%;
}Olá, Anderson!
Dei uma olhada no seu HTML e notei que dentro da tag blockquote você coloca o dentro da tag
. Dessa forma, tudo fica dentro do mesmo parágrafo , a tag deve ficar fora, assim o CSS entenderá que o o que estiver dentro da tag cite deve ficar com display: block, e assim o colocará na linha de baixo.
Fiz o teste aqui e funcionou! O cite ficou na linha debaixo do
!
Exemplo:
<blockquote class="box-depoimento fiat">
<p>João é o melhor desenvolvedor front-end com quem já trabalhei. Muito eficiente e muito capaz. Recomendo sem dúvidas!</p>
<cite> José Souza, Fiat</cite>
</blockquote>resultado:
João é o melhor desenvolvedor front-end com quem já trabalhei. Muito eficiente e muito capaz. Recomendo sem dúvidas!
José Souza, Fiat
oi Victoria, muuito obrigado!
Isso me ajudou a entender melhor o funcionamento do block, que precisa dos elementos separados.
;-)
Oi Danilo, tudo bem?
O display:block foi discutido na aula sobre as imagens dos links para a barra de navegação, sobre os elementos ficarem ou não na mesma linha. ao usar display:block tudo o mais irá para a linha/bloco seguinte; ao usar display: inline é possível mostrar os elementos seguintes na mesma linha, e o display: inline-block permite elementos na mesma linha (inline) recebam propriedades como altura e largura específicos.