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

Dúvida posicionamento dos elementos e da imagem

Referente ao curso HTML e CSS: Classes, posicionamento e Flexbox, no capítulo Ajustando o espaçamento e atividade Projeto final

por Ruan Shizuo Miyagaki
| 29.6k xp | 62 posts

Oi, boa tarde, tudo bem ? Eu tenho uma dúvida sobre como separar os elementos da página e da imagem, eu coloquei a propriedade margin-right: 300px, e a imagem foi para a esquerda, mas right não seria a direita? Eu fiquei confuso nessa parte, e outra coisa é que não sei como colocar print aqui no fórum, queria mostrar o print pra mostrar o que eu queria fazer no meu projeto, tentei colocar o pirnt aqui mas não sei se ele foi, a outra questão é que não estou conseguindo alterar o posicionamento da imagem, por exemplo, eu queria desccer um pouco mais a imagem, para isso eu usei a propriedade margin-bottom: 30px, para ver se ela descia, a imagem desceu mas o texto, o conteúdo da página também desceu junto, e queria saber como descer somente a imagem. Eu estou editando essa mensagem pq não sei como colocar o código bonitinho pra vcs darem uma olhada, ele está vindo todo quebrado, a tag strong não está indo, tenho dúvida nessa parte tbm rsrs. Conseguem me ajudar por favor? Muito obrigado! Vou deixar aqui embaixo o código do HTML e do CSS:

HTML: 

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portifolio</title>
<link rel="stylesheet" href="style.css">

Venha aprender a programar em um outro nível com o melhor ensino do mundo

A escola TOP 1 Technology Academy 

        <p>
            Olá, sou a linguagem HTML , estou aqui para te ensinar os passos para ser programador, desenvolvedor front end, com um dos melhore ensinos do mundo na melhor escola, com o melhor ensino para vc aprender de forma dinâmica e entenda todos os fundamentos da linguagem.
        </p>
        <div class ="apresentacao__links">  
        <a class = "apresentacao__linkar_links" href="https://instagram.com/aprendendohtmlmuito mais">Instagram 
        </a>
        <a class = "apresentacao__linkar_links" href="https://github.com/htmlaprendendosuper">Github
        </a>
        </div>
        </section>
        
        <img class="imagemtreinamentoteste" src = "imageHTML.png"  alt="Logo do HTML">
        </main>
       <footer></footer>
</body>

CSS:

  • { margin: 0; padding: 0;

} body { height : 100vh; box-sizing: border-box; background-color: black; color: white;

} .destaque_maximo_titulo { color: orange; } .tituloEmDestaque { color: darkgreen } .subtitulo_destaque { color: blue; } .subtitulo { color: darkorchid; } .apresentacao{

align-items: center;
display: flex;
justify-content: space-between;
}

.apresentacao__conteudo { width: 615px; display: flex; flex-direction: column; gap: 40px; } .apresentacao__links { display: flex; justify-content: space-between; } .apresentacao__linkar_links { background-color: aquamarine; width: 280px; text-align: center; border-radius: 16px; font-size: 24px; padding: 10.0px 0; text-decoration: none; color: black; } .imagemtreinamentoteste { width: 300px; height: 300px; margin-right: 300px;

}

2 respostas
solução!
por Estudante
| 568.5k xp | 1338 posts

Oi

Em relação à propriedade margin-right, ela define a margem direita de um elemento. No seu caso, você definiu margin-right: 300px para a imagem, o que fez com que ela se deslocasse para a esquerda. Isso ocorre porque a margem é aplicada no lado direito do elemento, empurrando-o para a esquerda.

Para posicionar a imagem à direita, você pode utilizar a propriedade float: right. Dessa forma, a imagem ficará à direita e o texto fluirá ao seu redor. Por exemplo:

.imagemtreinamentoteste {
    width: 300px;
    height: 300px;
    float: right;
}

Quanto à sua segunda dúvida, se você deseja mover apenas a imagem para baixo sem afetar o conteúdo da página, pode utilizar a propriedade margin-bottom na imagem. No entanto, é importante lembrar que essa propriedade também afetará o posicionamento dos elementos abaixo. Uma alternativa é envolver a imagem em um contêiner e aplicar a margem a esse contêiner, em vez de diretamente na imagem. Dessa forma, apenas a imagem será deslocada para baixo. HTML:

<div class="imagem-container">
    <img class="imagemtreinamentoteste" src="imageHTML.png" alt="Logo do HTML">
</div>

CSS:

.imagem-container {
    margin-bottom: 30px;
}

.imagemtreinamentoteste {
    width: 300px;
    height: 300px;
}

Sobre a formatação do código no fórum, você pode utilizar a sintaxe de código com três crases (`) no início e no final do código para que ele seja exibido em formato formatado. Por exemplo:

```html
<!DOCTYPE html>
<html lang="pt-br">
...
</html>
por Ruan Shizuo Miyagaki
| 29.6k xp | 62 posts

Valeu pela ajuda, de verdade, agora deu certo, muito obrigado mesmo.