centralizar objeto no topo centralizado

[Fabio Morais 0]

Estou criando um Blog em WordPress e em todos os posts irei inserir um banner 300x250 lateral do Adsense e logo acima dos posts mais antigos ira aparecer um alerta informando que o post é antigo, mas algo deve ser alterado no CSS do alerta ou do banner, vejam os exemplos:

 

ERRADO - Aqui esta ficando desse jeito:

 

 

CERTO - Este é o jeito que estou tentando deixar mas não estou conseguindo:

 

 

Como vocês viram ai o que eu preciso é que o quadro amarelo fico centralizado acima do texto e acima do banner lateral também, lembrando que o quadro amarelo não pode ter largura fixa pois o template é responsivo.

 

Alguem pode me ajudar no CSS???

[luan-alves 1]

Estou criando um Blog em WordPress e em todos os posts irei inserir um banner 300x250 lateral do Adsense e logo acima dos posts mais antigos ira aparecer um alerta informando que o post é antigo, mas algo deve ser alterado no CSS do alerta ou do banner, vejam os exemplos:

 

ERRADO - Aqui esta ficando desse jeito:

 

 

CERTO - Este é o jeito que estou tentando deixar mas não estou conseguindo:

 

 

Como vocês viram ai o que eu preciso é que o quadro amarelo fico centralizado acima do texto e acima do banner lateral também, lembrando que o quadro amarelo não pode ter largura fixa pois o template é responsivo.

 

Alguem pode me ajudar no CSS???

 

 

Tem como colocar o código ?

Acho que o certo é colocara div do quadro amarelo separada desses dois.

 

Abraços

[ricardo_mc 19]

Olha, se você postar o link ou o código ajuda a sermos mais assertivos no feedback, mas ao que parece, é apenas uma questão de aumentar a largura do bloco amarelo e dar um clear:both por garantia.

 

Sem o código, não dá pra falar muito mais coisa.

[Fabio Morais 0]

Código do quadro de alerta amarelo:

 

.ikaz {
   margin-top: 0.5em;
margin-bottom: 0.5em;
   padding: 1em 1.5em 1em 5.5em;
   border-bottom: 2px solid #fff;
   border-top: 2px solid #fff;
   color:#444;
background: #fff6bf url(http://localhost/blog-teste/wp-content/plugins/old-post-notifier/ikaz.png) 2.2em center no-repeat; border-color: #ffd324;
}
.ikaz .kapat{ position:relative; float:right; top:-5px; right:-5px; }
.ikaz .kapat img{border:none; background:none;}
.ikaz a  {color: #817134;
}

 

Código do Banner:

 

.banner { 
   float: right; margin-left: 10px; background-image: url    (../images/banners/300x250-1.jpg); width: 300px; height: 250px;
}

[luan-alves 1]

Tenta tirar o float: right;

[Fabio Morais 0]

Tenta tirar o float: right;

 

Este float: right; ai é apenas para o X de fechar o quadro amarelo, se eu o retiro apenas o X muda de lugar no quadro.

[luan-alves 1]

Este float: right; ai é apenas para o X de fechar o quadro amarelo, se eu o retiro apenas o X muda de lugar no quadro.

 

entendi. Então tem como postar as divs também ?

[calasso 0]

Fábio,

Coloca no CSS do quadro amarelo:

 

position:fixed; 
z-index:9999;

 

Acredito que seja isso.

Falou

[Fabio Morais 0]

Fábio,

Coloca no CSS do quadro amarelo:

 

position:fixed; 
z-index:9999;

 

Acredito que seja isso.

Falou

 

Obrigado pela dica, mas não funcionou, se eu colocar position:fixed e z-index:9999 o quadro amarelo desaparece :upset:

[Fabio Morais 0]

Alguem tem mais alguma alternativa de solução? ainda não consegui resolver :wacko: