How can I get the Navigation bar to appear BELOW my journal title and not above?

[lorelaisquared]

I've been fighting with my header all day and I've looked through all the tutorials but nothing seems to be working.

My lj is here: http://lorelaisquared.livejournal.com/

I'm trying to get the journal and title to show up in the black space in the middle of the graphic, and I'd like the menu/link bar underneath the image. No matter what I do, the link bar always shows up above the headings. How can I fix this? I've tried everything.


Here's my current CSS for this:

#header {
background-image: background-image: url(http://i716.photobucket.com/albums/ww170/LorelaiSquared/Headers/00055rpz.jpg);; 
background-color: black;
margin-bottom: 0px; }

#header-content { padding-bottom: 0px; margin: 0px 161px 0px 161px; background-repeat: none; background-image: url(http://i716.photobucket.com/albums/ww170/LorelaiSquared/Headers/eightsquaresheader2.png); width: 617px; height: 349px; }

#header-content-inner { position: absolute; top: 250px; left: 155px; }

#header-text {padding: 10px 0; } ul.nav { margin: 152px 0 30px 0; padding: 30px; } .nav li { display: bottom; border-left: 1px solid gray; padding: 0 1em; font-size: small; } .nav li a { font-weight: normal; } .nav li.first { border-left: none; padding-left: 0; } .nav li.current a { color: gray; text-decoration: none; }

#header-name { font-size: 18px; color: white; text-transform: uppercase; font-weight: bold; margin-top: 152px; }

#header-name a { font-weight: normal; text-decoration: none; }

#header-description { font-size: 14px; color: white; text-transform: uppercase; font-weight: bold; margin-top: 3px;  }

EDIT: to update code after still more unsuccessful changes, Now the text and the menu don't even show at all.