Como eu poderia colocar uma imagem ao lado dessa já existente?
Como eu poderia colocar uma imagem ao lado dessa já existente?
Olá existem várias maneiras de fazer isso, poderia usar uma lista, display inline-block um float ou position,
por exemplo
<ul>
<li>
<img src="minha-imagem.png>
</li>
<li>
<img src="minha-imagem.png>
</li>
</ul>
ul li {
display: inline-block;
}
manda seu código para eu te ajudar :D
O código que estou tentando colocar a imagem, só pra aprendizagem mesmo, é o do curso HTML e CSS: Os Seus Primeiros passos.
HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="receitas.css">
</head>
<body>
<img id="banner" src="banner.png">
<h1 id="titulo">Receita - Mousse de Maracujá</h1>
<nav>
<ul>
<li><a href="http://www.caelum.com.br">Mousse de Maracujá</a></li>
<li><a href="http://www.caelum.com.br">Torta de Chocolate</a></li>
<li><a href="http://www.caelum.com.br">Geléia de Morango</a></li>
<li><a href="http://www.caelum.com.br">Pavê de Limão</a></li>
</ul>
</nav>
<section id="topo">
<figure>
<img src="foto.jpg"/>
<figcaption>Mousse de Maracujá</figcaption>
</figure>
</section>
<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>
</body>
</html>
E o CSS:
body{
background-color: #F5F0DC;
font-family: Helvetica, Arial, sans-serif;
width: 1340px;
margin-right: auto;
margin-left: auto;
}
figure{
background-color: white;
width: 450px;
text-align: center;
padding: 15px;
font-family: 'Comic Sans MS', cursive;
border: 1px solid black;
box-shadow: 5px 5px 3px rgba(0,0,0,0.7);
margin: auto;
}
figure:hover{
-webkit-transform:rotate(-5deg);
}
h2{
background-color: #B3A742;
background: -webkit-linear-gradient(top,#9C8F67, #C7BE9B 30%);
background: -moz-linear-gradient(top,#9C8F67, #C7BE9B 30%);
background: -o-linear-gradient(top,#9C8F67, #C7BE9B 30%);
background: -ms-linear-gradient(top,#9C8F67, #C7BE9B 30%);
border-radius: 15px;
border: 1px solid black;
padding: 5px;
color: #FFFFFF;
}
#topo{
text-align: center;
}
nav{
float: left;
width: 200px;
}
#conteudo{
float: right;
width: 740px;
}
#banner{
top:0;
right: 0;
position: fixed;
}
Bom dia!
Isso Ai treinar é tudo no HTML, com relação ao seu problema inseri uma nova imagem de mousse de maracujá ao lado da já existente, vou explicar no código abaixo.
Primeiro dentro da section Topo, adicionei um ID para cada imagem do mousse, assim é possível estilizar individualmente.
<section id="topo">
<figure id="mousse-esquerda">
<img src="foto.jpg"/>
<figcaption>Mousse de Maracujá</figcaption>
</figure>
<figure id="mousse-direita">
<img src="foto.jpg"/>
<figcaption>Mousse de Maracujá</figcaption>
</figure>
</section>
Na sequência adicionei aos ID's um float em cada um deles e uma margin para não ficarem grudados.
#mousse-esquerda{
float: left;
margin-left:20px;
}
#mousse-direita {
float:left;
margin-left:20px;
}
por ultimo e não menos importante criei uma div, chamada receita, o objetivo dela é fazer o papel de um container para manter os objetos de lista da receita no lugar.
<div id="receita">
<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>
</div>
Adicionei na div receita uma um propriedade do css chamada clear:both; está propriedade não permite que nenhum dos objetos da receita tenham outros objetos flutuando em ambos os lados do documento.
#receita{
clear:both;
}
foi um prazer ajudar abçs :D