Problem with header image overlapping the container

[pek]

I have a problem with with my page-title being partially covered
by the Header-image.  This only happens when the page is wide enough
for the primary menu to fit one one line. It also doesn’t happen on the home page.
 My website is http://www.womenstherapyservices.com
Some technical notes that might be important (going down the page):
 – The Header-image is provided as HTML code in
     Wvr Theme Options -> Main Options -> Header -> Header HTML
– I have done nothing special to produce the Primary Menu.
   It seems to want to live in a stripe near, but not at, the
   bottom of the Header image.
 – What I refer to as the “page-title” is provided by HTML insertion
   (with [php]) in Wvr-opts -> Advanced -> HTML Insertion -> Container Top
 – I have suppressed the normal “Title” with CSS:
.page-header {  display: none; }
     (at Wvrx-opts -> Main Options -> Fonts & Custom -> Custom CSS Rules
Ironically, this problem didn’t show up before today because I just
shortened the menu items so they would fit on one line with common
font sizes.  When it goes to two lines, the menu covers up the bottom
of the image and looks kind of ragged, but at least my page-title
(the top of the Container) gets pushed down out of the way.

Any ideas on what I can do to keep the Container from being overlapped
by the Header-image even when the menu fits on one line?

1. Thanks for your help.

[pek]

oops, we just fixed this just by adding   at the front of the container code.  Wish all problems were that easy to solve.

Sorry for any bother.  

[scrambler]

You have done some funky stuff with your header image and the text over it, basically did things backward.

You used a class hdr-img that makes the image position:absolute, so the area does not know the height of it.

The height of the area is only caused by the text that you have on it and which is positioned relative.

To have the header image and text over it, you should have done the reverse.

Have the image positioned relative so it gives its height to the area, then use
position:absolute;right:10px;
for the block of text so you could have it over the header image.

[Author]

Posts