Help Needed with WP TwentyTen Dropdown Menu

HTML & CSS
1

Hi Everyone,

Here is the site I’m currently working on. The client had created this site in HTML and I’m recreating it using the WordPress theme TwentyTen.

http://174.121.38.190/~rcsuites/
http://174.121.38.190/~rcsuites/wp-content/themes/twentyten/style.css

I am currently stuck on the horizontal menu.
Thus far, the only page that will have a drop down is SUITES.
For now, I just have 3 dummy sub-pages until we start actually getting the content in.

Here’s a few problems:

  1. The drop down gets cut off. I have taken it out of the header div thinking that was the problem. Other than adding a button image, I have no really edited the original menu CSS, so I am not understanding why the sub-menu is getting cut off.

  2. The client has two button images. One is transparent-ish and the one for hover and current page is solid red. Neither are showing.

http://174.121.38.190/~rcsuites/wp-content/themes/twentyten/images/nav-bg1.png
http://174.121.38.190/~rcsuites/wp-content/themes/twentyten/images/nav-bg2.png

And lastly - the Footer.
The copyright text on the left should be the same style as the text on the right (non-bold, italics). I’ve stared at the CSS so long that I can’t tell what is wrong.

Any help you can provide would be greatly appreciated.
~ Barbara

2

And now I’ve noticed that when I click on any of the pages, Reservations for example, the layout is very messed up. I have not altered the page.php file whatsoever. What is messed up is pulled from the header.php file. So if it’s fine on the home page, it should fine throughout the site. UGH!

EDITED: Nevermind … it wants the full path to the images in the header.php file. I’ll just have to remember to change it when we change the nameservers.

3

Ok, as you can see, I got the button images to show. Evidently, the theme wants the full url path to the images. No other way of referencing worked.

So, if I can get the drop down to show (under Services) and the left footer text to not be bold and to italicize, then I should be all set.

4

Hi,

The menu isn;t showing because you have hidden the overfflow on the parent and thus it can never escapoe.

Set the parent to visible.


#branding,div.menu{overflow:visible}
#horizontal-menu ul ul {top:55px}

At line 183 in style css you have set the footer to bold and 14px.


#site-info {
    float: left;
    font-size: 14px;
    font-weight: bold;
    width: 700px;
}

At line 1334 you have the same rule again but with differences.


#site-info {
    float: left;
    font-style: italic;
    width: 500px;
}

The font-size and bold test will cascade through so reset or amlgamate those rules as required.

5

Paul,

Thank you so much for taking the time to help out.

I got the footer taken care, so thank you for that.

But I am unsure about my sub-menu situation.

Other than adding the background image, I haven’t touched any of the sub-menu CSS or HTML - all that is still default, which make sme think it wouldn’t have worked before I started the redesign. shrugs

The code you referenced above isn’t in style.css … and I can’t find the breakdown of the HTML in the files (it’s reference by dynamic PHP code that I don’t know how to manipulate - and I don’t see anything in the functions.php file to alter either).

Off to make dinner, but I’ll revisit this in a few hours.

6

You can’t just place code inside existing elements without the existing structure affectinge the code. You always have to make changes to accomodate the new position.

The code you referenced above isn’t in style.css …

Yes it is it’s here:

style.css line 166


#access .menu-header, div.menu, #colophon, #branding, #footer-widget-area {
    overflow: hidden;
}

It doesn’t matter if you can’t find it anyway just add the following at the end of the stylesheet and the menu will appear:


div.menu{overflow:visible}

Tested locally and working and tested in Firebug on your live site. use Firebug for live testing and for finding rules easily. :slight_smile:

7

Paul,

Thank you so much.
I do use Firebug, but either I was missing it or just not understanding something (probably the later!).

This was what was confusing me … here is the code around line 166 in the css …


/* =Structure
-------------------------------------------------------------- */

/* The main theme structure */
#access .menu-header,
div.menu,
#colophon,
#branding,

/* Structure the footer area */
#footer-widget-area {
	overflow: hidden;
}
#footer-widget-area .widget-area {
	float: left;
	margin-right: 20px;
	width: 220px;
}

I just wasn’t reading it right and thought the overflow was only for the footer widget and not for the element listed above. The way it was separated there just threw me off.

Sorted now. Just have to fix some spacing on the sub-menu so they look a tad nicer.

Thanks for being a 2nd set of eyes. Truly appreciate it!

~ Barbara

8

Ok, right away, I’ve come across another problem.

I hover over the Suites button and see the drop down just fine.
But when I go down to choose one of the sub-suites … it disappears.
This happens both in FF and IE.

Off to investigate and see why that is happening.