Duvida Iniciante em Front End #2461
Replies: 2 comments
-
Poderia colocar imagens pra explicar melhor o problema? |
Beta Was this translation helpful? Give feedback.
-
Pelo o que eu vi no seu codigo, quando você vai estilizar a classe “conteudo”, no CSS você esta passando a classe como se fosse um ID
mude o # por .
Eu fiz algumas alterações nas divs, que acho que pode te ajudar Na classe “conteudo” eu apliquei um display flex e flex-direction como column, agora, se você adicionar uma div abaixo da div “coluna”, ira fica abaixo de “consultorio” e “sobre nos” aqui está o HTML <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="estilo.css">
<title>Dra. Milene Mastrantonio</title>
<link rel="icon" type="image/x-icon" href="https://cdn-icons-png.flaticon.com/128/3304/3304567.png">
</head>
<body>
<!-- Cabeçalho -->
<div id="header">
<h1 align="center">Dra. Milene Mastrantronio da Rosa</h1>
<h3 align="center">011 Macedo Travessa - Abaetetuba, DF / 24123-947</h3>
</div>
<!--Barra de navegação-->
<div id="navbar" align="center">
<span class="bar"><a href="index.html">Início</a></span>
<span class="bar"><a href="agendamento.html">Agendamento</a></span>
<span class="bar"><a href="newsteller.html">Newsteller</a></span>
</div>
<div class="conteudo" align="center">
<div class="clonua">
<div class="consultorio">
<h2 align="center">Consultório</h2>
<img src="https://media.homify.com/tr:w-600,c-maintain_ratio,q-auto,rt-0,f-auto/p/photo/projects/5a2609f3-9439-42c5-87f5-c5a02aa82644.jpg"
width="600" height="350">
011 Macedo Travessa - Abaetetuba, DF / 24123-947
</div>
<div class="sobre-nos">
<h2 align="center">Sobre Nós</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor, tortor convallis sollicitudin
porta,
turpis risus dictum ipsum, nec hendrerit libero nisi sed sapien. Fusce in semper turpis. Proin vel diam
pharetra, vehicula tellus sed, molestie nunc. Maecenas nunc tortor, convallis volutpat massa non, mollis
mattis erat. Donec elementum est nec cursus varius. Mauris interdum justo suscipit enim interdum,
pellentesque mollis magna rutrum. Phasellus eu tellus ultricies, pharetra elit et, sollicitudin dolor.
Nullam sit amet tincidunt nunc. Proin vitae viverra quam. Nulla facilisi. Phasellus luctus egestas
lectus,
non rhoncus enim ultricies aliquam. Sed auctor non enim sit amet sodales. Quisque.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor, tortor convallis sollicitudin
porta,
turpis risus dictum ipsum, nec hendrerit libero nisi sed sapien. Fusce in semper turpis. Proin vel diam
pharetra, vehicula tellus sed, molestie nunc. Maecenas nunc tortor, convallis volutpat massa non, mollis
mattis erat. Donec elementum est nec cursus varius. Mauris interdum justo suscipit enim interdum,
pellentesque mollis magna rutrum. Phasellus eu tellus ultricies, pharetra elit et, sollicitudin dolor.
Nullam sit amet tincidunt nunc. Proin vitae viverra quam. Nulla facilisi. Phasellus luctus egestas
lectus,
non rhoncus enim ultricies aliquam. Sed auctor non enim sit amet sodales. Quisque.
</div>
</div>
<div>
<p>nova div</p>
</div>
</div>
<footer>
<div id="rodape">
<p> © Todos os direitos reservados. CRM 35670 | RQE 31932</p>
</div>
</footer>
</body>
</html> e aqui o CSS .conteudo{
background-color: rgba(255, 255, 255, 0.586);
display: flex;
flex-direction: column;
color: rgb(220, 153, 9);
font-family: 'Times New Roman', Times, serif;
font-variant: small-caps;
}
.consultorio, .sobre-nos{
float: left;
width: 45%;
color: rgb(184, 146, 23);
font-family: 'Times New Roman', Times, serif;
font-variant: small-caps;
font-size: medium;
text-align: center;
padding: 10px;
}
PS: o código é so um exemplo, você mudar do jeito que achar melhor Espero que isso consiga te ajuda a resolve o problema |
Beta Was this translation helpful? Give feedback.
-
Estou começando este mês o estudo e ja me deparei com uma confusão na hora de criar o meu primeiro site para praticar. Fiz questão de fazer tudo sem copiar do curso que estou fazendo, utilizando só as minhas anotações, porém percebo que fiz alguma confusão na estrutura da página, pois eu quero adicinar uma espécie de prévia do newsteller na pagina inicial logo abaixo da imagem do consultorio e sobre nós. Porém quando crio uma div e digito algo, as palavras saem abaixo da barra de navegação do site, ao invés de abaixo do conteudo das divs do consultorio e sobre nós como eu esperava. Sou bem iniciante e provavelmente deve ser um erro bobo, o site é relativamente bonitinho para o meu começo porém sei que o código esta mal estruturado, pois eu deveria conseguir me situar na estruturação. Desde ja agradeco a atenção, segue o link do repositorio: https://github.com/deviniciante2004/pratica1/tree/main
Beta Was this translation helpful? Give feedback.
All reactions