Como posicionar elemento (img) no CSS

6 de março de 2017 2 respostas

maestroman450 6 de março de 2017

Olá,

Sou iniciante em front end, e estou no básico ainda (CSS/HTML), porém estou há certo tempo tentando posicionar um elemento em meu site, sem sucesso.

Preciso ‘subir’ o elemento Oferta (img-promo) para que fique ao lado do banner (img-banner)

Segue código HTML:

<div class="img-banner">
    <img src="promo.jpg" alt "Banner">

 <div class="img-promo">
 <img src="oferta.jpg" alt "Promo">
 </div>
 </div>

Código CSS:

.img-banner img{

width: 550px;

height: 398px;

vertical-align: top;

padding-top: 10px;

position: absolute;

}

.img-promo img{

width: 190px;

height: 397px;

padding-left: 810px;

padding-top: 1px;

position: relative;

}

.img-promo{

float: right;

}

O ‘padding-top’ não funciona de jeito nenhum para deixar a imagem promo no mesmo nível vertical da imagem ‘banner’. Alguém sabe dizer onde estou errando?

Obrigado,

Att,
Vitor Santos

2 Respostas

icarometal 6 de mar. de 2017

cara, tente fazer duas divs separadas, uma pra promo, e outra pra banner, as duas dentro de uma terceira div sendo um container delas… tipo:

<div class="container">
        <div class="img-banner">
           <img src="promo.jpg" alt "Banner">
       </div>
       <div class="img-promo">
           <img src="oferta.jpg" alt "Promo">
       </div>
</div>

tente não deixar seis atributos width com valores fixos. coloque-os como %, tipo 80% pra img banner, e 20% pra promo, ou um percentual de sua preferência. coloque percentual também nas divs, e não somente no elemento img que elas contém.

coloque ambas as divs como float left, e com atributo position absolute.

vá fazendo testes nestes atributos, uma hora vc chega lá…

maestroman450 6 de mar. de 2017 1 like

Fala Icaro, blz?

Fiz como vc falou com as divs (somente a questão da porcentagem ainda nao estou conseguindo usar dessa forma, logo mais aprendo):

<div class="container midia">

    <div class="img-banner">
    <img src="promo.jpg" alt "Banner">
    </div>

 <div class="img-promo">
 <img src="oferta.jpg" alt "Promo">
 </div>

</div>

CSS:

.img-banner img{

width: 550px;

height: 398px;

vertical-align: top;

padding-left: 250px;

padding-top: 10px;

}

.img-banner {

position: absolute;

}

.img-promo img{

width: 190px;

height: 397px;

padding-left: 810px;

padding-top: 10px;

}

.img-promo{

float: top;

position: absolute;

}

Acredito que o que ajudou mesmo foi o ‘absolute’ em ambas as divs. Preciso entender melhor o uso desses atributos de ‘position’.

De qualquer maneira, muito obrigado pela atenção, Abrs

Criado 6 de março de 2017

Ultima resposta 6 de mar. de 2017

Respostas 2

Participantes 2

2 Respostas

Topicos relacionados