Css kodlama ( bir bakıma div konumlandırma ? )

Arkadaşlar yapmak istediğim birşey var ancak css'e yeni başladığım için yapmayı bir türlü beceremedim. Resim1,2 ve 3 teki şekilleri resim 4 teki gibi yapmaya çalışıyorum bunu nasıl yapabilirim ? Eğer bu resimlerden birşey anlamadıysanız http://www.umutozkir.com/ un temasına bakabilirsiniz. Üst arkaplan mavi, mavinin bittiği yerde büyük ihtimal başka bir çizim var ve bu çizimlerin üstünde ise butonlar var. Ben ise Üstteki mavi yerine pattern ile yapılmış birşey ardından patternin bitişine dair bir çizgi grafiği oluşturdum. Bunları ardı ardına kodladım ve navigasyonun css kodlarını da kodladım. Ancak div ile çektiğimde 3üde alt alta oluyor ben ise navigation menünün aynı umuttaki gibi üstünde olmasını istiyorum. nasıl yapabilirim ? ( reklam yapmıyorum düşündüğümde hatırladığım tek site oydu)

Resim1

Resim2

Resim3

Resim4


#cevrele{
width:500px;
margin:0 auto;
position:relative;
}
#siyah-cerceve{
position:relative;
width:500px;
border:3px solid black;
height:250px;
display:block;
}

#mavi-cerceve{
position:absolute;
bottom:-20px;
height:30px;
width:400px;
left:50px;
border:3px solid blue;
background:white;
}

#kirmizi-cizgi{
width:500px;
margin:0 auto;
height:2px;
background:red;
}