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

O contéudo da página está totalmente a direita

Referente ao curso HTML e CSS: Os seus primeiros passos

por Leonardo Lima
| 108k xp | 13 posts
Software Developer

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;
}
7 respostas
por Joel Spinelli
| 620.9k xp | 630 posts
Desenvolvedor Node e Front End

Boa tarde Leonardo,

Você poderia colocar o html também?

Obrigado.

por Leonardo Lima
| 108k xp | 13 posts
Software Developer

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>
por Joel Spinelli
| 620.9k xp | 630 posts
Desenvolvedor Node e Front End

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.

por Leonardo Lima
| 108k xp | 13 posts
Software Developer

Olha como está:

http://imgur.com/yutNKAw

por Joel Spinelli
| 620.9k xp | 630 posts
Desenvolvedor Node e Front End

Agora entendi melhor o problema, manda todo o CSS que você está usando

por Leonardo Lima
| 108k xp | 13 posts
Software Developer 
/*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;
}
solução!
por Joel Spinelli
| 620.9k xp | 630 posts
Desenvolvedor Node e Front End

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.