Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Kripke

Problemas com imagens

Por , em Desenvolvimento frontend

Recommended Posts

Kripke    0

Kripke
Postado
Estou com um problema ao tentar colocar imagens lado a lado dentro de uma box branca, as imagens não ficam corretamente posicionadas. Como devo proceder?


Aqui vai uma parte do que eu estava tentando fazer.

O código abaixo está errado, as imagens estão verticalmente posicionadas, eu gostaria de coloca-las horizontalmente mas não sei como consigo.

Agradeço quem puder ajudar.



<html lang="pt-br">

<head>



<title> Unnamed </title>

<style type="text/css" media="all">


#page {

margin-top:10px;

margin-left:200px;

margin-right:200px;

margin-bottom:50px;

padding: 20px;

border-radius: 2px;

box-shadow: 4px 4px 10px 5px #d3d3d3;

background-color:white;

}


page img {

margin: 5px;

padding: 10px;

border: 1px solid #0000ff;

height: auto;

width: auto;

float: left;

text-align: left;

}


page img img {

display: inline;

margin: 5px;

border: 1px solid #ffffff;



</style>


</head>



<body style="background-color:#ADC2EB;">


<div id="page">

<div class="img">

<a target="_blank" href="http://www.google.com.br"><img src="download.jpg" width="183" height="275"></a>

<div class="desc">Add a description of the image here</div>

</div>

<div class="img">

<a target="_blank" href="http://www.google.com.br"><img src="images.jpg" width="183" height="275"></a>

<div class="desc">Add a description of the image here</div>

</div>

</div>




</body>

</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

erickcouto    6

erickcouto
Postado

ve se agora esta certo

<!DOCTYPE html>
<head>

<meta charset="UTF-8" />
<title> Unnamed </title>
<style type="text/css" media="all">
 
#page {
margin-top:10px;
margin-left:200px;
margin-right:200px;
margin-bottom:50px;
padding: 20px;
border-radius: 2px;
box-shadow: 4px 4px 10px 5px #d3d3d3;
background-color:white;
}
 
figure{
margin: 5px;
padding: 10px;
border: 1px solid #0000ff;
height: auto;
width: auto;
display: inline-block;
text-align: left;
}


</style>
 
</head>
 
 
<body style="background-color:#ADC2EB;">
 
<div id="page">
<div class="img">
<figure>
<a target="_blank" href="http://www.google.com.br"><img src="download.jpg" width="183" height="275"></a>
<div class="img">
	<figcaption>DESCRIÇÃO</figcaption>
</figure>

<figure>
<a target="_blank" href="http://www.google.com.br"><img src="images.jpg" width="183" height="275"></a>
	<figcaption> DESCRIÇÃO</figcaption>
</figure>
</div>
</div>
 
 
 
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

erickcouto    6

erickcouto
Postado

Opa que nada precisar tamo ai ...

 

No seu caso o problema maior estava no display, para ficar lado a lado as imagens, coloque o display: inline-block

 

Ja a tag figure serve para marcar a imagem, e o figcaption é a legenda da imagem, e funciona dentro da tag <figure> ... Tags do HTML5.

 

Marque como resolvido caso tenha dado certo ... vlwww

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito