Entrar Ainda não tem acesso?
Solucionado (ver solução)

Importante

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!

Solucionado
(ver solução)
10
respostas

Width não está sendo aplicado

Referente ao curso HTML5 e CSS3 II: Turbinando as suas páginas, no capítulo Transformações e atividade Banner do Twitter

por Andris Buscairolli
| 58.1k xp | 21 posts

Boa noite. Estou fazendo o exercício "banner do twitter". Inicialmente eu o resolvi, mas de forma diferente. Ao invés de aumentar a largura com width, utilizei o padding. No entanto, quando tentei utilizar o width para dar a largura, ele não é aplicado. Alguém saberia identificar o motivo?

HTML
 <a href="https://www.twitter.com" class="banner-twitter">Siga-me no twitter</a>

CSS
.banner-twitter{
    font-size: .6em;
    color: #FFF;
    font-family: sans-serif;
    font-weight: 600;
    text-decoration: none;
    background-color: #660066;
    border: .25em solid #000;
    box-sizing: border-box;
    width: 8em;
    padding: 1em 0;
}
10 respostas
solução!
por Alexandre Aquiles
| 641.4k xp | 623 posts

Andris,

A tag <a> é display inline por padrão. Por isso, não respeita a propriedade width.

Mude para display: inline-block e deve funcionar! :)

por Andris Buscairolli
| 58.1k xp | 21 posts

Opa, Alexandre! Acrescentei o "display: inline-block" mas continua não sendo aplicado. Na resolução do instrutor do curso tbm não tem o display.

por Alexandre Aquiles
| 641.4k xp | 623 posts

Ah, é mesmo! No exercício, vocês usam o position: absolute, né?

Quando você coloca o position: absolute, o elemento sai do "fluxo" normal do documento e a largura é respeitada.

Chegou a colocar o position e o transform?

.banner-twitter {
  position: absolute;
  top: 0;
  right: 0;
  transform-origin: 0 0;
  transform: translate(6.5754em, -2.4749em) rotate(45deg);
}
por Andris Buscairolli
| 58.1k xp | 21 posts

O width só é aplicado se eu colocar position e transform? Não posso primeiro ajudar tudo antes de fazer o posicionamento?

por Alexandre Aquiles
| 641.4k xp | 623 posts

Isso nesse caso, não em geral. Existem várias outras maneiras de posicionar.

O width é aplicado mesmo para display inline quando o posicionamento for absolute.

O transform não interfere no width, nesse caso.

É que na proposta de solução, os dois tão juntos.

Ah, percebi que o line-height, font-size e width tão diferentes do seu na solução proposta.

por Andris Buscairolli
| 58.1k xp | 21 posts

Quanto ao valor do width eu coloquei diferentes valores mas nada aconteceu. No caso do line-height e do font-size, eles interferem no meu width?

Obs: Sei que pelo width estar em "em" ele usará a font do elemento como medida e por isso influenciaria, mas como eu disse, eu cheguei a por 50em e não houve nenhuma alteração. Então creio que o valor não influencie o width ser aplicado ou não.

por Alexandre Aquiles
| 641.4k xp | 623 posts

O line-heigth afeta a altura (height). O font-size pode, sim, afetar a largura.

Se você usar o seu código anterior, sem position: absolute mas width: 50em, a largura não tem efeito.

.banner-twitter{
  font-size: .6em;
  color: #FFF;
  font-family: sans-serif;
  font-weight: 600;
  text-decoration: none;
  background-color: #660066;
  border: .25em solid #000;
  box-sizing: border-box;
  width: 50em; /* editado */
  padding: 1em 0;
}

Sem position

A tag <a> é display: inline e não respeita a largura, por padrão.

Porém, se colocarmos o position: absolute, sem o transform, a largura terá efeito!

.banner-twitter {
 /* propriedades anteriores... */

  position: absolute;
  top: 0;
  right: 0;
}

com position

por Andris Buscairolli
| 58.1k xp | 21 posts

Mas neste caso, se eu colocasse o display: inline-block, o width não deveria ser aplicado?

por Alexandre Aquiles
| 641.4k xp | 623 posts

Vai e mesmo sem o position: absolute. Ficaria maior, só que no meio da página.

Com o position: absolute vai ter o mesmo efeito da figura acima, ficando no canto superior direito.

por Andris Buscairolli
| 58.1k xp | 21 posts

Funcionou Alexandre! Obrigado mais uma vez!

Tópicos relacionados

Mostrar mais tópicos Mostrar menos tópicos

Conteúdos Alura com o tema

Trilhas por carreira

Carreiras de IA

Carreiras de Dados

Carreiras de Cyber

Carreiras de DevOps & Cloud

Carreiras de UX & UI

Carreiras de Mobile & Front-End

Carreiras de Back-End

Carreiras de Negócios

Cursos universitários FIAP

Graduação | Pós-graduação | MBA