[HTML+CSS] Centralizar site e colocar texto ao lado da imagem | por Lucas Brelaz

Подписаться 361

Просмотров 93 тыс.

50% 1

🔴 Meu Curso de HTML e CSS para iniciantes está com SUPER DESCONTO!
✅ Você terá acesso à um treinamento de 1 hora e meia com o passo a passo para você criar o seu primeiro site mesmo que você não saiba nada de programação.
〰
💵 Por apenas R$12,22, acesse agora! 👇🏻
👉🏻 lab.rck.fun/curso-html-css
--
========================================================
--
Salve, pessoal! Fiz essa mini aula dividida em 3 partes:
1 - 00:00 Revisando conceitos básicos;
2 - 04:00 Centralizando conteúdo;
3 - 05:25 Alinhando texto ao lado da imagem.
========================================================
Código da Aula: codepen.io/lucasbrelaz/pen/Wz...
========================================================
Espero que te ajude!
--
HTML+CSS Centralizar site e colocar texto ao lado da imagem por Lucas Brelaz

Наука

Опубликовано:

16 май 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 127

@lillianferreira6867 Год назад

Estava com dificuldade para posicionar a imagem a esquerda do texto, com esse vídeo, deu super certo. Obrigada e parabéns!

@camilaleal15 3 года назад

Me ajudou DEMAAAAIS! você ensina de forma super clara e simples, muito obrigada!

@DiegoBlister 2 года назад

Lucas, cê não é gente, cê é um anjo! Muito obrigado!

@dare3008 3 года назад

Q isso q vídeo foda mano, me ensinou coisa pra krl em pouquissimo tempo. Obrigado!

@rafasousa7962 4 года назад

Adorei, ajudou d+ Muito obrigada!!

@maicommendes8957 8 месяцев назад

ajudou bastante

@thaismarquestt 2 года назад

Me ajudou MUITO!! Obrigada pela ótima explicação!

@kyoshinkai9050 2 года назад

Muito obrigado cara, tu n tem noção no quanto tu me ajudou, vlw man!

@jhonlennon3508 Год назад

O video que eu estava procurando ! muito bom , parabens !!

@walaceaparecidofaria 3 года назад

Valeu, meu velho. Tô voltando aos front-end da vida e não tava conseguindo me lembrar desse esquema de Div. Você clareou minha mente!

@LucasBrelaz 2 года назад

Que massa, velho!! Fico feliz em saber que contribuí pro seu aprendizado. E bem vindo de volta pro mundo front-end! 😆

@lucasrenan8 3 года назад

vlw brother, objetivo, tava com essa duvida a dias e em 5 min vc me resolveu.

@leticiacampos7362 6 месяцев назад

Ótima explicação, me salvou cara !!!

@PamelaF2 3 года назад

Eu estava tentando resolver isso a dias! Muito obrigada por me dar uma solução!!! No final achei o erro no meu código, mas a sua solução também foi ótima

@pauloricardocarvalholadeir6955 7 лет назад

Ótimo Lucas. Bem bacana e bem objetivo...! Obrigado..!

@alexandresousa6400 6 лет назад

Obrigado parceiro! Me ajudou bastante!

@lauravieira5566 Год назад

me tirou uma super dúvida! Obrigada!

@kelianneferreira-freihaut2582 7 лет назад

Oi Lucas, o vídeo é ótimo, parabéns! Tem algum ensinando como fazer o posicionamento do texto em cima da foto?

@raipereira4194 Год назад

ajudou valeu, salvou mais de mil pessoas

@reginaldoalimoconsura9918 4 года назад

Valeu cara + 100 vezes... Me ajudou bastante.

@renataemanuele3177 5 лет назад

Me ajudou muito, obrigada!

@lucianolima4232 6 лет назад

Ajudou muito irmão, vlw

@gonzalogjuka7220 5 лет назад

fuiste el unico que me sirvio, gracias por tu utilidad y simpleza! Saludos!

@ANALISTA350 Год назад

QUE DESUS LHE ABENÇOE!

@Lotussss 4 года назад

Ajudou muito de vdd!!!

@rubiavitoriamoreira7990 3 года назад

MUIIIITO OBRIGADAAAAA

@railsonmateus4802 3 года назад

obg mano estava com dificuldade nessa parte e me ajudou muito +1sub

@guilhermelima4594 2 года назад

Muito bom, amigo !

@Brindeco 4 года назад

muito obrigado me ajudo bastante

@ruan764 11 месяцев назад

ajudou muitoo

@bobdeus4 5 лет назад

Olá, bacana o vídeo! Eu tenho um site e utilizo Wix pra editar, você sabe dizer como qual código usar pra uma imagem de logo ficar sempre a direita no topo com uma pequena margem a esquerda e ao topo? Que código usar? Obrigado.

@silmarasantoslourenco3900 3 года назад

Me ajudou muito

@dynamicformulas6296 7 лет назад

Obrigado Lucas, ajudou muito, já deixei o like e o inscrito, espero ver mais aulas suas.

@LucasBrelaz 7 лет назад

Que bom que gostou. Obrigado pelo reconhecimento, fico feliz em ter ajudado! Já estou com algumas ideias, vou planejar o conteúdo e postar em breve. :)

@smurfsmurf6442 2 года назад

esse video é antigo mas ainda ajuda muito, voce consegue me dizer qual a funcao do display block e table, pq eu tentei sem eles para ver oq fazia e o site ficou igual. eu pesquisei e n encontrei coisas muito uteis sobre eles.

@paulovitoralves5846 2 года назад

No caso, tem como fazer esse processo sem o css?

@jonatasrosamoura9666 4 года назад

Vlw mano, vc é Picolo!

@venizanascimento8989 4 года назад

Me ajudou muito😀

@fabricioguilhermo339 7 лет назад

Obrigado pela aula, ajudou bastante!

@LucasBrelaz 7 лет назад

Fico feliz em saber. Obrigado por comentar!

@LindembergueSilva 3 года назад

Muito show

@viniciusgomes6689 2 года назад

poderia ensinar como colocar subir o texto pra cima centralizei tudo , ficou tudo no meio , e na minha ultima linha de codigo escrevi um texto , queria subir ele apenas , como faço?

@yancagabrielle4776 7 лет назад

Você explica muito bem. Deveria fazer mais vídeos!

@LucasBrelaz 7 лет назад

Obrigado, Yanca! Pretendo fazer mais vídeos, sim! Se puder me ajudar a escolher o conteúdo do primeiro curso aqui do canal, são 3 perguntas de marcar, é rapidinho. Só acessar: goo.gl/forms/EbJd3h8wivYtFJbt1

@gabrielqmatos23 4 года назад

Muito boa vídeo aula, ansioso pelas próximas, grava um brawhalla tbm

@namisanws2340 5 лет назад

valeu!

@destruidor665 4 года назад

sou o 119 inscrito em 2019 no dia 14/07/2019 as 15 horas 1 2 minutos. kkk

@Jamesfdsilva 8 лет назад

Ola Lucas, na verdade não :(, o que eu gostaria de ver se é possivel é iniciar o texto alinhado do lado da imagem e caso o texto se estenda mais que a imagem ela ao invés de mantar alinhado com a primeira linha, a frase que vai passar da imagem acabe indo para baixo da imagem, ou seja, ele inicia ao lado da imagem e quebra para baixo da imagem conforme o tamanho do texto.

@kellycrystina6818 5 лет назад

me ajudo muitooooooooooo!!!!! sz

@pedroterra3079 5 лет назад

Beleza!!!

@alexandreloboeletric9128 8 лет назад

valeu

@yaakov.v2615 2 года назад

Preciso de ajuda

@NiloCB 4 года назад

muito bom

@kaiyakooda3092 3 года назад

amigo que extensão é essa que vc usa, pra digitar div.texto e ele colocar

@LucasBrelaz 3 года назад

Fala, Kai! Então, isso é nativo do editor que utilizo que é o VS Code. Se vc digitar "div.texto", sem aspas, e em seguida apertar a tecla TAB do seu teclado, vai ser criada uma div com a class "texto".

@jefersonrafael9265 6 лет назад

Olá Lucas, ótimo vídeo! Me ajudou muito, mas gostaria de saber se tem como fazer isso para várias imagens e vários textos(usando a mesma class para várias imagens e usando a mesma class para vários textos). Ou tenho que definir um id para cada imagem e para cada texto? Obrigado desde já.

@LucasBrelaz 6 лет назад

Obrigado por assistir, Jeferson! Sobre sua pergunta... É possível sim. Não precisa criar IDs. As mesmas classes podem ser usadas em vários elementos HTML, sem problema nenhum, inclusive é o recomendado pois você reaproveita código.

@thiagosales8664 10 месяцев назад

Thanks!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! Your Vídeo helps too much #Lucas Brelaz

@CarlosAntonioS.L 4 года назад

se tem whATS

@corretorrodrigues5104 6 лет назад

tem como colocar uma imagem ao lado de outra... ajudem-me por favor

@LucasPointBlank1 8 лет назад

vlw ajudo pra caramba

@LucasBrelaz 8 лет назад

+Lucas B Que bom! Obrigado por assistir!

5 лет назад

Amigão, eu estou tentando colocar uma tabela do lado da outra, se eu usar esses mesmos passos que você falou, eu vou conseguir? Parabéns pelo vídeo, abraço!

@LucasBrelaz 5 лет назад

Opa, obrigado! =) Você pode usar o exemplo da aula sim que vai conseguir. Disponibilizei o código no codepen, você pode testar direto no navegador ou copiar. Dá uma conferida: codepen.io/lucasbrelaz/pen/WzPYjG

5 лет назад

Lucas Brelaz muito obrigado mano

@biancagbb6330 8 лет назад

Lucas, gostaria de saber como coloco uma faixa de imagem como fundo (não é na pagina toda), uma foto do lado direito e texto no esquerdo?

@LucasBrelaz 8 лет назад

Olá, Bianca! Se você puder me mandar um exemplo do que você quer, fica mais fácil pra eu entender e lhe ajudar. Pode ser o endereço de um site que faz uso do que queres fazer, ou um print. Obrigado por assistir!

@maisabonelivieirapolicici4526 2 года назад

Olá lucas, por que você usou ("ponto" no corpo) ".corpo"?

@LucasBrelaz 2 года назад

Oi Maisa, então, o "ponto" no inicio dos nomes lá no arquivo do CSS serve pra poder definir estilos pras classes que coloquei no arquivo HTML, na propriedade "class". Sempre que escrevo "class" com um valor lá no HTML, significa que estou declarando uma classe que vou estilizar lá no CSS. Então, pro meu arquivo CSS saber que estou me referindo à uma classe, devo iniciar o nome com um "ponto", ficando assim ".corpo". Respondi sua dúvida?

@cec8169 3 года назад

E como que faz pra pôr várias imagens empilhadas com textos do lado?

@LucasBrelaz 3 года назад

Então, se eu entendi certo o que vc deseja, é só vc duplicar todo o código a partir da div com a classe "conteudo". Cada div "conteudo" terá uma imagem e um texto ao lado.

@aplicacoesinovadoras904 2 года назад

@Jamesfdsilva 8 лет назад

Ola, ótimo vídeo! Gostaria de te perguntar como eu faço para que o texto continue abaixo da imagem?,

@LucasBrelaz 8 лет назад

Obrigado, James! Para o texto ficar abaixo da imagem é só remover o "display: table-cell" e o "float: left;" tanto da classe imagem quanto da classe texto, no seu CSS. E para ficar alinhado, remova também o "margin-left: 20px;" da classe texto.

@Jamesfdsilva 8 лет назад

Obrigado Lucas, agora vendo minha pergunta percebi que a fiz errado, no caso eu quero que o texto comece alinhado no meio da imagem(por exemplo) e quebre para baixo, é possível? muito obrigado por me responder suas vídeo aulas são otimas!

@LucasBrelaz 8 лет назад

Muito obrigado pelo elogio, James! Fiz uma imagem pra saber se entendi o que você quer fazer. Dá uma olhada e vê se é isso: sites.google.com/site/lucasbrelazhome/youtube_exemplo1.gif?attredirects=0 Tem dois exemplos, veja qual é o que mais se aproxima do seu caso. Caso não seja isso que você queira, me manda uma imagem pra eu ter como referência pra poder te ajudar.

@JustAnotherGuyBloger 5 лет назад

@@LucasBrelaz Não, o que ele quis dizer é o seguinte: A imagem fica na esquerda, o texto na direita, mas conforme o texto atinge o final da imagem o texto "quebra" e o texto vai para de baixo da imagem, desse jeito: i.stack.imgur.com/dioLI.png Eu gostaria de saber exatamente isso porem com a imagem posicionada no lado direito da tela...

@LucasBrelaz 5 лет назад

@@JustAnotherGuyBloger Entendi. Caso seja somente uma imagem com um texto que vai quebrar pra uma altura maior que a imagem, a propriedade float vai resolver. Use "float: right" pra imagem ficar a direita ou "float: left" pra ela ficar a esquerda.

@jobims.almeida999 7 лет назад

qual aplicativo e esse que voce usou? vlw ajudou bastante

@LucasBrelaz 7 лет назад

Está se referindo ao editor de códigos? Se for, o nome dele é Sublime Text 2. Obrigado por assistir!

@pombagiratoria 2 года назад

Apesar de vc falar Rapidão kkkk suas explicações são muito boas. Massa!

@LucasBrelaz 2 года назад

hahaha muito obrigado pelo feedback, Thais! Falar rápido é meu natural e assisto coisas aceleradas 😂 Fico feliz em ter ajudado!

@marcelomariniello7493 4 года назад

Quando eu aumento o tamanho da div do texto para que ela ocupe todos espaço à direita e caiba mais texto, ela passa para baixo e não funciona. Como posso resolver isso?

@LucasBrelaz 4 года назад

Marcelo, provavelmente você está colocando um valor que está ultrapassando o valor da div pai que envolve a imagem e o texto. A largura da div do texto somada com a largura da imagem não deve ultrapassar o valor da div pai.

@CarlosAntonioS.L 4 года назад

SE TIVER ME PASSA FAZENDO FAVOR POR QUE ESTOU COM UMA DUVIDA

@killozila 4 года назад

Muito bom o video mas eu tentei alinhar 2 links um na esquerda e o outro na direita e nao sei faço, da pra fazer ??

@LucasBrelaz 4 года назад

Dá sim mas de outra forma. Pra esse caso você pode colocar os 2 links numa div pai e adicionar nesse pai um estilo com "display: flex; justify-content: space-between;" que vai funcionar.

@killozila 4 года назад

@@LucasBrelaz blz, vou tentar aqui muito obgg pela dica

@manumoreira8874 6 лет назад

Qual seu zap?

@juniormalvino 5 лет назад

Uma duvida! Não é uma boa usar padding ao invés de trabalhar com a margin? Usando a imagem e é o texto dentro de uma div só e criando duas class. Uma para tratar a imagem e outra para tratar o texto.

@LucasBrelaz 5 лет назад

Fala, Junior! Beleza? Você se refere a usar padding-left ao invés do margin-left que eu utilizo aos 8:40 do vídeo?

@juniormalvino 5 лет назад

@@LucasBrelaz isso exatamente. claro que continuando usando o float para ocupar o espaço.

@juniormalvino 5 лет назад

Obrigado Por responder.

@LucasBrelaz 5 лет назад

Entendi. Podem parecer a mesma coisa mas são para fins diferentes. No padding o espaçamento é interno do elemento, tanto que ele altera a largura final do elemento, então se eu quiser afastar o texto da imagem eu devo usar margin para dar essa margem. Eu fiz um exemplo de como o padding altera a largura de um elemento. codepen.io/lucasbrelaz/pen/oPMepz Em azul temos um elemento com 500px e em vermelho temos outro elemento que eu gostaria que tivesse 500px também porém coloquei um padding de 30px, logo o tamanho final vai acabar sendo 560px devido a soma do padding-left (30px) e padding-right (30px).

@juniormalvino 5 лет назад

Muito obrigado, por esclarecer minhas dúvidas.

@izzytreet6094 5 лет назад

Achei bacana aprendi algumas funções novas, mas não deu certo. Não consigo alinhar com a imagem.

@LucasBrelaz 5 лет назад

Oi, Izzy! Verifica se existe uma div pai que envolve o texto e a imagem. Essa div pai deve ter no css um "display: table", e o os filhos (div texto e div imagem) devem conter um css "display: table-cell" e "float: left". E é super importante não esquecer de definir uma largura pra div que contém o texto, como "width: 300px" que usei no video. Você pode consultar o código da aula aqui: codepen.io/lucasbrelaz/pen/WzPYjG Obrigado por assistir!

@izzytreet6094 5 лет назад

Lucas Brelaz não, o meu não tinha uma diva pai, não sei oq eu fiz de errado, então apaguei tudo e refiz tudo. Aí deu certo. Obrigada.

@aplicacoesinovadoras904 2 года назад

@janilsonoliveira5144 4 года назад

Não dar para ver nada, vc poderia dar o zoom para podermos ver melhor o que vc está explicando.

@gilliardpacheco1815 7 лет назад

CARA EU NÃO ESTOU ENTENDENDO COMO COLOCAR UMA LETRA PTA DIREITA E TROCAR A COR DA LETRAS, QUE NÃO ESTÁ PEGANDO

@LucasBrelaz 7 лет назад

Olá, Gilliard! Eu não ensino isso no vídeo mas você pesquisar sobre as propriedades: text-align para alinhar um texto à esquerda, direita ou centro. E a propriedade color para mudar a cor da fonte.

@lidianecarvalho6034 2 года назад

Tendi nada

@gabrielsiqueira7768 5 лет назад

ta sem audio

@LucasBrelaz 5 лет назад

Olá, Gabriel. O áudio está funcionando corretamente. Talvez você tenha deixado no mudo sem perceber.

@Palindeks 7 лет назад

O meu não subiu mesmo, mas amigo não serio mais facil apenas colocar as letras manualmente ao lado da imagem?

@LucasBrelaz 7 лет назад

Olá, Paulo. Assista novamente com calma e refaça, você pode ter deixado de fazer algo sem perceber. Repare se definiu a largura (width) e o float. Quando você diz colocar "manualmente" seria inserir o texto direto na imagem com programas como photoshop, por exemplo? Se for, fica mais difícil de manter caso precise alterar algo no texto e pra ajustar num design responsivo, pois dificultaria a leitura em dispositivos móveis onde as telas são menores.

@Palindeks 7 лет назад

A entendi então era este o motivo, eu quis dizer por a imagem depois o texto tipo imagem margin left 300 e texto margin left 303.... Descubri o problema kkkkkkk na verdade era bem simples mesmo, fui rever e so tinha que por as palavras em letra maiuscula, o programa nao estava achando a img e nem o texto kkkk. Mas o seu video foi muito bom, entendi.

@LucasBrelaz 7 лет назад

Ah, entendi. Mas se for colocar dessa maneira, o texto vai ficar ao lado da imagem porém vai ficar como nos 7:25 do vídeo. Por isso o uso do float. Que bom que entendeu. Obrigado por assistir e pelo feedback! hehe

@Palindeks 7 лет назад

Sim, e não seria um site responsivo, quando diminuir a tela ele ia bugar.....

@jhonnyes100 7 лет назад

Olá, boa tarde. irmão como faço para inserir esse código no meu site:

@LucasBrelaz 7 лет назад

Olá, Jonas! O seu código está com erro na tag do link. Substitua pelo que coloquei aqui no jsfiddle jsfiddle.net/xdzdnubp/ e, claro, substitua pelo selo do seu site em "Incluir código HTML".

@jhonnyes100 7 лет назад

Mas onde que coloco? dentro do "body" ou dentro do "footer". Qual é a estrutura que devo criar para colocar esse código dentro?

@jhonnyes100 7 лет назад

nesse programa que voce passou, ao inserir o codigo html, automaticamente gera o CSS? não está gerando.

@LucasBrelaz 7 лет назад

Jonas_C Sousa você insere onde desejar que apareça o seu selo. É um código simples de link com Javascript, vai funcionar em qualquer parte do corpo do site.

@LucasBrelaz 7 лет назад

Jonas_C Sousa Não é gerado automaticamente. Eu mesmo escrevi o CSS, como visto no vídeo. A única coisa que não escrevi durante o vídeo foi o background do body que eu mesmo havia definido antes de iniciar o vídeo.

@1infocefetni343 8 лет назад

porque diabos todo mundo coloca alguma coisa em latim no texto em todas as video aulas?

@LucasBrelaz 8 лет назад

+1INFO CEFET NI Olá, bom, no meu caso, eu precisava de um texto para exemplificar nessa aula e o editor de texto que usei no vídeo gera parágrafos de Lorem Ipsum de uma maneira muito simples e rápida, eu digito Lorem e aperto a tecla TAB e pronto. Mas o que é Lorem Ipsum? é uma simulação de um texto para preencher layouts, você pode ler mais a respeito no site oficial: br.lipsum.com/ Obrigado por assistir! Espero que tenha gostado :D