Oi, galera eu estou com problema no meu código, não estou conseguindo colocar o comando <p>
dentro do código <main>
quando eu vejo o código no navegador ele não aparece
HTML:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemplo Parágrafos</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main>
<img src="images/image-product-desktop.jpg" alt="perfume">
<h3>P E R F U M E</h3>
<p>AAAAAAA</p>
</main>
<h1 >Gabrielle <br>Essence Eau <br> De Parfum </h1>
</body>
</html>
CSS:
@charset "UTF-8";
body {
background-color: #F3EAE3;
}
main {
background-color: white;
margin: 140px;
border: 10px;
border-radius: 10px;
box-shadow:1px 1px 6px black ;
box-sizing: border-box;
padding:0px ;
height: 560px;
width: 765px;
margin: auto;
}
img {
top: 0;
left: 0;
border-radius: 10px;
width: 374px;
}
h3{
padding: 10px;
margin: -534px;
text-align: center;
margin-left: -360px;
font-family:'Montserrat';font-size: 22px;;
color: rgba(105, 105, 105, 0.822);
}
h1 {
padding: 73px;
margin: -548px;
text-align: start;
margin-left: 625px;
font-size: 43px;
color: rgba(0, 0, 0, 0.829);
}
p {
padding: 73px;
margin: -548px;
text-align: start;
margin-left: 625px;
font-size: 43px;
}
Alguém sabe o ERRO?
O problema está relacionado ao uso do estilo CSS, especificamente nas margens negativas no seu código. O elemento <p>
dentro de <main>
está sendo deslocado para fora da área visível devido às configurações de margin.
Aqui está o que você pode fazer para corrigir isso:
-
Evite margens negativas desnecessárias. Margens negativas podem causar elementos a saírem da área esperada.
-
Estilize
corretamente dentro de <main>
. Ajuste os valores de margin e padding para que o parágrafo fique visível e bem posicionado.
HTML:
> <!DOCTYPE html>
> <html lang="pt-br">
> <head>
> <meta charset="UTF-8">
> <meta name="viewport" content="width=device-width, initial-scale=1.0">
> <title>Exemplo Parágrafos</title>
> <link rel="stylesheet" href="style.css">
> </head>
> <body>
> <main>
> <img src="images/image-product-desktop.jpg" alt="perfume">
> <h3>P E R F U M E</h3>
> <p>Esse é um exemplo de parágrafo dentro do elemento main.</p>
> </main>
> <h1>Gabrielle <br>Essence Eau <br> De Parfum </h1>
> </body>
> </html>
CSS:
> @charset "UTF-8";
>
> body {
> background-color: #F3EAE3;
> }
>
> main {
> background-color: white;
> margin: auto;
> border: 10px;
> border-radius: 10px;
> box-shadow: 1px 1px 6px black;
> box-sizing: border-box;
> padding: 20px;
> height: auto;
> width: 765px;
> }
>
> img {
> display: block;
> border-radius: 10px;
> width: 100%;
> height: auto;
> }
>
> h3 {
> text-align: center;
> font-family: 'Montserrat', sans-serif;
> font-size: 22px;
> color: rgba(105, 105, 105, 0.822);
> margin: 20px 0;
> }
>
> h1 {
> text-align: start;
> margin: 20px auto;
> font-size: 43px;
> color: rgba(0, 0, 0, 0.829);
> }
>
> p {
> font-family: 'Arial', sans-serif;
> font-size: 16px;
> color: #333;
> margin: 20px 0;
> text-align: justify;
> }
Ajustes importantes:
-
Removi margens negativas que causavam deslocamento indesejado dos elementos.
-
Adicionei padding e margin consistentes para <p>
e outros elementos.
-
Usei display: block para a imagem, garantindo que ela respeite o fluxo de layout do documento.
Abra o navegador novamente e recarregue o arquivo. O parágrafo agora deve aparecer corretamente dentro do <main>
.
1 curtida
Eu estava fazendo um projeto assim:
Com esse código
Pelo visto deu tudo certo. Se precisar de ajuda em outra coisa é só chamar.
Eu estava falando que essa imagem de cima e um projeto que estou fazendo, porem quanto eu vou ter que mudar muito o código, para ficar do jeito que eu quero mais valeu ae
Este tópico foi fechado automaticamente 3 dias depois da última resposta. Novas respostas não são mais permitidas.