Como posicionar elemento (img) no CSS

[maestroman450]

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

[icarometal]

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]

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