Como sobre por imagem no css3

coloca position absolute e ajusta a posição com margin

mostra o css do slide ai e a divinha que ta ai ...

Poste o código CSS da sua div "geral". Dica: Se você utiliza Google Chrome ou Firefox, você pode abrir o console (CTRL+SHIFT+I) e ir testando as propriedades CSS em tempo real através do painel STYLES.

HTML:

<div id="banner-blog">
 <div>
 <h2> BLOG </h2>
 </div>

</div>
 <div id="geral-blog">
 <div id="interna-blog">
 <h3>UMA HISTÓRIA A SER CONTADA</h3>

 <div class="post-blog">
 <div id="post-noticias">
 <img src="img/img-post-blog.jpg" width="630" height="311">
 <div id="cont-noticias-blog">

 </div>
 </div>
 </div>
 </div>

 <div id="menu-geral-blog">
 <h3>CATEGORIAS</h3>
 <ul class="menu-blog">
 <li><a href="">NOTICIAS</a></li>
 <li><a href="">AGENDA DE EVENTOS</a></li>
 <li><a href="">CATEGORIA X</a></li>
 <li><a href="">CATEGORIA Y</a></li>
 </ul>
 <h3>POSTS RECENTES</h3>
 <ul class="recentes">
 <li><a href="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque venenatis lobortis orci a venenatis. Nam accumsan dignissim quam convallis pellentesque. Pellentesque a vehicula sem, in luctus leo</a></li>
 <li><a href="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque venenatis lobortis orci a venenatis. Nam accumsan dignissim quam convallis pellentesque. Pellentesque a vehicula sem, in luctus leo</a></li>
 <li><a href="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque venenatis lobortis orci a venenatis. Nam accumsan dignissim quam convallis pellentesque. Pellentesque a vehicula sem, in luctus leo</a></li>
 <li><a href="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque venenatis lobortis orci a venenatis. Nam accumsan dignissim quam convallis pellentesque. Pellentesque a vehicula sem, in luctus leo</a></li>
 </ul>

</div>
</div>

CSS:

#banner-blog{
background:url(../img/img-banner-cabecalho-tecnovigilancia.jpg);
height:142px;
width:100%;

}
#geral-blog{
clear:both;
width:990px;
margin:0 auto;
}

#geral-blog #interna-blog {

width:630px;
border:1px solid #000;
margin-top:35px;
float:left;
}

#geral-blog #interna-blog .post-blog #cont-noticias-blog {

position:absolute;
width:636px;
height:316px;
margin-top:-15px;
background:url(../img/bg-noticia-blog.png);
}

#geral-blog #menu-geral-blog {

width:270px;
border:1px solid #000;
margin-top:35px;
float:right;
}

ainda esta complicado ... que e quem ai ? quem é o slide quem é aquela perninha la ?

#interna-blog a foto de cima

#menu-geral-blog - o da setinha sobreposta

ue nao entendi

<div id="menu-geral-blog">
 <h3>CATEGORIAS</h3>
 <ul class="menu-blog">
 <li><a href="">NOTICIAS</a>

é só a setinha ? e vai h3 e links dentro ?

e no css

#geral-blog #menu-geral-blog {

width:270px;
border:1px solid #000;
margin-top:35px;
float:right;
}

nao entendi tbm onde vc chama aquela imagem la da setinha ?

#geral-blog #interna-blog .post-blog #cont-noticias-blog {

position:absolute;

width:636px;

height:316px;

margin-top:-15px;

background:url(../img/bg-noticia-blog.png);

}