html-css
html-css copied to clipboard
gustavoguanabara
Capitulo 19 -alguém sabe resolver esse problema?
Primeiramente antes de tudo, sou péssimo em explicar, mas vamos lá.
Tava aqui vendo as aulas do capítulo 19 e tava dando uma brincada no ex022, imagem003.html, eu usei o dobro de divs do video e fiz 2 colunas na tela, na esquerda, a imagem de fundo normal, e na direita, a imagem de fundo com as marcações de posicionamento, pra mostrar o exemplo mais claro.
div.bloco{
background-image: url(imagens/wallpaper002.jpg);
display: inline-block;
height: 200px;
width: 49%;
border: 2px solid black;
border-radius: 30px;
}
e
div.bloco2{
background-image: url(imagens/wallpaper003.jpg);
display: inline-block;
height: 200px;
width: 49%;
border: 2px solid black;
border-radius: 30px;
}
Até ai tava tudo indo certo, só que quando eu escrevo algo dentro dessas div ela desalinha as caixas
Usei o inspecionar, e não tem nenhuma margem, de borda só tem a 2px das próprias divs, já tentei diminuir o width das divs, usei o * { } pra tirar a margem geral e continua a mesma coisa
Poderia dar certo usando outro tipo de display, como o Grid ou o Flex, mas só estou usando o que foi ensinado ate o momento.
Se quiserem testa e ver se conseguem arrumar o problema é so baixar o código que eu fiz no meu repositório. E como eu disse, só fiz assim pra brincar, se tiver algo errado ali ou se souberem como deixar o código mais "clean" estou aberto a dicas e sugestões .
irmão, é o seguinte. Para cada par de imagens tu tem que criar uma caixa externa que só contenha elas duas, como se fosse uma lista. Daí depois tu tem que mudar os displays dessas caixas externas e dos blocos para flex.
Segue aí os prints do código e do resultado. OBS: não formatei os textos, mas os que estão no resultado serve como teste.👍
É vei.... pelo jeito a única maneira era só mudando o display mesmo. Eu não quis usar pra fazer só com o que ele ensinou até o momento. Vlw a ajuda ai mano
o widht ta em porcentagem pq eu dividi a tela bem no meio pras div, 98% dividido pras 2 divs e o 2% é da barra de rolagem, ai no caso ta em porcentagem pq eu queria dividir exatamente em 2 colunas, mas ja testei com PX tbm, deu mais trabalho pq tive que fazer no olho mas deu na mesma.
@JoseEduardoCosta comportamento estranho de um elemento inline. Na real, isso parece coisa de elemento inline mesmo (inclui inline-block).
Da uma passada no StackOverflow e pergunte, lá a galera pode lhe explicar bem melhor esse caso "bizarro". Mande o link da pergunta aqui caso queira, fiquei curioso a esse caso ^-^
Já tentou criar uma div#container e colocar um width:100vw
Já tentou criar uma div#container e colocar um width:100vw @GustavoCarvalhoRodrigues continua a mesma coisa. Volto a repetir: é facilmente corrigido usando display flex, só que queria corrigir problema com os recursos que ele passou na época cronológica do vídeo, o que pensando bem o VW e VH ele ensinou beeem depois do cap19 '-'
Cheguei nesse exercício também. Faria a mudança feita pelo https://github.com/Miguelesss. aplicarei o mesmo modelo, e configurar o texto.
