Pare de chutar e aprenda a float e sua trupe #04
HTML-код
- Опубликовано: 29 сен 2024
- Aqui mostro como funciona as propriedade float: left e float: right na prática :-)
Se você prefere ler o conteúdo pode acessar o post no medium: / pare-de-chutar-e-apren...
⁉️Dúvidas⁉️ cola no Discord da CollabCode: bit.ly/discord-...
#frontend #css
Contatos:
🐥 Twitter da CollabCode - / collabcodetech
👩🏻💻 Facebook da CollabCode - / collabcode
🐥 Twitter do Marco Bruno - / marcobrunobr
🚀 Linkedin do Marco Bruno - / marcobrunobr
👨🏻💻 Facebook do Marco Bruno - / marco.bruno.br
Estudei 1 ano front-end na Califórnia e nem de perto minha professora deu tanta atenção - com tantos detalhes - ao tema. Achei simplesmente sensacional a sua abordagem. Parabéns e obrigado!
Caramba! Fiquei mô feliz. Obrigado pelo feedback e espero continuar conseguindo passar meu conhecimento. Sobre esse vídeo de float e o de position: absolute eu quero fazer um com conteúdo extra, tem algumas coisas que só vi depois de gravado que deixei de falar
Pode ter certeza que ganhou mais um na audiência cativa! Gratidão pela publicação disso tudo!
Além de dominar o assunto consegue transmitir com uma didática sem igual, obrigado pelo conteúdo!
Até agora a única explicação completa sobre as propriedades do CSS que encontrei na Internet... Baita vídeo cara, parabéns !!!!!
Valeu cara! Fico feliz que tenha gostado do rolê
chocado com a didática, que dom!
man tu e o cara to no inicio da programacao e n tava entendendo essa propriedades todas de posicoes, e tu ta me ajudando muito, valeu cara +1sub +like
putz mano, que explicação foda!
continue assim, muita gente agradece,
Caramba! Fico bem feliz que tenha gostado, espero que ajude sim. Também estou fazendo um esforço grande pra trabalhar na divulgação do vídeo, se puder ajudar será ótimo :-)
Super aula! Conheci o canal hoje procurando uma solução para um problema que estou tendo com TS/React e gostei muito da qualidade do conteúdo do canal!
Excelente didática!
show! explica muito bem
Obrigado! Estudo todos os dias uma melhor forma de explicar
por isso que pra fazer menus a ordem invertia e eu não entendia o por que kkk...otimo video
cara, muito bem explicado, entendi facil o que eu estava em duvida...top!!
Aí sim!
muito boa a aula !!!! Vlw to me matando nessas propriedades kkkkkkkk
Aí sim! Fico feliz de estar de ajudando a entender essa coisas de posicionamento
CollabCode, sua didática é muito boa e fácil de entender... parabéns eu estou aprendendo muito com vc !!!
Muito boa sua explicação! Muito obrigado!
sabe muito! obrigado pela explicações!
Cara tu salvou minha vida...
Oloko! Fico feliz em ajudar
Muito obrigado!!!
Muito bom, parabéns
Eu acho que eu preciso de 3 pilulas vermelhas ou mais pra entender esse começo kkkkkkk
Vlw, eu tava meio drogado nessa bagaca de float kkkk
brabo dms!!
Como faço para colocar no centro? Sem ser na direita ou esquerda e criar um espaçamento entre eles?
Boa noite, Marco. Tudo bem? Por uma questão de curiosidade, eu queria muito tirar uma dúvida que não estou conseguindo resolver. Criei um código simples, inclusive, vou postá-lo abaixo. Minha questão é a seguinte: quando eu informo o float: left; para alinhar os itens do menu um ao lado do outro, dou um clear: left; no elemento que vem em seguida, que, no caso, é o H1.
Mas é aqui que entra um problema que não consigo identificar, por isso a pergunta. Ao dar um margin-top no H1, simplesmente o efeito não funciona, não sei dizer o porquê. Gostaria muito que se pudesse me auxiliar por meio de uma explicação, ficaria muito grato.
*{
padding: 0;
margin: 0;
vertical-align: 0;
list-style: none;
border: 0;
}
Impacto Digital
div{
padding: 20px;
width: 80%;
margin-left: 10%;
margin-right: 10%;
background-color: #FFFAFA;
box-sizing: border-box;
columns: 3;
column-rule-style: solid ;
column-rule-width: 1px;
column-rule-color: rgba(0, 0, 0, 0.1);
justify-content: space-around;
column-width: 30px;
}
shrink:hover {
}
.paragrafo{
width: 60%;
color: gray;
font-family: arial;
padding-left: 10px;
hei
}
fieldset{
margin-top: 20px;
border: solid 1px rgb(70,130,180,0.1);
border-left: none;
border-right: none;
border-bottom: none;
}
Pratos do Dia
O vídeo fornece uma maneira poderosa de ajudá-lo a provar seu argumento. Ao clicar em Vídeo Online, você pode colar o código de inserção do vídeo que deseja adicionar. Você também pode digitar uma palavra-chave para pesquisar online o vídeo mais adequado ao seu documento.
DATA - HORÁRIO
Pena que estou vendo esse vídeo apenas agora, na era dos flebox, grid, etc...
Eu acho em estranho. Deveria esconder se voce tem uma div em cima e a de baixo com float a de baixo deveria esconder totalmente a de cima.
Concordo! Mas infelizmente ou felizmente não é isso que acontece
Eu sofro mto com alinhamento vertical. mesmo ja conseguindo fazer com flexbox. Mas gostaria mto de um hack css pra isso pq alguns navegadores ainda não tão 100% pra o flexbox. ensina isso!
Acho que mostrei isso no sexto vídeo da série para de chutar, foi nesse vídeo aqui: ruclips.net/video/f8H-wstL0nU/видео.html
@@MarcoBrunoDev vdd! acabei de assistir esse video. Muito bom mesmo, principalmente pq vc deixou dinâmico usando translateY(-50%). Pra vc ter ideia como eu fazia, eu usava top: calc( 50% - 100px), ou seja, eu sempre tinha que saber o width do elemento e informar metade dele. parabéns man, curti muito! 👏👏
@@jupitersaturno também fiz isso durante um tempo, muito tempo... Kkkkkk
Como faço para centralizar os quadrados?
.classe-do-seu-quadrado {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
porém para entender o que está fazendo assista a aula dele "Pare de chutar e aprenda a position: absolute #06"
@@diegooliveira1083 Obrigada, moço
eu queria esconde uma imagem atrás da outra, mas não funciona jsfiddle.net/od2ev14z/2/
ah mano, impossível entender essa desgraça de float, definitivamente, desisto desse mundo de desenvolvedor web por causa desta propriedade confusa, aleatória...
Olá. Por favor, não desista :-)
Me diz o que não entendeu que posso tentar de explicar melhor?
Kkkkkkkk
Nunca vi uma explicação tão boa e clara para uma propriedade tão utilizada. Valeu 😉 continuarei acompanhando!
Ingrid Rauany legal. Estou postando conteúdo toda segunda, terça e sexta. Por enquanto estou conseguindo....kkkk
Sem dúvida nunca vi uma explicação como essa 😂
Pra dominar o float no começo é complicado, mas sua explicação foi no ponto certo, n conhecia a propriedade overflow, mas agora ja sei!! Os vídeos estão ótimos, valeu pela explicação, Marco. Posta sempre que puder, Abraço!
Fico feliz de ter te ensino algo novo ;-)
Vou tentar postar 3 vídeos por semana, até o final do ano. Toda segunda, quarta e sexta.
Excelente ! Muito bem explicado ! ! Parabéns pelos vídeos ! ! !
Muito bom!!
Explicação detalhada.parabens
Parece com o cara do filme "O poço". : )
kkkkkkkkkkkkkkkkkkkkkkkkkkkkkk
Manooo kkkkkkkkk
Eu sabia q ja tinha visto o rosto dele em algum lugar kkkkkk ..
Meu caramujo!
Obrigado pelo conteúdo cara, ajudou muito aqui.
ola meu amigo, aprendi de verdade,,,, acabou minha agonia,,,, obrigado!!!!! Mas ficou uma duvida, justo a que estava procurando! Como faço para não deixar o float não inverter os elementos no rigth! Agradeço! Inscrito e likeado...
Usando float você terá que inverter no HTML a order, mas você pode usar display flez
Marco Bruno, que aula, parabéns. Muita didático, muito claro, muito simples. Vc tem a manhã. Seguindo.
Valeu! Fico feliz que você tenha gostado
Estava a dois dias tentando entender, ufa. Valeu!!
Blz Bruno ? Assisti esse vídeo 2 vezes e minha dúvida esta em 4:04 do video não consegui entender porque a div flutua e o texto não acompanha, pode me da uma explicação melhor ?
Desculpa não consigo explicar melhor do que no vídeo. Falhei mano :-/
Extremamente bem expicado. Parabéns pela didática.
Caraca mané... muito bem explicado.
E também as posições position relative e absolute criam um contexto acima do contexto do float.
Isso mandou muito! Bem observado :-)
Oi, senhor Marco Bruno. Parabéns pelos vídeos. Me diz uma coisa: No seu projeto "Menu Mobile", seria necessário uma imagem com extensão .svg ?? Estou fazendo com jpg e não está funcionando. Vc tem alguma opinião pra me dar ?: Hoje é dia 15-jan-2022.
Não paro de pensar no quanto tempo eu teria economizado com posicionamento se tivesse assistido esses vídeos antes
Fico feliz de saber que você gostou!
Eu não aprendi ainda, mesmo tendo estudado um video sobre. Aprendi que ele é usado para fazer aquele estilo de texto do lado de uma imagem + o CLEAR. Só não sei se usamos o float no elemento , ou
Entendiii!!!!
🤯🤯🤯
Eu tava tentando fazer aqueles menus que ficam a direita da tela... Mas depois que eu fazia isso ficava tudo torto na página...
Agora q eu entendi que ele coloca as coisas embaixo da div que está com float 🤯🤯🤯
Na minha tentativa de reprodução do exemplo, o conteúdo dentro do ficou praticamente todo dentro de uma única linha. Alguém saberia me explicar o porquê?
Simplesmente OTIMA explicação,OBRIGADO
Fico feliz que tenha gostado :-)
Qual a fonte que você aprendeu isso ? Estamos cansados de conteúdos ou livros cheios de enrolação. Alguns dizem que querem expandir o conhecimento dessa área, mas geralmente querem mesmo é que fiquemos presos em um looping infinito de dependência, não gerando nem de longe conteúdos parecidos como estes seus.
Conheci o canal hoje vendo esse video e ja curti bastante sua didatica e forma de ensinar, muito melhor q cursos pagos por ai. Parabens pelo trabalho e obrigado pelo otimo conteudo
E pra que flutuar. Um elemento se. Oque está atrás dele não será exibido?
você é foda demais cara, pqp, só para ter ideia, estou em javascript avançado já, e não sabia usar direito o float no css
Uma coisa que eu não entendi, se o container vermelho estava no mesmo contexto do parágrafo, porque o conteúdo dele ficou atrás do texto do parágrafo?
Olha como isso é verdade
Muito massa a sua didática de ensino. Parabéns. Sua explicação com a ajuda da mão, facilitou muito o entendimento.
Agora aprendi essa malandragem... css feliz... vlw sangue
Aí sim! Fico muito feliz de saber disso :-)
Parabéns! Aula top demais, como sempre! Tirou todas as minhas dúvidas.
Caramba, isso que é uma aula de verdade!!! Parabéns +1 inscrito!!!
Realmente essa propriedade é punk para aprender o funcionamento, acho mais difícil do que POO.
Excelente explicação! Elucidou todas as minhas dúvidas em relação ao assunto. Didática maravilhosa.
Valeu Luma!!
@@MarcoBrunoDev eu que agradeço 😊
Cara, sua explicação é muito top. Parabéns.
Valeu!
Ahhh o cara olha todos os comments.. olha o meu tbm kkk .. óTima aula.
Tento olhar todos :-)
De vez enquando passas uns! Fico feliz que tenha gostado da aula :-)
Mano seus vídeos são muito bons!!!!!!!!!!! vc ainda tem o Telegram que vc fala no vídeo?
O float deveria somente flutuar alterando uma div ou um p para display inline block por exemplo. Nao deveria vir pra frente.
ceeeeélookkoo, antes a melhor didática era somente o Guanabara, agora é o Guanabara e o Marco, parabéns cara.
Boa noite! Estou criando um site com a barra fixa, mais quando vou na barra de rolagem o elementos passa por cima da barra fixa quando que tem que passar embaixo.
Tem sim você pode usar o z-index para controlar que ficará na frente ou atrás. Se tiver mais dúvidas cola no discord da collabcode que a galera troca mais conhecimento por lá, comentário só eu leio e de vez enquando demoro para ler.
discord.gg/FP5UaAG
@@MarcoBrunoDev Obrigado
Gosto do seu estilo de aula cara muito didático continua assim obrigado pelo excelente conteúdo ;)
Cara, seus vídeos são muito bons!
Estou fazendo um curso de HTML | CSS e senti que precisava conhecer melhor sobre display e float. Cheguei no seu vídeo e você tirou todas as minhas dúvidas e mais um pouco. Parabéns pela didática e pelo conhecimento.
Porque quando eu coloco uma cor de fundo no documento a que apliquei no article não aparece? (E como faz para aparecer)
Esse tem talento!
Que aula incrível, que didática. Muito obrigado!
Que série excelente. Parabéns demais!!
Obrigado! Fico feliz que tenha gostado, deu bastante trabalho para montar ela mas valeu a pena :-)
Que aula absurda de boa
💜 😍 valeu demais Lucas
excelente!
Ótimo vídeo, parabéns!
Obrigado :-)
Float vs IE6/IE7, eu vivi essa batalha.
Triste batalha que vencemos
minha unica frustracao com esse video e nao poder curtir umas 100 vezes
slk. Como eu não conheci esse canal antes. top demais. Finalmente entendi.
Encontrei esse vídeo por acaso. Tô me matando pra aprender essas propriedades de posicionamento e sua didática é mesmo mto boa! Continua postando... por favor!!!!! =)
Faço vídeos toda semana! Além de livros de segunda a quinta começa às 22hrs. E tenho um curso que a segunda turma começará no primeiro trimestre de 2019, a proposta do curso é formar pessoas do zero pra serem Devs Front End Plenos :-)
Se quiser receber novidades do curso e a data de lançamento entra no site: dofrontaoend.collabcode.training
muito bem explicado, continue sempre postando esses tipo de conteúdos.
Você vende algum curso online amigo?
Não, mas dou aulas free e aovivo pela twitch.tv/marcobrunodev
É como se fossem as camadas quando trabalhamos com CorelDraw.
Meu Deus que explicacao excelente..... Meus parabens !!!!!
como colocar 5 imagens uma do lado da outra e centralizar elas no meio? com float
Sua didática é ótima!!! Além de dizer o que a propriedade faz, você ainda explica o porquê e também faz a prova real. Dessa forma podemos ter uma visão completa do assunto. Parabéns pelo conteúdo!
Muito bom... parabéns..... continua fazendo mais vídeos com essa didática.....tá muito show
Fico feliz que tenha gostado Erik. Minha ideia é fazer 3 videos por semana (segunda, quart e sexta). Semana passada eu consegui fazer os 3 vídeos, quero conseguir nessa semana também. :-)
Melhor que muitos cursos pagos!
Adorei o vídeo, explicação sensacional e complementou o que tinha de conhecimento e ao mesmo tempo algumas dúvidas. A próxima dúvida é, onde saberei qual elemento aplicar o "clear:both"? Elementos que vem após o elemento 'float'?
sim, por exemplo eu criei dois elementos que usei o float e logo tinha um footer eu usei no caso no footer para ele ficar em baixo ocupando 100%
Você tem algum curso de HTML e CSS?
muito bom parabéns aprendi muito bem
Obrigado!
Mano, você explica muito bem! =D
Irmão... que explicação fera.... acho que são pouco q sabem disso.
a sua explicação foi certeira na dúvida de muitos, e olha que já tinha procurado em livros e video aulas. Show sua explicação. Parabéns e continue com os videos por favor ;)
Estou continuando fazendo videos, mas eu outro formato :-)
Logo logo vou lançar um eBook e divulgar nas redes sociais :-)
Muito bom sua didática e a edição do vídeo ficou show
Valeu, Marcelo. Amanhã tem mais um vídeo :-)
Cai nessa playlist através do @Dev Soltinho e vou te falar, melhor didática que já vi no YT. Parabéns você é fera.
Valeu mano, fico feliz que você tenha gostado :-)
Não sei se minha dúvida é pertinente pq não sou da área mas tô mexendo agora. Vc falou que o float deixa um elemnto em cima de outro de boas ( exceto conteúdo ) e ensinou mexer pra direita e esquerda e se eu colocar uma margem ele afasta dessa margem. Mas se eu quiser descer o elemento alguns px como eu faço?
Encontrei no seu próximo vídeo a resposta!! Top:50px; ( eu já tinah feito mas nada tinha mudado) ai coloquei a position: relative;
cara que explicação fantástica, parabéns pela didática simples e eficaz, me ajudou muito!
Muito boa sua explicação.
Vlw. Fico feliz que tenha gostado. Aparece as 22hrs que tem conteúdo ao vivo e você pode tirar suas dúvidas de forma feliz :-)
Aprendemos nessa aula, a não usar o float kkk
seloco explicação fenomenal
💜
Parabens pelo conteudo. Perfeito!