Olá, estou tendo problemas na formatação da página. Todo conteúdo está a direita, eu configurei o CSS conforme as aulas e o código está igual
#conteudo{
float: right;
width: 740px;
}nav{
float:left;
width: 200px;
}
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Olá, estou tendo problemas na formatação da página. Todo conteúdo está a direita, eu configurei o CSS conforme as aulas e o código está igual
#conteudo{
float: right;
width: 740px;
}nav{
float:left;
width: 200px;
}
Boa tarde Leonardo,
Você poderia colocar o html também?
Obrigado.
Joel,
<head>
<meta charset="UTF-8">
<title>Nousse de Maaracuja</title>
<link href="estilo.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<img src="C:\Users\Leonardo\Desktop\arquivos\banner.png" id="banner"/>
<h1 id="titulo">Receita - Mousse de Maracuja</h1>
<nav>
<ul>
<li><a href="#">Mousse de Maracuja</a></li>
<li><a href="#">Pavê</a></li>
<li><a href="#">Pudim</a></li>
<li><a href="#">Torta de morango</a></li>
</ul>
</nav>
<section id="conteudo">
<figure>
<img src="C:\Users\Leonardo\Desktop\arquivos\foto.jpg" alt="Mousse de Maracujá">
<figcaption>Foto do Mousse de Maracuja</figcaption>
</figure>
<h2>Ingredientes</h2>
<ul>
<li>1 lata de leite condensado</li>
<li>1 lata de creme de leite</li>
<li>1 lata de suco de maracujá(aproximadamente 4 maracujás)</li>
<li>1 pacote de gelatina incolor</li>
<li>Sementes de maracujá(para decoração)</li>
</ul>
<h2>Modo de Preparo</h2>
<ol>
<li>Hidrate a gelatina na água, e depois dissolva em banho-maria</li>
<li>Misture todos os ingredientes em um liquidificador(exceto as sementes de maracujá) </li>
<li>Bata os ingredientes no liquidificador, em potencia máxima, por 2 minutos</li>
<li>Coloque o mousse em um recipiente e decore-o com as sementes de maracujá</li>
<li>Coloque o mousse na geladeira, deixando em refrigeração por aproximadamente 4 horas</li>
<li>Devore!</li>
</ol>
<h2>Informações Nutricionais</h2>
<table id="tb-nutrientes">
<thead>
<tr>
<th>Nutrientes</th>
<th>Porção(60g)</th>
<th>%VD</th>
</tr>
</thead>
<tbody>
<tr>
<td>Valor Calórico(Kcal)</td>
<td>225,37</td>
<td>9,01</td>
</tr>
<tr>
<td>Carboidratos(g)</td>
<td>40,56</td>
<td>10,82</td>
</tr>
<tr>
<td>Proteínas(g)</td>
<td>5,97</td>
<td>8,53</td>
</tr>
<tr>
<td>Gorduras Totais(g)</td>
<td>4,36</td>
<td>5,45</td>
</tr>
<tr>
<td>Gorduras Saturadas(g)</td>
<td>2,71</td>
<td>10,83</td>
</tr>
<tr>
<td>Colesterol(mg)</td>
<td>16,68</td>
<td>5,56</td>
</tr>
<tr>
<td>Fibras Alimentares(g)</td>
<td>0,30</td>
<td>0,99</td>
</tr>
<tr>
<td>Cálcio(mg)</td>
<td>142,21</td>
<td>17,78</td>
</tr>
<tr>
<td>Ferro(mg)</td>
<td>0,26</td>
<td>1,89</td>
</tr>
<tr>
<td>Sódio(mg)</td>
<td>91,69</td>
<td>3,82</td>
</tr>
</tbody>
</table>
</section>
</body>Então Leonardo, é mais ou menos isso que deve acontecer, você está formatando para que tenha um menu lateral e na mesma altura no menu você tenha a image do mousse, fiz um teste aqui somente com esses trechos que você me passou e ficou ok. O seu menu ficou para o lado também? Aqui somente os trechos que você me mandou deram certo
<head>
<meta charset="UTF-8">
<title>Nousse de Maaracuja</title>
<link href="estilo.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<style type="text/css">
#conteudo{
float: right;
width: 740px;
}
nav{
float:left;
width: 200px;
}
</style>
<img src="C:\Users\Leonardo\Desktop\arquivos\banner.png" id="banner"/>
<h1 id="titulo">Receita - Mousse de Maracuja</h1>
<nav>
<ul>
<li><a href="#">Mousse de Maracuja</a></li>
<li><a href="#">Pavê</a></li>
<li><a href="#">Pudim</a></li>
<li><a href="#">Torta de morango</a></li>
</ul>
</nav>
<section id="conteudo">
<figure>
<img src="C:\Users\Leonardo\Desktop\arquivos\foto.jpg" alt="Mousse de Maracujá">
<figcaption>Foto do Mousse de Maracuja</figcaption>
</figure>
<h2>Ingredientes</h2>
<ul>
<li>1 lata de leite condensado</li>
<li>1 lata de creme de leite</li>
<li>1 lata de suco de maracujá(aproximadamente 4 maracujás)</li>
<li>1 pacote de gelatina incolor</li>
<li>Sementes de maracujá(para decoração)</li>
</ul>
<h2>Modo de Preparo</h2>
<ol>
<li>Hidrate a gelatina na água, e depois dissolva em banho-maria</li>
<li>Misture todos os ingredientes em um liquidificador(exceto as sementes de maracujá) </li>
<li>Bata os ingredientes no liquidificador, em potencia máxima, por 2 minutos</li>
<li>Coloque o mousse em um recipiente e decore-o com as sementes de maracujá</li>
<li>Coloque o mousse na geladeira, deixando em refrigeração por aproximadamente 4 horas</li>
<li>Devore!</li>
</ol>
<h2>Informações Nutricionais</h2>
<table id="tb-nutrientes">
<thead>
<tr>
<th>Nutrientes</th>
<th>Porção(60g)</th>
<th>%VD</th>
</tr>
</thead>
<tbody>
<tr>
<td>Valor Calórico(Kcal)</td>
<td>225,37</td>
<td>9,01</td>
</tr>
<tr>
<td>Carboidratos(g)</td>
<td>40,56</td>
<td>10,82</td>
</tr>
<tr>
<td>Proteínas(g)</td>
<td>5,97</td>
<td>8,53</td>
</tr>
<tr>
<td>Gorduras Totais(g)</td>
<td>4,36</td>
<td>5,45</td>
</tr>
<tr>
<td>Gorduras Saturadas(g)</td>
<td>2,71</td>
<td>10,83</td>
</tr>
<tr>
<td>Colesterol(mg)</td>
<td>16,68</td>
<td>5,56</td>
</tr>
<tr>
<td>Fibras Alimentares(g)</td>
<td>0,30</td>
<td>0,99</td>
</tr>
<tr>
<td>Cálcio(mg)</td>
<td>142,21</td>
<td>17,78</td>
</tr>
<tr>
<td>Ferro(mg)</td>
<td>0,26</td>
<td>1,89</td>
</tr>
<tr>
<td>Sódio(mg)</td>
<td>91,69</td>
<td>3,82</td>
</tr>
</tbody>
</table>
</section>
</body>Claro que nesse código não estou carregando nenhuma imagem e nem uma séria de css que ajudaria a ficar melhor, porém é um teste que montou um esqueleto do que será a página no final.
Agora entendi melhor o problema, manda todo o CSS que você está usando
/*Deixa para esquerda o menu*/
nav{
float:left;
width: 200px;
}
/*Determina a cor de fundo dos itens do menu, espaçamento*/
nav ul li{
background: #C7BE9B;
padding: 3px;
margin-bottom: 5px;
}
/*Remove decoração dos links que estão no menu*/
nav ul li a{
color: black;
text-decoration: none;
}
nav ul{
list-style: none;
padding-left: 0px;
}
nav ul li:hover{
background: #9C8F67;
}
#banner{
top: 0;
right: 0;
position: fixed;
}
/*Remove toda a decoração dos links e deixa azul*/
a{
color:blue;
text-decoration:none;
}
/*Desloca todo conteudo dentro da secton para direita*/
#conteudo{
float: right;
width: 740px;
}
/*Quando passa o mouse em links ele fica sublinhado*/
a:hover{
text-decoration: underline;
}
/**/
figure{
text-align: center;
padding: 15px;
background: white;
width: 400px;
font-family: 'Comic Sans MS', sans-serif;
border: 1px solid black;
box-shadow: 5x 5px 3px rgba(0,0,0,0.7);
}
/**/
figure:hover{
-webkit-transform: rotate(-5deg);
}
/**/
body{
background-color: #F5F0DC;
font-family: Helvetica, Arial, sans-serif;
margin: auto;
}
/**/
#titulo{
text-align: center;
}
/**/
h2{
padding: 5px;
background:-webkit-linear-gradient(top, #9C8F67, #C7BE9B 30%);
color: #FFFFFF;
border-radius: 15px;
border: 1px solid black;
}
/**/
#tb-nutrientes{
border: 1px solid black;
width: 40%;
margin: auto;
}
/**/
#tb-nutrientes th{
background-color: #F8EA6B;
}
/**/
#tb-nutrientes tr:nth-child(odd){
background-color: #F8EAB3;
}
/**/
#tb-nutrientes tr:nth-child(even){
background-color: #FFFFFF;
}Olá Leonardo,
adiciona no body o trecho width: 940px;
ficando assim:
body{
background-color: #F5F0DC;
font-family: Helvetica, Arial, sans-serif;
width: 940px;
margin: auto;
}Esse trecho é mencionado nos textos da aula 4.