Existe um jeito muito mais fácil de alinhar items, com apenas três linhas, e eu não tô falando isso em tom de crítica, pelo contrário, é sempre bom saber mais de um modo de resolver um problema. Então lá vai: #container { display: flex; /*Possui diversas funções (procurem pela documentação), uma delas é habilitar o manejamento do conteúdo*/ justify-content: center; /*Alinhamento horizontal, ou seja, dispensa o "margin: auto"*/ align-items: center; /*Alinhamento vertical*/ } Essas propriedades sempre são colocadas no elemento-pai (container), não se esqueçam desse importante detalhe.
@@Mirai.S sim, muitos não perceberam isso mas ele fez o curso exatamente ensinando como começou tudo até os dias atuais, no inicio do curso ele poderia ter ensinado a criar o linkcss direto ja, não ensinou porque a gente precisa entender o desenrolar da coisa e agradeço muito por cada detalhe que ele levou em consideração do curso !! e você mirai como ta o curso ai?
Aprendemos que existem elementos que podem conter outros elementos. As são um exemplo de elemento contêiner. O significado de contêiner (versão do Inglês container) é simples e direto: " *aquele que contém coisas* ". Quando você vai centralizar verticalmente uma caixa, é necessário ter a presença de um *Container* e de um *Conteúdo.* Quando queremos centralizar blocos horizontalmente, aprendemos a usar o margin: auto; nas folhas de estilo. Mas como fazer a *centralização vertical?* Considerando que temos um elemento dentro do outro e queremos centralizar verticalmente o elemento interno, devemos: Atribuir uma classificação (id ou class) para _ambos os elementos,_ pai e filho... Posteriormente configurar o elemento pai com um "position: relative" e logo após configurar o elemento filho com um "position: absolute". No elemento filho, configurar ambas as Propriedades Auxiliares do position usadas nesse caso, *left* e *top,* com um valor de *50%* - Feito isso, a nossa caixa interna será centralizada verticalmente. *_É IMPORTANTE DESTACAR:_* Com essa configuração, o elemento interno realmente será alinhado pelo centro, mas tendo como referência o *CANTO SUPERIOR ESQUERDO DA CAIXA FILHO...* resultando especificamente no alinhamento desse ponto (canto superior esquerdo da box) e não da caixa como um todo. Para resolver isso, devemos mudar a posição do "ponto de alinhamento" da caixa filho para o *CENTRO* da box. Sendo que por padrão, como já vimos, esse ponto é no canto superior esquerdo. Para transformar o "ponto de alinhamento" de uma caixa (mover a caixa), usamos a Propriedade de Estilo " *transform* ". Utilizando a propriedade transform é possível *manipular visualmente um elemento* (mover, rotacionar, dimensionar e etc). As funções mais usadas para o _transform_ são: _rotate, scale, skew e translate._ Para centralizar o "ponto de alinhamento" na nossa box, iremos usar a função "translate". *translate* - A função de translate serve para mover o elemento para os lados ou para cima/baixo. Mudar o seu "ponto de alinhamento"... A sintaxe pode ser especifica para um dos eixos x/y ( translateX ou translateY ), como pode ser apenas translate, abrangendo os dois eixos ( x, y ). Obs.: Para ir para o lado esquerdo ou para cima, use valores negativos. *rotate* - Como o nome já sugere, é utilizada para rotacionar o elemento, de 0 a 360 graus. Utilizando valores positivos, a rotação será realizada no sentido horário e, utilizando valores negativos, no sentido Anti-horário. *scale* - Utilizado para redimensionar os elementos, tendo como escala padrão o valor "1". Valores maiores que 1, aumentarão o tamanho do elemento, e valores menores que 1 diminuirão sua escala. *skew* - É utilizado para "distorcer" os elementos, alterando os ângulos. *Nota:* A propriedade de estilo "transform" e suas funções é muito utilizada juntamente com a pseudo-classe "hover" e com a propriedade de estilo "transition" para criar efeitos visuais. Entendido o conceito do transform e suas funções, usaremos a seguinte declaração para mudar/centralizar o "ponto de alinhamento" da nossa box filho: *transform: translate(-50%, -50%);* Como queremos posicionamento centralizado, na função "translate" inserimos valores negativos de "-50% -50%" para deslocar o "ponto de alinhamento" da nossa caixa filho (metade do container... centro). O _PRIMEIRO VALOR_ representa o *deslocamento horizontal* do ponto, e o _SEGUNDO VALOR_ representa o *deslocamento vertical* desse ponto. Utilizamos valores em % para ajustar o ponto de referência exatamente no meio da box (-50% -50%), mas dependendo do que você quer fazer, também pode usar valores em px ou outra unidade de medida. Lembrando que aquilo que de fato está centralizando a caixa são os Positions e suas Propriedades Auxiliares (left e top), a propriedade transform apenas mudou o ponto de referência da caixa filho. Segue abaixo um exemplo do código completo, tanto da box pai quanto da box filho: section#container { position: relative; height: 100vh;
position: absolute; left: 50%; top: 50%; background-color: yellow; background-image: url(imagens/target001.png); background-size: 100% 100%; transform: translate(-50%, -50%); } Essa é apenas uma das técnicas de centralização de conteúdo, existem outras que requerem aprender conceitos mais aprofundados das folhas de estilo, como as caixas flexíveis (Flexbox).
Aula sensacional! Sempre me enrolei com esse conceito de relative, absolute, left, bottom, etc.. Mas depois do curso e da explicação do conceito de box tudo ficou mais claro
@@laurolyra Muito bom mano, parabéns. Tu acha q é preciso saber um framework/biblioteca pra entrar no mercado? To mt tempo só nos 3 (html/css/js) e sinto q n aprendi, principalmente o js. Tem alguma dica?
📝 RESUMO - Centralização vertical de caixas: *Na parte de HTML:*
*Na parte de CSS:* - O que tá e fora (container) -> *position: relative* Ex: #container { position: relative; -> opcional; em CSS já é relative por padrão height: 500px; padding: 10px; background-color: purple; } - O que tá de dentro (conteúdo) -> *position: absolute* Ex: #conteúdo { position: absolute; -> permite usar as propriedades top e left height: 200px; width: 400px; background-color: yellow; left: 50%; -> o canto top left que ficará centralizado (precisa de transform) top: 50%; transform: translate(-50%, -50%); -> translate(mov horizontal, mov vertical). -> Muda a posição de referência de 'topo/esquerdo' (padrão), para uma outra qualquer (ex: centro) } *OBS:* forma mais fácil de centralizar: #container { display: flex; (possui diversas funções, uma delas é habilitar o manejo do conteúdo) justify-content: center; (alinhamento horizontal, dispensando o 'margin: auto') align-items: center; (alinhamento vertical) } -> Essas propriedades são colocadas no elemento-pai (container, nesse exemplo).
Só uma pequena correção ao professor. No min. 5:24 ele falou que a posição padrao de um container é relative. Isso foi um equivoco. A prosição padrão de um elemento na vwrdade é static. É importante colocar position: relative; en um container pai quando vai mexer com position: absolute; para o filho, se não na hora de colocar as coordenadas top, right, bottom e left vai ficar tudo maluco. Grande trabalho do mesmo modo. 😊😊
Muito interessante. E eu achando que só era possível com flex ou grid.😂 Outra coisa pra quem ainda não manja muito de position: é necessário usar o relative nesse caso, até porque o position: absolute é absoluto ao relative mais acima (pai), então se esse section não tivesse o filho estaria absoluto ao body. Sugiro verem mais sobre que vocês vão saca.
@@rafaelnargolo na verdade depende. O flexbox tem dois eixos: principal e transversal. Quando estamos trabalhando com linhas, o eixo principal é o horizontal e o transversal é o vertical. Mas quando estamos mexendo com colunas, o eixo principal passa a ser o vertical e o transversal horizontal. O justify sempre vai trabalhar com o eixo principal e o align sempre vai ser referente ao eixo transversal. Em outras palavras, quando estamos mexendo com linhas, para alinhar verticalmente, usamos o align. Porém, quando mexemos com colunas, para alinhar verticalmente usamos o justify.
@@rafaelnargolo Exatamente. O alinhamento depende do flex direction. No caso row, o align irá pegar na vertical, e no caso column pega na horizontal. O justify fica com os sentidos opostos.
@@trakkj É, as coisas se invertem. Mas pro propósito da aula, que é alinhar ao centro, flex direction como coluna seria como complicar e depois descomplicar kk porque o padrão é row, então bastaria display flex, align-items center e justify-content center. Acho que flex direction column seria só pra coisas mais específicas, já que pode alinhar ao centro sem problema usando flex direction row, que vem de padrão e nem precisa setar
Olha, sobre a questão da centralizacao da box de conteúdo... levando em consideracao todas as propriedades padrao, mas focando apenas no left e no top com valores em porcentagem, se eu coloco 50%, ele fica centralizado, levando em consideracao o ponto superior esquerdo da box de conteúdo, se eu colo a metade disso, ou seja, 25%, eu acabo centralizando o centro da box de conteudo com a do conteiner da mesma forma, sem usar o translate
Consegui alinhar os itens deixando o left em 29% e o top em 39%. Mas da forma ensinada no video é mais prática e rapida, pois assim não precisa ficar mudando o top ou o left ate acertar o centro do container, só comentei pois existe essa forma também. meu codigo com a gambiarra: #conteiner{ background-image: url(imagens/target001.png); background-size: 100% 100%; position: relative; height: 96vh; padding: 10px; background-color: purple; } #conteudo{ background-image: url(imagens/target001.png); background-size: 100% 100%; position: absolute; height: 200px; width: 400px; background-color: yellow; left: 29%; top: 39%; }
dá pra por videos do youtube desta forma. põe a altura e tamanho do em 100% e se quiser aumentar ou diminuir o tamanho do video, so mexer no tamanho do box.
Também funciona, mas isso só irá funcionar porque o tamanho do quadrado é 400px (largura) por 200px (altura). Se em qualquer momento essas medidas forem mudadas, o translate(-200px, -100px); não vai funcionar corretamente, por isso o ideal é usar translate(-50%); ou translate(-50%, -50%); pois dessa forma ele ficará sempre ao centro independente da medida que o quadrado for
faço o mesmo estava até usando o caderno, mas achei melhor algumas coisas serem colocadas dentro do próprio código em forma de comentário, um deles é essa da "relatividade" que ele comentou no vídeo coloquei na frente do próprio" position " na segunda vez de ver o vídeo e fazendo o código, outra coisa tentar fazer ao máximo sem por o vídeo pra rodar ir lembrando do que foi visto na primeira vez que viu ajuda bastante.
Essa configuração não funcionou pra mim no google chrome: transform: translate(-50% -50%) Quando cliquei em "Inspecionar" e fui até o elemento, acusou invalid property. Para resolver fiz assim: transform: translateX(-50%) translateY(-50%);
Eu descobri uma outra forma: left: calc(50% - 250px); top: calc(50% - 100px); como meu width esta 500px, precisei descontar metade do elemento, isso tanto na largura como na altura. Sem entrar no quisito flex-box que tambem é outra alternativa.
@@albertregodasilva3034 hahaha. Eu nem botei fé nessa continuação do curso de Python, e nesse novo módulo vamos mexer com banco de dados, ainda bem que já dei uma estudada nisso
Pessoal, sei que estamos em 2024 já o curso é de 2021 kkkkkkkk , porem recentemente eu comecei o curso, mas não estou conseguindo executar esse exercício, simplesmente pq quando aplico posicionamento absoluto em qualquer elemento e aplico o top e left, ele some da tela e não aparece mais kkkkkk , ja tentei até com o transform e da no mesmo.
@@jefferson8055 CARACA CARA! Eu bati a cabeça por horas por causa disso, reassisti e refiz tudo várias vezes. Não acredito nisso kkkkkkkkkkkkkk. Só percebi a falta da virgula lá por causa do seu comentário. Muito obrigado! kkkkkkkkkkkkkkkkkkkkkkkk
@@intensionado Já passei algumas horas assim com outros comandos...kk. Agora olho muito atentamente as vígulas, aspas simples, aspas duplas, ponto e vírgula, chaves, colchetes etx kkk
transform: translate(-50% ((((((",")))))) -50%); ... vai vendo alguém que passou 5 minutos testando coisas diferentes porque tinha esquecido da virgula.... cara klsksks rindo até 2023
fiz o msm kkkk fiquei uns 20 min, mandei p um amigo perguntando se ele conseguia e n achava, aí pensei em "testar" isso, qnd vi no video ja tinha aksjdnas
Acho desnecessário e perda de tempo ensinar formas antigas de fazer algo atual, estou apoiando fielmente o curso e não tenho nada a reclamar, mas as vezes o professor enrola muito em certos assuntos...
Existe um jeito muito mais fácil de alinhar items, com apenas três linhas, e eu não tô falando isso em tom de crítica, pelo contrário, é sempre bom saber mais de um modo de resolver um problema. Então lá vai:
#container {
display: flex; /*Possui diversas funções (procurem pela documentação), uma delas é habilitar o manejamento do conteúdo*/
justify-content: center; /*Alinhamento horizontal, ou seja, dispensa o "margin: auto"*/
align-items: center; /*Alinhamento vertical*/
}
Essas propriedades sempre são colocadas no elemento-pai (container), não se esqueçam desse importante detalhe.
pensei exatamente a mesma coisa...
Valeu pela dica, Gabriel.
@@Mirai.S sim, muitos não perceberam isso mas ele fez o curso exatamente ensinando como começou tudo até os dias atuais, no inicio do curso ele poderia ter ensinado a criar o linkcss direto ja, não ensinou porque a gente precisa entender o desenrolar da coisa e agradeço muito por cada detalhe que ele levou em consideração do curso !! e você mirai como ta o curso ai?
Problema é que isso pula as etapas do Guanabara, ele vai abordar isso ainda amigão...paciencia
eu substituí o que ele mostrou no exercício pelo que você comentou, mas meu #conteudo não fica no centro. doidoi, né
Aprendemos que existem elementos que podem conter outros elementos. As são um exemplo de elemento contêiner.
O significado de contêiner (versão do Inglês container) é simples e direto: " *aquele que contém coisas* ". Quando você vai centralizar verticalmente uma caixa, é necessário ter a presença de um *Container* e de um *Conteúdo.*
Quando queremos centralizar blocos horizontalmente, aprendemos a usar o margin: auto; nas folhas de estilo. Mas como fazer a *centralização vertical?*
Considerando que temos um elemento dentro do outro e queremos centralizar verticalmente o elemento interno, devemos:
Atribuir uma classificação (id ou class) para _ambos os elementos,_ pai e filho...
Posteriormente configurar o elemento pai com um "position: relative" e logo após configurar o elemento filho com um "position: absolute".
No elemento filho, configurar ambas as Propriedades Auxiliares do position usadas nesse caso, *left* e *top,* com um valor de *50%* - Feito isso, a nossa caixa interna será centralizada verticalmente.
*_É IMPORTANTE DESTACAR:_* Com essa configuração, o elemento interno realmente será alinhado pelo centro, mas tendo como referência o *CANTO SUPERIOR ESQUERDO DA CAIXA FILHO...* resultando especificamente no alinhamento desse ponto (canto superior esquerdo da box) e não da caixa como um todo.
Para resolver isso, devemos mudar a posição do "ponto de alinhamento" da caixa filho para o *CENTRO* da box. Sendo que por padrão, como já vimos, esse ponto é no canto superior esquerdo.
Para transformar o "ponto de alinhamento" de uma caixa (mover a caixa), usamos a Propriedade de Estilo " *transform* ".
Utilizando a propriedade transform é possível *manipular visualmente um elemento* (mover, rotacionar, dimensionar e etc).
As funções mais usadas para o _transform_ são: _rotate, scale, skew e translate._ Para centralizar o "ponto de alinhamento" na nossa box, iremos usar a função "translate".
*translate* - A função de translate serve para mover o elemento para os lados ou para cima/baixo. Mudar o seu "ponto de alinhamento"... A sintaxe pode ser especifica para um dos eixos x/y ( translateX ou translateY ), como pode ser apenas translate, abrangendo os dois eixos ( x, y ). Obs.: Para ir para o lado esquerdo ou para cima, use valores negativos.
*rotate* - Como o nome já sugere, é utilizada para rotacionar o elemento, de 0 a 360 graus. Utilizando valores positivos, a rotação será realizada no sentido horário e, utilizando valores negativos, no sentido Anti-horário.
*scale* - Utilizado para redimensionar os elementos, tendo como escala padrão o valor "1". Valores maiores que 1, aumentarão o tamanho do elemento, e valores menores que 1 diminuirão sua escala.
*skew* - É utilizado para "distorcer" os elementos, alterando os ângulos.
*Nota:* A propriedade de estilo "transform" e suas funções é muito utilizada juntamente com a pseudo-classe "hover" e com a propriedade de estilo "transition" para criar efeitos visuais.
Entendido o conceito do transform e suas funções, usaremos a seguinte declaração para mudar/centralizar o "ponto de alinhamento" da nossa box filho:
*transform: translate(-50%, -50%);*
Como queremos posicionamento centralizado, na função "translate" inserimos valores negativos de "-50% -50%" para deslocar o "ponto de alinhamento" da nossa caixa filho (metade do container... centro). O _PRIMEIRO VALOR_ representa o *deslocamento horizontal* do ponto, e o _SEGUNDO VALOR_ representa o *deslocamento vertical* desse ponto.
Utilizamos valores em % para ajustar o ponto de referência exatamente no meio da box (-50% -50%), mas dependendo do que você quer fazer, também pode usar valores em px ou outra unidade de medida.
Lembrando que aquilo que de fato está centralizando a caixa são os Positions e suas Propriedades Auxiliares (left e top), a propriedade transform apenas mudou o ponto de referência da caixa filho.
Segue abaixo um exemplo do código completo, tanto da box pai quanto da box filho:
section#container {
position: relative;
height: 100vh;
background-color: purple;
background-image: url(imagens/target001.png);
background-size: 100% 100%;
}
article#conteudo {
min-height: 200px;
width: 400px;
position: absolute;
left: 50%;
top: 50%;
background-color: yellow;
background-image: url(imagens/target001.png);
background-size: 100% 100%;
transform: translate(-50%, -50%);
}
Essa é apenas uma das técnicas de centralização de conteúdo, existem outras que requerem aprender conceitos mais aprofundados das folhas de estilo, como as caixas flexíveis (Flexbox).
Aula sensacional! Sempre me enrolei com esse conceito de relative, absolute, left, bottom, etc.. Mas depois do curso e da explicação do conceito de box tudo ficou mais claro
Guanabara, você é sensacional. Sou dev junior e tô tirando MUITA dúvida nesse seu curso. Tá de parabéns pelo conteúdo!
trabalha com o que?
@@curtiuseucomentario6203 faço sou desenvolvedor Front-end numa empresa do Rio (trabalho remoto)
@@laurolyra Daora mano. E quais tecnologias vc usa?
@@curtiuseucomentario6203 react/redux no front e ruby no backend (mexo muito pouco no back)
@@laurolyra Muito bom mano, parabéns.
Tu acha q é preciso saber um framework/biblioteca pra entrar no mercado? To mt tempo só nos 3 (html/css/js) e sinto q n aprendi, principalmente o js. Tem alguma dica?
Excelente aula teacher! Ensinando assim fica fácil demais. Valeu!
📝 RESUMO - Centralização vertical de caixas:
*Na parte de HTML:*
*Na parte de CSS:*
- O que tá e fora (container) -> *position: relative*
Ex: #container {
position: relative; -> opcional; em CSS já é relative por padrão
height: 500px;
padding: 10px;
background-color: purple;
}
- O que tá de dentro (conteúdo) -> *position: absolute*
Ex: #conteúdo {
position: absolute; -> permite usar as propriedades top e left
height: 200px;
width: 400px;
background-color: yellow;
left: 50%; -> o canto top left que ficará centralizado (precisa de transform)
top: 50%;
transform: translate(-50%, -50%); -> translate(mov horizontal, mov vertical).
-> Muda a posição de referência de 'topo/esquerdo' (padrão), para uma outra
qualquer (ex: centro)
}
*OBS:* forma mais fácil de centralizar:
#container {
display: flex; (possui diversas funções, uma delas é habilitar o manejo do conteúdo)
justify-content: center; (alinhamento horizontal, dispensando o 'margin: auto')
align-items: center; (alinhamento vertical)
}
-> Essas propriedades são colocadas no elemento-pai (container, nesse exemplo).
Nem todo heroi usa capa!
Muito obrigada :)
Que anotação TOTOSA que tu fez, vou copia tudo fi, se é loko.
No meu não deu certo
Explicação simples e prática sobre algo que sempre me enrolei.
Obrigado, professor!
Aqui eu precisei incluir o "position: relative" pra funcionar. Muito bom!
Obrigado por esse capítulo, professor! Muito bacana.
Simplesmente uma das melhores aulas que já tive!
Só uma pequena correção ao professor. No min. 5:24 ele falou que a posição padrao de um container é relative. Isso foi um equivoco. A prosição padrão de um elemento na vwrdade é static. É importante colocar position: relative; en um container pai quando vai mexer com position: absolute; para o filho, se não na hora de colocar as coordenadas top, right, bottom e left vai ficar tudo maluco.
Grande trabalho do mesmo modo. 😊😊
Muito interessante. E eu achando que só era possível com flex ou grid.😂
Outra coisa pra quem ainda não manja muito de position: é necessário usar o relative nesse caso, até porque o position: absolute é absoluto ao relative mais acima (pai), então se esse section não tivesse o filho estaria absoluto ao body. Sugiro verem mais sobre que vocês vão saca.
manda um vídeo ai
@@curtiuseucomentario6203 tem esse aq q eu vi th-cam.com/video/Y7NeqpwLM2g/w-d-xo.html
@@user-bl4po5kv8d vlw mano
Esse tive que assistir 2 vezes, mas consegui aprender
5:13 eu alinhei assim
Display flex
Align-items center
Justify content center
Boa, display flex ajuda dms !!!
flex é nos próximos módulos
caro professor guanabara, te amo
cara, que aula incrível
Pode alinhar também apenas com duas linhas. Na section coloca:
display: grid;
place-items: center;
te amo guanabara!
Obrigado
Usando display flex, basta colocar display flex e align-items center no container e centraliza rapidinho
isso que você falou não irá centralizar. Falta a propriedade justify-content: center, então ai sim estará centralizado.
@@anarktv8098 Esqueci dessa de justify-content, mas tem que ser as duas. Align pra alinhar na vertical, e justify na horizontal
@@rafaelnargolo na verdade depende. O flexbox tem dois eixos: principal e transversal. Quando estamos trabalhando com linhas, o eixo principal é o horizontal e o transversal é o vertical. Mas quando estamos mexendo com colunas, o eixo principal passa a ser o vertical e o transversal horizontal.
O justify sempre vai trabalhar com o eixo principal e o align sempre vai ser referente ao eixo transversal. Em outras palavras, quando estamos mexendo com linhas, para alinhar verticalmente, usamos o align. Porém, quando mexemos com colunas, para alinhar verticalmente usamos o justify.
@@rafaelnargolo Exatamente. O alinhamento depende do flex direction. No caso row, o align irá pegar na vertical, e no caso column pega na horizontal. O justify fica com os sentidos opostos.
@@trakkj É, as coisas se invertem. Mas pro propósito da aula, que é alinhar ao centro, flex direction como coluna seria como complicar e depois descomplicar kk porque o padrão é row, então bastaria display flex, align-items center e justify-content center. Acho que flex direction column seria só pra coisas mais específicas, já que pode alinhar ao centro sem problema usando flex direction row, que vem de padrão e nem precisa setar
Olha, sobre a questão da centralizacao da box de conteúdo... levando em consideracao todas as propriedades padrao, mas focando apenas no left e no top com valores em porcentagem, se eu coloco 50%, ele fica centralizado, levando em consideracao o ponto superior esquerdo da box de conteúdo, se eu colo a metade disso, ou seja, 25%, eu acabo centralizando o centro da box de conteudo com a do conteiner da mesma forma, sem usar o translate
só diminuir a tela q vc vai ver a diferença
obrigado ajudou muito
ótima aula!
muito legal mesmo.
Quem tiver dificuldades no desafio 11 esse vídeo ajuda bastante.
Poderia trazer um curso de Bootstrap para o canal
Estava vendo seus vídeos de banco de dados e achei que vc envelheceu muito bem, tirando esse cabelo azul é claro kkk...
Baita aula
Olá, professor. Só passando para avisar que o Timestamp do vídeo está incompleto nesse vídeo também, abraço e obrigado pela aula
Consegui alinhar os itens deixando o left em 29% e o top em 39%. Mas da forma ensinada no video é mais prática e rapida, pois assim não precisa ficar mudando o top ou o left ate acertar o centro do container, só comentei pois existe essa forma também.
meu codigo com a gambiarra:
#conteiner{
background-image: url(imagens/target001.png);
background-size: 100% 100%;
position: relative;
height: 96vh;
padding: 10px;
background-color: purple;
}
#conteudo{
background-image: url(imagens/target001.png);
background-size: 100% 100%;
position: absolute;
height: 200px;
width: 400px;
background-color: yellow;
left: 29%;
top: 39%;
}
Aee, eu ficava quebrando a cabeça pra centralizar as coisas auhsuahsua
dá pra por videos do youtube desta forma. põe a altura e tamanho do em 100% e se quiser aumentar ou diminuir o tamanho do video, so mexer no tamanho do box.
propriedade transform é massa demais.. deixou o estudo mais divertido... associe ela com eventos do mouse e veja a magia acontecer kkkk
Como assim? Combinar com :hover ?
No transform: translate( -200px, -100px); tbm centraliza a imagem.
Também funciona, mas isso só irá funcionar porque o tamanho do quadrado é 400px (largura) por 200px (altura). Se em qualquer momento essas medidas forem mudadas, o translate(-200px, -100px); não vai funcionar corretamente, por isso o ideal é usar translate(-50%); ou translate(-50%, -50%); pois dessa forma ele ficará sempre ao centro independente da medida que o quadrado for
@@ConradoSaud sim. Eu percebi isso. Mantive -50%.
Q showw!! eu subtraía a largura do maior pela largura do menor e divia por 2 kkkkkk
Uma dica boa é assistir todo o vídeo sem digitar nenhuma linha de código e depois rever o vídeo codificando e comentando esses macetes no código
faço o mesmo estava até usando o caderno, mas achei melhor algumas coisas serem colocadas dentro do próprio código em forma de comentário, um deles é essa da "relatividade" que ele comentou no vídeo coloquei na frente do próprio" position " na segunda vez de ver o vídeo e fazendo o código, outra coisa tentar fazer ao máximo sem por o vídeo pra rodar ir lembrando do que foi visto na primeira vez que viu ajuda bastante.
Só uma correção rápida, o valor padrão da propriedade position não é relative, mas sim o static.
I love you guanabara
Essa configuração não funcionou pra mim no google chrome:
transform: translate(-50% -50%)
Quando cliquei em "Inspecionar" e fui até o elemento, acusou invalid property.
Para resolver fiz assim:
transform: translateX(-50%) translateY(-50%);
Bacana esse metódo, mas ainda prefiro usar display-flex
Eu descobri uma outra forma: left: calc(50% - 250px);
top: calc(50% - 100px);
como meu width esta 500px, precisei descontar metade do elemento, isso tanto na largura como na altura. Sem entrar no quisito flex-box que tambem é outra alternativa.
Bom dia
02:49 » fundo golden eye
Achei que só eu tinha pensado isso.
😅😅😅
Eu fiz uns testes e consegui alinhar ao centro apenas colocando top e left com 30%
Olá áá!! 😗
Ainda estão produzindo o 4° mundo de python? Eu sei que isso é uma aula de HTML5, mas estou Há 1 ano esperando o 4° mundo 😢
Nao, ja era python
Não fica esperando não mano, faz outro curso, Guanabara gostaria que você fizesse isso ao invés de esperar tanto tempo.
Confirmaram esse ano, que no final de 2024 vai sair o módulo 4
@@EmlioGen Mano, eu comentei isso há dois anos atrás. E agora posso finalmente dizer que esse é uma das melhores notícias da minha vida 🥹
@@albertregodasilva3034 hahaha. Eu nem botei fé nessa continuação do curso de Python, e nesse novo módulo vamos mexer com banco de dados, ainda bem que já dei uma estudada nisso
Obs. não precisa colocar background-repeat: no-repeat se você colocar background-size: 100% 100%
os pdfs no repositório estão borradas as imagens
Boa tarde professor, daqui a um ano talvez o senhor me der aula no ensino médio da faetec Oscar Tenório 🤩
Pessoal, sei que estamos em 2024 já o curso é de 2021 kkkkkkkk , porem recentemente eu comecei o curso, mas não estou conseguindo executar esse exercício, simplesmente pq quando aplico posicionamento absoluto em qualquer elemento e aplico o top e left, ele some da tela e não aparece mais kkkkkk , ja tentei até com o transform e da no mesmo.
açguem pode me dixer onde encontro esssa imagen de alvo , não achei no repositorio
Outra solução é usar o display:grid; place-items:center ;
Ou flex box:Flex, align-items:center;
Calma, galera, ele abordará flex e grid no módulo 5
@@RafaelOliveira-ho4sb Mas vai demorar muito, vamos aprendendo para evolucao...
up
E n da pra usar um margin auto e display block?
Pelo visto o padrão do box não é relative, se não colocar 'position: relative;' na div container, a div do conteúdo não fica centralizada
É mesmo, dei uma pesquisada e o valor padrao para position é STATIC.
Bom dia! Pelo que percebi, nesse caso, só o container fica responsivo, o conteúdo não. É devido ao position absolute?
o container está se adaptando a tela devido ao background-size, que foi colocado como 100% da tela. É devido a medida relativa de porcentagem.
o comando 'transform: translate (-50% -50%) não é funcional
Por que?
Você esqueceu dar vírgula entre os dois 50%, transform: translate (-50%, -50%), também pode usar: transform: translateX(-50%) translateY(-50%);
@@jefferson8055 CARACA CARA! Eu bati a cabeça por horas por causa disso, reassisti e refiz tudo várias vezes. Não acredito nisso kkkkkkkkkkkkkk. Só percebi a falta da virgula lá por causa do seu comentário. Muito obrigado! kkkkkkkkkkkkkkkkkkkkkkkk
@@intensionado Já passei algumas horas assim com outros comandos...kk. Agora olho muito atentamente as vígulas, aspas simples, aspas duplas, ponto e vírgula, chaves, colchetes etx kkk
Oxi então é por causa da virgula😅. misericórdia 😂😂😂😂 vou tentar
dessa maneira não fica responsivo , quando coloca no celular fica com scroll , como resolver ?
Crei que é por causa do tamanho fixo de width.
Não deu certo a última parte do transform: translate(- 50% -50%);
Dica: Pesquisem sobre flexbox.
transform: translate(-50% ((((((",")))))) -50%); ... vai vendo alguém que passou 5 minutos testando coisas diferentes porque tinha esquecido da virgula.... cara klsksks rindo até 2023
fiz o msm kkkk fiquei uns 20 min, mandei p um amigo perguntando se ele conseguia e n achava, aí pensei em "testar" isso, qnd vi no video ja tinha aksjdnas
"Rindo até 2024"
Acho desnecessário e perda de tempo ensinar formas antigas de fazer algo atual, estou apoiando fielmente o curso e não tenho nada a reclamar, mas as vezes o professor enrola muito em certos assuntos...
#container {
background-image: url(./Exercícios/ex022-Imagens-de-Fundo/imagens/target001.png);
background-size: 100% 100%; /* (width) (height) */
background-color: purple;
height: 98vh; /* altura da view port (height) em relacionamento ao tamanho da janela de visualização (viewport)*/
padding: 10px;
position: relative;
}
#conteudo {
height: 200px;
width: 400px;
background-color: blue;
position: absolute; /* Vai definir a posição do conteudo em relação ao container */ /* left, right, top, bottom */
left: 50%;
top: 50%;
background-image: url(./Exercícios/ex022-Imagens-de-Fundo/imagens/target001.png);
background-size: 100% 100%; /* (width) (height) */
transform: translate(-50%,-50%);
/* transform: faz a imagem se mover em x e y*/
/* translate (X ( - left) (+ right), Y (- top) (+ bottom)) */
}
alguem tem algum grupo telegram para iniciantes em html css javascript?
ac
descobriu se tem ?
alguem consegue me explicar qual a diferença entre absolute e relative?